ms-data-grid 0.0.85 → 0.0.89

package/fesm2022/ms-data-grid.mjs

@@ -168,7 +168,7 @@ class SplitColumnsService {
         // ✅ Total width already consumed
         const usedWidth = fixedCols.reduce((sum, col) => sum + col.width, 0);
         // ✅ Remaining width after fixed columns
-        let remainingWidth = containerWidth - usedWidth;
+        let remainingWidth = containerWidth - (usedWidth + 50);
         if (remainingWidth < 0)
             remainingWidth = 0;
         // ✅ Average width for columns without width
@@ -1334,6 +1334,7 @@ class DataGridComponent {
         this.tablePresetConfig = new EventEmitter();
         this.sortingOrderOptions = new EventEmitter();
         this.createUpdateConfigListing = new EventEmitter();
+        this.storePresetName = '';
         this.isFullScreen = false;
         this.activeTab = null;
         this.groupedColumns = [];
@@ -2146,6 +2147,7 @@ class DataGridComponent {
                 }
                 this.curretaTablePresetForUpdate = temprorySelected || null;
                 this.presetName = temprorySelected?.name || '';
+                this.storePresetName = temprorySelected?.name || '';
                 this.presetFilter = temprorySelected?.activeFilters || false;
                 if (this.curretaTablePresetForUpdate) {
                     this.rowShadingEnabled = temprorySelected.config.rowShadingEnabled;
@@ -2173,6 +2175,7 @@ class DataGridComponent {
                     this.bodyTextFontsSize = 14;
                     this.globalSearchText = '';
                     // this.autoSizeColumnsByRatio();
+                    this.presetName = '';
                 }
                 this.cdr.detectChanges();
             }, 0);
@@ -2935,9 +2938,15 @@ class DataGridComponent {
         }
         return columns?.is_visible;
     }
+    // allColumnsSelected(): boolean {
+    //   const flatten = this.flattenColumns(this.columns);
+    //   return flatten.every((col) => col.is_visible);
+    // }
     allColumnsSelected() {
         const flatten = this.flattenColumns(this.columns);
-        return flatten.every((col) => col.is_visible);
+        const nonAlwaysVisible = flatten.filter(col => !col.is_always_visible);
+        // Return true if all non-always-visible columns are visible
+        return nonAlwaysVisible.length > 0 && nonAlwaysVisible.every(col => col.is_visible);
     }
     findColumnByField(field, cols) {
         for (const col of cols) {
@@ -2980,22 +2989,34 @@ class DataGridComponent {
         try {
             const flatten = this.flattenColumns(this.columns);
             const visibleColumns = flatten.filter(col => col.is_visible);
-            if (visibleColumns.length <= 2) {
-                this.loading = false;
-                return;
-            }
+            // Get columns that are not always visible
             const nonAlwaysVisible = flatten.filter(col => !col.is_always_visible);
+            // Check if all non-always-visible columns are currently visible
             const allNonAlwaysVisibleAreVisible = nonAlwaysVisible.every(col => col.is_visible);
             if (allNonAlwaysVisibleAreVisible) {
-                flatten.forEach(col => {
-                    col.is_visible = col.is_always_visible ? true : false;
+                // HIDE ALL (but keep minimum 2 visible)
+                // First, hide all non-always-visible columns
+                nonAlwaysVisible.forEach(col => {
+                    col.is_visible = false;
                 });
+                // Then, make sure at least 2 columns are visible (including always-visible ones)
+                const alwaysVisibleCount = flatten.filter(col => col.is_always_visible).length;
+                const columnsNeeded = Math.max(0, 2 - alwaysVisibleCount);
+                if (columnsNeeded > 0) {
+                    // Show the first 'columnsNeeded' non-always-visible columns
+                    for (let i = 0; i < Math.min(columnsNeeded, nonAlwaysVisible.length); i++) {
+                        nonAlwaysVisible[i].is_visible = true;
+                    }
+                }
             }
             else {
-                flatten.forEach(col => (col.is_visible = true));
+                // SHOW ALL - make all columns visible
+                flatten.forEach(col => {
+                    col.is_visible = true;
+                });
             }
-            this.updateColumnWidthsAndGroups();
-            this.refreshPreviewColumns();
+            await this.updateColumnWidthsAndGroups();
+            await this.refreshPreviewColumns();
             const sendData = {
                 columns: this.cleanColumns(this.columns),
                 filters: this.cleanFilterdColumns(),
@@ -3692,13 +3713,18 @@ class DataGridComponent {
                         .join(",");
                 }
             }
+            // Check for Date object OR date string
+            else if (keyValue instanceof Date || (typeof keyValue === 'string' && !isNaN(Date.parse(keyValue)))) {
+                const dateObj = keyValue instanceof Date ? keyValue : new Date(keyValue);
+                groupKey = this.commonSevice.formatDateValue(dateObj, this.dateFormat || 'dd/MM/yyyy');
+            }
             else {
                 groupKey = keyValue ? this.toTitleCase(String(keyValue).trim()) : "_Blank";
             }
-            if (typeof keyValue === 'string' && !isNaN(Date.parse(keyValue))) {
-                const dateObj = new Date(keyValue);
-                groupKey = this.commonSevice.formatDateValue(dateObj, this.dateFormat || 'dd/MM/yyyy');
-            }
+            // if (typeof keyValue === 'string' && !isNaN(Date.parse(keyValue))) {
+            //   const dateObj = new Date(keyValue);
+            //   groupKey = this.commonSevice.formatDateValue(dateObj, this.dateFormat || 'dd/MM/yyyy');
+            // }
             if (!groupedMap.has(groupKey))
                 groupedMap.set(groupKey, []);
             groupedMap.get(groupKey).push(item);
@@ -3738,6 +3764,7 @@ class DataGridComponent {
         this.cdr.detectChanges();
     }
     toggleSubActions(type) {
+        this.isTablePresetNotChanged ? (this.presetName = '') : (this.presetName = this.storePresetName);
         if (type === this.activeSubButton)
             this.activeSubButton = '';
         else
@@ -4009,7 +4036,7 @@ class DataGridComponent {
     //   this.filterOptions.emit(filteredColumns);
     // }
     isFilterAppliedOnColumn(column) {
-        return this.filtersConfig.some(col => col.field === column.field);
+        return this.filtersConfig?.some(col => col.field === column.field);
     }
     // Side Filters Logic is here
     toggleSelectAllSideFilters(col, event) {
@@ -4213,7 +4240,7 @@ class DataGridComponent {
     get activeFilteredColumns() {
         const collectFiltered = (columns) => {
             let result = [];
-            columns.forEach(col => {
+            columns?.forEach(col => {
                 if (col.children && col.children.length) {
                     result = result.concat(collectFiltered(col.children));
                 }
@@ -4400,12 +4427,12 @@ class DataGridComponent {
         }, 700);
     }
     actionPreset(data, type) {
-        data.columns = data.columns.map(({ _id, filterValue, search, column_dropdown_value, query, __typename, ...rest }) => rest);
+        data.columns = data?.columns?.map(({ _id, filterValue, search, column_dropdown_value, query, __typename, ...rest }) => rest);
         this.tableView?.forEach((ele) => { ele.is_temp = false; });
         {
             this.bodyTextFontsSize = data.config.bodyTextFontsSize,
                 this.fontFaimly = data.config.fontFaimly,
-                data.filters.forEach((element) => {
+                data?.filters?.forEach((element) => {
                     delete element.__typename;
                     if (element.query) {
                         delete element.query.__typename;
@@ -5477,18 +5504,18 @@ class DataGridComponent {
         return new Promise(resolve => {
             const overlay = document.createElement('div');
             overlay.classList.add('custom-overlay-wrapper');
-            overlay.innerHTML = `
-      <div class="custom-overlay">
-        <div class="custom-modal">
-          <div class="custom-modal-body">
-            <p class="modal-message">${message}</p>
-            <div class="modal-actions">
-              <button class="btn-confirm">Confirm</button>
-              <button class="btn-cancel">Cancel</button>
-            </div>
-          </div>
-        </div>
-      </div>
+            overlay.innerHTML = `
+      <div class="custom-overlay">
+        <div class="custom-modal">
+          <div class="custom-modal-body">
+            <p class="modal-message">${message}</p>
+            <div class="modal-actions">
+              <button class="btn-confirm">Confirm</button>
+              <button class="btn-cancel">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
     `;
             document.body.appendChild(overlay);
             const confirmBtn = overlay.querySelector('.btn-confirm');
@@ -6097,7 +6124,7 @@ class DataGridComponent {
         }, 0);
     }
     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 }); }
-    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", pageSizeOptions: "pageSizeOptions", resetAllFilters: "resetAllFilters", 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: "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\">\n  <div\n    class=\"d-flex justify-content-between mb-2 align-items-center position-relative\"\n  >\n    <div class=\"d-flex gap-2\">\n      <div class=\"nav nav-tabs\" *ngIf=\"true\">\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=\"global-search\" [style.width.px]=\"350\">\n        <span\n          *ngIf=\"enableGlobalSearch\"\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n        ></span>\n        <input\n          *ngIf=\"enableGlobalSearch\"\n          style=\"height: 36px\"\n          class=\"form-control\"\n          placeholder=\"Type to search, then press Enter\"\n          [(ngModel)]=\"tableSearch\"\n          (keydown.enter)=\"onGlobalSearch()\"\n          (input)=\"onSearchInput($event)\"\n          type=\"search\"\n        />\n      </div>\n    </div>\n    <div class=\"d-flex gap-2 align-items-center table-right-top-actions\">\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\n        *ngIf=\"!showFilterRow\"\n        class=\"cursor-pointer position-relative action-buttons-row\"\n        (click)=\"toggleOpenFilter()\"\n        [class.active]=\"showFilters\"\n      >\n        <a\n          href=\"JavaScript:void(0)\"\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n        >\n          <span\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n            class=\"svg-icon svg-icon-2\"\n          ></span>\n          <span class=\"label-hidden text-white\">Filters</span>\n        </a>\n        <span\n          *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: 16px;\n            top: 10px;\n          \"\n          class=\"rounded-circle d-block\"\n        ></span>\n      </div>\n      <div\n        class=\"cursor-pointer d-none\"\n        (click)=\"toggleActions('advance-filter')\"\n        [class.active]=\"activeTopButton === 'advance-filter'\"\n      >\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      <div\n        class=\"cursor-pointer action-buttons-row\"\n        (click)=\"toggleActions('setting')\"\n        [class.active]=\"\n          activeTopButton === 'setting' ||\n          activeTopButton === 'table-layout' ||\n          activeTopButton === 'table-presets' ||\n          activeTopButton === 'show-hide-columns'\n        \"\n      >\n        <!-- <span\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n          class=\"data-grid-svg-icon top-icon me-2\"\n        ></span> -->\n        <a\n          href=\"JavaScript:void(0)\"\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n        >\n          <span\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n            class=\"svg-icon svg-icon-2\"\n          ></span>\n          <span class=\"label-hidden text-white\">Setting</span>\n        </a>\n\n        <div\n          *ngIf=\"activeTopButton === 'setting'\"\n          class=\"actions-dropdown mt-1 actions-dropdown-setting\"\n          style=\"position: absolute\"\n        >\n          <div class=\"dropdown-menu show shadow custom-menu\">\n            <!-- Table Layout -->\n            <a\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n              (click)=\"$event.stopPropagation(); toggleActions('table-layout')\"\n            >\n              <span\n                ><span\n                  [inlineSVG]=\"\n                    singleSpaAssetsPath + 'data-grid/icons/table-2.svg'\n                  \"\n                  class=\"data-grid-svg-icon me-2\"\n                ></span>\n                Table Layout</span\n              >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n                \"\n                class=\"data-grid-svg-icon me-2\"\n              ></span>\n            </a>\n            <!-- Table Presets -->\n            <a\n              (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n            >\n              <span\n                ><span\n                  [inlineSVG]=\"\n                    singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\n                  \"\n                  class=\"data-grid-svg-icon me-2\"\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 me-2\"\n              ></span>\n            </a>\n\n            <!-- Columns -->\n            <a\n              *ngIf=\"!showSideMenu\"\n              (click)=\"\n                $event.stopPropagation(); toggleActions('show-hide-columns')\n              \"\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n            >\n              <span class=\"align-items-center d-flex\"\n                ><span\n                  [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\n                  class=\"data-grid-svg-icon me-2\"\n                ></span>\n                Columns</span\n              >\n              <div class=\"d-flex 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 me-2\"\n                ></span>\n              </div>\n            </a>\n\n            <div class=\"dropdown-divider\"></div>\n\n            <!-- Filter -->\n            <a\n              class=\"dropdown-item cursor-pointer\"\n              (click)=\"toggleOpenFilter(); activeTopButton = '';\"\n              *ngIf=\"!showFilterRow\"\n            >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n                \"\n                class=\"data-grid-svg-icon me-2 mt-1 cursor-pointer\"\n              ></span>\n              Filter\n            </a>\n\n            <!-- Download -->\n            <a\n              class=\"dropdown-item cursor-pointer\"\n              (click)=\"downloadCsv('csv')\"\n            >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\n                \"\n                class=\"data-grid-svg-icon me-2 cursor-pointer\"\n              ></span>\n              CSV Export\n            </a>\n            <a\n              *ngIf=\"enableExport\"\n              class=\"dropdown-item cursor-pointer\"\n              (click)=\"downloadCsv('xlsx')\"\n            >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\n                \"\n                class=\"data-grid-svg-icon me-2 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                <!-- Font Family -->\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\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\">\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 }}\n              <span\n                (click)=\"\n                  $event.stopPropagation(); removeColumnFilterFromColumn(col)\n                \"\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\n                \"\n                class=\"data-grid-svg-icon cross-secondary ms-2 mb-1\"\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        >\n          <span\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\n            class=\"me-2 data-grid-svg-icon\"\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      >\n        Reset\n      </div>\n    </div>\n  </div>\n\n  <div\n    [style.height]=\"\n      showFilters ? 'calc(100% - ' + topFilterRowHeight + 'px)' : '100%'\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          <div\n            class=\"data-grid-header-wrapper w-100\"\n            [style.color]=\"headerTextColor\"\n            [style.fontSize.px]=\"headerTextFontsSize\"\n            [style.backgroundColor]=\"headerBackgroundColor\"\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            >\n              <div\n                *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\n               *ngIf=\"showCheckboxes\"\n                [style.backgroundColor]=\"checkboxesBackgroundColor\"\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\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-handle.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          >\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>No Record Found</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            <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.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              <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=\"hasRightPinnedColumns\"\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            >\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\"\n                [@rowDynamic]=\"rowAnimation\"\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 && !shouldRestoreScroll\"\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\n        class=\"pagination-container\"\n        [style.height.px]=\"footerRowHeight\"\n        [style.padding.px]=\"footerPadding\"\n      >\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          Results:\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        </div>\n\n        <div class=\"page-buttons\">\n          <button\n            (click)=\"goToPage(paginationConfig.page - 1)\"\n            [disabled]=\"paginationConfig.page === 1\"\n          >\n            \u2039\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          >\n            \u203A\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-columnIndex=\"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-handle.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\"\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-blue.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\"\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                              columnIndex: columnIndex,\n                              childColIndex: i\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-handle.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' || child.type == 'array'\n                    \"\n                    [class.disabled-search-input]=\"\n                      child?.type == 'dropdown' || child?.type == 'image' || child.type == 'array'\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\"\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\"\n                [class.flex-row-reverse]=\"pinnedRight\"\n              >\n                <div\n                  [class.me-2]=\"pinnedRight\"\n                  class=\"d-flex align-items-center\"\n                  *ngIf=\"col?.pinned\"\n                >\n                  <span\n                    [inlineSVG]=\"\n                      singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\n                    \"\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\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                >\n                  <!-- Ascending Sort Icon -->\n                  <span\n                    *ngIf=\"sortingConfig?.order_by == 'asc'\"\n                    [inlineSVG]=\"\n                      singleSpaAssetsPath + 'data-grid/icons/sort-asc.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\n                  <!-- Descending Sort Icon -->\n                  <span\n                    *ngIf=\"sortingConfig?.order_by == 'desc'\"\n                    [inlineSVG]=\"\n                      singleSpaAssetsPath + 'data-grid/icons/sort-desc.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\n                  class=\"three-dots p-1\"\n                  (click)=\"\n                    openThreeDotsMenu($event, col);\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 === col\"\n                  style=\"top: -50%; 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                      : 0\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnMenu;\n                      context: {\n                        col: col,\n                        isNestedTable: false,\n                        section: sections,\n                        columnIndex: columnIndex,\n                        childColIndex: 0\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-handle.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' || col.type == 'array'\"\n            [class.disabled-search-input]=\"\n              col?.type == 'dropdown' || col?.type == 'image' || col.type == 'array'\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=\"\n          section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\n        \"\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          class=\"select-all-checkbox-cell 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        class=\"border-below\"\n          [style.backgroundColor]=\"\n            rowSelectedIndexes.has(row.__virtualIndex)\n              ? selectedRowsBackgroundColor\n              : checkboxesBackgroundColor\n          \"\n          class=\"select-all-checkbox-cell\"\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 - 1\"\n          [style.maxHeight.px]=\"rowHeight\"\n        >\n          <input\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\n       <ng-container *ngIf=\"col.cellEditor; else builtInEditors\">\n              <ng-container\n                [cellEditor]=\"col.cellEditor\"\n                [rowData]=\"row\"\n                [colData]=\"col\"\n                [cellValue]=\"getNestedValue(row, col.field)\"\n                (editorEvent)=\"finishEdit($event)\"\n              ></ng-container>\n        </ng-container>\n\n      <ng-template #builtInEditors>\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            (keydown.enter)=\"blurInput($event, row, col)\"\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, numberInput)\"\n            autofocus\n            (keydown.enter)=\"blurInput($event, row, col)\"\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, dateInput)\"\n            autofocus\n            class=\"form-control form-control-sm\"\n            #dateInput=\"ngModel\"\n            (keydown.enter)=\"blurInput($event, row, col)\"\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\" *ngIf=\"col?.column_dropdown_value?.length > 5\">\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              <cdk-virtual-scroll-viewport \n                    itemSize=\"35\" \n                    class=\"dropdown-viewport\"\n                    style=\"height: 120px\"\n                  >\n                    <div\n                    [class.selected]=\"getNestedValue(row, col.field) == option?.value || getNestedValue(row, col.field) == option\"\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                        \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)=\"blurInput($event, row, col)\"\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            (keydown.enter)=\"blurInput($event, row, col)\"\n            [(ngModel)]=\"row[col.field]\"\n            name=\"{{ col.field }}\"\n            required\n            (blur)=\"disableEdit(row, col, textModel)\"\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      </ng-template>\n\n      </div>\n\n      <!-- Display mode -->\n      <ng-template #viewMode>\n        <div\n          class=\"d-flex justify-content-between align-items-center w-100 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  let-columnIndex=\"columnIndex\"\n  let-childColIndex=\"childColIndex\"\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    <div class=\"border-below pb-2\" [class.disable-sorting]=\"!col.is_sortable\">\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span>\n      <div\n        *ngIf=\"\n          columnThreedotsMunuConfig?.showAscending &&\n          (sortingConfig?.field != col.field ||\n            sortingConfig?.order_by == 'desc')\n        \"\n        class=\"column-menu-item\"\n        (click)=\"sortAsc(activeCol)\"\n      >\n        <span\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-up.svg'\"\n          class=\"data-grid-svg-icon me-2\"\n        ></span>\n        Sort Ascending\n      </div>\n\n      <!-- Sort Descending -->\n      <div\n        *ngIf=\"\n          columnThreedotsMunuConfig?.showDescending &&\n          (sortingConfig?.field != col.field ||\n            sortingConfig?.order_by == 'asc')\n        \"\n        class=\"column-menu-item\"\n        (click)=\"sortDesc(activeCol)\"\n      >\n        <span\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-down.svg'\"\n          class=\"data-grid-svg-icon me-2\"\n        ></span>\n        Sort Descending\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/arrow-counterclockwise.svg'\n          \"\n          class=\"data-grid-svg-icon me-2\"\n        ></span>\n        Reset Sort\n      </div>\n    </div>\n    <div class=\"py-2 border-below three-dots-filter\" [class.disable-sorting]=\"col.type == 'image' || !col.is_search_able\">\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    <div class=\"py-2 border-below\">\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span>\n      <div\n        *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\"\n        class=\"column-menu-item\"\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/pin-left.svg'\"\n          class=\"data-grid-svg-icon me-2\"\n        ></span\n        >Pin Left\n      </div>\n\n      <div\n        *ngIf=\"\n          columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\n        \"\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/pin-right.svg'\"\n          class=\"data-grid-svg-icon data-grid-svg-icon me-2\"\n        ></span\n        >Pin Right\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\n          [inlineSVG]=\"\n            singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\n          \"\n          class=\"data-grid-svg-icon me-2\"\n        ></span\n        >Unpin\n      </div>\n    </div>\n\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 && col?.is_search_able\"\n    class=\"three-dots-col-menu position-relative\"\n    [style.right.px]=\"getDynamicRight(col, section, columnIndex, childColIndex)\"\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\"\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\n  >\n    <!-- Dropdown Type -->\n    <ng-container *ngIf=\"col.type === 'dropdown'|| col.type == 'array'; 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 ms-1 select-all-filter\">\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) | titlecase ) }}\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 == 'string'\">\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\n             <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n              <option value=\"equal\">Equals To</option>\n              <option value=\"before\">Less Then </option>\n              <option value=\"after\">Greater Then </option>\n              <option value=\"less_then_equal\">less then Equal to</option>\n              <option value=\"greater_then_equal\">Greater then Equal to </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 == 'string'\">\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\n               <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n                <option value=\"equal\">Equals To</option>\n                <option value=\"before\">Less Then </option>\n                <option value=\"after\">Greater Then </option>\n                <option value=\"less_then_equal\">less then Equal to</option>\n                <option value=\"greater_then_equal\">Greater then Equal to </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=\"btn btn-sm btn-primary d-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=\"btn btn-sm btn-secondary 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' || col.type == 'array'; 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 select-all-filter\">\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) | titlecase ) }}\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 == 'string'\">\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\n            <ng-container *ngIf=\"col.type == 'number'\">\n              <option value=\"equal\">Equals To</option>\n              <option value=\"before\">Less Then </option>\n              <option value=\"after\">Greater Then </option>\n              <option value=\"less_then_equal\">less then Equal to</option>\n              <option value=\"greater_then_equal\">Greater then Equal to </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 == 'string'\">\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\n              <ng-container *ngIf=\"col.type == 'number'\">\n                <option value=\"equal\">Equals To</option>\n                <option value=\"before\">Less Then </option>\n                <option value=\"after\">Greater Then </option>\n                <option value=\"less_then_equal\">less then Equal to</option>\n                <option value=\"greater_then_equal\">Greater then Equal to </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    >\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 btn-light\"\n        (click)=\"$event.stopPropagation(); removeSideFilter(col)\"\n      >\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\">\n            <span\n              [inlineSVG]=\"\n                singleSpaAssetsPath + 'data-grid/icons/resize-handle.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' || col.type == 'array'\"\n        [class.disabled-search-input]=\"\n          col?.type == 'dropdown' || col?.type == 'image' || col.type == 'array'\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 shadow 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\" style=\"font-weight: 500\">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>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>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 shadow 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\" style=\"font-weight: 500\">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\">\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=\"Search...\"\n          [(ngModel)]=\"searchTextPresetTable\"\n          type=\"search\"\n        />\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          \"\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]=\"'unset'\"\n                    [style.left.px]=\"dataGridContainer.offsetWidth - 200\"\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\">\n                          Are you sure you want to delete <br /><b\n                            >\u201C{{ table?.name }}\u201D</b\n                          >?\n                        </div>\n                        <div class=\"d-flex gap-2\">\n                          <button\n                            class=\"btn btn-sm btn-light me-2\"\n                            (click)=\"table.confirmDelete = false\"\n                          >\n                            Cancel\n                          </button>\n                          <button\n                            class=\"btn btn-sm btn-danger\"\n                            (click)=\"actionPreset(table, 'deletePreset')\"\n                          >\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=\"fw-bold fs-14px mb-2\">\n      {{ isTablePresetNotChanged ? \"Save 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=\"mb-2\">\n      <label for=\"presetName\" class=\"form-label fs-12px fw-bold\"\n        >Preset Name</label\n      >\n      <div class=\"col-12 global-search\">\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-center gap-2\" style=\"height: 32px\">\n      <button\n        type=\"button\"\n        style=\"height: 32px\"\n        class=\"btn border w-100 d-flex align-items-center justify-content-center btn-light\"\n        (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n        style=\"margin-top: -2px\"\n      >\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=\"btn btn-primary w-100 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            >Save</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 shadow 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\" style=\"font-weight: 500\">Columns</h6>\n      </div>\n      <a\n        (click)=\"resetColumns()\"\n        href=\"javascript:void(0)\"\n        class=\"text-primary text-decoration-none d-none\"\n        >Reset</a\n      >\n    </div>\n\n    <!-- Search -->\n    <div class=\"mb-3\">\n      <div class=\"col-12 global-search\">\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>\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-blue.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/eye.svg'\"\n              class=\"data-grid-svg-icon me-2\"\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>\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-blue.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/eye-cross.svg'\n                \"\n                class=\"data-grid-svg-icon me-2\"\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=\"shadow 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=\"mb-2 px-3\">\n      <div class=\"col-12 global-search\">\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' && col.is_search_able\n          \"\n          class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n        >\n          <div class=\"d-flex gap-1\">\n            <div style=\"margin-top: -3px\"></div>\n            <div class=\"fw-semibold\">\n              {{ col.header }}\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' || selectedColumnForFilter.type == 'array'\"\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 global-search 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=\"btn btn-outline-secondary btn-light border 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=\"btn btn-primary w-100 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 == 'string'\">\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\n           <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n              <option value=\"equal\">Equals To</option>\n              <option value=\"before\">Less Then </option>\n              <option value=\"after\">Greater Then </option>\n              <option value=\"less_then_equal\">less then Equal to</option>\n              <option value=\"greater_then_equal\">Greater then Equal to </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 == 'string'\">\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               <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n                <option value=\"equal\">Equals To</option>\n                <option value=\"before\">Less Then </option>\n                <option value=\"after\">Greater Then </option>\n                <option value=\"less_then_equal\">less then Equal to</option>\n                <option value=\"greater_then_equal\">Greater then Equal to </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    >\n      <button\n        [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\n        type=\"button\"\n        style=\"height: 32px\"\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\n        (click)=\"$event.stopPropagation(); resetTextFilterChanges()\"\n      >\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=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\n        (click)=\"applyDropdownFilter()\"\n      >\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-handle.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>\n", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #d9d9db;border-radius:12px;position:relative}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:8px 0 8px 8px;font-weight:700;border-bottom:1px solid #d9d9db;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 #d9d9db}.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}.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 #d9d9db}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#d9d9db}.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 #d9d9db;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #d9d9db}.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 #d9d9db!important}.right-pinned-body{right:0;border-left:1px solid #d9d9db}.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%;border-right:1px solid #d9d9db}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #d9d9db!important}.three-dots{width:22px;height:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-right:8px;cursor:pointer}.three-dots:hover{background-color:#ccc!important}.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:240px;border:1px solid #ddd;box-shadow:0 0 16px #00000026;border:1px solid #d9d9db;padding:4px 0;font-size:14px;position:fixed}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item:hover{background-color:#deebf7}.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 #d9d9db;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 #d9d9db;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 #d9d9db;font-size:14px}.border-start{border-left:1px solid #d9d9db!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 #d9d9db;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:17px;overflow-x:auto;overflow-y:hidden;height:17px}.border-dashed{border:1px dashed #d9d9db}.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 #d9d9db!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 #d9d9db}.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}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{max-width:380px!important;display:flex!important;align-items:center!important}.global-search span{margin-top:-4px!important}.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 #d9d9db!important;border-radius:8px!important}.custom-menu{width:220px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px}.custom-menu .dropdown-item:hover{background-color:#f5f5f5;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 #ccc!important;background-color:#fff}.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 .preview-box{border-color:#007cf5!important;background-color:transparent!important}#medium:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}#large:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 28px!important;width:82px;border-radius:8px!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:13px;color:#333}.page-size select{padding:3px 6px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:13px}.page-info{margin-left:10px}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{padding:3px 8px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2}.page-buttons button.active{background:#eee;font-weight:600}.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 #ccc;margin-right:8px}.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}.add-filter-button:hover,.button-filter:hover{color:#000!important}.button-filter:hover ::ng-deep svg path{stroke:#000!important}.table-layout .dropdown-item{border-radius:0!important;padding-inline:16px!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}.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 svg,:host ::ng-deep .three-dots-col-menu svg path{stroke:#000!important}.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;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026;max-height:400px;overflow:auto}.full-text-box ul{max-height:400px}.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:50px!important;height:26px;align-items:center}.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 #d9d9db}.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}.cell-editing-dropdown-menu .dropdown-item{width:99%}.cell-editing-dropdown-menu .selected{background-color:#f0f8ff}.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}\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: "directive", type: CellEditorDirective, selector: "[cellEditor]", inputs: ["cellEditor", "rowData", "colData", "cellValue"], outputs: ["editorEvent"] }, { kind: "pipe", type: i6.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: FilterPipe, name: "filter" }], animations: [
+    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", pageSizeOptions: "pageSizeOptions", resetAllFilters: "resetAllFilters", 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: "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\">\r\n  <div\r\n    class=\"d-flex justify-content-between mb-2 align-items-center position-relative\"\r\n  >\r\n    <div class=\"d-flex gap-2\">\r\n      <div class=\"nav nav-tabs\" *ngIf=\"true\">\r\n        <div class=\"nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\r\n          <span\r\n            *ngFor=\"let tab of tabs; let i = index\"\r\n            (click)=\"setActiveTab(tab)\"\r\n            class=\"nav-link cursor-pointer\"\r\n            [class.active]=\"activeTab == tab\"\r\n          >\r\n            {{ tab }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"global-search\" [style.width.px]=\"350\">\r\n        <span\r\n          *ngIf=\"enableGlobalSearch\"\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\r\n        ></span>\r\n        <input\r\n          *ngIf=\"enableGlobalSearch\"\r\n          style=\"height: 36px\"\r\n          class=\"form-control\"\r\n          placeholder=\"Type to search, then press Enter\"\r\n          [(ngModel)]=\"tableSearch\"\r\n          (keydown.enter)=\"onGlobalSearch()\"\r\n          (input)=\"onSearchInput($event)\"\r\n          type=\"search\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-2 align-items-center table-right-top-actions\">\r\n      <ng-container *ngFor=\"let button of buttons\">\r\n        <div\r\n          class=\"d-flex align-items-center gap-2 action-buttons-row\"\r\n          *ngIf=\"button?.has_permission\"\r\n        >\r\n          <a\r\n            href=\"JavaScript:void(0)\"\r\n            (click)=\"onActionButtonClick(button.name)\"\r\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\"\r\n          >\r\n            <span\r\n              *ngIf=\"button.is_showIcon\"\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/' + button.icon + '.svg'\r\n              \"\r\n              class=\"svg-icon svg-icon-2\"\r\n            ></span>\r\n            <span\r\n              class=\"label-hidden text-white\"\r\n              [class.ms-0]=\"button.is_showIcon\"\r\n              >{{ button?.name }}</span\r\n            >\r\n          </a>\r\n        </div>\r\n      </ng-container>\r\n      <div\r\n        *ngIf=\"!showFilterRow\"\r\n        class=\"cursor-pointer position-relative action-buttons-row\"\r\n        (click)=\"toggleOpenFilter()\"\r\n        [class.active]=\"showFilters\"\r\n      >\r\n        <a\r\n          href=\"JavaScript:void(0)\"\r\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n            class=\"svg-icon svg-icon-2\"\r\n          ></span>\r\n          <span class=\"label-hidden text-white\">Filters</span>\r\n        </a>\r\n        <span\r\n          *ngIf=\"activeFilteredColumns?.length\"\r\n          style=\"\r\n            width: 7px;\r\n            height: 7px;\r\n            box-shadow: 0px 0px 3px #0022ff;\r\n            background-color: rgb(0, 60, 255);\r\n            position: absolute;\r\n            right: 16px;\r\n            top: 10px;\r\n          \"\r\n          class=\"rounded-circle d-block\"\r\n        ></span>\r\n      </div>\r\n      <div\r\n        class=\"cursor-pointer d-none\"\r\n        (click)=\"toggleActions('advance-filter')\"\r\n        [class.active]=\"activeTopButton === 'advance-filter'\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/zoom-charge.svg'\"\r\n          class=\"data-grid-svg-icon top-icon me-2\"\r\n        ></span>\r\n      </div>\r\n      <div\r\n        class=\"cursor-pointer action-buttons-row\"\r\n        (click)=\"toggleActions('setting')\"\r\n        [class.active]=\"\r\n          activeTopButton === 'setting' ||\r\n          activeTopButton === 'table-layout' ||\r\n          activeTopButton === 'table-presets' ||\r\n          activeTopButton === 'show-hide-columns'\r\n        \"\r\n      >\r\n        <!-- <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\r\n          class=\"data-grid-svg-icon top-icon me-2\"\r\n        ></span> -->\r\n        <a\r\n          href=\"JavaScript:void(0)\"\r\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\r\n            class=\"svg-icon svg-icon-2\"\r\n          ></span>\r\n          <span class=\"label-hidden text-white\">Setting</span>\r\n        </a>\r\n\r\n        <div\r\n          *ngIf=\"activeTopButton === 'setting'\"\r\n          class=\"actions-dropdown mt-1 actions-dropdown-setting\"\r\n          style=\"position: absolute\"\r\n        >\r\n          <div class=\"dropdown-menu show shadow custom-menu\">\r\n            <!-- Table Layout -->\r\n            <a\r\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\r\n              (click)=\"$event.stopPropagation(); toggleActions('table-layout')\"\r\n            >\r\n              <span\r\n                ><span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/table-2.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n                Table Layout</span\r\n              >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n            </a>\r\n            <!-- Table Presets -->\r\n            <a\r\n              (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\r\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\r\n            >\r\n              <span\r\n                ><span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n                Table Presets</span\r\n              >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n            </a>\r\n\r\n            <!-- Columns -->\r\n            <a\r\n              *ngIf=\"!showSideMenu\"\r\n              (click)=\"\r\n                $event.stopPropagation(); toggleActions('show-hide-columns')\r\n              \"\r\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\r\n            >\r\n              <span class=\"align-items-center d-flex\"\r\n                ><span\r\n                  [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n                Columns</span\r\n              >\r\n              <div class=\"d-flex gap-2\">\r\n                <span class=\"muted-text\">{{ columnsCount }}</span>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n              </div>\r\n            </a>\r\n\r\n            <div class=\"dropdown-divider\"></div>\r\n\r\n            <!-- Filter -->\r\n            <a\r\n              class=\"dropdown-item cursor-pointer\"\r\n              (click)=\"toggleOpenFilter(); activeTopButton = '';\"\r\n              *ngIf=\"!showFilterRow\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2 mt-1 cursor-pointer\"\r\n              ></span>\r\n              Filter\r\n            </a>\r\n\r\n            <!-- Download -->\r\n            <a\r\n              class=\"dropdown-item cursor-pointer\"\r\n              (click)=\"downloadCsv('csv')\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n              ></span>\r\n              CSV Export\r\n            </a>\r\n            <a\r\n              *ngIf=\"enableExport\"\r\n              class=\"dropdown-item cursor-pointer\"\r\n              (click)=\"downloadCsv('xlsx')\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n              ></span>\r\n              Excel Export\r\n            </a>\r\n            <!-- Font Family & Font Size -->\r\n            <div class=\"px-2 pb-2 pt-2\">\r\n              <div class=\"d-flex gap-2\">\r\n                <!-- Font Family -->\r\n                <select\r\n                  class=\"form-select form-select-sm\"\r\n                  [(ngModel)]=\"fontFaimly\"\r\n                  (change)=\"onFontChange()\"\r\n                >\r\n                  <option *ngFor=\"let font of fontFamilies\" [value]=\"font\">\r\n                    {{ font }}\r\n                  </option>\r\n                </select>\r\n\r\n                <!-- Font Size -->\r\n                <select\r\n                  class=\"form-select form-select-sm\"\r\n                  (change)=\"onFontChange()\"\r\n                  [(ngModel)]=\"bodyTextFontsSize\"\r\n                >\r\n                  <option *ngFor=\"let size of fontSizes\" [value]=\"size\">\r\n                    {{ size }}\r\n                  </option>\r\n                </select>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Table Layout -->\r\n\r\n        <ng-container *ngIf=\"activeTopButton === 'table-layout'\">\r\n          <div\r\n            *ngTemplateOutlet=\"tableLayout\"\r\n            class=\"actions-dropdown mt-1\"\r\n            style=\"position: absolute\"\r\n          ></div>\r\n        </ng-container>\r\n\r\n        <!-- Table Presets -->\r\n        <ng-container *ngIf=\"activeTopButton === 'table-presets'\">\r\n          <div\r\n            *ngTemplateOutlet=\"tablePreset\"\r\n            class=\"actions-dropdown mt-1\"\r\n            style=\"position: absolute\"\r\n          ></div>\r\n        </ng-container>\r\n\r\n        <!-- Table Presets -->\r\n        <ng-container *ngIf=\"activeTopButton === 'show-hide-columns'\">\r\n          <div\r\n            *ngTemplateOutlet=\"showHideColumns\"\r\n            class=\"actions-dropdown mt-1\"\r\n            style=\"position: absolute\"\r\n          ></div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"action-buttons-row\" *ngIf=\"showFullScreenButton\">\r\n        <a\r\n          *ngIf=\"!isFullScreen\"\r\n          class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\r\n          (click)=\"toggleFullscreen()\"\r\n          data-bs-toggle=\"tooltip\"\r\n          data-bs-placement=\"top\"\r\n          title=\"Minimise\"\r\n          [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\r\n          style=\"transition: color 0.2s\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/expend.svg'\"\r\n            class=\"svg-icon svg-icon-2 mb-1\"\r\n          ></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"isFullScreen\"\r\n          class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\r\n          (click)=\"toggleFullscreen()\"\r\n          data-bs-toggle=\"tooltip\"\r\n          data-bs-placement=\"top\"\r\n          title=\"Maximise\"\r\n          [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\r\n          style=\"transition: color 0.2s\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/minimize.svg'\"\r\n            class=\"svg-icon svg-icon-2 mb-1\"\r\n          ></span>\r\n        </a>\r\n      </div>\r\n      <div>\r\n        <!-- Example single danger button -->\r\n\r\n        <!-- <button\r\n          type=\"button\"\r\n          class=\"btn btn-primary btn-sm d-flex gap-2 action-button\"\r\n          (click)=\"toggleActions('actions')\"\r\n        >\r\n          Action\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/Vector.svg'\"\r\n            class=\"data-grid-svg-icon\"\r\n          ></span>\r\n        </button>\r\n        <div\r\n          *ngIf=\"activeTopButton === 'actions'\"\r\n          class=\"actions-dropdown mt-1\"\r\n        >\r\n          <div class=\"dropdown-menu show\">\r\n            <a class=\"dropdown-item\" href=\"#\">Action</a>\r\n            <a class=\"dropdown-item\" href=\"#\">Another action</a>\r\n            <a class=\"dropdown-item\" href=\"#\">Something else here</a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <a class=\"dropdown-item\" href=\"#\">Separated link</a>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showFilters && !showFilterRow\"\r\n    class=\"top-filter-row border-top py-2 d-flex justify-content-between align-items-center\"\r\n    [style.height.px]=\"topFilterRowHeight\"\r\n  >\r\n    <!-- LEFT SIDE (Filter tags + Filter button) -->\r\n    <div class=\"d-flex gap-2 align-items-center\">\r\n      <ng-container>\r\n        <div\r\n          *ngFor=\"let col of activeFilteredColumns; trackBy: trackByField\"\r\n          class=\"filter-tags\"\r\n        >\r\n          <div\r\n            (click)=\"\r\n              isActiveFilterOpen = true;\r\n              activeTopButton = 'filter-columns';\r\n              openFilter(col)\r\n            \"\r\n            class=\"d-flex justify-content-center align-items-center muted-text add-filter-button active-filters\"\r\n            style=\"white-space: nowrap\"\r\n            [class.active]=\"\r\n              col?.field == selectedColumnForFilter?.field &&\r\n              isActiveFilterOpen &&\r\n              activeTopButton == 'filter-columns'\r\n            \"\r\n          >\r\n            <span class=\"header-tag mt-0 d-flex align-items-center\">\r\n              <span\r\n                *ngIf=\"col?.pinned\"\r\n                [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin.svg'\"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n              {{ col.header }}\r\n              <span\r\n                (click)=\"\r\n                  $event.stopPropagation(); removeColumnFilterFromColumn(col)\r\n                \"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon cross-secondary ms-2 mb-1\"\r\n              ></span>\r\n            </span>\r\n          </div>\r\n\r\n          <ng-container\r\n            *ngIf=\"\r\n              activeTopButton === 'filter-columns' &&\r\n              col?.field == selectedColumnForFilter?.field &&\r\n              isActiveFilterOpen\r\n            \"\r\n          >\r\n            <div\r\n              *ngTemplateOutlet=\"filterColumns; context: { column: col }\"\r\n              class=\"actions-dropdown mt-1\"\r\n            ></div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- Filter Button -->\r\n      <div class=\"add-filter-button-menu\">\r\n        <div\r\n          (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\r\n          class=\"d-flex justify-content-center align-items-center muted-text add-filter-button button-filter\"\r\n          style=\"width: 70px\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\r\n            class=\"me-2 data-grid-svg-icon\"\r\n          ></span>\r\n          Filter\r\n        </div>\r\n\r\n        <ng-container\r\n          *ngIf=\"activeTopButton === 'filter-columns' && !isActiveFilterOpen\"\r\n        >\r\n          <div\r\n            *ngTemplateOutlet=\"filterColumns\"\r\n            class=\"actions-dropdown mt-1\"\r\n          ></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- RIGHT SIDE (Update + Reset) -->\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div\r\n        (click)=\"savePreset()\"\r\n        class=\"text-primary cursor-pointer all-filters-reset-button\"\r\n        *ngIf=\"!checkFilterChangesEffect()\"\r\n      >\r\n        Update View\r\n      </div>\r\n\r\n      <div\r\n        class=\"text-primary cursor-pointer all-filters-reset-button\"\r\n        *ngIf=\"!tableFilterViewId && activeFilteredColumns?.length\"\r\n        (click)=\"clearAllFilters()\"\r\n      >\r\n        Reset\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    [style.height]=\"\r\n      showFilters ? 'calc(100% - ' + topFilterRowHeight + 'px)' : '100%'\r\n    \"\r\n    cdkDropListGroup\r\n    class=\"data-grid-table-wrapper overflow-hidden\"\r\n    #dataGridContainer\r\n    [style.fontFamily]=\"fontFaimly\"\r\n    [style.backgroundColor]=\"bodyBackgroundColor\"\r\n    id=\"data-grid-main-container\"\r\n  >\r\n    <div\r\n      *ngIf=\"showRowsGrouping\"\r\n      [style.height.px]=\"headerRowHeight\"\r\n      [cdkDropListData]=\"columns\"\r\n      [style.backgroundColor]=\"\r\n        topGroupedBadgesBackgroundColor || headerBackgroundColor\r\n      \"\r\n      cdkDropList\r\n      (cdkDropListEntered)=\"enterToTopRowGrouping($event)\"\r\n      (cdkDropListExited)=\"exitedFromTheTopRow($event)\"\r\n      (cdkDropListDropped)=\"onDropTopGroup($event)\"\r\n      [cdkDropListEnterPredicate]=\"canEnterToRowsGrouping\"\r\n      id=\"rows-grouping-top-container\"\r\n      class=\"border-below d-flex px-4 align-items-center\"\r\n    >\r\n      <div\r\n        class=\"d-flex gap-2 align-items-center\"\r\n        [style.color]=\"headerTextColor\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span>\r\n        <div *ngIf=\"!draggingInGroupArea && !groupedColumns?.length\">\r\n          Drag here to set row groups\r\n        </div>\r\n        <div\r\n          cdkDropListOrientation=\"horizontal\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"onGroupReorder($event)\"\r\n          class=\"d-flex\"\r\n        >\r\n          <div\r\n            cdkDrag\r\n            [cdkDragLockAxis]=\"'x'\"\r\n            *ngFor=\"\r\n              let child of groupedColumns;\r\n              let i = index;\r\n              trackBy: trackByField\r\n            \"\r\n            class=\"d-flex align-items-center\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                topGroupingRowPlaceholder;\r\n                context: {\r\n                  $implicit: child,\r\n                  showChevron:\r\n                    groupedColumns.length > 1 && i != groupedColumns.length - 1\r\n                }\r\n              \"\r\n            ></ng-container>\r\n            <ng-template cdkDragPreview\r\n              ><div class=\"p-2 border d-flex gap-2\">\r\n                <div>\r\n                  <span\r\n                    *ngIf=\"!draggingInGroupArea\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div>{{ child.header }}</div>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"d-flex overflow-hidden\"\r\n      [style.height]=\"\r\n        'calc(100% - ' +\r\n        (showRowsGrouping\r\n          ? headerRowHeight + footerRowHeight\r\n          : footerRowHeight) +\r\n        'px)'\r\n      \"\r\n    >\r\n      <div\r\n        class=\"h-100\"\r\n        [style.width]=\"\r\n          !showSideMenu\r\n            ? '100%'\r\n            : sideMenuVisible\r\n            ? 'calc(100% - 280px)'\r\n            : 'calc(100% - 30px)'\r\n        \"\r\n      >\r\n        <div class=\"h-100 transition position-relative w-100\">\r\n          <!-- ##################################################################################################################################################################################### -->\r\n          <!-- ##################################################################################################################################################################################### -->\r\n          <!-- Data Grid Header starts here -->\r\n          <!-- ##################################################################################################################################################################################### -->\r\n          <!-- ##################################################################################################################################################################################### -->\r\n\r\n          <div\r\n            class=\"data-grid-header-wrapper w-100\"\r\n            [style.color]=\"headerTextColor\"\r\n            [style.fontSize.px]=\"headerTextFontsSize\"\r\n            [style.backgroundColor]=\"headerBackgroundColor\"\r\n            [class.border-below]=\"!hasAnyVisibleColumn\"\r\n            [style.height.px]=\"\r\n              showColumnsGrouping && showFilterRow\r\n                ? headerRowHeight * 3\r\n                : showColumnsGrouping || showFilterRow\r\n                ? headerRowHeight * 2\r\n                : headerRowHeight\r\n            \"\r\n          >\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- Data Grid Left Pinned Header starts here -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <div\r\n              class=\"data-grid-header left-pinned\"\r\n              #leftPinnedHeader\r\n              [class.border-right]=\"hasLeftPinnedColumns\"\r\n            >\r\n              <div\r\n                *ngIf=\"showSerialNumber\"\r\n                [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n                class=\"select-all-checkbox-cell border-below\"\r\n                [style.width.px]=\"55\"\r\n                [style.height.px]=\"\r\n                  showColumnsGrouping && showFilterRow\r\n                    ? headerRowHeight * 3\r\n                    : showColumnsGrouping || showFilterRow\r\n                    ? headerRowHeight * 2\r\n                    : headerRowHeight\r\n                \"\r\n              >\r\n                S.No\r\n              </div>\r\n              <div\r\n               *ngIf=\"showCheckboxes\"\r\n                [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n                class=\"select-all-checkbox-cell border-below\"\r\n                [style.height.px]=\"\r\n                  showColumnsGrouping && showFilterRow\r\n                    ? headerRowHeight * 3\r\n                    : showColumnsGrouping || showFilterRow\r\n                    ? headerRowHeight * 2\r\n                    : headerRowHeight\r\n                \"\r\n              >\r\n                <input\r\n                  *ngIf=\"hasAnyVisibleColumn\"\r\n                  style=\"width: 16px; height: 16px\"\r\n                  type=\"checkbox\"\r\n                  [indeterminate]=\"isIndeterminateState(dataSet)\"\r\n                  [checked]=\"isAllSelected(dataSet)\"\r\n                  (change)=\"toggleSelectAll(dataSet)\"\r\n                />\r\n              </div>\r\n              <div\r\n                [style.backgroundColor]=\"headerBackgroundColor\"\r\n                class=\"d-flex\"\r\n                cdkDropList\r\n                id=\"left-pinned-header\"\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"leftPinnedColumns\"\r\n                (cdkDropListEntered)=\"onDropListEnter($event, 'left')\"\r\n                (cdkDropListSorted)=\"\r\n                  onSortGroup($event, 'previewLeftPinnedColumns')\r\n                \"\r\n                (cdkDropListDropped)=\"onDropGroup()\"\r\n                style=\"min-width: 1px\"\r\n              >\r\n                <div\r\n                  class=\"dragable-header\"\r\n                  cdkDrag\r\n                  [cdkDragData]=\"col\"\r\n                  *ngFor=\"\r\n                    let col of leftPinnedColumns;\r\n                    let i = index;\r\n                    trackBy: trackByField\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      headerCell;\r\n                      context: {\r\n                        $implicit: col,\r\n                        index: i,\r\n                        section: 'previewLeftPinnedColumns'\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                  <ng-template cdkDragPreview\r\n                    ><div class=\"p-2 border d-flex gap-2\">\r\n                      <div>\r\n                        <span\r\n                          *ngIf=\"!draggingInGroupArea\"\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/arrows-move.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n                      <div>{{ col.header }}</div>\r\n                    </div>\r\n                  </ng-template>\r\n                  <ng-template cdkDragPlaceholder>\r\n                    <div *ngIf=\"!draggingInGroupArea\">\r\n                      <div\r\n                        *ngTemplateOutlet=\"\r\n                          headerCell;\r\n                          context: {\r\n                            $implicit: col,\r\n                            index: i,\r\n                            section: ''\r\n                          }\r\n                        \"\r\n                      ></div>\r\n                    </div>\r\n                    <div\r\n                      *ngIf=\"draggingInGroupArea\"\r\n                      class=\"d-flex gap-2 ms-2\"\r\n                      style=\"opacity: 0.6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngIf=\"col?.children?.length; else singleCol\"\r\n                      >\r\n                        <ng-container\r\n                          *ngFor=\"\r\n                            let child of col.children;\r\n                            let i = index;\r\n                            trackBy: trackByField\r\n                          \"\r\n                        >\r\n                          <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                              topGroupingRowPlaceholder;\r\n                              context: {\r\n                                $implicit: child,\r\n                                showChevron:\r\n                                  col.children.length > 1 &&\r\n                                  i != col.children.length - 1\r\n                              }\r\n                            \"\r\n                          ></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n\r\n                      <ng-template #singleCol>\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            topGroupingRowPlaceholder;\r\n                            context: {\r\n                              $implicit: col,\r\n                              showChevron: col?.children?.length > 1\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </ng-template>\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- Data Grid Center Pinned Header starts here -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <div\r\n              class=\"data-grid-header center-scrollable\"\r\n              #centerPinnedHeader\r\n              (scroll)=\"onCenterBodyScroll($event)\"\r\n              id=\"center-pinned-header\"\r\n              cdkDropList\r\n              [cdkDropListConnectedTo]=\"\r\n                showRowsGrouping ? ['rows-grouping-top-container'] : []\r\n              \"\r\n              [cdkDropListData]=\"centerColumns\"\r\n              cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListSortingDisabled]=\"\r\n                isDisableColumnGrouping && draggingInGroupArea\r\n              \"\r\n              (cdkDropListEntered)=\"onDropListEnter($event, 'center')\"\r\n              (cdkDropListSorted)=\"onSortGroup($event, 'previewCenterColumns')\"\r\n              (cdkDropListDropped)=\"onDropGroup()\"\r\n              [style.maxWidth]=\"\r\n                'calc(100% - ' +\r\n                (rightPinnedHeader.offsetWidth + leftPinnedHeader.offsetWidth) +\r\n                'px)'\r\n              \"\r\n            >\r\n              <div\r\n                *ngIf=\"groupedColumns?.length\"\r\n                style=\"min-width: 200px\"\r\n                class=\"h-100 align-items-center\"\r\n                #columnsGroupedBox\r\n                id=\"groupBoxHeaderDiv\"\r\n              >\r\n                <div\r\n                  class=\"d-flex w-100 justify-content-between align-items-center border-below\"\r\n                  [style.height.px]=\"\r\n                    showFilterRow ? headerRowHeight * 2 : headerRowHeight\r\n                  \"\r\n                >\r\n                  <div class=\"ps-3\">Group</div>\r\n                  <div class=\"d-flex\">\r\n                    <div\r\n                      class=\"three-dots cursor-pointer\"\r\n                      (click)=\"\r\n                        openThreeDotsMenu($event, 'group');\r\n                        isThreeDotsFilterOpen = false\r\n                      \"\r\n                    >\r\n                      <span\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          'data-grid/icons/three-dots-vertical.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      ></span>\r\n                    </div>\r\n                    <div\r\n                      (mousedown)=\"\r\n                        $event.stopPropagation(); onResizeGroupBox($event)\r\n                      \"\r\n                      class=\"resize-handle\"\r\n                      style=\"margin-right: -2px\"\r\n                    >\r\n                      <span\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          'data-grid/icons/resize-handle.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      ></span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  [style.height.px]=\"headerRowHeight\"\r\n                  class=\"border-below\"\r\n                ></div>\r\n              </div>\r\n              <span\r\n                class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\r\n                style=\"min-width: 30px; height: 100%\"\r\n                *ngIf=\"gridType === 'Assets' || gridType === 'Tasks'\"\r\n              >\r\n              </span>\r\n              <div\r\n                class=\"dragable-header\"\r\n                (cdkDragStarted)=\"\r\n                  checkColumnGroupingStatus(col);\r\n                  dragStartOnGroup(col);\r\n                  onDragStarted(col)\r\n                \"\r\n                (cdkDragMoved)=\"onDragMoved($event)\"\r\n                (cdkDragEnded)=\"onDragEnded()\"\r\n                cdkDrag\r\n                [cdkDragData]=\"col\"\r\n                *ngFor=\"\r\n                  let col of centerColumns;\r\n                  let i = index;\r\n                  trackBy: trackById\r\n                \"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    headerCell;\r\n                    context: {\r\n                      $implicit: col,\r\n                      index: i,\r\n                      section: 'previewCenterColumns'\r\n                    }\r\n                  \"\r\n                >\r\n                </ng-container>\r\n                <ng-template cdkDragPreview\r\n                  ><div class=\"p-2 border d-flex gap-2\">\r\n                    <div>\r\n                      <span\r\n                        *ngIf=\"!isOutsideContainer\"\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          (draggingInGroupArea\r\n                            ? 'data-grid/icons/justify.svg'\r\n                            : 'data-grid/icons/arrows-move.svg')\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      >\r\n                      </span>\r\n                      <span\r\n                        *ngIf=\"isOutsideContainer\"\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      >\r\n                      </span>\r\n                    </div>\r\n                    <div>{{ col.header }}</div>\r\n                  </div>\r\n                </ng-template>\r\n                <ng-template cdkDragPlaceholder>\r\n                  <div *ngIf=\"!draggingInGroupArea\">\r\n                    <div\r\n                      *ngTemplateOutlet=\"\r\n                        headerCell;\r\n                        context: {\r\n                          $implicit: col,\r\n                          index: i,\r\n                          section: 'centerColumns'\r\n                        }\r\n                      \"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"draggingInGroupArea && !isOutsideContainer\"\r\n                    class=\"d-flex gap-2 ms-2\"\r\n                    style=\"opacity: 0.6\"\r\n                  >\r\n                    <ng-container *ngIf=\"col?.children?.length; else singleCol\">\r\n                      <ng-container\r\n                        *ngFor=\"\r\n                          let child of col.children;\r\n                          let i = index;\r\n                          trackBy: trackById\r\n                        \"\r\n                      >\r\n                        <ng-container *ngIf=\"child?.is_groupable\">\r\n                          <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                              topGroupingRowPlaceholder;\r\n                              context: {\r\n                                $implicit: child,\r\n                                showChevron:\r\n                                  col.children.length > 1 &&\r\n                                  i != col.children.length - 1\r\n                              }\r\n                            \"\r\n                          ></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-template #singleCol>\r\n                      <ng-container *ngIf=\"col?.is_groupable\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            topGroupingRowPlaceholder;\r\n                            context: {\r\n                              $implicit: col,\r\n                              showChevron: col?.children?.length > 1\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- Data Grid Right Pinned Header starts here -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <div\r\n              [style.backgroundColor]=\"headerBackgroundColor\"\r\n              cdkDropList\r\n              id=\"right-pinned-header\"\r\n              [cdkDropListConnectedTo]=\"\r\n                showRowsGrouping ? ['rows-grouping-top-container'] : []\r\n              \"\r\n              cdkDropListOrientation=\"horizontal\"\r\n              class=\"data-grid-header right-pinned\"\r\n              (cdkDropListSorted)=\"\r\n                onSortGroup($event, 'previewRightPinnedColumns')\r\n              \"\r\n              (cdkDropListEntered)=\"onDropListEnter($event, 'right')\"\r\n              (cdkDropListDropped)=\"onDropGroup()\"\r\n              #rightPinnedHeader\r\n              class=\"right-pinned-header d-flex\"\r\n              style=\"min-width: 0.2px\"\r\n            >\r\n              <div\r\n                class=\"dragable-header\"\r\n                cdkDrag\r\n                [cdkDragData]=\"col\"\r\n                *ngFor=\"\r\n                  let col of rightPinnedColumns;\r\n                  let i = index;\r\n                  trackBy: trackById\r\n                \"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    headerCell;\r\n                    context: {\r\n                      $implicit: col,\r\n                      pinnedRight: true,\r\n                      index: i,\r\n                      section: 'right'\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n                <ng-template cdkDragPreview\r\n                  ><div class=\"p-2 border d-flex gap-2\">\r\n                    <div>\r\n                      <span\r\n                        *ngIf=\"!draggingInGroupArea\"\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          'data-grid/icons/arrows-move.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      ></span>\r\n                    </div>\r\n                    <div>{{ col.header }}</div>\r\n                  </div>\r\n                </ng-template>\r\n                <ng-template cdkDragPlaceholder>\r\n                  <div *ngIf=\"!draggingInGroupArea\">\r\n                    <div\r\n                      *ngTemplateOutlet=\"\r\n                        headerCell;\r\n                        context: {\r\n                          $implicit: col,\r\n                          index: i,\r\n                          section: 'right'\r\n                        }\r\n                      \"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"draggingInGroupArea\"\r\n                    class=\"d-flex gap-2 ms-2\"\r\n                    style=\"opacity: 0.6\"\r\n                  >\r\n                    <ng-container *ngIf=\"col?.children?.length; else singleCol\">\r\n                      <ng-container\r\n                        *ngFor=\"\r\n                          let child of col.children;\r\n                          let i = index;\r\n                          trackBy: trackById\r\n                        \"\r\n                      >\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            topGroupingRowPlaceholder;\r\n                            context: {\r\n                              $implicit: child,\r\n                              showChevron:\r\n                                col.children.length > 1 &&\r\n                                i != col.children.length - 1\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-template #singleCol>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                          topGroupingRowPlaceholder;\r\n                          context: {\r\n                            $implicit: col,\r\n                            showChevron: col?.children?.length > 1\r\n                          }\r\n                        \"\r\n                      ></ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <!-- Data Grid Body starts here -->\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <div\r\n            class=\"h-100 d-flex justify-content-center align-items-center\"\r\n            *ngIf=\"!dataSet?.length && !loading && !dataSetLoading\"\r\n          >\r\n            <!-- <div\r\n            [inlineSVG]=\"\r\n              singleSpaAssetsPath + 'data-grid/icons/record-not-found.svg'\r\n            \"\r\n            class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n          ></div> -->\r\n            <div>No Record Found</div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"position-absolute w-100 h-100 d-flex justify-content-center align-items-center loading-overlay\"\r\n            *ngIf=\"loading || dataSetLoading\"\r\n            style=\"\r\n              z-index: 999;\r\n              backdrop-filter: blur(1px);\r\n            \"\r\n            [style.backgroundColor]=\"bodyBackgroundColor\"\r\n          >\r\n            <div class=\"spinner-border text-primary\" role=\"status\">\r\n              <!-- <span class=\"loader\"></span> -->\r\n              <!-- <span class=\"visually-hidden\">Loading...</span> -->\r\n              <!-- </div> -->\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"data-grid-body-wrapper position-relative d-flex\"\r\n            [style.height]=\"bodyWrapperHeight\"\r\n            style=\"overflow-y: auto; overflow-x: hidden\"\r\n            #mainScroll\r\n            (scroll)=\"onMainScroll($event)\"\r\n            [style.scrollbarWidth]=\"verticalScrollbarWidth\"\r\n          >\r\n            <!-- LEFT PINNED -->\r\n            <div\r\n              [style.height.px]=\"\r\n                !groupedColumns.length ? originalDataSet.length * rowHeight : 0\r\n              \"\r\n            ></div>\r\n            <div [class.h-100]=\"originalDataSet.length < 8\">\r\n              <div\r\n                class=\"data-grid-body left-pinned-body w-100\"\r\n                style=\"overflow-y: hidden\"\r\n                [class.border-right]=\"hasLeftPinnedColumns\"\r\n                [class.transparent-border-right]=\"!hasLeftPinnedColumns\"\r\n                [style.transform]=\"'translateY(' + translateY + 'px)'\"\r\n                [style.backgroundColor]=\"leftPinnedBackgroundColor\"\r\n                [class.h-100]=\"originalDataSet.length < 8\"\r\n               *ngIf=\"!loading && !dataSetLoading\"\r\n                [@rowDynamic]=\"rowAnimation\"\r\n\r\n                \r\n              >\r\n                <ng-container\r\n                  *ngFor=\"\r\n                    let row of visibleRows;\r\n                    let i = index;\r\n                    trackBy: trackById\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: row,\r\n                        columns: previewLeftPinnedColumns,\r\n                        isEven: (startIndex + i) % 2 === 0,\r\n                        isOdd: (startIndex + i) % 2 !== 0,\r\n                        isLeft: true,\r\n                        section: 'left',\r\n                        isTotalRow: false\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: { __virtualIndex: 0 },\r\n                        columns: previewLeftPinnedColumns,\r\n                        isEven: false,\r\n                        isOdd: false,\r\n                        section: 'left',\r\n                        isTotalRow: true\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- CENTER -->\r\n            <div\r\n              class=\"h-100\"\r\n              [style.width.px]=\"centerPinnedHeader.clientWidth\"\r\n              [style.backgroundColor]=\"bodyBackgroundColor\"\r\n            >\r\n              <div\r\n                class=\"data-grid-body center-scrollable\"\r\n                [class.h-100]=\"originalDataSet.length < 8\"\r\n                style=\"overflow-y: hidden; overflow-x: auto\"\r\n                [style.transform]=\"'translateY(' + translateY + 'px)'\"\r\n                [style.backgroundColor]=\"bodyBackgroundColor\"\r\n                #centerScrollableBody\r\n                (scroll)=\"onCenterBodyScroll($event)\"\r\n                [style.boxShadow]=\"leftPinnedBoxshadow\"\r\n              >\r\n              <div [@rowDynamic]=\"rowAnimation\" *ngIf=\"!loading && !dataSetLoading\">\r\n                <ng-container\r\n                  *ngFor=\"\r\n                    let row of visibleRows;\r\n                    let i = index;\r\n                    trackBy: trackById\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: row,\r\n                        columns: previewCenterColumns,\r\n                        isEven: (startIndex + i) % 2 === 0,\r\n                        isOdd: (startIndex + i) % 2 !== 0,\r\n                        section: 'center',\r\n                        isTotalRow: false\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: { __virtualIndex: 0 },\r\n                        columns: previewCenterColumns,\r\n                        isEven: false,\r\n                        isOdd: false,\r\n                        section: 'center',\r\n                        isTotalRow: true\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- RIGHT PINNED -->\r\n            <div\r\n              class=\"right-pinned-body-wrapper\"\r\n              *ngIf=\"hasRightPinnedColumns\"\r\n              [class.h-100]=\"originalDataSet.length < 8\"\r\n              [style.maxWidth.px]=\"\r\n                isScrollbarVisible\r\n                  ? rightPinnedHeader.offsetWidth - 15\r\n                  : rightPinnedHeader.offsetWidth\r\n              \"\r\n              [style.backgroundColor]=\"rightPinnedBackgroundColor\"\r\n            >\r\n              <div\r\n                class=\"data-grid-body right-pinned-body w-100 h-100\"\r\n                style=\"overflow-y: hidden\"\r\n                [style.transform]=\"'translateY(' + translateY + 'px)'\"\r\n                [style.boxShadow]=\"rightPinnedBoxshadow\"\r\n                [style.backgroundColor]=\"rightPinnedBackgroundColor\"\r\n                *ngIf=\"!loading && !dataSetLoading\"\r\n                [@rowDynamic]=\"rowAnimation\"\r\n              >\r\n                <ng-container\r\n                  *ngFor=\"\r\n                    let row of visibleRows;\r\n                    let i = index;\r\n                    trackBy: trackById\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: row,\r\n                        columns: previewRightPinnedColumns,\r\n                        isEven: (startIndex + i) % 2 === 0,\r\n                        isOdd: (startIndex + i) % 2 !== 0,\r\n                        section: 'right',\r\n                        isTotalRow: false\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: { __virtualIndex: 0 },\r\n                        columns: previewRightPinnedColumns,\r\n                        isEven: false,\r\n                        isOdd: false,\r\n                        section: 'right',\r\n                        isTotalRow: true\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              style=\"top: auto; left: auto\"\r\n              (click)=\"\r\n                $event.stopPropagation();\r\n                fullscreenImage = null;\r\n                cdr.detectChanges()\r\n              \"\r\n              [style.width.px]=\"dataGridContainer.offsetWidth\"\r\n              [style.height.px]=\"\r\n                dataGridContainer.offsetHeight - (footerRowHeight + 100)\r\n              \"\r\n              class=\"image-modal full-image-modal\"\r\n              *ngIf=\"fullscreenImage\"\r\n            >\r\n              <img\r\n                (click)=\"$event.stopPropagation()\"\r\n                [src]=\"fullscreenImage\"\r\n                alt=\"Fullscreen Image\"\r\n              />\r\n            </div>\r\n            <div\r\n              *ngIf=\"selectedRows.size > 0 && showTaskbar\"\r\n              class=\"taskbar w-100\"\r\n              [style.bottom.px]=\"85\"\r\n            >\r\n              <div class=\"selected-rows-action-bar\" [@slideUp]>\r\n                <span class=\"selected-count\">\r\n                  {{ selectedRows.size }} selected of\r\n                  {{\r\n                    paginationConfig.totalResults ||\r\n                      config?.paginationParams?.totalItems\r\n                  }}\r\n                  Total\r\n                </span>\r\n                <div class=\"action-buttons d-flex align-items-center\">\r\n                  <ng-container\r\n                    *ngFor=\"let action of taskbarActions; let i = index\"\r\n                  >\r\n                    <ng-container *ngIf=\"action?.has_permission\">\r\n                      <span\r\n                        class=\"action-btn verified btn {{ action }}\"\r\n                        (click)=\"onVerifyClick(action?.actionName)\"\r\n                        >{{ action?.actionName }}</span\r\n                      >\r\n                      <span\r\n                        *ngIf=\"\r\n                          taskbarActions.length > 1 &&\r\n                          i !== taskbarActions.length - 1 &&\r\n                          taskbarActions[i + 1]?.has_permission\r\n                        \"\r\n                        class=\"\"\r\n                        >|</span\r\n                      >\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <button (click)=\"clearSelectionState(tableType);selectedRows.clear();\" class=\"clear-btn ms-2 mt-2\">\r\n                    <i class=\"bi bi-x-circle\"></i> Clear Selection\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- Vertical Fake scroll Bar -->\r\n          <!-- <div\r\n            (scroll)=\"onMainFakeScroll($event)\"\r\n            class=\"fake-scrollbar fake-scrollbar-vertical d-none\"\r\n            [style.scrollbarWidth]=\"verticalScrollbarWidth\"\r\n            [style.top.px]=\"\r\n              showColumnsGrouping && showFilterRow\r\n                ? headerRowHeight * 3\r\n                : showColumnsGrouping || showFilterRow\r\n                ? headerRowHeight * 2\r\n                : headerRowHeight\r\n            \"\r\n            #fakeScroll\r\n            [style.height]=\"bodyWrapperHeight\"\r\n            style=\"\r\n              overflow-y: auto;\r\n              overflow-x: hidden;\r\n              width: 17px;\r\n              position: absolute;\r\n              right: 0;\r\n              background-color: f1f2f3;\r\n              z-index: 10;\r\n            \"\r\n          >\r\n            <div [style.height.px]=\"rowHeight * dataSetLength\"></div>\r\n          </div> -->\r\n        </div>\r\n\r\n        <!-- Horizintal Fake Scrollbars -->\r\n        <div\r\n          class=\"d-flex justify-content-between\"\r\n          *ngIf=\"hasScroll && !shouldRestoreScroll\"\r\n        >\r\n          <div\r\n            [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\r\n            class=\"fake-horizintal-scrollbar\"\r\n            #fakeScroll\r\n            [style.width.px]=\"leftPinnedHeader.offsetWidth\"\r\n            style=\"overflow-x: scroll\"\r\n          ></div>\r\n          <div\r\n            [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\r\n            (scroll)=\"onCenterBodyScroll($event)\"\r\n            class=\"fake-horizintal-scrollbar\"\r\n            #horizintalFakeScroll\r\n            [style.width.px]=\"centerPinnedHeader.offsetWidth\"\r\n          >\r\n            <div [style.width.px]=\"centerPinnedHeader.scrollWidth - 10\"></div>\r\n          </div>\r\n          <div\r\n            [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\r\n            class=\"fake-horizintal-scrollbar\"\r\n            #fakeScroll\r\n            [style.width.px]=\"rightPinnedHeader.offsetWidth\"\r\n            style=\"overflow-x: scroll\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Side Menu Implemented Here -->\r\n      <div\r\n        *ngIf=\"showSideMenu\"\r\n        [style.width.px]=\"sideMenuVisible ? 280 : 30\"\r\n        class=\"right-menu h-100\"\r\n        [style.backgroundColor]=\"sidemenuBackgroundColor\"\r\n      >\r\n        <div class=\"h-100 d-flex flex-row-reverse\">\r\n          <div\r\n            style=\"width: 30px\"\r\n            class=\"d-flex flex-column align-items-center cursor-pointer\"\r\n            [class.border-start]=\"sideMenuVisible\"\r\n          >\r\n            <div\r\n              (click)=\"toggleSideMenu('cols')\"\r\n              [class.bg-fff]=\"\r\n                currentOpenedSideMenue == 'cols' && sideMenuVisible\r\n              \"\r\n              [class.border-below]=\"sideMenuVisible\"\r\n              class=\"columns-button d-flex flex-column align-items-center\"\r\n            >\r\n              <div>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n              <div class=\"side-menue-text\">Columns</div>\r\n            </div>\r\n\r\n            <div\r\n              (click)=\"toggleSideMenu('filtrs')\"\r\n              [class.bg-fff]=\"\r\n                currentOpenedSideMenue == 'filtrs' && sideMenuVisible\r\n              \"\r\n              [class.border-below]=\"\r\n                sideMenuVisible && currentOpenedSideMenue == 'filtrs'\r\n              \"\r\n              class=\"columns-button d-flex flex-column align-items-center\"\r\n            >\r\n              <div>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n              <div class=\"side-menue-text\">Filter</div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"h-100\"\r\n            *ngIf=\"sideMenuVisible\"\r\n            [ngStyle]=\"{ width: sideMenuVisible ? '250px' : '' }\"\r\n          >\r\n            <div class=\"h-100\">\r\n              <ng-container\r\n                *ngIf=\"currentOpenedSideMenue == 'cols' && sideMenuVisible\"\r\n              >\r\n                <ng-container *ngTemplateOutlet=\"columnPannel\"></ng-container>\r\n                <!-- Column Items -->\r\n                <div class=\"column-panel-body px-3\">\r\n                  <ng-container\r\n                    *ngFor=\"let col of columns; trackBy: trackByField\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                </div>\r\n                <hr />\r\n\r\n                <div class=\"side-menu-row-groups\" style=\"height: 30%\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"sideMenuRowGroups\"\r\n                  ></ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngIf=\"currentOpenedSideMenue == 'filtrs' && sideMenuVisible\"\r\n              >\r\n                <ng-container *ngTemplateOutlet=\"sideFilters\"></ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      [style.height.px]=\"footerRowHeight\"\r\n      class=\"border-top\"\r\n      [style.backgroundColor]=\"footerRowBackgroundColor\"\r\n    >\r\n      <!-- Rows: <span class=\"fw-500 ms-1\">{{ dataSet.length }}</span> -->\r\n\r\n      <div\r\n        class=\"pagination-container\"\r\n        [style.height.px]=\"footerRowHeight\"\r\n        [style.padding.px]=\"footerPadding\"\r\n      >\r\n        <div class=\"page-size\">\r\n          <select\r\n            [(ngModel)]=\"paginationConfig.limit\"\r\n            (change)=\"onPageSizeChange()\"\r\n          >\r\n            <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\r\n              {{ size }}\r\n            </option>\r\n          </select>\r\n          <span class=\"separator\"> per page </span>\r\n        </div>\r\n\r\n        <div class=\"page-info\">\r\n          Results:\r\n          {{ (paginationConfig.page - 1) * paginationConfig.limit + 1 }}-{{\r\n            paginationConfig.page * paginationConfig.limit <\r\n            paginationConfig.totalResults\r\n              ? paginationConfig.page * paginationConfig.limit\r\n              : paginationConfig.totalResults\r\n          }}\r\n          of\r\n          {{ paginationConfig.totalResults }}\r\n        </div>\r\n\r\n        <div class=\"page-buttons\">\r\n          <button\r\n            (click)=\"goToPage(paginationConfig.page - 1)\"\r\n            [disabled]=\"paginationConfig.page === 1\"\r\n          >\r\n            \u2039\r\n          </button>\r\n\r\n          <ng-container *ngFor=\"let page of visiblePages\">\r\n            <button\r\n              *ngIf=\"page !== '...'\"\r\n              (click)=\"goToPage(page)\"\r\n              [class.active]=\"page === paginationConfig.page\"\r\n            >\r\n              {{ page }}\r\n            </button>\r\n            <span *ngIf=\"page === '...'\">...</span>\r\n          </ng-container>\r\n\r\n          <button\r\n            (click)=\"goToPage(paginationConfig.page + 1)\"\r\n            [disabled]=\"paginationConfig.page === paginationConfig.totalResults\"\r\n          >\r\n            \u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n<!-- Header Cell Template -->\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n\r\n<ng-template\r\n  #headerCell\r\n  let-col\r\n  let-pinnedRight=\"pinnedRight\"\r\n  let-i=\"index\"\r\n  let-columnIndex=\"index\"\r\n  let-sections=\"section\"\r\n  let-calledFromNestedPlaceholder=\"calledFromNestedPlaceholder\"\r\n>\r\n  <div>\r\n    <!-- Group Header -->\r\n    <ng-container *ngIf=\"col.children?.length > 0; else flatHeader\">\r\n      <div cdkDroplistGroup class=\"group-column-wrapper\">\r\n        <!-- Parent Header -->\r\n        <div\r\n          *ngIf=\"shouldTheGroupHeaderShow(col)\"\r\n          class=\"header-cell group-header\"\r\n          [style.height.px]=\"headerRowHeight\"\r\n          [style.min-height.px]=\"headerRowHeight\"\r\n          [style.max-height.px]=\"headerRowHeight\"\r\n          [class.border-right]=\"showVerticalBorder\"\r\n          [style.gridColumn]=\"'span ' + col.children.length\"\r\n          [style.fontWeight]=\"headerFontWeight\"\r\n          [class.flex-row-reverse]=\"pinnedRight\"\r\n          [class.justify-content-end]=\"pinnedRight\"\r\n          style=\"grid-row: 1\"\r\n        >\r\n          <div\r\n            class=\"group-header-content\"\r\n            [title]=\"col.header\"\r\n            [class.ms-2]=\"pinnedRight\"\r\n          >\r\n            {{ col.header }}\r\n          </div>\r\n          <div\r\n            class=\"resize-handle\"\r\n            (dblclick)=\"autosizeColumn(col.children)\"\r\n            (mousedown)=\"\r\n              $event.stopPropagation(); onResizeGroup($event, col, pinnedRight)\r\n            \"\r\n          >\r\n            <span\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n              \"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Child Headers and Filters -->\r\n\r\n        <div\r\n          class=\"d-flex\"\r\n          cdkDropList\r\n          cdkDropListOrientation=\"horizontal\"\r\n          [cdkDropListData]=\"col.children\"\r\n          (cdkDropListSorted)=\"onChildDroplistSorted($event, sections)\"\r\n          (cdkDropListDropped)=\"onChildDroplistDroped($event)\"\r\n          [cdkDropListSortingDisabled]=\"false\"\r\n          [cdkDropListConnectedTo]=\"\r\n            showRowsGrouping ? ['rows-grouping-top-container'] : []\r\n          \"\r\n        >\r\n          <div\r\n            cdkDrag\r\n            [cdkDragData]=\"child\"\r\n            *ngFor=\"let child of col.children; let i = index\"\r\n          >\r\n            <!-- Child Header -->\r\n            <ng-container *ngIf=\"child.is_visible && !child['isRowGrouped']\">\r\n              <div\r\n                cdkDragHandle\r\n                class=\"header-cell one-row-header-cells cursor-pointer\"\r\n                [class.border-right]=\"showVerticalBorder\"\r\n                [attr.field]=\"child.field\"\r\n                [style.width.px]=\"child.width\"\r\n                [style.min-width.px]=\"child.width\"\r\n                [style.min-height.px]=\"headerRowHeight\"\r\n                [style.max-height.px]=\"headerRowHeight\"\r\n                [style.fontWeight]=\"headerFontWeight\"\r\n                style=\"grid-row: 2\"\r\n                [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(child)\"\r\n              >\r\n                <div\r\n                  class=\"d-flex justify-content-between h-100 align-items-center w-100\"\r\n                >\r\n                  <div\r\n                    class=\"d-flex justify-content-between align-items-center w-100\"\r\n                    [class.flex-row-reverse]=\"pinnedRight\"\r\n                  >\r\n                    <div\r\n                      class=\"text-ellipsis h-100 d-flex align-items-center w-100\"\r\n                      [title]=\"col.header\"\r\n                      [class.w-100]=\"pinnedRight\"\r\n                    >\r\n                      <div\r\n                        class=\"text-ellipsis h-100\"\r\n                        [class.editable-header]=\"child?.is_editable\"\r\n                        (click)=\"\r\n                          openThreeDotsMenu($event, child);\r\n                          openFilteronThreeDotsClick(child)\r\n                        \"\r\n                      >\r\n                        {{ child.header }}\r\n                      </div>\r\n                    </div>\r\n\r\n                    <div\r\n                      class=\"position-relative d-flex\"\r\n                      [class.flex-row-reverse]=\"pinnedRight\"\r\n                    >\r\n                      <div\r\n                        [class.me-2]=\"pinnedRight\"\r\n                        class=\"d-flex align-items-center\"\r\n                        *ngIf=\"child.pinned\"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n                      <div\r\n                        class=\"three-dots p-1\"\r\n                        (click)=\"\r\n                          openThreeDotsMenu($event, child);\r\n                          isThreeDotsFilterOpen = false\r\n                        \"\r\n                        style=\"cursor: pointer\"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/three-dots-vertical.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n\r\n                      <!-- Only show menu if this column is active -->\r\n                      <div\r\n                        class=\"position-absolute\"\r\n                        *ngIf=\"activeCol === child\"\r\n                        style=\"top: -50%; z-index: 21\"\r\n                        [style.left.px]=\"\r\n                          -(!child?.pinned ? centerPinnedHeader.scrollLeft : 0)\r\n                        \"\r\n                        [style.top.px]=\"\r\n                          isThreeDotsFilterOpen\r\n                            ? showFilterRow || showColumnsGrouping\r\n                              ? headerRowHeight * 2 - 10\r\n                              : headerRowHeight - 10\r\n                            : 0\r\n                        \"\r\n                      >\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            columnMenu;\r\n                            context: {\r\n                              col: child,\r\n                              isNestedTable: false,\r\n                              section: sections,\r\n                              columnIndex: columnIndex,\r\n                              childColIndex: i\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </div>\r\n\r\n                      <div\r\n                        class=\"resize-handle\"\r\n                        (dblclick)=\"autosizeColumn(child)\"\r\n                        (mousedown)=\"\r\n                          $event.stopPropagation();\r\n                          onResizeColumn($event, child)\r\n                        \"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/resize-handle.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Filter Cell -->\r\n              <div\r\n                *ngIf=\"showFilterRow\"\r\n                [style.backgroundColor]=\"headerBackgroundColor\"\r\n                class=\"header-cell filter-cell\"\r\n                [class.border-right]=\"showVerticalBorder\"\r\n                [attr.field]=\"child.field\"\r\n                [style.width.px]=\"child.width\"\r\n                [style.min-width.px]=\"child.width\"\r\n                [style.height.px]=\"headerRowHeight\"\r\n                [style.min-height.px]=\"headerRowHeight\"\r\n                [style.max-height.px]=\"headerRowHeight\"\r\n                [class.border-right]=\"showVerticalBorder\"\r\n                style=\"grid-row: 3\"\r\n              >\r\n                <div\r\n                  class=\"header-cell filter-cell\"\r\n                  [attr.field]=\"col.field\"\r\n                  [style.width.px]=\"col.width\"\r\n                  [style.min-width.px]=\"col.width\"\r\n                  [style.height.px]=\"headerRowHeight\"\r\n                  [style.min-height.px]=\"headerRowHeight\"\r\n                  [style.max-height.px]=\"headerRowHeight\"\r\n                >\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control form-control-sm\"\r\n                    placeholder=\"Filter\"\r\n                    [(ngModel)]=\"child.filterValue\"\r\n                    (ngModelChange)=\"onFilterChange(child)\"\r\n                    (paste)=\"onFilterChange(child); applyDropdownFilter()\"\r\n                    [readonly]=\"\r\n                      child?.type == 'dropdown' || child?.type == 'image' || child?.type == 'array'\r\n                    \"\r\n                    [class.disabled-search-input]=\"\r\n                      child?.type == 'dropdown' || child?.type == 'image' || child?.type == 'array'\r\n                    \"\r\n                    (click)=\"\r\n                      $event.stopPropagation();\r\n                      openFilterFromDisabledSearchedInput(child)\r\n                    \"\r\n                    (keydown.enter)=\"applyDropdownFilter()\"\r\n                    (mousedown)=\"$event.stopPropagation()\"\r\n                  />\r\n                  <span\r\n                    class=\"filter-icon-wrapper\"\r\n                    (click)=\"$event.stopPropagation(); openFilter(child)\"\r\n                    [class.filter-applied]=\"isFilterAppliedOnColumn(child)\"\r\n                    [class.pe-none]=\"child?.type == 'image'\"\r\n                    ><span\r\n                      [inlineSVG]=\"\r\n                        singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\r\n                      \"\r\n                      class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                    ></span>\r\n                    <span\r\n                      *ngIf=\"isFilterAppliedOnColumn(child)\"\r\n                      style=\"\r\n                        width: 7px;\r\n                        height: 7px;\r\n                        box-shadow: 0px 0px 3px #7486ff;\r\n                        background-color: rgb(0 163 233);\r\n                        position: absolute;\r\n                        right: 4px;\r\n                        top: 12px;\r\n                      \"\r\n                      class=\"rounded-circle d-block\"\r\n                    ></span\r\n                  ></span>\r\n\r\n                  <div\r\n                    class=\"position-absolute filter-row-filter-wrapper\"\r\n                    *ngIf=\"activeFilterCell?.field == child?.field\"\r\n                    style=\"top: 100%; right: 0; z-index: 99\"\r\n                    [style.left.px]=\"\r\n                      child?.pinned ? 0 : -centerPinnedHeader.scrollLeft\r\n                    \"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"filterMenu; context: { col: child }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template cdkDragPreview\r\n              ><div class=\"p-2 border d-flex gap-2\">\r\n                <div\r\n                  *ngIf=\"\r\n                    !draggingInGroupArea ||\r\n                    (child.is_groupable && draggingInGroupArea)\r\n                  \"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div *ngIf=\"draggingInGroupArea && !child.is_groupable\">\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/ban.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div>{{ child.header }}</div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template cdkDragPlaceholder>\r\n              <div *ngIf=\"!draggingInGroupArea\" class=\"position-relative\">\r\n                <div\r\n                  *ngTemplateOutlet=\"\r\n                  childHeaderPlaceholder;\r\n                  context: {\r\n                    $implicit: child,\r\n                    index: i,\r\n                    sections: sections,\r\n                    calledFromNestedPlaceholder: true,\r\n                  }\r\n                \"\r\n                ></div>\r\n              </div>\r\n              <div\r\n                *ngIf=\"draggingInGroupArea && child?.is_groupable\"\r\n                class=\"d-flex gap-2 ms-2\"\r\n                style=\"opacity: 0.6\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    topGroupingRowPlaceholder;\r\n                    context: {\r\n                      $implicit: child,\r\n                      showChevron: false,\r\n                      pinnedRight: pinnedRight,\r\n                      sections: sections,\r\n                      index: i\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- Flat Header || Single Header Cell-->\r\n    <ng-template #flatHeader>\r\n      <div\r\n        class=\"group-column-wrapper\"\r\n        *ngIf=\"col.is_visible && !col['isRowGrouped']\"\r\n      >\r\n        <!-- Full-height Header Cell (spans 2 rows visually) -->\r\n        <div\r\n          class=\"header-cell one-row-header-cells\"\r\n          [attr.field]=\"col.field\"\r\n          [style.width.px]=\"col.width\"\r\n          [style.min-width.px]=\"col.width\"\r\n          [class.border-right]=\"showVerticalBorder\"\r\n          [style.min-height.px]=\"\r\n            showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\r\n          \"\r\n          [style.height.px]=\"\r\n            showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\r\n          \"\r\n          [style.fontWeight]=\"headerFontWeight\"\r\n          style=\"grid-row: 1 / span 2\"\r\n        >\r\n          <div\r\n            class=\"d-flex justify-content-between h-100 align-items-center w-100\"\r\n          >\r\n            <div\r\n              class=\"d-flex justify-content-between w-100 align-items-center\"\r\n              [class.flex-row-reverse]=\"pinnedRight\"\r\n            >\r\n              <div\r\n                class=\"text-ellipsis h-100 d-flex align-items-center w-100\"\r\n                [title]=\"col.header\"\r\n              >\r\n                <div\r\n                  class=\"text-ellipsis h-100 cursor-pointer\"\r\n                  [class.editable-header]=\"col?.is_editable\"\r\n                  [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(col)\"\r\n                  (click)=\"\r\n                    openThreeDotsMenu($event, col);\r\n                    openFilteronThreeDotsClick(col)\r\n                  \"\r\n                >\r\n                  {{ col.header }}\r\n                </div>\r\n              </div>\r\n\r\n              <div\r\n                class=\"position-relative d-flex\"\r\n                [class.flex-row-reverse]=\"pinnedRight\"\r\n              >\r\n                <div\r\n                  [class.me-2]=\"pinnedRight\"\r\n                  class=\"d-flex align-items-center\"\r\n                  *ngIf=\"col?.pinned\"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div\r\n                  [class.me-2]=\"col.order_by\"\r\n                  class=\"d-flex align-items-center\"\r\n                  *ngIf=\"sortingConfig?.field == col.field\"\r\n                >\r\n                  <!-- Ascending Sort Icon -->\r\n                  <span\r\n                    *ngIf=\"sortingConfig?.order_by == 'asc'\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/sort-asc.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\r\n                    (click)=\"sortDesc(col)\"\r\n                    [class.active]=\"sortingConfig?.order_by === 'asc'\"\r\n                  ></span>\r\n\r\n                  <!-- Descending Sort Icon -->\r\n                  <span\r\n                    *ngIf=\"sortingConfig?.order_by == 'desc'\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/sort-desc.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\r\n                    (click)=\"sortAsc(col)\"\r\n                    [class.active]=\"sortingConfig?.order_by === 'desc'\"\r\n                  ></span>\r\n                </div>\r\n                <div\r\n                  class=\"three-dots p-1\"\r\n                  (click)=\"\r\n                    openThreeDotsMenu($event, col);\r\n                    isThreeDotsFilterOpen = false\r\n                  \"\r\n                  style=\"cursor: pointer\"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath +\r\n                      'data-grid/icons/three-dots-vertical.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <!-- Only show menu if this column is active -->\r\n                <div\r\n                  class=\"position-absolute\"\r\n                  *ngIf=\"activeCol === col\"\r\n                  style=\"top: -50%; z-index: 21\"\r\n                  [style.left.px]=\"\r\n                    -(!col?.pinned ? centerPinnedHeader.scrollLeft : 0)\r\n                  \"\r\n                  [style.top.px]=\"\r\n                    isThreeDotsFilterOpen\r\n                      ? showFilterRow || showColumnsGrouping\r\n                        ? headerRowHeight * 2 - 10\r\n                        : headerRowHeight - 10\r\n                      : 0\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      columnMenu;\r\n                      context: {\r\n                        col: col,\r\n                        isNestedTable: false,\r\n                        section: sections,\r\n                        columnIndex: columnIndex,\r\n                        childColIndex: 0\r\n                      },\r\n                    \"\r\n                  ></ng-container>\r\n                </div>\r\n\r\n                <div\r\n                  class=\"resize-handle\"\r\n                  [class.w-100]=\"col.pinned == 'right'\"\r\n                  (dblclick)=\"autosizeColumn(col)\"\r\n                  (mousedown)=\"\r\n                    $event.stopPropagation(); onResizeColumn($event, col)\r\n                  \"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Filter Cell -->\r\n        <div\r\n          *ngIf=\"showFilterRow\"\r\n          [style.backgroundColor]=\"headerBackgroundColor\"\r\n          class=\"header-cell filter-cell\"\r\n          [class.border-right]=\"showVerticalBorder\"\r\n          [attr.field]=\"col.field\"\r\n          [style.width.px]=\"col.width\"\r\n          [style.min-width.px]=\"col.width\"\r\n          [style.height.px]=\"headerRowHeight\"\r\n          [style.min-height.px]=\"headerRowHeight\"\r\n          [style.max-height.px]=\"headerRowHeight\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control form-control-sm\"\r\n            placeholder=\"Filter\"\r\n            [(ngModel)]=\"col.filterValue\"\r\n            (ngModelChange)=\"onFilterChange(col)\"\r\n            [readonly]=\"col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\"\r\n            [class.disabled-search-input]=\"\r\n              col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\r\n            \"\r\n            (paste)=\"onPasteInFilterRowSearch($event, col)\"\r\n            (click)=\"\r\n              $event.stopPropagation(); openFilterFromDisabledSearchedInput(col)\r\n            \"\r\n            (keydown.enter)=\"applyDropdownFilter()\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n          <span\r\n            class=\"filter-icon-wrapper\"\r\n            (click)=\"$event.stopPropagation(); openFilter(col)\"\r\n            [class.filter-applied]=\"isFilterAppliedOnColumn(col)\"\r\n            [class.pe-none]=\"col?.type == 'image'\"\r\n            ><span\r\n              [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n            <span\r\n              *ngIf=\"isFilterAppliedOnColumn(col)\"\r\n              style=\"\r\n                width: 7px;\r\n                height: 7px;\r\n                box-shadow: 0px 0px 3px #7486ff;\r\n                background-color: rgb(0 163 233);\r\n                position: absolute;\r\n                right: 4px;\r\n                top: 12px;\r\n              \"\r\n              class=\"rounded-circle d-block\"\r\n            ></span\r\n          ></span>\r\n\r\n          <div\r\n            class=\"position-absolute filter-row-filter-wrapper\"\r\n            *ngIf=\"activeFilterCell === col\"\r\n            style=\"top: 100%; right: 0; z-index: 99\"\r\n            [style.left.px]=\"col?.pinned ? 0 : -centerPinnedHeader.scrollLeft\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\r\n            ></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n<!-- Body Cell Template -->\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n\r\n<ng-template\r\n  #rowCell\r\n  let-row\r\n  let-columns=\"columns\"\r\n  let-isEven=\"isEven\"\r\n  let-isOdd=\"isOdd\"\r\n  let-isLeftSection=\"isLeft\"\r\n  let-section=\"section\"\r\n  let-rowIndex=\"rowIndex\"\r\n  let-isTotalRow=\"isTotalRow\"\r\n>\r\n  <!-- Check if row is a group -->\r\n  <ng-container\r\n    *ngTemplateOutlet=\"groupRowTemplate; context: { $implicit: row, depth: 0 }\"\r\n  ></ng-container>\r\n  <ng-template #groupRowTemplate let-row let-depth=\"depth\">\r\n    <ng-container *ngIf=\"row.isGroup; else regularRow\">\r\n      <!-- Group Header -->\r\n      <div\r\n        class=\"group-header-row d-flex align-items-center\"\r\n        [style.height.px]=\"rowHeight\"\r\n        [class.border-below]=\"section !== 'center'\"\r\n        [style.width]=\"\r\n          section === 'center'\r\n            ? (centerScrollableBody?.scrollWidth ?? 0) + 'px'\r\n            : '100%'\r\n        \"\r\n      >\r\n        <div\r\n          *ngIf=\"section == 'left'\"\r\n          class=\"h-100 d-flex\"\r\n          [style.width.px]=\"leftPinnedHeader.offsetWidth - 1\"\r\n          [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n        >\r\n          <div\r\n            *ngIf=\"showSerialNumber\"\r\n            style=\"width: 50px\"\r\n            class=\"d-flex align-items-center h-100 border-right justify-content-end pe-2 s-no\"\r\n            [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n            [style.width.px]=\"55\"\r\n            [style.cursor]=\"\r\n              'url(' +\r\n              singleSpaAssetsPath +\r\n              'data-grid/icons/arrow-right.svg), auto'\r\n            \"\r\n            (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\r\n            (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\r\n            [style.color]=\"checkboxesColor\"\r\n          >\r\n            {{ getStartIndex() + (row.__virtualIndex - 1) || \"\" }}\r\n          </div>\r\n          <div\r\n          *ngIf=\"showCheckboxes\"\r\n            style=\"width: 50px\"\r\n            class=\"d-flex align-items-center justify-content-center h-100 border-right\"\r\n            [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n            [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n            [class.left-selection-border]=\"\r\n              rowSelectedIndexes.has(row.__virtualIndex)\r\n            \"\r\n            [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n            [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n            [style.color]=\"checkboxesColor\"\r\n          >\r\n            <input\r\n              style=\"width: 16px; height: 16px\"\r\n              type=\"checkbox\"\r\n              [checked]=\"getGroupCheckedState(row) === true\"\r\n              [indeterminate]=\"getGroupCheckedState(row) === undefined\"\r\n              (change)=\"selectGroupRow($event, row)\"\r\n            />\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"section == 'center'\"\r\n          [style.width.px]=\"centerPinnedHeader.scrollWidth\"\r\n          [style.minWidth.px]=\"centerPinnedHeader.scrollWidth\"\r\n          class=\"d-flex align-items-center ps-2 h-100 border-below\"\r\n          [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n          [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n          [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n        >\r\n          <div\r\n            class=\"d-flex align-items-center justify-content-between\"\r\n            [style.paddingLeft.px]=\"depth > 0 ? depth * 30 : 0\"\r\n          >\r\n            <span class=\"me-2 filter-icon-wrapper\" (click)=\"toggleExpand(row)\">\r\n              <span\r\n                class=\"data-grid-svg-icon align-items-center d-flex\"\r\n                [inlineSVG]=\"\r\n                  row.isExpand\r\n                    ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n                    : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                \"\r\n              ></span>\r\n            </span>\r\n            <strong (click)=\"toggleExpand(row)\" class=\"cursor-pointer\">\r\n              {{ row.groupValue }} ({{ countLeafRows(row) }})\r\n            </strong>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"section == 'right'\"\r\n          [style.width.px]=\"rightPinnedHeader.offsetWidth\"\r\n          [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n          [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n          [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n        ></div>\r\n      </div>\r\n\r\n      <!-- Recursive Children -->\r\n      <div class=\"group-children\" *ngIf=\"row.isExpand\" [@slideToggle]>\r\n        <ng-container\r\n          *ngFor=\"let child of row.children; let i = index; trackBy: trackById\"\r\n        >\r\n          <ng-container *ngIf=\"child.isGroup; else dataRow\">\r\n            <!-- Recursive call for nested group -->\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                groupRowTemplate;\r\n                context: { $implicit: child, depth: depth + 1 }\r\n              \"\r\n            ></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #dataRow>\r\n            <!-- Regular data row -->\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                rowCell;\r\n                context: {\r\n                  $implicit: child,\r\n                  columns: columns,\r\n                  isEven: i % 2 === 0,\r\n                  isOdd: i % 2 !== 0,\r\n                  isLeft: isLeftSection,\r\n                  section: section,\r\n                  isTotalRow: isTotalRow\r\n                }\r\n              \"\r\n            ></ng-container>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Regular row (not a group) -->\r\n  <ng-template #regularRow>\r\n    <div\r\n      class=\"d-flex\"\r\n      [style.height.px]=\"rowHeight\"\r\n      [style.minHeight.px]=\"rowHeight\"\r\n      [style.maxHeight.px]=\"rowHeight\"\r\n    >\r\n      <span\r\n        class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\r\n        style=\"min-width: 30px; height: 100%\"\r\n        *ngIf=\"\r\n          section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\r\n        \"\r\n        [ngStyle]=\"{\r\n          'background-color': rowSelectedIndexes.has(row.__virtualIndex)\r\n            ? null\r\n            : getBackgroundColor(row, isEven, section)\r\n        }\"\r\n        [class.selected-cell]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n        [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n        [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n      >\r\n        <span\r\n          (click)=\"toggleDetailRowExpand(row)\"\r\n          *ngIf=\"row?.detail?.result?.length || gridType === 'Tasks'\"\r\n          class=\"data-grid-svg-icon filter-icon-wrapper\"\r\n          [inlineSVG]=\"\r\n            isDetailsExpanded(row)\r\n              ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n              : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n        ></span>\r\n      </span>\r\n      <div\r\n        [style.min-width.px]=\"\r\n          section == 'center' && groupedColumns?.length ? groupBoxPadding : 0\r\n        \"\r\n        [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n        [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n        [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n        (contextmenu)=\"onRightClick($event, row)\"\r\n        [style.height.px]=\"rowHeight\"\r\n        class=\"data-grid-row h-100\"\r\n        [class.even-row]=\"isEven\"\r\n        [class.odd-row]=\"isOdd\"\r\n        [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\r\n        (mouseenter)=\"onRowHover(row)\"\r\n        (mouseleave)=\"onRowLeave()\"\r\n        [ngStyle]=\"{\r\n          'background-color': getBackgroundColor(row, isEven, section)\r\n        }\"\r\n        [style.minHeight.px]=\"rowHeight\"\r\n        [style.maxHeight.px]=\"rowHeight\"\r\n      ></div>\r\n      <div\r\n        (contextmenu)=\"onRightClick($event, row)\"\r\n        [style.height.px]=\"rowHeight\"\r\n        class=\"data-grid-row\"\r\n        [class.even-row]=\"isEven\"\r\n        [class.odd-row]=\"isOdd\"\r\n        [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\r\n        (mouseenter)=\"onRowHover(row)\"\r\n        (mouseleave)=\"onRowLeave()\"\r\n        [ngStyle]=\"{\r\n          'background-color': getBackgroundColor(row, isEven, section)\r\n        }\"\r\n      >\r\n        <div\r\n          [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n          class=\"select-all-checkbox-cell justify-content-end pe-2 s-no\"\r\n          [style.width.px]=\"55\"\r\n          *ngIf=\"isLeftSection && showSerialNumber\"\r\n          [style.cursor]=\"\r\n            'url(' +\r\n            singleSpaAssetsPath +\r\n            'data-grid/icons/arrow-right.svg), auto'\r\n          \"\r\n          (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\r\n          (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\r\n          [style.color]=\"checkboxesColor\"\r\n        >\r\n          {{ getStartIndex() + (row.__virtualIndex - 1) }}\r\n        </div>\r\n        <div\r\n        class=\"border-below\"\r\n          [style.backgroundColor]=\"\r\n            rowSelectedIndexes.has(row.__virtualIndex)\r\n              ? selectedRowsBackgroundColor\r\n              : checkboxesBackgroundColor\r\n          \"\r\n          class=\"select-all-checkbox-cell\"\r\n          *ngIf=\"isLeftSection && showCheckboxes\"\r\n          [class.left-selection-border]=\"\r\n            rowSelectedIndexes.has(row.__virtualIndex)\r\n          \"\r\n          [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n          [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n          [style.minHeight.px]=\"rowHeight - 1\"\r\n          [style.maxHeight.px]=\"rowHeight\"\r\n        >\r\n          <input\r\n            *ngIf=\"hasAnyVisibleColumn\"\r\n             style=\"width: 16px; height: 16px\"\r\n            type=\"checkbox\"\r\n            [checked]=\"isRowSelected(row)\"\r\n            (change)=\"toggleRowSelection(row)\"\r\n          />\r\n        </div>\r\n\r\n        <!-- Render all columns -->\r\n        <ng-container\r\n          *ngFor=\"\r\n            let col of columns;\r\n            trackBy: trackByField;\r\n            let colIndex = index\r\n          \"\r\n        >\r\n          <ng-container *ngIf=\"col.children?.length > 0; else flatColumn\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let child of col.children;\r\n                trackBy: trackByField;\r\n                let subColIndex = index\r\n              \"\r\n            >\r\n              <ng-container *ngIf=\"child?.is_visible && !child?.isRowGrouped\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    cellTemplate;\r\n                    context: {\r\n                      col: child,\r\n                      row: row,\r\n                      rowIndex: rowIndex,\r\n                      colIndex: colIndex,\r\n                      subColIndex: subColIndex,\r\n                      section: section,\r\n                      isTotalRow: isTotalRow\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #flatColumn>\r\n            <ng-container *ngIf=\"col?.is_visible && !col?.isRowGrouped\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  cellTemplate;\r\n                  context: {\r\n                    col: col,\r\n                    row: row,\r\n                    rowIndex: rowIndex,\r\n                    colIndex: colIndex,\r\n                    subColIndex: null,\r\n                    section: section,\r\n                    isTotalRow: isTotalRow\r\n                  }\r\n                \"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      [@slideToggle]\r\n      *ngIf=\"section === 'left' && isDetailsExpanded(row)\"\r\n      class=\"accordion-details\"\r\n      style=\"max-height: 350px; overflow: hidden\"\r\n      [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          leftRightNestedPlaceholder;\r\n          context: { $implicit: row }\r\n        \"\r\n      >\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      [@slideToggle]\r\n      *ngIf=\"section === 'center' && isDetailsExpanded(row)\"\r\n      class=\"accordion-details center-section\"\r\n      style=\"\r\n        max-height: 350px;\r\n        overflow-y: hidden;\r\n        overflow-x: auto;\r\n        scrollbar-width: thin;\r\n      \"\r\n      #nestedTable\r\n      [style.width]=\"\r\n        hasRightPinnedColumns\r\n          ? '100%'\r\n          : hasVerticalScroll\r\n          ? 'calc(100% - 12px)'\r\n          : '100%'\r\n      \"\r\n    >\r\n      <ng-container *ngIf=\"gridType == 'Assets'\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"nestedTableTemplate; context: { $implicit: row }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"gridType == 'Tasks'\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            taskManagementTemplate;\r\n            context: { taskDetails: row }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      [@slideToggle]\r\n      *ngIf=\"section === 'right' && isDetailsExpanded(row)\"\r\n      class=\"accordion-details\"\r\n      style=\"max-height: 350px; overflow: hidden\"\r\n      [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          leftRightNestedPlaceholder;\r\n          context: { $implicit: row }\r\n        \"\r\n      >\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<!-- Actual Cell is Here -->\r\n<ng-template\r\n  #cellTemplate\r\n  let-col=\"col\"\r\n  let-row=\"row\"\r\n  let-section=\"section\"\r\n  let-subColIndex=\"subColIndex\"\r\n  let-rowIndex=\"rowIndex\"\r\n  let-colIndex=\"colIndex\"\r\n  let-isTotalRow=\"isTotalRow\"\r\n>\r\n  <div\r\n    #cellContainer\r\n    (click)=\"\r\n      editingKey = ''; setActiveCell(row, col); collapseAllExpandedCells()\r\n    \"\r\n    [style.fontWeight]=\"bodyFontWeight\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    class=\"cell overflow-visible position-relative data-grid-cell\"\r\n    [attr.field]=\"col.field\"\r\n    [style.width.px]=\"col.width\"\r\n    [style.min-width.px]=\"col.width\"\r\n    [style.fontSize.px]=\"bodyTextFontsSize\"\r\n    [style.minHeight.px]=\"rowHeight\"\r\n    [style.maxHeight.px]=\"rowHeight\"\r\n    [class.active-cell]=\"\r\n      isActiveCell(row, col) && !isEditing(row, col) && selectedKeys.size == 1\r\n    \"\r\n    (dblclick)=\"\r\n      $event.stopPropagation();\r\n      $event.preventDefault();\r\n      enableEdit(row, col, false, cellContainer)\r\n    \"\r\n    [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n    [class.first-row-selected]=\"firstSelectedRow === row?.__virtualIndex\"\r\n    [class.last-row-selected]=\"lastSelectedRow === row?.__virtualIndex\"\r\n    tabindex=\"-1\"\r\n    (keydown.enter)=\"$event.preventDefault(); enableEdit(row, col)\"\r\n    (mousedown)=\"\r\n      startSelection(\r\n        row.__virtualIndex,\r\n        colIndex,\r\n        subColIndex ?? 0,\r\n        col.field,\r\n        $event,\r\n        section\r\n      )\r\n    \"\r\n    (mouseenter)=\"\r\n      extendSelection(\r\n        row.__virtualIndex,\r\n        colIndex,\r\n        subColIndex ?? 0,\r\n        col.field,\r\n        $event,\r\n        section\r\n      )\r\n    \"\r\n    (mouseup)=\"endSelection()\"\r\n    [class.selected-cell]=\"\r\n      isSelected(\r\n        row.__virtualIndex,\r\n        colIndex,\r\n        subColIndex ?? 0,\r\n        col.field,\r\n        section\r\n      )\r\n    \"\r\n    [class.top-border]=\"\r\n      isTopBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.bottom-border]=\"\r\n      isBottomBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.left-border]=\"\r\n      isLeftBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.right-border]=\"\r\n      isRightBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.top-left-corner]=\"\r\n      isTopLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.top-right-corner]=\"\r\n      isTopRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.bottom-left-corner]=\"\r\n      isBottomLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.bottom-right-corner]=\"\r\n      isBottomRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n  >\r\n    <!--  (mousedown)=\"startSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\r\n  (mouseenter)=\"extendSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\r\n  (mouseup)=\"endSelection()\"\r\n  [class.selected-cell]=\"isSelected(row.__virtualIndex, colIndex,  subColIndex ?? 0, col.field)\" -->\r\n    <div\r\n      class=\"table-cell\"\r\n      [class.active-for-editing]=\"\r\n        isEditing(row, col) &&\r\n        (getNestedValue(row, col.field)?.length === undefined ||\r\n          getNestedValue(row, col.field)?.length <= 50)\r\n      \"\r\n    >\r\n      <div\r\n        (click)=\"$event.stopPropagation()\"\r\n        *ngIf=\"\r\n          isEditing(row, col) &&\r\n            (getNestedValue(row, col.field)?.length === undefined ||\r\n              (getNestedValue(row, col.field)?.length <= 50 &&\r\n                !expandedCells.size));\r\n          else viewMode\r\n        \"\r\n      >\r\n\r\n       <ng-container *ngIf=\"col.cellEditor; else builtInEditors\">\r\n              <ng-container\r\n                [cellEditor]=\"col.cellEditor\"\r\n                [rowData]=\"row\"\r\n                [colData]=\"col\"\r\n                [cellValue]=\"getNestedValue(row, col.field)\"\r\n                (editorEvent)=\"finishEdit($event)\"\r\n              ></ng-container>\r\n        </ng-container>\r\n\r\n      <ng-template #builtInEditors>\r\n        <ng-container [ngSwitch]=\"col?.type\">\r\n          <!-- Text Input -->\r\n          <input\r\n            [style.height.px]=\"rowHeight - 10\"\r\n            *ngSwitchCase=\"'input'\"\r\n            type=\"text\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            (blur)=\"disableEdit(row, col)\"\r\n            autofocus\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            class=\"form-control form-control-sm\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n\r\n          <!-- Number Input -->\r\n          <input\r\n            [style.height.px]=\"rowHeight - 8\"\r\n            *ngSwitchCase=\"'number'\"\r\n            #numberInput=\"ngModel\"\r\n            #numberRef\r\n            (keypress)=\"allowOnlyNumbers($event)\"\r\n            type=\"number\"\r\n            required\r\n            [(ngModel)]=\"row[col.field]\"\r\n            (blur)=\"disableEdit(row, col, numberInput)\"\r\n            autofocus\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            class=\"form-control form-control-sm\"\r\n            [ngClass]=\"{\r\n              'is-invalid': numberInput.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n\r\n          <!-- Date Input -->\r\n          <input\r\n            [style.height.px]=\"rowHeight - 8\"\r\n            *ngSwitchCase=\"'date'\"\r\n            type=\"date\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            (blur)=\"disableEdit(row, col, dateInput)\"\r\n            autofocus\r\n            class=\"form-control form-control-sm\"\r\n            #dateInput=\"ngModel\"\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            [ngClass]=\"{\r\n              'is-invalid': dateInput.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n\r\n          <!-- Dropdown -->\r\n          <!-- ng-select like dropdown -->\r\n          <div\r\n            *ngSwitchCase=\"'dropdown'\"\r\n            class=\"dropdown w-100\"\r\n            (blur)=\"disableEdit(row, col)\"\r\n          >\r\n            <!-- Trigger -->\r\n            <button\r\n              class=\"form-select form-select-sm text-start w-100 text-ellipsis\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"dropdown\"\r\n              aria-expanded=\"false\"\r\n              [style.minHeight.px]=\"rowHeight - 10\"\r\n              data-bs-display=\"static\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n            >\r\n              <ng-container>\r\n                {{\r\n                  getNestedValue(row, col.field)?.value ||\r\n                    getNestedValue(row, col.field)?.name ||\r\n                    getNestedValue(row, col.field)\r\n                }}\r\n              </ng-container>\r\n              <ng-template #placeholder> Select options... </ng-template>\r\n            </button>\r\n\r\n            <!-- Menu -->\r\n            <div\r\n              class=\"dropdown-menu w-100 p-0 cell-editing-dropdown-menu rounded-3\"\r\n              [class.show]=\"isEditing(row, col)\"\r\n            >\r\n              <!-- Search -->\r\n              <div class=\"px-2 py-1 editing-dropdown-search-input\" *ngIf=\"col?.column_dropdown_value?.length > 5\">\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  placeholder=\"Search...\"\r\n                  [(ngModel)]=\"editinDropdownSearch\"\r\n                  (mousedown)=\"$event.stopPropagation()\"\r\n                />\r\n              </div>\r\n              <cdk-virtual-scroll-viewport \r\n                    itemSize=\"35\" \r\n                    class=\"dropdown-viewport\"\r\n                    style=\"height: 120px\"\r\n                  >\r\n                    <div\r\n                    [class.selected]=\"getNestedValue(row, col.field) == option?.value || getNestedValue(row, col.field) == option\"\r\n                      class=\"px-2 py-1 d-flex align-items-center dropdown-item\"\r\n                      *cdkVirtualFor=\"\r\n                        let option of col.column_dropdown_value \r\n                          | filter : editinDropdownSearch : 'value'\r\n                      \"\r\n                      (click)=\"setNestedValue(row, col, option, true); editingKey = null\"\r\n                    >\r\n                      <label\r\n                        \r\n                        class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\r\n                        [for]=\"col.field + '-' + (option.value || option)\"\r\n                      >\r\n                        {{ option.value || option }}\r\n                      </label>\r\n                    </div>\r\n                </cdk-virtual-scroll-viewport>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <input\r\n            *ngSwitchCase=\"'email'\"\r\n            [style.height.px]=\"rowHeight - 10\"\r\n            [style.maxHeight.px]=\"rowHeight - 10\"\r\n            #emailModel=\"ngModel\"\r\n            #emailInput\r\n            type=\"email\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            name=\"{{ col.field }}\"\r\n            required\r\n            pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\"\r\n            (blur)=\"disableEdit(row, col, emailModel)\"\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            autofocus\r\n            class=\"form-control form-control-sm\"\r\n            [ngClass]=\"{\r\n              'is-invalid': emailModel.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n          <!-- Default fallback -->\r\n          <input\r\n            *ngSwitchDefault\r\n            [style.height.px]=\"rowHeight - 10\"\r\n            [style.maxHeight.px]=\"rowHeight - 10\"\r\n            #textModel=\"ngModel\"\r\n            #textInput\r\n            type=\"text\"\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            name=\"{{ col.field }}\"\r\n            required\r\n            (blur)=\"disableEdit(row, col, textModel)\"\r\n            autofocus\r\n            class=\"form-control form-control-sm\"\r\n            [ngClass]=\"{\r\n              'is-invalid': textModel.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      </div>\r\n\r\n      <!-- Display mode -->\r\n      <ng-template #viewMode>\r\n        <div\r\n          class=\"d-flex justify-content-between align-items-center w-100 overflow-hidden\"\r\n          [ngClass]=\"getCellClasses(col, getNestedValue(row, col.field))\"\r\n        >\r\n          <!-- Field icon (for Tasks grid) -->\r\n          <ng-container\r\n            *ngIf=\"gridType === 'Tasks' && iconMap[col.field] && !isTotalRow\"\r\n          >\r\n            <span\r\n              class=\"cursor-pointer me-2\"\r\n              (click)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n              [inlineSVG]=\"iconMap[col.field](row, col)\"\r\n            ></span>\r\n          </ng-container>\r\n\r\n          <!-- \u2705 Custom cell renderer support -->\r\n          <ng-container *ngIf=\"col.cellRenderer; else defaultCell\">\r\n            <ng-container\r\n              [cellRenderInit]=\"col.cellRenderer\"\r\n              [rowData]=\"row\"\r\n              [colData]=\"col\"\r\n              [cellValue]=\"getNestedValue(row, col?.field)\"\r\n              (cellEvent)=\"onCellEvent($event)\"\r\n            >\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <!-- \uD83E\uDDFE Default text-based cell rendering -->\r\n          <ng-template #defaultCell>\r\n            <div\r\n              #cellText\r\n              class=\"text-ellipsis flex-grow-1\"\r\n              [title]=\"getCellTitle(row, col)\"\r\n            >\r\n              <!-- Normal cell -->\r\n              <ng-container\r\n                *ngIf=\"\r\n                  col?.type !== 'image' &&\r\n                  col?.field != 'image' &&\r\n                  col?.field != 'invoice.invoice_image' &&\r\n                  !isTotalRow\r\n                \"\r\n              >\r\n                <ng-container *ngIf=\"col.is_amount\">{{\r\n                  currencySymbol\r\n                }}</ng-container>\r\n                {{getCellTitle(row, col)}}\r\n              </ng-container>\r\n\r\n              <!-- Total row -->\r\n              <ng-container *ngIf=\"isTotalRow\">\r\n                {{ getTotalAmount(col) }}\r\n              </ng-container>\r\n\r\n              <!-- Invoice Image -->\r\n              <ng-container *ngIf=\"col.field == 'invoice.invoice_image'\">\r\n                <div style=\"display: flex; align-items: center; zoom: 0.7\">\r\n                  <span\r\n                    title=\"{{ getNestedValue(row, col.field) || 'Attachment' }}\"\r\n                    (click)=\"downloadAttchment(getNestedValue(row, col.field))\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath +\r\n                      'data-grid/document-icons/' +\r\n                      getExtention(getNestedValue(row, col.field)) +\r\n                      '.svg'\r\n                    \"\r\n                  ></span>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <!-- Image cell -->\r\n              <ng-container *ngIf=\"col?.type == 'image' && !isTotalRow\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    defaultImagePlaceholder;\r\n                    context: { row: row, col: col }\r\n                  \"\r\n                ></ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <span\r\n            *ngIf=\"\r\n              (!col?.cellRenderer && showCellDetailsBox &&\r\n                getNestedValue(row, col.field)?.length > 50 && col?.type !== 'image') ||\r\n              (isNestedValueArray(row, col.field) &&\r\n                getNestedValue(row, col.field)?.length > 1)\r\n            \"\r\n            class=\"toggle-icon data-grid-svg-icon ms-2 cursor-pointer\"\r\n            [inlineSVG]=\"\r\n              isExpanded(row, col)\r\n                ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n                : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n            \"\r\n            (click)=\"\r\n              $event.stopPropagation();\r\n              toggleExpandOfLongCellText(row, col, columns, true)\r\n            \"\r\n            (dblclick)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n          ></span>\r\n          </ng-template>\r\n          <!-- Expand / Collapse icon -->\r\n        </div>\r\n\r\n        <!-- Expanded text -->\r\n        <div\r\n          class=\"position-absolute w-100 expanded-box\"\r\n          *ngIf=\"isExpanded(row, col)\"\r\n          [style.zIndex]=\"getZIndex(row, col)\"\r\n          style=\"top: 100%; left: 0\"\r\n          [attr.id]=\"(row.id || row._id) + '-' + (col.id || col._id)\"\r\n          [class.invisible]=\"!showDetailsBox\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              fullTextTemplate;\r\n              context: {\r\n                row: row,\r\n                col: col,\r\n                isArray: isNestedValueArray(row, col.field)\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Headers Action List On clicking three dots -->\r\n\r\n<ng-template\r\n  #columnMenu\r\n  let-col=\"col\"\r\n  let-isNestedTable=\"isNestedTable\"\r\n  let-columns=\"columns\"\r\n  let-section=\"section\"\r\n  let-columnIndex=\"columnIndex\"\r\n  let-childColIndex=\"childColIndex\"\r\n>\r\n  <div\r\n    class=\"column-menu three-dots-col-menu\"\r\n    [class.visually-hidden]=\"isMenueHidden\"\r\n    *ngIf=\"activeCol && !isThreeDotsFilterOpen\"\r\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [style.color]=\"headerTextColor\"\r\n  >\r\n    <!-- Sort Ascending -->\r\n    <div class=\"border-below pb-2\" [class.disable-sorting]=\"!col.is_sortable\">\r\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span>\r\n      <div\r\n        *ngIf=\"\r\n          columnThreedotsMunuConfig?.showAscending &&\r\n          (sortingConfig?.field != col.field ||\r\n            sortingConfig?.order_by == 'desc')\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"sortAsc(activeCol)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-up.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Sort Ascending\r\n      </div>\r\n\r\n      <!-- Sort Descending -->\r\n      <div\r\n        *ngIf=\"\r\n          columnThreedotsMunuConfig?.showDescending &&\r\n          (sortingConfig?.field != col.field ||\r\n            sortingConfig?.order_by == 'asc')\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"sortDesc(activeCol)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-down.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Sort Descending\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"\r\n          sortingConfig?.field === col.field &&\r\n          (sortingConfig?.order_by === 'asc' ||\r\n            sortingConfig?.order_by === 'desc')\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"resetSort(activeCol)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\r\n          \"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Reset Sort\r\n      </div>\r\n    </div>\r\n    <div class=\"py-2 border-below three-dots-filter\" [class.disable-sorting]=\"col?.type == 'image' || !col.is_search_able\">\r\n      <div\r\n        *ngIf=\"columnThreedotsMunuConfig?.showFilter\"\r\n        class=\"column-menu-item three-dots-filter\"\r\n        (click)=\"openFilteronThreeDotsClick(col)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Filter\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"py-2 border-below\">\r\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span>\r\n      <div\r\n        *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\"\r\n        class=\"column-menu-item\"\r\n        (click)=\"\r\n          $event.stopPropagation();\r\n          updateColumnPinInSourceByField(\r\n            activeCol,\r\n            'left',\r\n            isNestedTable,\r\n            columns\r\n          )\r\n        \"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin-left.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span\r\n        >Pin Left\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"\r\n          columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"\r\n          $event.stopPropagation();\r\n          updateColumnPinInSourceByField(\r\n            activeCol,\r\n            'right',\r\n            isNestedTable,\r\n            columns\r\n          )\r\n        \"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin-right.svg'\"\r\n          class=\"data-grid-svg-icon data-grid-svg-icon me-2\"\r\n        ></span\r\n        >Pin Right\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"col?.pinned\"\r\n        class=\"column-menu-item\"\r\n        (click)=\"\r\n          $event.stopPropagation();\r\n          updateColumnPinInSourceByField(\r\n            activeCol,\r\n            null,\r\n            isNestedTable,\r\n            columns\r\n          )\r\n        \"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\r\n          \"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span\r\n        >Unpin\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showAutosizeThisColumn\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"autosizeColumn(activeCol)\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"\r\n          singleSpaAssetsPath + 'data-grid/icons/arrows-expand-vertical.svg'\r\n        \"\r\n        class=\"me-2\"\r\n      ></span>\r\n      Autosize This Column\r\n    </div>\r\n\r\n    <!-- Autosize All Columns -->\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showAutosizeAllColumns\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"autosizeAllColumns()\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"\r\n          singleSpaAssetsPath + 'data-grid/icons/arrows-angle-expand.svg'\r\n        \"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span\r\n      >Autosize All Columns\r\n    </div>\r\n\r\n    <!-- Group By -->\r\n    <div\r\n      *ngIf=\"showRowsGrouping\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"groupBy(activeCol)\"\r\n      [class.disable-sorting]=\"!col.is_groupable\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/diagram-3.svg'\"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span>\r\n      Group by {{ col.header }}\r\n    </div>\r\n\r\n    <!-- Choose Columns -->\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showChoseColumns\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"chooseColumns()\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span>\r\n      Choose Columns\r\n    </div>\r\n\r\n    <!-- Reset Columns -->\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showResetColumns\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"resetColumns()\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"\r\n          singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\r\n        \"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span\r\n      >Reset Columns\r\n    </div>\r\n  </div>\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"isThreeDotsFilterOpen && col?.is_search_able\"\r\n    class=\"three-dots-col-menu position-relative\"\r\n    [style.right.px]=\"getDynamicRight(col, section, columnIndex, childColIndex)\"\r\n    [class.visually-hidden]=\"isMenueHidden\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Filter Menue -->\r\n<ng-template #filterMenu let-col=\"col\">\r\n  <div\r\n    class=\"filter-menu-container filter-menu\"\r\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\r\n  >\r\n    <!-- Dropdown Type -->\r\n    <ng-container *ngIf=\"col?.type === 'dropdown'|| col?.type == 'array'; else textFilter\">\r\n      <div class=\"filter-dropdown-section p-1\">\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search...\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"addFilterColumnInput\"\r\n        />\r\n\r\n        <div class=\"form-check mb-1 mt-2 ms-1 select-all-filter\">\r\n          <input\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            [checked]=\"isAllSideFilterOptionsSelected(col)\"\r\n            (change)=\"toggleSelectAllSideFilters(col, $event)\"\r\n            id=\"selectAll_{{ col.field }}\"\r\n          />\r\n          <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\r\n            Select All\r\n          </label>\r\n        </div>\r\n\r\n        <!-- <div class=\"dropdown-options ps-1\">\r\n          <div\r\n            class=\"form-check mb-1\"\r\n            *ngFor=\"\r\n              let option of selectedColumnForFilter?.column_dropdown_value\r\n                | filter : addFilterColumnInput : 'value';\r\n              trackBy: trackById;\r\n              let i = index\r\n            \"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              [id]=\"i\"\r\n              [checked]=\"\r\n                currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\r\n              \"\r\n              (change)=\"toggleSelectionInFilter(option)\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" [for]=\"i\">\r\n              {{ option?.value ?? option?.name ?? option }}\r\n            </label>\r\n          </div>\r\n        </div> -->\r\n        <cdk-virtual-scroll-viewport\r\n              itemSize=\"32\"\r\n              class=\"filter-viewport\"\r\n              style=\"height: 120px\"\r\n            >\r\n              <div\r\n                class=\"form-check mb-1 ms-1\"\r\n                *cdkVirtualFor=\"\r\n                  let option of selectedColumnForFilter?.column_dropdown_value\r\n                    | filter : addFilterColumnInput : 'value';\r\n                  trackBy: trackById\r\n                \"\r\n              >\r\n                <input\r\n                  class=\"form-check-input\"\r\n                  type=\"checkbox\"\r\n                  [id]=\"option?.id ?? option?._id ?? option\"\r\n                  [checked]=\"\r\n                    currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\r\n                  \"\r\n                  (change)=\"toggleSelectionInFilter(option)\"\r\n                />\r\n\r\n                <label\r\n                  class=\"form-check-label fw-semibold\"\r\n                  [for]=\"option?.id ?? option?._id ?? option\"\r\n                >\r\n                  {{ ((option?.value ?? option?.name ?? option) | titlecase ) }}\r\n                </label>\r\n              </div>\r\n          </cdk-virtual-scroll-viewport>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- Text Filter Section -->\r\n    <ng-template #textFilter>\r\n      <div class=\"filter-text-section\">\r\n        <div class=\"form-group mb-2\">\r\n          <select\r\n            class=\"form-select form-select-sm custom-select\"\r\n            [(ngModel)]=\"firstCondition\"\r\n          >\r\n            <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n              <option value=\"contain\">Contains</option>\r\n              <option value=\"does_not_contain\">Does Not Contain</option>\r\n              <option value=\"equal\">Equals</option>\r\n              <option value=\"before\">Starts With</option>\r\n              <option value=\"after\">Ends With</option>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"not_equal\">Not Equal</option>\r\n              <option value=\"after\">After</option>\r\n              <option value=\"before\">Before</option>\r\n            </ng-container>\r\n\r\n             <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"before\">Less Then </option>\r\n              <option value=\"after\">Greater Then </option>\r\n              <option value=\"less_then_equal\">less then Equal to</option>\r\n              <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n          </select>\r\n        </div>\r\n\r\n        <input\r\n          [type]=\"col?.type == 'string' ? 'text' : col?.type\"\r\n          class=\"form-control form-control-sm mb-3\"\r\n          placeholder=\"Value\"\r\n          [(ngModel)]=\"firstValue\"\r\n          #filterMenueTextchInput\r\n          (keydown.enter)=\"applyDropdownFilter()\"\r\n        />\r\n\r\n        <div class=\"form-group mb-3 d-flex flex-row\">\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"condition\"\r\n              value=\"and\"\r\n              id=\"and_{{ col.field }}\"\r\n              (change)=\"cdr.detectChanges()\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\r\n              >AND</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"condition\"\r\n              value=\"or\"\r\n              id=\"or_{{ col.field }}\"\r\n              (change)=\"cdr.detectChanges()\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\r\n              >OR</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"condition\"\r\n              value=\"none\"\r\n              id=\"none_{{ col.field }}\"\r\n              (change)=\"cdr.detectChanges()\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"none_{{ col.field }}\"\r\n              >None</label\r\n            >\r\n          </div>\r\n        </div>\r\n        <div @slideToggle *ngIf=\"firstValue && condition != 'none'\">\r\n          <div class=\"form-group mb-2\">\r\n            <select\r\n              class=\"form-select form-select-sm custom-select\"\r\n              [(ngModel)]=\"secondCondition\"\r\n            >\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n                <option value=\"contain\">Contains</option>\r\n                <option value=\"does_not_contain\">Does Not Contain</option>\r\n                <option value=\"equal\">Equals</option>\r\n                <option value=\"before\">Starts With</option>\r\n                <option value=\"after\">Ends With</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"not_equal\">Not Equal</option>\r\n                <option value=\"after\">After</option>\r\n                <option value=\"before\">Before</option>\r\n              </ng-container>\r\n\r\n               <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"before\">Less Then </option>\r\n                <option value=\"after\">Greater Then </option>\r\n                <option value=\"less_then_equal\">less then Equal to</option>\r\n                <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n            </select>\r\n          </div>\r\n\r\n          <input\r\n            [type]=\"col?.type == 'string' ? 'text' : col?.type\"\r\n            class=\"form-control form-control-sm mb-3\"\r\n            placeholder=\"Second Value\"\r\n            [(ngModel)]=\"secondValue\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Actions -->\r\n    <div class=\"d-flex gap-2 mt-2\">\r\n      <div\r\n        class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center w-100\"\r\n        style=\"height: 30px\"\r\n        (click)=\"applyDropdownFilter()\"\r\n      >\r\n        Apply\r\n      </div>\r\n      <div\r\n        class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center w-100\"\r\n        style=\"height: 30px\"\r\n        (click)=\"resetSideFilter(col)\"\r\n      >\r\n        Reset\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Side Menue -->\r\n\r\n<!-- Column Pannel / Pivot Mode / Searching -->\r\n\r\n<ng-template #columnPannel>\r\n  <div class=\"column-panel-header\">\r\n    <!-- Pivot Toggle -->\r\n    <div\r\n      class=\"form-check form-switch d-flex align-items-center mb-2 pivot-mode px-5 ms-2 d-none\"\r\n    >\r\n      <input\r\n        class=\"form-check-input me-2\"\r\n        type=\"checkbox\"\r\n        id=\"pivotToggle\"\r\n        [(ngModel)]=\"pivotMode\"\r\n      />\r\n      <label class=\"form-check-label\" for=\"pivotToggle\">Pivot Mode</label>\r\n    </div>\r\n\r\n    <!-- Select All & Search -->\r\n    <div class=\"d-flex align-items-center mb-2 px-3 mt-3\">\r\n      <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            accordionState === 'all'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n              : accordionState === 'some'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\r\n              : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          (click)=\"toggleAllAccordions()\"\r\n        ></span>\r\n      </span>\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"form-check-input me-2\"\r\n        [checked]=\"allColumnsSelected()\"\r\n        (change)=\"toggleAllColumnsVisibility()\"\r\n      />\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control form-control-sm\"\r\n        placeholder=\"Search columns...\"\r\n        [(ngModel)]=\"columnSearch\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Separator -->\r\n    <hr class=\"my-2\" />\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Right Columns Menue -->\r\n\r\n<!-- Column Panel Item Template -->\r\n<ng-template #columnPanelItem let-col=\"col\">\r\n  <!-- Group Column -->\r\n  <ng-container *ngIf=\"col.children?.length\">\r\n    <div class=\"column-group d-flex align-items-center mb-2\">\r\n      <span class=\"filter-icon-wrapper me-2\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          [class.rotate]=\"col.expanded\"\r\n          (click)=\"col.expanded = !col.expanded\"\r\n        ></span>\r\n      </span>\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"form-check-input me-2\"\r\n        [id]=\"'group_' + col.header\"\r\n        [checked]=\"isColumnVisible(col)\"\r\n        (change)=\"toggleGroupVisibility(col)\"\r\n      />\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\r\n      ></span>\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        [for]=\"'group_' + col.header\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <span class=\"text-truncate\">{{ col.header }}</span>\r\n      </label>\r\n    </div>\r\n    <div *ngIf=\"col.expanded\" class=\"ps-4\">\r\n      <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"columnPanelItem; context: { col: child }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Leaf Column -->\r\n  <ng-container *ngIf=\"!col.children?.length\">\r\n    <div class=\"d-flex align-items-center mb-2\">\r\n      <span class=\"me-2\" style=\"width: 1.5rem\"></span>\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"form-check-input me-2\"\r\n        [(ngModel)]=\"col.is_visible\"\r\n        [id]=\"'col_' + col.field\"\r\n        (change)=\"onSideMenuColumnsVisibilityChange()\"\r\n      />\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\r\n      ></span>\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        [for]=\"'col_' + col.field\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <span class=\"text-truncate\">{{ col.header }}</span>\r\n      </label>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!-- Columns Side Filter -->\r\n<ng-template #sideFilters>\r\n  <div class=\"py-3 px-2 pe-3 h-100\">\r\n    <div class=\"d-flex align-items-center mb-2\">\r\n      <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            filterAccordionState === 'all'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n              : filterAccordionState === 'some'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\r\n              : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          (click)=\"toggleAllFilterAccordions()\"\r\n        ></span>\r\n      </span>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control form-control-sm\"\r\n        placeholder=\"Search...\"\r\n        [(ngModel)]=\"columnSearch\"\r\n      />\r\n    </div>\r\n    <div\r\n      class=\"overflow-auto side-filter-columns-wrapper\"\r\n      style=\"height: calc(100% - 70px); scrollbar-width: thin\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of columns | filter : columnSearch : 'header';\r\n          trackBy: trackByField\r\n        \"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"filterPannelItem; context: { col: col }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #filterPannelItem let-col=\"col\">\r\n  <!-- Group Column -->\r\n  <ng-container *ngIf=\"col.children?.length\">\r\n    <div\r\n      class=\"column-group d-flex align-items-center mb-2\"\r\n      *ngIf=\"col?.type !== 'image'\"\r\n    >\r\n      <!-- Chevron toggle -->\r\n      <span class=\"filter-icon-wrapper me-2\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          [class.rotate]=\"col.expandedFilter\"\r\n          (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n        ></span>\r\n      </span>\r\n\r\n      <!-- Group label toggle -->\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        style=\"cursor: pointer\"\r\n        (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n      >\r\n        <span class=\"fw-bold text-truncate\"\r\n          >{{ col.header }}\r\n          <span\r\n            class=\"text-primary ms-1\"\r\n            *ngIf=\"col?.query?._ids?.length || col?.query?._first_value\"\r\n            >*</span\r\n          >\r\n        </span>\r\n      </label>\r\n    </div>\r\n\r\n    <!-- Children columns -->\r\n    <div *ngIf=\"col.expandedFilter\" class=\"ps-4\">\r\n      <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"filterPannelItem; context: { col: child }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Leaf Column -->\r\n  <ng-container *ngIf=\"!col.children?.length\">\r\n    <div class=\"d-flex align-items-center mb-2\" *ngIf=\"col?.type !== 'image'\">\r\n      <span\r\n        class=\"me-2 filter-icon-wrapper me-2\"\r\n        (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n      >\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          [class.rotate]=\"col.expandedFilter\"\r\n        ></span>\r\n      </span>\r\n\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        style=\"cursor: pointer\"\r\n        (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n      >\r\n        <span class=\"text-truncate fw-bold\">{{ col.header }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <!-- Show filter when expanded -->\r\n    <div *ngIf=\"col.expandedFilter\" class=\"ps-4 pe-3\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"sideNestedFilter; context: { col: col }\"\r\n      ></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!-- Side Nested Filters -->\r\n<ng-template #sideNestedFilter let-col=\"col\">\r\n  <div class=\"\">\r\n    <!-- Dropdown Type -->\r\n    <ng-container *ngIf=\"col?.type === 'dropdown' || col?.type == 'array'; else textFilter\">\r\n      <div class=\"p-1\">\r\n        <!-- Search -->\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm mb-2\"\r\n          placeholder=\"Search...\"\r\n          [(ngModel)]=\"sideNestedFilterSearch\"\r\n        />\r\n\r\n        <!-- Select All -->\r\n        <div class=\"form-check mb-1 ms-1 select-all-filter\">\r\n          <input\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            [checked]=\"\r\n              col.query?._ids?.length == col?.column_dropdown_value?.length\r\n            \"\r\n            (change)=\"toggleSelectAllSideFilters(col, $event)\"\r\n            id=\"selectAll_{{ col.field }}\"\r\n          />\r\n          <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\r\n            Select All\r\n          </label>\r\n        </div>\r\n\r\n        <!-- Options -->\r\n        <!-- <div class=\"dropdown-options\">\r\n          <div\r\n            class=\"form-check mb-1 ms-1\"\r\n            *ngFor=\"\r\n              let option of col?.column_dropdown_value\r\n                | filter : sideNestedFilterSearch : 'value'\r\n            \"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              [value]=\"option\"\r\n              [checked]=\"\r\n                col.query?._ids?.includes(option?._id || option?.id || option)\r\n              \"\r\n              (change)=\"onOptionToggle(col, option)\"\r\n              id=\"option_{{ col.field }}_{{\r\n                option?.id || option?._id || option\r\n              }}\"\r\n            />\r\n            <label\r\n              class=\"form-check-label\"\r\n              [for]=\"\r\n                'option_' +\r\n                col.field +\r\n                '_' +\r\n                (option?.id || option?._id || option)\r\n              \"\r\n            >\r\n              {{ option.value || option }}\r\n            </label>\r\n          </div>\r\n        </div> -->\r\n        <cdk-virtual-scroll-viewport\r\n            itemSize=\"32\"\r\n            class=\"dropdown-viewport\"\r\n            style=\"height: 120px\"\r\n          >\r\n            <div\r\n              class=\"form-check mb-1 ms-1\"\r\n              *cdkVirtualFor=\"\r\n                let option of col?.column_dropdown_value\r\n                  | filter : sideNestedFilterSearch : 'value'\r\n              \"\r\n            >\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [value]=\"option\"\r\n                [checked]=\"\r\n                  col.query?._ids?.includes(option?._id || option?.id || option)\r\n                \"\r\n                (change)=\"onOptionToggle(col, option)\"\r\n                id=\"option_{{ col.field }}_{{\r\n                  option?.id || option?._id || option\r\n                }}\"\r\n              />\r\n\r\n              <label\r\n                class=\"form-check-label\"\r\n                [for]=\"\r\n                  'option_' +\r\n                  col.field +\r\n                  '_' +\r\n                  (option?.id || option?._id || option)\r\n                \"\r\n              >\r\n                {{( (option.value || option) | titlecase ) }}\r\n              </label>\r\n            </div>\r\n          </cdk-virtual-scroll-viewport>\r\n\r\n\r\n        <!-- Actions -->\r\n        <!-- <div class=\"d-flex gap-2 mt-2\">\r\n      <div\r\n        class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\"\r\n        style=\"height: 22px;\"\r\n        (click)=\"applySideFilter(col)\"\r\n      >\r\n        Apply\r\n      </div>\r\n      <div\r\n        class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" \r\n        style=\"height: 22px;\"\r\n        (click)=\"resetSideFilter(col)\"\r\n      >\r\n        Reset\r\n      </div>\r\n    </div> -->\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- Text Filter Section -->\r\n    <ng-template #textFilter>\r\n      <div class=\"filter-text-section\">\r\n        <div class=\"form-group mb-2\">\r\n          <select\r\n            class=\"form-select form-select-sm\"\r\n            [(ngModel)]=\"col.query.first_condition\"\r\n          >\r\n            <ng-container *ngIf=\"col?.type == 'string'\">\r\n              <option value=\"contain\">Contains</option>\r\n               <option value=\"does_not_contain\">Does Not Contain</option>\r\n              <option value=\"equal\">Equals</option>\r\n              <option value=\"before\">Starts With</option>\r\n              <option value=\"after\">Ends With</option>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"col?.type == 'date'\">\r\n              <option value=\"equal\">Equals To</option>\r\n               <option value=\"not_equal\">Not Equal</option>\r\n              <option value=\"after\">After</option>\r\n              <option value=\"before\">Before</option>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"col?.type == 'number'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"before\">Less Then </option>\r\n              <option value=\"after\">Greater Then </option>\r\n              <option value=\"less_then_equal\">less then Equal to</option>\r\n              <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n          </select>\r\n        </div>\r\n\r\n        <input\r\n          [type]=\"col?.type == 'date' ? 'date' : 'text'\"\r\n          class=\"form-control form-control-sm mb-3\"\r\n          placeholder=\"Value\"\r\n          [(ngModel)]=\"col!.query!.first_value\"\r\n        />\r\n\r\n        <div\r\n          class=\"form-group mb-3 d-flex flex-row muted\"\r\n          style=\"font-size: 14px\"\r\n        >\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"col!.query.condition\"\r\n              value=\"and\"\r\n              id=\"and_{{ col.field }}\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\r\n              >AND</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"col!.query.condition\"\r\n              value=\"or\"\r\n              id=\"or_{{ col.field }}\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\r\n              >OR</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"col!.query.condition\"\r\n              value=\"none\"\r\n              id=\"none_{{ col.field }}\"\r\n            />\r\n            <label\r\n              class=\"nnonem-check-label mb-0 mt-1\"\r\n              for=\"none_{{ col.field }}\"\r\n              >None</label\r\n            >\r\n          </div>\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"col?.query?.first_value && col?.query?.condition !== 'none'\"\r\n        >\r\n          <div class=\"form-group mb-2\">\r\n            <select\r\n              class=\"form-select form-select-sm\"\r\n              [(ngModel)]=\"col!.query.second_condition\"\r\n            >\r\n              <ng-container *ngIf=\"col?.type == 'string'\">\r\n                <option value=\"contain\">Contains</option>\r\n                <option value=\"does_not_contain\">Does Not Contain</option>\r\n                <option value=\"equal\">Equals</option>\r\n                <option value=\"before\">Starts With</option>\r\n                <option value=\"after\">Ends With</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"col?.type == 'date'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                 <option value=\"not_equal\">Not Equal</option>\r\n                <option value=\"after\">After</option>\r\n                <option value=\"before\">Before</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"col?.type == 'number'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"before\">Less Then </option>\r\n                <option value=\"after\">Greater Then </option>\r\n                <option value=\"less_then_equal\">less then Equal to</option>\r\n                <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n            </select>\r\n          </div>\r\n\r\n          <input\r\n            [type]=\"col?.type == 'date' ? 'date' : 'text'\"\r\n            class=\"form-control form-control-sm mb-3\"\r\n            placeholder=\"Second Value\"\r\n            [(ngModel)]=\"col!.query.second_value\"\r\n          />\r\n        </ng-container>\r\n        <!-- <div class=\"d-flex gap-2\">\r\n          <div class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">apply</div>\r\n          <div class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">reset</div>\r\n\r\n        </div> -->\r\n      </div>\r\n    </ng-template>\r\n    <div\r\n      class=\"d-flex justify-content-center gap-2 border-top\"\r\n      style=\"height: 38px\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        style=\"max-height: 30px\"\r\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\r\n        (click)=\"$event.stopPropagation(); removeSideFilter(col)\"\r\n      >\r\n        <span>Clear</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        style=\"max-height: 30px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\r\n        (click)=\"applySideFilter(col)\"\r\n        [class.disabled]=\"(col?.query.condition !== 'none' && !col?.query?.second_value)\"\r\n        [class.pe-none]=\"(col!?.query.condition !== 'none' && !col?.query?.second_value)\"\r\n      >\r\n        <span style=\"margin-top: -1px\">Apply</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Centr Overlay for showing the chose columns -->\r\n\r\n<div *ngIf=\"showColumnPanel\" class=\"custom-modal-overlay\">\r\n  <div\r\n    class=\"custom-modal-content\"\r\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"modalColumnPannel\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<!-- The existing ng-template you provided -->\r\n<ng-template #modalColumnPannel>\r\n  <div class=\"column-panel-header\">\r\n    <div\r\n      class=\"d-flex justify-content-between align-items-center px-2 ps-3 rounded-top-2 moda-header\"\r\n      [style.height.px]=\"48\"\r\n    >\r\n      Choose Columns\r\n      <span class=\"filter-icon-wrapper\" (click)=\"closeModalColumnPanel()\"\r\n        ><span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span\r\n      ></span>\r\n    </div>\r\n    <hr class=\"my-0\" />\r\n    <div>\r\n      <div class=\"d-flex align-items-center px-2 pe-3\" [style.height.px]=\"48\">\r\n        <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\r\n          <span\r\n            class=\"toggle-icon data-grid-svg-icon\"\r\n            [inlineSVG]=\"\r\n              accordionState === 'all'\r\n                ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n                : accordionState === 'some'\r\n                ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\r\n                : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n            \"\r\n            (click)=\"toggleAllAccordions()\"\r\n          ></span>\r\n        </span>\r\n        <input\r\n          type=\"checkbox\"\r\n          class=\"form-check-input me-2\"\r\n          [checked]=\"allColumnsSelected()\"\r\n          (change)=\"toggleAllColumnsVisibility()\"\r\n        />\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search columns...\"\r\n          [(ngModel)]=\"choseColumnsSearch\"\r\n        />\r\n      </div>\r\n\r\n      <hr class=\"mt-0 mb-1\" />\r\n      <div class=\"px-2 overlay-scrollable\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let col of columns | filter : choseColumnsSearch : 'header';\r\n            trackBy: trackByField\r\n          \"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #sideMenuRowGroups>\r\n  <div class=\"d-flex flex-column h-100 d-none\">\r\n    <div class=\"px-3 h-100\">\r\n      <div class=\"d-flex gap-3 mb-4\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span>\r\n        <span>Row Groups</span>\r\n      </div>\r\n      <div class=\"h-50\">\r\n        <div\r\n          class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\r\n          style=\"font-size: 14px\"\r\n        >\r\n          Drag here to set row Groups\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <hr class=\"mt-4\" />\r\n\r\n    <div class=\"px-3 h-100\">\r\n      <div class=\"d-flex gap-3 mb-4\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span>\r\n        <span>Values</span>\r\n      </div>\r\n      <div class=\"h-50 d-flex\">\r\n        <div\r\n          class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\r\n          style=\"font-size: 14px\"\r\n        >\r\n          Drag here aggregate\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- *************************************************** -->\r\n<!-- *************************************************** -->\r\n<!-- *************************************************** -->\r\n<!-- Drag Preview Template -->\r\n<!-- *************************************************** -->\r\n<!-- *************************************************** -->\r\n<ng-template #dragPreview let-col>\r\n  <div class=\"p-2 border d-flex gap-2\">\r\n    <div>\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n      ></span>\r\n    </div>\r\n    <div>{{ col.header }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Drag Placeholder Template -->\r\n<ng-template\r\n  #dragPlaceholder\r\n  let-col\r\n  let-i=\"index\"\r\n  let-section=\"section\"\r\n  let-draggingInGroupArea=\"draggingInGroupArea\"\r\n>\r\n  <div *ngIf=\"!draggingInGroupArea\">\r\n    <div\r\n      *ngTemplateOutlet=\"\r\n        headerCell;\r\n        context: { $implicit: col, index: i, section: section }\r\n      \"\r\n    ></div>\r\n  </div>\r\n  <div *ngIf=\"draggingInGroupArea\">New Placeholder</div>\r\n</ng-template>\r\n\r\n<!-- Top Group Row Placeholder -->\r\n<ng-template #topGroupingRowPlaceholder let-col let-showChevron=\"showChevron\">\r\n  <div class=\"d-flex gap-2\">\r\n    <div\r\n      class=\"d-flex gap-2 top-row-grouping-placeholder\"\r\n      [style.backgroundColor]=\"topGroupedBadgesBackgroundColor\"\r\n    >\r\n      <span\r\n        cdkDragHandle\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n      ></span>\r\n      <span>{{ col.header }}</span>\r\n      <span\r\n        (click)=\"ungroupColumn(col)\"\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\r\n        class=\"cursor-pointer data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n      ></span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"showChevron\" style=\"opacity: 0.6; font-size: 14px\">\r\n    <span\r\n      [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\r\n      class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n    ></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #childHeaderPlaceholder\r\n  let-col\r\n  let-pinnedRight=\"pinnedRight\"\r\n  let-i=\"index\"\r\n  let-sections=\"sections\"\r\n>\r\n  <div\r\n    class=\"header-cell one-row-header-cells\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    [style.width.px]=\"col.width\"\r\n    [style.min-width.px]=\"col.width\"\r\n    [style.min-height.px]=\"headerRowHeight\"\r\n    [style.max-height.px]=\"headerRowHeight\"\r\n    [style.fontWeight]=\"headerFontWeight\"\r\n  >\r\n    <div class=\"d-flex justify-content-between h-100 align-items-center w-100\">\r\n      <div\r\n        class=\"d-flex justify-content-between align-items-center w-100\"\r\n        [class.flex-row-reverse]=\"pinnedRight\"\r\n      >\r\n        <div\r\n          class=\"text-ellipsis h-100 d-flex align-items-center\"\r\n          [title]=\"col.header\"\r\n          [class.w-100]=\"pinnedRight\"\r\n        >\r\n          {{ col.header }}\r\n        </div>\r\n\r\n        <div\r\n          class=\"position-relative d-flex\"\r\n          [class.flex-row-reverse]=\"pinnedRight\"\r\n        >\r\n          <div class=\"three-dots p-1\" style=\"cursor: pointer\">\r\n            <span\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/three-dots-vertical.svg'\r\n              \"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"resize-handle\">\r\n            <span\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n              \"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"showFilterRow\"\r\n    [style.backgroundColor]=\"headerBackgroundColor\"\r\n    class=\"header-cell filter-cell\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    [style.width.px]=\"col.width\"\r\n    [style.min-width.px]=\"col.width\"\r\n    [style.height.px]=\"headerRowHeight\"\r\n    [style.min-height.px]=\"headerRowHeight\"\r\n    [style.max-height.px]=\"headerRowHeight\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    style=\"grid-row: 3\"\r\n  >\r\n    <div\r\n      class=\"header-cell filter-cell\"\r\n      [style.backgroundColor]=\"headerBackgroundColor\"\r\n      [style.width.px]=\"col.width\"\r\n      [style.min-width.px]=\"col.width\"\r\n      [style.height.px]=\"headerRowHeight\"\r\n      [style.min-height.px]=\"headerRowHeight\"\r\n      [style.max-height.px]=\"headerRowHeight\"\r\n    >\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control form-control-sm\"\r\n        placeholder=\"Filter\"\r\n        [(ngModel)]=\"col.filterValue\"\r\n        [readonly]=\"col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\"\r\n        [class.disabled-search-input]=\"\r\n          col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\r\n        \"\r\n      />\r\n      <span\r\n        class=\"filter-icon-wrapper\"\r\n        (click)=\"activeFilterCell = col; activeCol = null\"\r\n        ><span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span\r\n      ></span>\r\n\r\n      <div\r\n        class=\"position-absolute\"\r\n        *ngIf=\"activeFilterCell === col\"\r\n        style=\"top: 100%; right: 0; z-index: 10; left: 0\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tableLayout>\r\n  <div\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"p-3 shadow actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\r\n    style=\"width: 320px\"\r\n  >\r\n    <div class=\"d-flex align-items-center mb-3\">\r\n      <button\r\n        class=\"btn btn-link p-0\"\r\n        style=\"margin-left: -10px\"\r\n        (click)=\"toggleActions('setting')\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n      </button>\r\n      <h6 class=\"mb-0 ms-2\" style=\"font-weight: 500\">Table Layout</h6>\r\n    </div>\r\n    <hr class=\"my-2\" />\r\n    <div class=\"w-100 mb-3 d-flex\" role=\"group\">\r\n      <input\r\n        type=\"radio\"\r\n        class=\"btn-check layout-button-check\"\r\n        name=\"layoutSize\"\r\n        id=\"small\"\r\n        autocomplete=\"off\"\r\n        (change)=\"changeTableLayout($event, 'small')\"\r\n        [checked]=\"selectedTableLayout == 'small'\"\r\n      />\r\n      <label\r\n        class=\"border d-flex flex-column align-items-center layout-button\"\r\n        for=\"small\"\r\n        [ngStyle]=\"{\r\n          color: selectedTableLayout == 'small' ? '#000' : '#727272'\r\n        }\"\r\n      >\r\n        <div class=\"preview-box border mb-1\" style=\"height: 8px\"></div>\r\n        Small\r\n      </label>\r\n\r\n      <input\r\n        type=\"radio\"\r\n        class=\"btn-check layout-button-check\"\r\n        name=\"layoutSize\"\r\n        id=\"medium\"\r\n        autocomplete=\"off\"\r\n        [checked]=\"selectedTableLayout == 'medium'\"\r\n        (change)=\"changeTableLayout($event, 'medium')\"\r\n      />\r\n      <label\r\n        class=\"border mx-3 d-flex flex-column align-items-center layout-button\"\r\n        for=\"medium\"\r\n        [ngStyle]=\"{\r\n          color: selectedTableLayout == 'medium' ? '#000' : '#727272'\r\n        }\"\r\n      >\r\n        <div class=\"preview-box border mb-1\" style=\"height: 12px\"></div>\r\n        Medium\r\n      </label>\r\n\r\n      <input\r\n        type=\"radio\"\r\n        class=\"btn-check layout-button-check\"\r\n        name=\"layoutSize\"\r\n        id=\"large\"\r\n        autocomplete=\"off\"\r\n        (change)=\"changeTableLayout($event, 'large')\"\r\n        [checked]=\"selectedTableLayout == 'large'\"\r\n      />\r\n      <label\r\n        class=\"border d-flex flex-column align-items-center layout-button\"\r\n        for=\"large\"\r\n        [ngStyle]=\"{\r\n          color: selectedTableLayout == 'large' ? '#000' : '#727272'\r\n        }\"\r\n      >\r\n        <div class=\"preview-box border mb-1\" style=\"height: 16px\"></div>\r\n        Large\r\n      </label>\r\n    </div>\r\n\r\n    <hr class=\"my-2\" />\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <span>Show separators</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          type=\"checkbox\"\r\n          id=\"separators\"\r\n          [(ngModel)]=\"showVerticalBorder\"\r\n          (change)=\"onFontChange()\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <span>Row shading</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          [(ngModel)]=\"rowShadingEnabled\"\r\n          (change)=\"toggleRowShading()\"\r\n          type=\"checkbox\"\r\n          id=\"rowShading\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <span>Show Side Menu</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          [(ngModel)]=\"showSideMenu\"\r\n          type=\"checkbox\"\r\n          id=\"rowShading\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <span>Show Filter Row</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          [(ngModel)]=\"showFilterRow\"\r\n          type=\"checkbox\"\r\n          id=\"rowShading\"\r\n        />\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tablePreset>\r\n  <div\r\n    *ngIf=\"activeSubButton !== 'save-preset'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"p-3 shadow actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\r\n    style=\"width: 280px\"\r\n  >\r\n    <!-- Header -->\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <button\r\n          class=\"btn btn-link p-0\"\r\n          style=\"margin-left: -10px\"\r\n          (click)=\"toggleActions('setting')\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n            class=\"data-grid-svg-icon\"\r\n          ></span>\r\n        </button>\r\n        <h6 class=\"mb-0 ms-2\" style=\"font-weight: 500\">Table Presets</h6>\r\n      </div>\r\n      <!-- Save Preset Button with Dropdown -->\r\n      <div>\r\n        <a\r\n          class=\"text-decoration-none text-primary\"\r\n          type=\"button\"\r\n          id=\"savePresetDropdown\"\r\n          (click)=\"$event.stopPropagation(); toggleSubActions('save-preset')\"\r\n        >\r\n          {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Search -->\r\n    <div class=\"mb-3\">\r\n      <div class=\"col-12 global-search\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\r\n        ></span>\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search...\"\r\n          [(ngModel)]=\"searchTextPresetTable\"\r\n          type=\"search\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Preset List -->\r\n    <ng-container\r\n      *ngIf=\"\r\n        tableView | filter : searchTextPresetTable : 'name' as filteredList\r\n      \"\r\n    >\r\n      <!-- If filteredList exists and none is default -> show fallback -->\r\n      <div\r\n        class=\" pb-5 overflow-auto\"\r\n        [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 250\"\r\n      >\r\n        <div\r\n          class=\"cursor-pointer\"\r\n          (click)=\"\r\n            clearAllFilters();\r\n            openIndex = null;\r\n            temp_state.id = '';\r\n            activeTopButton = '';\r\n            curretaTablePresetForUpdate = null\r\n          \"\r\n        >\r\n          <div class=\"fw-semibold\">Default View</div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-between\">\r\n          <small class=\"text-dark\">Created by system</small>\r\n          <span\r\n            *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\r\n            class=\"badge bg-light text-primary ms-2\"\r\n            >Default</span\r\n          >\r\n          <!-- <span\r\n            *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\"\r\n            class=\"me-2\"\r\n          ></span> -->\r\n          <div\r\n            class=\"dropdown d-flex justify-content-end\"\r\n            *ngIf=\"tableFilterViewId\"\r\n          ></div>\r\n        </div>\r\n\r\n        <!-- The list: render each table from filteredList -->\r\n        <div\r\n          class=\"list-group list-group-flush\"\r\n          *ngFor=\"\r\n            let table of filteredList;\r\n            let i = index;\r\n            trackBy: trackByTable\r\n          \"\r\n        >\r\n          <!-- Item -->\r\n          <div\r\n            (click)=\"\r\n              $event.stopPropagation(); openIndex = null; activeTopButton = ''\r\n            \"\r\n            class=\"list-group-item px-0 d-flex justify-content-between align-items-center\"\r\n          >\r\n            <div (click)=\"selectFilter(table); openIndex = null\">\r\n              <div class=\"fw-semibold\" style=\"cursor: pointer\">\r\n                {{ table?.name }}\r\n                <!-- {{table?.is_temp}} -->\r\n                <span\r\n                  *ngIf=\"\r\n                    (table?.is_temp && !temp_state.id) ||\r\n                    temp_state.id == table.id\r\n                  \"\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\r\n                  \"\r\n                  class=\"me-2\"\r\n                ></span>\r\n                <span\r\n                  *ngIf=\"table?.is_default\"\r\n                  class=\"badge bg-light text-primary ms-2\"\r\n                  >Default</span\r\n                >\r\n              </div>\r\n              <small class=\"text-dark\" *ngIf=\"table?.config?.filterNames\" [title]=\"table?.config?.filterNames\">\r\n              {{\r\n              table?.config?.filterNames?.length > 25\r\n              ? (table?.config?.filterNames | slice:0:25) + '...'\r\n              : table?.config?.filterNames\r\n              }}\r\n              ({{ table?.config?.totalCount }})\r\n            </small>\r\n             <small class=\"text-dark\" *ngIf=\"!table?.config?.filterNames\">{{ table?.createdAt | date : \"MMM d, y\" }}</small>\r\n            </div>\r\n\r\n            <div class=\"d-flex align-items-center\">\r\n              <span\r\n                *ngIf=\"table?.is_default\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\r\n                \"\r\n                class=\"me-2\"\r\n              ></span>\r\n\r\n              <div class=\"dropdown\" *ngIf=\"!table?.is_default\">\r\n                <div\r\n                  class=\"dropdown-wrapper\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"btn-icon muted-text\"\r\n                    (click)=\"toggleMenu(i, $event)\"\r\n                    aria-haspopup=\"true\"\r\n                    [attr.aria-expanded]=\"openIndex === i\"\r\n                  >\r\n                    <span\r\n                      [inlineSVG]=\"\r\n                        singleSpaAssetsPath +\r\n                        'data-grid/icons/horizontal-dots.svg'\r\n                      \"\r\n                      class=\"me-2\"\r\n                    ></span>\r\n                  </button>\r\n\r\n                  <!-- menu -->\r\n                 <ul\r\n                    *ngIf=\"openIndex === i\"\r\n                    class=\"custom-dropdown-menu position-fixed top-auto\"\r\n                    role=\"menu\"\r\n                    [style.right.px]=\"'unset'\"\r\n                    [style.left.px]=\"dataGridContainer.offsetWidth - 200\"\r\n                    style=\"top: unset; right: unset\"\r\n                  >\r\n                    <li role=\"none\">\r\n                      <button\r\n                        role=\"menuitem\"\r\n                        class=\"dropdown-item\"\r\n                        (click)=\"\r\n                          actionPreset(table, 'setPreset'); temp_state.id = ''\r\n                        \"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath + 'data-grid/icons/star.svg'\r\n                          \"\r\n                          class=\"me-2\"\r\n                        ></span>\r\n                        Set as default\r\n                      </button>\r\n                    </li>\r\n\r\n                    <li role=\"none\" *ngIf=\"!table.confirmDelete\">\r\n                      <button\r\n                        role=\"menuitem\"\r\n                        class=\"dropdown-item text-danger\"\r\n                        (click)=\"table.confirmDelete = true\"\r\n                      >\r\n                        <span\r\n                          style=\"margin-top: -4px\"\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/trash-red.svg'\r\n                          \"\r\n                          class=\"me-2\"\r\n                        ></span>\r\n                        Delete\r\n                      </button>\r\n                    </li>\r\n\r\n                    <li\r\n                      role=\"none\"\r\n                      *ngIf=\"table.confirmDelete\"\r\n                      class=\"confirm-block\"\r\n                    >\r\n                      <div class=\"px-3 py-2 text-center\">\r\n                        <div class=\"mb-2\">\r\n                          Are you sure you want to delete <br /><b\r\n                            >\u201C{{ table?.name }}\u201D</b\r\n                          >?\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                          <button\r\n                            class=\"btn btn-sm btn-light me-2\"\r\n                            (click)=\"table.confirmDelete = false\"\r\n                          >\r\n                            Cancel\r\n                          </button>\r\n                          <button\r\n                            class=\"btn btn-sm btn-danger\"\r\n                            (click)=\"actionPreset(table, 'deletePreset')\"\r\n                          >\r\n                            Delete\r\n                          </button>\r\n                        </div>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- Item End Here -->\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div\r\n    (click)=\"$event.stopPropagation()\"\r\n    *ngIf=\"activeSubButton == 'save-preset'\"\r\n    class=\"dropdown-menu p-3 badge mt-4 save-preset-dropdown mt-1\"\r\n    aria-labelledby=\"savePresetDropdown\"\r\n    style=\"min-width: 250px\"\r\n  >\r\n    <div class=\"fw-bold fs-14px mb-2\">\r\n      {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\r\n    </div>\r\n    <div class=\"fs-14px mb-2\" style=\"line-height: 20px\">\r\n      This will save the current table adjustments as a preset.\r\n    </div>\r\n    <!-- Input -->\r\n    <div class=\"mb-2\">\r\n      <label for=\"presetName\" class=\"form-label fs-12px fw-bold\"\r\n        >Preset Name</label\r\n      >\r\n      <div class=\"col-12 global-search\">\r\n        <input\r\n          #presetNameCtrl=\"ngModel\"\r\n          required\r\n          [(ngModel)]=\"presetName\"\r\n          [ngClass]=\"{\r\n            'is-invalid':\r\n              presetNameCtrl.invalid &&\r\n              (presetNameCtrl.dirty || presetNameCtrl.touched)\r\n          }\"\r\n          class=\"form-control form-control-sm ps-2\"\r\n          placeholder=\"Enter preset name\"\r\n          type=\"text\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Checkbox -->\r\n    <div class=\"form-check mb-2\">\r\n      <input\r\n        class=\"form-check-input\"\r\n        [(ngModel)]=\"presetFilter\"\r\n        type=\"checkbox\"\r\n        id=\"saveFilters\"\r\n      />\r\n      <label class=\"form-check-label mt-1\" for=\"saveFilters\">\r\n        Save active filters\r\n      </label>\r\n    </div>\r\n\r\n    <!-- Save Button -->\r\n    <div class=\"d-flex justify-content-center gap-2\" style=\"height: 32px\">\r\n      <button\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn border w-100 d-flex align-items-center justify-content-center btn-light\"\r\n        (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\r\n        style=\"margin-top: -2px\"\r\n      >\r\n        <span>Cancel</span>\r\n      </button>\r\n      <button\r\n        [disabled]=\"closeDropdown.preset.loading\"\r\n        (click)=\"savePreset(presetNameCtrl)\"\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center\"\r\n      >\r\n        <span style=\"margin-top: -2px\" *ngIf=\"isTablePresetNotChanged\">\r\n          <ng-container *ngIf=\"!closeDropdown.preset.loading\"\r\n            >Save</ng-container\r\n          >\r\n          <ng-container *ngIf=\"closeDropdown.preset.loading\"\r\n            ><span class=\"spinner-border spinner-border-sm\"></span\r\n          ></ng-container>\r\n        </span>\r\n        <span style=\"white-space: nowrap\" *ngIf=\"!isTablePresetNotChanged\"\r\n          >Update Preset</span\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showHideColumns>\r\n  <div\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"p-3 shadow actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\r\n    style=\"width: 280px\"\r\n  >\r\n    <!-- Header -->\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <button\r\n          class=\"btn btn-link p-0\"\r\n          style=\"margin-left: -10px\"\r\n          (click)=\"toggleActions('setting')\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n            class=\"data-grid-svg-icon\"\r\n          ></span>\r\n        </button>\r\n        <h6 class=\"mb-0 ms-2\" style=\"font-weight: 500\">Columns</h6>\r\n      </div>\r\n      <a\r\n        (click)=\"resetColumns()\"\r\n        href=\"javascript:void(0)\"\r\n        class=\"text-primary text-decoration-none d-none\"\r\n        >Reset</a\r\n      >\r\n    </div>\r\n\r\n    <!-- Search -->\r\n    <div class=\"mb-3\">\r\n      <div class=\"col-12 global-search\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"mx-2 position-absolute icon data-grid-svg-icon\"\r\n        ></span>\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search column\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"topShowHideColumns\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <!-- Preset List -->\r\n    <div\r\n      class=\"list-group list-group-flush\"\r\n      style=\"overflow: auto; scrollbar-width: thin\"\r\n      [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 220\"\r\n    >\r\n      <div class=\"muted-text show-hide-table-label d-flex justify-content-between\" *ngIf=\"hasAnyVisibleColumn\">\r\n        Show in table\r\n         <div class=\"form-check\">\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              id=\"hide_all\"\r\n              [checked]=\"allColumnsSelected()\"\r\n              (change)=\"toggleAllColumnsVisibility()\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" for=\"hide_all\">\r\n              Show/Hide All \r\n            </label>\r\n          </div>\r\n      </div>\r\n      <!-- Item -->\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of columns | filter : topShowHideColumns : 'header';\r\n          trackBy: trackByField\r\n        \"\r\n      >\r\n        <div\r\n          *ngIf=\"col.is_visible\"\r\n          class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\r\n        >\r\n          <div class=\"d-flex gap-1\">\r\n            <div>\r\n              <span\r\n                *ngIf=\"!col?.pinned\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\r\n                \"\r\n                class=\"cursor-grap data-grid-svg-icon\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              ></span>\r\n              <span\r\n                *ngIf=\"col?.pinned\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                \"\r\n                class=\"cursor-grap data-grid-svg-icon\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              ></span>\r\n            </div>\r\n            <div class=\"fw-semibold\">\r\n              {{ col.header }}\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"!col?.query?.first_value && !col?.query?._ids?.length\"\r\n            class=\"d-flex align-items-center cursor-pointer\"\r\n            (click)=\"toggleColumnVisibility(col, false)\"\r\n            [class.disabled]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\r\n            [class.pe-none]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\r\n            [class.opacity-50]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\r\n          >\r\n            <span\r\n              [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\r\n              class=\"data-grid-svg-icon me-2\"\r\n            ></span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"col?.query?.first_value || col?.query?._ids?.length\"\r\n            class=\"d-flex align-items-center\"\r\n            style=\"opacity: 0.5\"\r\n          >\r\n            <span\r\n              [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\r\n              class=\"data-grid-svg-icon me-2\"\r\n            ></span>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- Item End Here -->\r\n\r\n      <div\r\n        class=\"dropdown-divider\"\r\n        *ngIf=\"hasAnyVisibleColumn && hasAnyInVisibleColumn\"\r\n      ></div>\r\n\r\n      <div\r\n        class=\"muted-text show-hide-table-label d-flex justify-content-between\"\r\n        *ngIf=\"hasAnyInVisibleColumn\"\r\n      >\r\n        Hide in table\r\n        <div class=\"form-check\">\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              id=\"show_all\"\r\n              [checked]=\"allColumnsSelected()\"\r\n              (change)=\"toggleAllColumnsVisibility()\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" for=\"show_all\">\r\n              Show/Hide All \r\n            </label>\r\n          </div>\r\n      </div>\r\n      <div class=\"list-group list-group-flush\">\r\n        <ng-container *ngFor=\"let col of columns; trackBy: trackByField\">\r\n          <div\r\n            *ngIf=\"!col.is_visible\"\r\n            class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\r\n          >\r\n            <div class=\"d-flex gap-1\">\r\n              <div>\r\n                <span\r\n                  *ngIf=\"!col?.pinned\"\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon cursor-grap\"\r\n                  (mousedown)=\"$event.preventDefault()\"\r\n                ></span>\r\n                <span\r\n                  *ngIf=\"col?.pinned\"\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon cursor-grap\"\r\n                  (mousedown)=\"$event.preventDefault()\"\r\n                ></span>\r\n              </div>\r\n              <div class=\"fw-semibold\">\r\n                {{ col.header }}\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"d-flex align-items-center cursor-pointer\"\r\n              (click)=\"toggleColumnVisibility(col, true)\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Item End Here -->\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #filterColumns let-col=\"column\">\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"!isFilterOpen && activeTopButton == 'filter-columns'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns\"\r\n    style=\"width: 280px; right: unset; max-width: 230px\"\r\n    [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n  >\r\n    <div class=\"mb-2 px-3\">\r\n      <div class=\"col-12 global-search\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\r\n        ></span>\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Filter by\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"addFilterColumnInput\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-group list-group-flush\"\r\n      style=\"max-height: calc(100vh - 500px); overflow: auto\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of columns | filter : addFilterColumnInput : 'header';\r\n          trackBy: trackByField\r\n        \"\r\n      >\r\n        <div\r\n          (click)=\"openFilter(col)\"\r\n          *ngIf=\"\r\n            col.is_visible &&\r\n            !col?.query?.first_value &&\r\n            !col?.query?._ids?.length && col?.type !== 'image' && col.is_search_able\r\n          \"\r\n          class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\r\n        >\r\n          <div class=\"d-flex gap-1\">\r\n            <div style=\"margin-top: -3px\"></div>\r\n            <div class=\"fw-semibold\">\r\n              {{ col.header }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown -->\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"isFilterOpen && selectedColumnForFilter?.type == 'dropdown' || selectedColumnForFilter?.type == 'array'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\r\n    style=\"width: 280px; right: unset; max-width: 230px\"\r\n    [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n  >\r\n    <div class=\"px-3 my-2 border-below py-1 pb-2 mb-3 d-flex ps-1\">\r\n      <span\r\n        (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n        class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n      ></span\r\n      ><b>{{ selectedColumnForFilter?.header }}</b>\r\n    </div>\r\n    <div class=\"mb-2 px-3\">\r\n      <div\r\n        class=\"col-12 global-search position-relative border rounded d-flex align-items-center flex-wrap px-2 filter-serach-inpt\"\r\n      >\r\n        <span\r\n          *ngFor=\"let selected of selectedFilterOptions\"\r\n          class=\"badge d-flex align-items-center gap-1 me-1 mb-1 top-row-filter-dropdown\"\r\n        >\r\n          {{ selected?.value ? selected.value : selected }}\r\n          <span\r\n            (click)=\"toggleSelectionInFilter(selected)\"\r\n            [inlineSVG]=\"\r\n              singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\r\n            \"\r\n            class=\"me-2\"\r\n          ></span>\r\n        </span>\r\n        <input\r\n          class=\"form-control form-control-sm border-0 flex-grow-1\"\r\n          style=\"padding: 0\"\r\n          [placeholder]=\"selectedFilterOptions?.length ? '' : 'Filter by'\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"searchTextForFilterDropDown\"\r\n          (keydown.backspace)=\"handleBackspace($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-group list-group-flush\"\r\n      style=\"max-height: calc(100vh - 600px); overflow: auto\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of selectedColumnForFilter.column_dropdown_value\r\n            | filter : searchTextForFilterDropDown : 'value';\r\n          let i = index\r\n        \"\r\n      >\r\n        <div\r\n          class=\"list-group-item border-0 px-2 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\r\n        >\r\n          <div class=\"form-check\">\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              [id]=\"i\"\r\n              [checked]=\"currentFilterSelectedIds.has(col.id || col._id || col)\"\r\n              (change)=\"toggleSelectionInFilter(col)\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" [for]=\"i\">\r\n              {{ col?.value || col?.name || col }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      class=\"d-flex justify-content-center gap-2 px-2 border-top\"\r\n      style=\"height: 38px\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\r\n        (click)=\"$event.stopPropagation(); resetFilterChanges()\"\r\n      >\r\n        <span>Cancel</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\r\n        (click)=\"applyDropdownFilter()\"\r\n      >\r\n        <span style=\"margin-top: -2px\">Save</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- For Text fields and number fields-->\r\n\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"\r\n      isFilterOpen &&\r\n      (selectedColumnForFilter?.type == 'string' ||\r\n        selectedColumnForFilter?.type == 'number' ||\r\n        selectedColumnForFilter?.type == 'date')\r\n    \"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\r\n    style=\"width: 210px; right: unset; max-width: 230px\"\r\n    [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n  >\r\n    <div class=\"px-3 border-below py-1 pb-2 d-flex ps-1\">\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n        (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\r\n        class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n      ></span\r\n      ><b>{{ selectedColumnForFilter?.header }}</b>\r\n    </div>\r\n    <div class=\"col-12 position-relative p-2 text-filter\">\r\n      <div class=\"mb-2\">\r\n        <select\r\n          class=\"form-select form-select-sm custom-select border\"\r\n          [(ngModel)]=\"firstCondition\"\r\n        >\r\n          <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n            <option value=\"contain\">Contains</option>\r\n             <option value=\"does_not_contain\">Does Not Contain</option>\r\n            <option value=\"equal\">Equals</option>\r\n            <option value=\"before\">Starts With</option>\r\n            <option value=\"after\">Ends With</option>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n            <option value=\"equal\">Equals To</option>\r\n             <option value=\"not_equal\">Not Equal</option>\r\n            <option value=\"after\">After</option>\r\n            <option value=\"before\">Before</option>\r\n          </ng-container>\r\n\r\n           <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"before\">Less Then </option>\r\n              <option value=\"after\">Greater Then </option>\r\n              <option value=\"less_then_equal\">less then Equal to</option>\r\n              <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n        </select>\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Enter first value\"\r\n          type=\"search\"\r\n          [type]=\"\r\n            selectedColumnForFilter?.type == 'string'\r\n              ? 'text'\r\n              : selectedColumnForFilter?.type\r\n          \"\r\n          [(ngModel)]=\"firstValue\"\r\n          (keydown.enter)=\"applyDropdownFilter()\"\r\n        />\r\n      </div>\r\n      <div>\r\n        <div class=\"d-flex my-3 d-flex flex-row\" style=\"font-size: 14px\">\r\n          <div\r\n            class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"radio\"\r\n              id=\"logicalAnd\"\r\n              name=\"logicalOperator\"\r\n              value=\"and\"\r\n              [(ngModel)]=\"condition\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"logicalAnd\"\r\n              >AND</label\r\n            >\r\n          </div>\r\n\r\n          <div\r\n            class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"radio\"\r\n              id=\"logicalOr\"\r\n              name=\"logicalOperator\"\r\n              value=\"or\"\r\n              [(ngModel)]=\"condition\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"logicalOr\">OR</label>\r\n          </div>\r\n\r\n          <div\r\n            class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"radio\"\r\n              id=\"logicalNone\"\r\n              name=\"logicalOperator\"\r\n              value=\"none\"\r\n              [(ngModel)]=\"condition\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"logicalNone\"\r\n              >None</label\r\n            >\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"condition !== 'none' && firstValue\">\r\n          <div class=\"mb-2 mt-3\">\r\n            <!-- Second condition select -->\r\n            <select\r\n              class=\"form-select form-select-sm border\"\r\n              [(ngModel)]=\"secondCondition\"\r\n            >\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n                <option value=\"contain\">Contains</option>\r\n                <option value=\"does_not_contain\">Does Not Contain</option>\r\n                <option value=\"equal\">Equals</option>\r\n                <option value=\"before\">Starts With</option>\r\n                <option value=\"after\">Ends With</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"not_equal\">Not Equal</option>\r\n                <option value=\"after\">After</option>\r\n                <option value=\"before\">Before</option>\r\n              </ng-container>\r\n               <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"before\">Less Then </option>\r\n                <option value=\"after\">Greater Then </option>\r\n                <option value=\"less_then_equal\">less then Equal to</option>\r\n                <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n            </select>\r\n          </div>\r\n\r\n          <div class=\"mb-2\">\r\n            <!-- Second value input -->\r\n            <input\r\n              [type]=\"\r\n                selectedColumnForFilter?.type == 'string'\r\n                  ? 'text'\r\n                  : selectedColumnForFilter?.type\r\n              \"\r\n              class=\"form-control form-control-sm\"\r\n              placeholder=\"Enter second value\"\r\n              type=\"search\"\r\n              [(ngModel)]=\"secondValue\"\r\n              (keydown.enter)=\"applyDropdownFilter()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"d-flex justify-content-center gap-2 px-2 border-top\"\r\n      style=\"height: 38px\"\r\n    >\r\n      <button\r\n        [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\r\n        (click)=\"$event.stopPropagation(); resetTextFilterChanges()\"\r\n      >\r\n        <span>Cancel</span>\r\n      </button>\r\n      <button\r\n        [disabled]=\"(currentFilterSelectedIds?.size === 0 && !firstValue) || (condition !== 'none' && !secondValue)\"\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\r\n        (click)=\"applyDropdownFilter()\"\r\n      >\r\n        <span style=\"margin-top: -2px\">Apply</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Edit dropdown here -->\r\n<ng-template let-col>\r\n  <div class=\"drop-down-edit\"></div>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #fullTextTemplate\r\n  let-row=\"row\"\r\n  let-col=\"col\"\r\n  let-isArray=\"isArray\"\r\n>\r\n  <div\r\n    class=\"full-text-box\"\r\n    (dblclick)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n    [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\r\n  >\r\n    <ng-container *ngIf=\"!isEditing(row, col)\">\r\n      <div\r\n        *ngIf=\"!isArray\"\r\n        class=\"full-text-content\"\r\n        [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\r\n        (dblclick)=\"\r\n          $event.stopPropagation();\r\n          $event.preventDefault();\r\n          enableEdit(row, col, true)\r\n        \"\r\n        (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n      >\r\n        {{\r\n          getNestedValue(row, col.field)?.value ||\r\n            getNestedValue(row, col.field)?.name ||\r\n            getNestedValue(row, col.field)\r\n        }}\r\n      </div>\r\n      <div *ngIf=\"isArray\">\r\n        <ul>\r\n          <ng-container\r\n            *ngFor=\"let item of getNestedValue(row, col.field); let i = index\"\r\n          >\r\n            <li *ngIf=\"i !== 0\">\r\n              <ng-container>\r\n                {{\r\n                  item?.department_name ||\r\n                    item?.roleName ||\r\n                    item?.full_name ||\r\n                    \"-\"\r\n                }}\r\n              </ng-container>\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isEditing(row, col)\">\r\n      <textarea\r\n        (dblclick)=\"\r\n          $event.stopPropagation();\r\n          $event.preventDefault();\r\n          enableEdit(row, col, true)\r\n        \"\r\n        #textModel=\"ngModel\"\r\n        rows=\"4\"\r\n        #textAreadInput\r\n        [(ngModel)]=\"row[col.field]\"\r\n        name=\"{{ col.field }}\"\r\n        required\r\n        (blur)=\"disableEdit(row, col, textModel)\"\r\n        (keydown.enter)=\"textAreadInput.blur()\"\r\n        autofocus\r\n        class=\"form-control\"\r\n        [ngClass]=\"{\r\n          'is-invalid': textModel.invalid\r\n        }\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      ></textarea>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultImagePlaceholder let-row=\"row\" let-col=\"col\">\r\n  <span\r\n    class=\"px-2 d-flex w-100 cell-content image-placeholder\"\r\n    [title]=\"row?.full_name || row?.name || 'N/A'\"\r\n  >\r\n    <ng-container\r\n      *ngIf=\"\r\n        row?.logo ||\r\n          row?.assetImage ||\r\n          row?.invoice?.invoice_image ||\r\n          row?.invoice_image;\r\n        else placeholder\r\n      \"\r\n    >\r\n      <span\r\n        (click)=\"fullscreenImage = row?.profile_pictures?.[4]?.path ||\r\n            row?.logo ||\r\n            row?.assetImage ||\r\n            row?.invoice_image\"\r\n        class=\"pic\"\r\n        [style.width.px]=\"rowHeight - 10\"\r\n        [style.height.px]=\"rowHeight - 10\"\r\n        [class.assets-pic]=\"gridType == 'Assets'\"\r\n      >\r\n        <img\r\n          [width]=\"rowHeight - 12\"\r\n          [height]=\"rowHeight - 12\"\r\n          [style.width.px]=\"rowHeight - 10\"\r\n          [style.height.px]=\"rowHeight - 10\"\r\n          [src]=\"\r\n            row?.profile_pictures?.[4]?.path ||\r\n            row?.logo ||\r\n            row?.assetImage ||\r\n            row?.invoice_image\r\n          \"\r\n          alt=\"icon\"\r\n          class=\"option-icon\"\r\n          loading=\"lazy\"\r\n        />\r\n      </span>\r\n    </ng-container>\r\n    <!-- <div\r\n      class=\"fullscreen-overlay\"\r\n      *ngIf=\"fullscreenImage\"\r\n      (click)=\"fullscreenImage = null\"\r\n    >\r\n      <img [src]=\"fullscreenImage\" class=\"fullscreen-img\" />\r\n    </div> -->\r\n\r\n    <ng-template #placeholder>\r\n      <span\r\n        [ngClass]=\"getDynamicClass(row?.full_name || row?.name)\"\r\n        class=\"pic d-flex align-items-center rounded-circle\"\r\n        [style.width.px]=\"rowHeight - 12\"\r\n        [style.height.px]=\"rowHeight - 12\"\r\n        [style.fontSize.px]=\"rowHeight / 3\"\r\n        [class.assets-pic]=\"gridType == 'Assets'\"\r\n      >\r\n        {{ getInitials(row?.full_name) }}\r\n      </span>\r\n    </ng-template>\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Right Click Menue -->\r\n<div\r\n  [class.invisible]=\"!positionedYet\"\r\n  class=\"context-menu p-2\"\r\n  *ngIf=\"actionHide && actions?.length\"\r\n  [ngStyle]=\"{ 'top.px': yPos, 'left.px': xPos }\"\r\n  [class.show]=\"isVisible\"\r\n  appendTo=\"body\"\r\n>\r\n  <ul>\r\n    <li\r\n      *ngFor=\"let action of actions\"\r\n      class=\"rounded d-flex align-items-center\"\r\n      (click)=\"onActionClick(action)\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/' + action + '.svg'\"\r\n        class=\"data-grid-svg-icon right-click-menu-icons me-2\"\r\n      ></span>\r\n      <span class=\"text-capitalize fw-500\">{{ action }}</span>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- Details Toggle from bottom -->\r\n\r\n<ng-template #nestedTableTemplate let-row>\r\n  <div\r\n    class=\"nested-table table table-sm w-100 mb-0 center-nested-table w-100\"\r\n    style=\"table-layout: fixed !important\"\r\n    #nestedTableContainer\r\n  >\r\n    <thead\r\n      #nestedHeader\r\n      [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\r\n    >\r\n      <div\r\n        cdkDropList\r\n        [cdkDropListData]=\"row?.detail.columns\"\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"dropColumn($event, row)\"\r\n        (cdkDropListSorted)=\"onNestedColSort($event, previewNestedCols)\"\r\n        [style.height.px]=\"nestedTableHeaderRowHeight\"\r\n        class=\"d-flex tr border-below\"\r\n      >\r\n        <div\r\n          *ngFor=\"let col of row.detail.columns; let i = index\"\r\n          [style.width.px]=\"col?.width || 250\"\r\n          [style.minWidth.px]=\"col?.width || 250\"\r\n          [style.maxWidth.px]=\"col?.width || 250\"\r\n          class=\"px-4 th\"\r\n          [attr.field]=\"col.field\"\r\n          [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\r\n          cdkDrag\r\n        >\r\n          <div\r\n            class=\"d-flex h-100 justify-content-between position-relative align-items-center\"\r\n          >\r\n            <div class=\"text-ellipsis\" (click)=\"sortNestedCol(col, row)\">\r\n              {{ col.header }}\r\n            </div>\r\n            <div class=\"d-flex gap-2\">\r\n              <span\r\n                *ngIf=\"currentSubSortColumn == col.field\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath +\r\n                  (col?.order_by == 'desc'\r\n                    ? 'data-grid/icons/sort-desc.svg'\r\n                    : 'data-grid/icons/sort-asc.svg')\r\n                \"\r\n                class=\"data-grid-svg-icon d-flex justify-content-center align-items-center ms-2 start-50\"\r\n              >\r\n              </span>\r\n              <!-- <div\r\n                class=\"three-dots p-1\"\r\n                (click)=\"openThreeDotsMenu($event, col)\"\r\n                style=\"cursor: pointer\"\r\n              >\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath +\r\n                    'data-grid/icons/three-dots-vertical.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div> -->\r\n\r\n              <!-- Only show menu if this column is active -->\r\n              <div\r\n                class=\"position-absolute\"\r\n                *ngIf=\"activeCol === col\"\r\n                style=\"top: -50%; z-index: 21; left: 0\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    columnMenu;\r\n                    context: {\r\n                      col: col,\r\n                      isNestedTable: true,\r\n                      columns: row?.detail.columns\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </div>\r\n              <div\r\n                class=\"resize-handle\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (mousedown)=\"\r\n                  $event.preventDefault();\r\n                  onResizeColumn($event, col);\r\n                  $event.stopPropagation()\r\n                \"\r\n              >\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ng-template cdkDragPreview>\r\n            <div class=\"p-2 border d-flex gap-2\">\r\n              <div>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n              <div>{{ col.header }}</div>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </thead>\r\n    <div\r\n      [style.width.px]=\"nestedHeader.offsetWidth - 10\"\r\n      [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\r\n    >\r\n      <cdk-virtual-scroll-viewport\r\n        [itemSize]=\"nestedTablerowHeight\"\r\n        class=\"viewport\"\r\n        [style.height.px]=\"\r\n          (row?.detail?.result?.length < 5\r\n            ? nestedTablerowHeight * row?.detail?.result?.length + 40\r\n            : 300) + (hasHorizontalScroll ? -12 : 1)\r\n        \"\r\n        [style.width.px]=\"nestedHeader.offsetWidth - 10\"\r\n        [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\r\n      >\r\n        <div\r\n          class=\"cursor-pointer border-below d-flex tr\"\r\n          *cdkVirtualFor=\"let d of row?.detail?.result; trackBy: trackById\"\r\n          [style.height.px]=\"nestedTablerowHeight\"\r\n          [style.width.px]=\"nestedHeader?.offsetWidth\"\r\n          [style.minWidth.px]=\"nestedHeader?.offsetWidth\"\r\n          [style.backgroundColor]=\"bodyBackgroundColor\"\r\n          (contextmenu)=\"onRightClick($event, d)\"\r\n        >\r\n          <div\r\n            class=\"px-4 py-0 td\"\r\n            *ngFor=\"let col of previewNestedCols; let j = index\"\r\n            [style.fontSize.px]=\"nestedTablerowFontsize\"\r\n            [attr.field]=\"col.field\"\r\n            [style.width.px]=\"col?.width || 250\"\r\n            [style.minWidth.px]=\"col?.width || 250\"\r\n            [style.maxWidth.px]=\"col?.width || 250\"\r\n          >\r\n            <div\r\n              [style.height.px]=\"nestedTablerowHeight - 1\"\r\n              [style.max-width.px]=\"col?.width\"\r\n              class=\"d-flex align-items-center\"\r\n            >\r\n              <!-- {{ d[col.field] || (col.is_amount ? 0 : \"-\") }} -->\r\n              <div\r\n                #cellText\r\n                class=\"text-ellipsis flex-grow-1\"\r\n                [title]=\"\r\n                  col?.type === 'date'\r\n                    ? (getNestedValue(d, col.field) | date : dateFormat)\r\n                    : getNestedValue(d, col.field) || '-'\r\n                \"\r\n              >\r\n                <ng-container *ngIf=\"col?.type !== 'image'\">\r\n                  <ng-container *ngIf=\"col.is_amount\">{{\r\n                    currencySymbol\r\n                  }}</ng-container>\r\n                  {{\r\n                          !isNestedValueArray(d, col.field)\r\n                            ? col?.type === 'date'\r\n                              ? (isDate(getNestedValue(d, col.field))\r\n                                  ? (getNestedValue(d, col.field) | date: dateFormat)\r\n                                  : (getNestedValue(d, col.field)?.value ||\r\n                                    getNestedValue(d, col.field)?.name ||\r\n                                    getNestedValue(d, col.field) ||\r\n                                    '-'))\r\n                              : (getNestedValue(d, col.field)?.value ||\r\n                                getNestedValue(d, col.field)?.name ||\r\n                                getNestedValue(d, col.field) ||\r\n                                (col.is_amount ? 0: '-'))\r\n                            : (getNestedValue(d, col.field)?.[0]?.department_name ||\r\n                              getNestedValue(d, col.field)?.[0]?.roleName || getNestedValue(d, col.field)?.[0]?.full_name ||\r\n                              '-')\r\n                  }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"false\">\r\n                  {{ getTotalAmount(col) }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"col?.type == 'image'\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      defaultImagePlaceholder;\r\n                      context: {\r\n                        row: d,\r\n                        col: col,\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </cdk-virtual-scroll-viewport>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #leftRightNestedPlaceholder let-row>\r\n  <table\r\n    class=\"nested-table table table-sm w-100 mb-0\"\r\n    [style.backgroundColor]=\"bodyBackgroundColor\"\r\n    [style.height.px]=\"\r\n      gridType == 'Assets'\r\n        ? (nestedTableContainer?.nativeElement?.offsetHeight ?? 0) + 12\r\n        : (taskManagementContainer?.nativeElement?.offsetHeight ?? 0)\r\n    \"\r\n  >\r\n    <!-- <div class=\"thead\">\r\n      <div\r\n        class=\"tr d-flex border-below\"\r\n        [style.height.px]=\"nestedTableHeaderRowHeight\"\r\n        [style.backgroundColor]=\"headerBackgroundColor\"\r\n      >\r\n        <div class=\"th\" *ngFor=\"let _ of [1, 2, 3, 4, 5]\"></div>\r\n      </div>\r\n    </div> -->\r\n    <!-- <div class=\"tbody\">\r\n      <div\r\n        class=\"tr border-below\"\r\n        [style.height.px]=\"nestedTablerowHeight\"\r\n        *ngFor=\"let _ of row?.detail?.result\"\r\n        [style.backgroundColor]=\"headerBackgroundColor\"\r\n      >\r\n        <div class=\"td\" *ngFor=\"let __ of [1, 2, 3, 4, 5]\" class=\"py-0\">\r\n          <span\r\n            [style.height.px]=\"nestedTablerowHeight\"\r\n            [style.max-width.px]=\"nestedTablerowHeight\"\r\n          ></span>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n  </table>\r\n</ng-template>\r\n\r\n<ng-template #taskManagementTemplate let-taskDetails=\"taskDetails\">\r\n  <div\r\n    class=\"p-4\"\r\n    #taskManagementContainer\r\n    [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\r\n    [style.fontFaimly]=\"fontFaimly\"\r\n  >\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"col-4\">\r\n        <div class=\"item-title\">Description</div>\r\n        <!-- <div class=\"item-content firstDiv\">\r\n        {{ taskDetails.description }}\r\n      </div> -->\r\n        <p\r\n          [style.fontSize]=\"bodyTextFontsSize\"\r\n          class=\"item-content firstDiv taskDescription pe-4\"\r\n          [innerHTML]=\"getSafeComment(taskDetails?.editor_description)\"\r\n          (click)=\"openFullImage($event)\"\r\n        ></p>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div class=\"item-title\">Attachments</div>\r\n        <h5 *ngIf=\"taskDetails?.attachments?.length == 0\">\r\n          No Attachments found\r\n        </h5>\r\n        <div\r\n          *ngIf=\"taskDetails?.attachments?.length\"\r\n          class=\"item-content d-flex flex-wrap\"\r\n          style=\"gap: 10px\"\r\n        >\r\n          <a\r\n            *ngFor=\"let attachement of taskDetails?.attachments; let i = index\"\r\n            class=\"symbol-label fs-2 fw-semibold text-success cursor-pointer\"\r\n          >\r\n            <span\r\n              title=\"{{ taskDetails?.attachments_name[i] || 'Attachment' }}\"\r\n              (click)=\"downloadAttchment(attachement)\"\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath +\r\n                'data-grid/document-icons/' +\r\n                getExtention(attachement) +\r\n                '.svg'\r\n              \"\r\n            >\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div class=\"item-title\">\r\n          Comments ({{ taskDetails?.comments?.length }})\r\n        </div>\r\n        <h5 *ngIf=\"taskDetails?.comments?.length == 0\">No Comments found</h5>\r\n        <div *ngIf=\"taskDetails?.comments?.length\" class=\"item-content\">\r\n          <div class=\"comment\" *ngFor=\"let comment of taskDetails.comments\">\r\n            <div class=\"d-flex align-items-center pe-3\">\r\n              <img\r\n                class=\"pic image-input-wrapper\"\r\n                [style.width.px]=\"rowHeight - 12\"\r\n                [style.height.px]=\"rowHeight - 12\"\r\n                *ngIf=\"comment?.comment_by.logo\"\r\n                src=\"{{ comment?.comment_by.logo }}\"\r\n                alt=\"{{ comment.comment_by.full_name }}\"\r\n              />\r\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> -->\r\n              <span\r\n                *ngIf=\"!comment?.comment_by.logo\"\r\n                [ngClass]=\"getDynamicClass(comment.comment_by.full_name)\"\r\n                class=\"pic d-flex align-items-center rounded-circle\"\r\n                [style.width.px]=\"rowHeight - 12\"\r\n                [style.height.px]=\"rowHeight - 12\"\r\n                [style.fontSize.px]=\"rowHeight / 3\"\r\n                title=\"{{ comment.comment_by.full_name }}\"\r\n              >\r\n                {{ getInitials(comment.comment_by.full_name) }}\r\n              </span>\r\n            </div>\r\n            <div>\r\n              <div class=\"comment-author fs-14px\">\r\n                {{ comment?.comment_by.full_name }}\r\n              </div>\r\n              <div\r\n                class=\"comment-content forCommentImg\"\r\n                [innerHTML]=\"getSafeComment(comment.comment)\"\r\n              ></div>\r\n              <div class=\"comment-timestamp\">\r\n                {{ comment.comment_date | date }}\r\n              </div>\r\n              <div class=\"comment-timestamp\">\r\n                Replies: ({{ comment.replies.length }})\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #d9d9db;border-radius:12px;position:relative}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:8px 0 8px 8px;font-weight:700;border-bottom:1px solid #d9d9db;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 #d9d9db}.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}.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 #d9d9db}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#d9d9db}.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 #d9d9db;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #d9d9db}.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 #d9d9db!important}.right-pinned-body{right:0;border-left:1px solid #d9d9db}.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%;border-right:1px solid #d9d9db}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #d9d9db!important}.three-dots{width:22px;height:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-right:8px;cursor:pointer}.three-dots:hover{background-color:#ccc!important}.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:240px;border:1px solid #ddd;box-shadow:0 0 16px #00000026;border:1px solid #d9d9db;padding:4px 0;font-size:14px;position:fixed}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item:hover{background-color:#deebf7}.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 #d9d9db;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 #d9d9db;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 #d9d9db;font-size:14px}.border-start{border-left:1px solid #d9d9db!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 #d9d9db;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:17px;overflow-x:auto;overflow-y:hidden;height:17px}.border-dashed{border:1px dashed #d9d9db}.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 #d9d9db!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 #d9d9db}.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}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{max-width:380px!important;display:flex!important;align-items:center!important}.global-search span{margin-top:-4px!important}.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 #d9d9db!important;border-radius:8px!important}.custom-menu{width:220px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px}.custom-menu .dropdown-item:hover{background-color:#f5f5f5;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 #ccc!important;background-color:#fff}.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 .preview-box{border-color:#007cf5!important;background-color:transparent!important}#medium:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}#large:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 28px!important;width:82px;border-radius:8px!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:13px;color:#333}.page-size select{padding:3px 6px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:13px}.page-info{margin-left:10px}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{padding:3px 8px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2}.page-buttons button.active{background:#eee;font-weight:600}.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 #ccc;margin-right:8px}.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}.add-filter-button:hover,.button-filter:hover{color:#000!important}.button-filter:hover ::ng-deep svg path{stroke:#000!important}.table-layout .dropdown-item{border-radius:0!important;padding-inline:16px!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}.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 svg,:host ::ng-deep .three-dots-col-menu svg path{stroke:#000!important}.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;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026;max-height:400px;overflow:auto}.full-text-box ul{max-height:400px}.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:50px!important;height:26px;align-items:center}.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 #d9d9db}.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}.cell-editing-dropdown-menu .dropdown-item{width:99%}.cell-editing-dropdown-menu .selected{background-color:#f0f8ff}.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}\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: "directive", type: CellEditorDirective, selector: "[cellEditor]", inputs: ["cellEditor", "rowData", "colData", "cellValue"], outputs: ["editorEvent"] }, { kind: "pipe", type: i6.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: FilterPipe, name: "filter" }], animations: [
             trigger('accordionToggle', [
                 state('collapsed', style({ height: '0px', overflow: 'unset' })),
                 state('expanded', style({ height: '*', overflow: 'unset' })),
@@ -6313,7 +6340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 ], { optional: true })
                             ]),
                         ])
-                    ], template: "<div class=\"position-relative h-100\">\n  <div\n    class=\"d-flex justify-content-between mb-2 align-items-center position-relative\"\n  >\n    <div class=\"d-flex gap-2\">\n      <div class=\"nav nav-tabs\" *ngIf=\"true\">\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=\"global-search\" [style.width.px]=\"350\">\n        <span\n          *ngIf=\"enableGlobalSearch\"\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n        ></span>\n        <input\n          *ngIf=\"enableGlobalSearch\"\n          style=\"height: 36px\"\n          class=\"form-control\"\n          placeholder=\"Type to search, then press Enter\"\n          [(ngModel)]=\"tableSearch\"\n          (keydown.enter)=\"onGlobalSearch()\"\n          (input)=\"onSearchInput($event)\"\n          type=\"search\"\n        />\n      </div>\n    </div>\n    <div class=\"d-flex gap-2 align-items-center table-right-top-actions\">\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\n        *ngIf=\"!showFilterRow\"\n        class=\"cursor-pointer position-relative action-buttons-row\"\n        (click)=\"toggleOpenFilter()\"\n        [class.active]=\"showFilters\"\n      >\n        <a\n          href=\"JavaScript:void(0)\"\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n        >\n          <span\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n            class=\"svg-icon svg-icon-2\"\n          ></span>\n          <span class=\"label-hidden text-white\">Filters</span>\n        </a>\n        <span\n          *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: 16px;\n            top: 10px;\n          \"\n          class=\"rounded-circle d-block\"\n        ></span>\n      </div>\n      <div\n        class=\"cursor-pointer d-none\"\n        (click)=\"toggleActions('advance-filter')\"\n        [class.active]=\"activeTopButton === 'advance-filter'\"\n      >\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      <div\n        class=\"cursor-pointer action-buttons-row\"\n        (click)=\"toggleActions('setting')\"\n        [class.active]=\"\n          activeTopButton === 'setting' ||\n          activeTopButton === 'table-layout' ||\n          activeTopButton === 'table-presets' ||\n          activeTopButton === 'show-hide-columns'\n        \"\n      >\n        <!-- <span\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n          class=\"data-grid-svg-icon top-icon me-2\"\n        ></span> -->\n        <a\n          href=\"JavaScript:void(0)\"\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n        >\n          <span\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n            class=\"svg-icon svg-icon-2\"\n          ></span>\n          <span class=\"label-hidden text-white\">Setting</span>\n        </a>\n\n        <div\n          *ngIf=\"activeTopButton === 'setting'\"\n          class=\"actions-dropdown mt-1 actions-dropdown-setting\"\n          style=\"position: absolute\"\n        >\n          <div class=\"dropdown-menu show shadow custom-menu\">\n            <!-- Table Layout -->\n            <a\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n              (click)=\"$event.stopPropagation(); toggleActions('table-layout')\"\n            >\n              <span\n                ><span\n                  [inlineSVG]=\"\n                    singleSpaAssetsPath + 'data-grid/icons/table-2.svg'\n                  \"\n                  class=\"data-grid-svg-icon me-2\"\n                ></span>\n                Table Layout</span\n              >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n                \"\n                class=\"data-grid-svg-icon me-2\"\n              ></span>\n            </a>\n            <!-- Table Presets -->\n            <a\n              (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n            >\n              <span\n                ><span\n                  [inlineSVG]=\"\n                    singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\n                  \"\n                  class=\"data-grid-svg-icon me-2\"\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 me-2\"\n              ></span>\n            </a>\n\n            <!-- Columns -->\n            <a\n              *ngIf=\"!showSideMenu\"\n              (click)=\"\n                $event.stopPropagation(); toggleActions('show-hide-columns')\n              \"\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n            >\n              <span class=\"align-items-center d-flex\"\n                ><span\n                  [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\n                  class=\"data-grid-svg-icon me-2\"\n                ></span>\n                Columns</span\n              >\n              <div class=\"d-flex 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 me-2\"\n                ></span>\n              </div>\n            </a>\n\n            <div class=\"dropdown-divider\"></div>\n\n            <!-- Filter -->\n            <a\n              class=\"dropdown-item cursor-pointer\"\n              (click)=\"toggleOpenFilter(); activeTopButton = '';\"\n              *ngIf=\"!showFilterRow\"\n            >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n                \"\n                class=\"data-grid-svg-icon me-2 mt-1 cursor-pointer\"\n              ></span>\n              Filter\n            </a>\n\n            <!-- Download -->\n            <a\n              class=\"dropdown-item cursor-pointer\"\n              (click)=\"downloadCsv('csv')\"\n            >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\n                \"\n                class=\"data-grid-svg-icon me-2 cursor-pointer\"\n              ></span>\n              CSV Export\n            </a>\n            <a\n              *ngIf=\"enableExport\"\n              class=\"dropdown-item cursor-pointer\"\n              (click)=\"downloadCsv('xlsx')\"\n            >\n              <span\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\n                \"\n                class=\"data-grid-svg-icon me-2 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                <!-- Font Family -->\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\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\">\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 }}\n              <span\n                (click)=\"\n                  $event.stopPropagation(); removeColumnFilterFromColumn(col)\n                \"\n                [inlineSVG]=\"\n                  singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\n                \"\n                class=\"data-grid-svg-icon cross-secondary ms-2 mb-1\"\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        >\n          <span\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\n            class=\"me-2 data-grid-svg-icon\"\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      >\n        Reset\n      </div>\n    </div>\n  </div>\n\n  <div\n    [style.height]=\"\n      showFilters ? 'calc(100% - ' + topFilterRowHeight + 'px)' : '100%'\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          <div\n            class=\"data-grid-header-wrapper w-100\"\n            [style.color]=\"headerTextColor\"\n            [style.fontSize.px]=\"headerTextFontsSize\"\n            [style.backgroundColor]=\"headerBackgroundColor\"\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            >\n              <div\n                *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\n               *ngIf=\"showCheckboxes\"\n                [style.backgroundColor]=\"checkboxesBackgroundColor\"\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\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-handle.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          >\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>No Record Found</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            <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.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              <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=\"hasRightPinnedColumns\"\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            >\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\"\n                [@rowDynamic]=\"rowAnimation\"\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 && !shouldRestoreScroll\"\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\n        class=\"pagination-container\"\n        [style.height.px]=\"footerRowHeight\"\n        [style.padding.px]=\"footerPadding\"\n      >\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          Results:\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        </div>\n\n        <div class=\"page-buttons\">\n          <button\n            (click)=\"goToPage(paginationConfig.page - 1)\"\n            [disabled]=\"paginationConfig.page === 1\"\n          >\n            \u2039\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          >\n            \u203A\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-columnIndex=\"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-handle.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\"\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-blue.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\"\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                              columnIndex: columnIndex,\n                              childColIndex: i\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-handle.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' || child.type == 'array'\n                    \"\n                    [class.disabled-search-input]=\"\n                      child?.type == 'dropdown' || child?.type == 'image' || child.type == 'array'\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\"\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\"\n                [class.flex-row-reverse]=\"pinnedRight\"\n              >\n                <div\n                  [class.me-2]=\"pinnedRight\"\n                  class=\"d-flex align-items-center\"\n                  *ngIf=\"col?.pinned\"\n                >\n                  <span\n                    [inlineSVG]=\"\n                      singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\n                    \"\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\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                >\n                  <!-- Ascending Sort Icon -->\n                  <span\n                    *ngIf=\"sortingConfig?.order_by == 'asc'\"\n                    [inlineSVG]=\"\n                      singleSpaAssetsPath + 'data-grid/icons/sort-asc.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\n                  <!-- Descending Sort Icon -->\n                  <span\n                    *ngIf=\"sortingConfig?.order_by == 'desc'\"\n                    [inlineSVG]=\"\n                      singleSpaAssetsPath + 'data-grid/icons/sort-desc.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\n                  class=\"three-dots p-1\"\n                  (click)=\"\n                    openThreeDotsMenu($event, col);\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 === col\"\n                  style=\"top: -50%; 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                      : 0\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnMenu;\n                      context: {\n                        col: col,\n                        isNestedTable: false,\n                        section: sections,\n                        columnIndex: columnIndex,\n                        childColIndex: 0\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-handle.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' || col.type == 'array'\"\n            [class.disabled-search-input]=\"\n              col?.type == 'dropdown' || col?.type == 'image' || col.type == 'array'\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=\"\n          section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\n        \"\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          class=\"select-all-checkbox-cell 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        class=\"border-below\"\n          [style.backgroundColor]=\"\n            rowSelectedIndexes.has(row.__virtualIndex)\n              ? selectedRowsBackgroundColor\n              : checkboxesBackgroundColor\n          \"\n          class=\"select-all-checkbox-cell\"\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 - 1\"\n          [style.maxHeight.px]=\"rowHeight\"\n        >\n          <input\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\n       <ng-container *ngIf=\"col.cellEditor; else builtInEditors\">\n              <ng-container\n                [cellEditor]=\"col.cellEditor\"\n                [rowData]=\"row\"\n                [colData]=\"col\"\n                [cellValue]=\"getNestedValue(row, col.field)\"\n                (editorEvent)=\"finishEdit($event)\"\n              ></ng-container>\n        </ng-container>\n\n      <ng-template #builtInEditors>\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            (keydown.enter)=\"blurInput($event, row, col)\"\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, numberInput)\"\n            autofocus\n            (keydown.enter)=\"blurInput($event, row, col)\"\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, dateInput)\"\n            autofocus\n            class=\"form-control form-control-sm\"\n            #dateInput=\"ngModel\"\n            (keydown.enter)=\"blurInput($event, row, col)\"\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\" *ngIf=\"col?.column_dropdown_value?.length > 5\">\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              <cdk-virtual-scroll-viewport \n                    itemSize=\"35\" \n                    class=\"dropdown-viewport\"\n                    style=\"height: 120px\"\n                  >\n                    <div\n                    [class.selected]=\"getNestedValue(row, col.field) == option?.value || getNestedValue(row, col.field) == option\"\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                        \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)=\"blurInput($event, row, col)\"\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            (keydown.enter)=\"blurInput($event, row, col)\"\n            [(ngModel)]=\"row[col.field]\"\n            name=\"{{ col.field }}\"\n            required\n            (blur)=\"disableEdit(row, col, textModel)\"\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      </ng-template>\n\n      </div>\n\n      <!-- Display mode -->\n      <ng-template #viewMode>\n        <div\n          class=\"d-flex justify-content-between align-items-center w-100 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  let-columnIndex=\"columnIndex\"\n  let-childColIndex=\"childColIndex\"\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    <div class=\"border-below pb-2\" [class.disable-sorting]=\"!col.is_sortable\">\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span>\n      <div\n        *ngIf=\"\n          columnThreedotsMunuConfig?.showAscending &&\n          (sortingConfig?.field != col.field ||\n            sortingConfig?.order_by == 'desc')\n        \"\n        class=\"column-menu-item\"\n        (click)=\"sortAsc(activeCol)\"\n      >\n        <span\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-up.svg'\"\n          class=\"data-grid-svg-icon me-2\"\n        ></span>\n        Sort Ascending\n      </div>\n\n      <!-- Sort Descending -->\n      <div\n        *ngIf=\"\n          columnThreedotsMunuConfig?.showDescending &&\n          (sortingConfig?.field != col.field ||\n            sortingConfig?.order_by == 'asc')\n        \"\n        class=\"column-menu-item\"\n        (click)=\"sortDesc(activeCol)\"\n      >\n        <span\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-down.svg'\"\n          class=\"data-grid-svg-icon me-2\"\n        ></span>\n        Sort Descending\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/arrow-counterclockwise.svg'\n          \"\n          class=\"data-grid-svg-icon me-2\"\n        ></span>\n        Reset Sort\n      </div>\n    </div>\n    <div class=\"py-2 border-below three-dots-filter\" [class.disable-sorting]=\"col.type == 'image' || !col.is_search_able\">\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    <div class=\"py-2 border-below\">\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span>\n      <div\n        *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\"\n        class=\"column-menu-item\"\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/pin-left.svg'\"\n          class=\"data-grid-svg-icon me-2\"\n        ></span\n        >Pin Left\n      </div>\n\n      <div\n        *ngIf=\"\n          columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\n        \"\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/pin-right.svg'\"\n          class=\"data-grid-svg-icon data-grid-svg-icon me-2\"\n        ></span\n        >Pin Right\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\n          [inlineSVG]=\"\n            singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\n          \"\n          class=\"data-grid-svg-icon me-2\"\n        ></span\n        >Unpin\n      </div>\n    </div>\n\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 && col?.is_search_able\"\n    class=\"three-dots-col-menu position-relative\"\n    [style.right.px]=\"getDynamicRight(col, section, columnIndex, childColIndex)\"\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\"\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\n  >\n    <!-- Dropdown Type -->\n    <ng-container *ngIf=\"col.type === 'dropdown'|| col.type == 'array'; 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 ms-1 select-all-filter\">\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) | titlecase ) }}\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 == 'string'\">\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\n             <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n              <option value=\"equal\">Equals To</option>\n              <option value=\"before\">Less Then </option>\n              <option value=\"after\">Greater Then </option>\n              <option value=\"less_then_equal\">less then Equal to</option>\n              <option value=\"greater_then_equal\">Greater then Equal to </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 == 'string'\">\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\n               <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n                <option value=\"equal\">Equals To</option>\n                <option value=\"before\">Less Then </option>\n                <option value=\"after\">Greater Then </option>\n                <option value=\"less_then_equal\">less then Equal to</option>\n                <option value=\"greater_then_equal\">Greater then Equal to </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=\"btn btn-sm btn-primary d-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=\"btn btn-sm btn-secondary 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' || col.type == 'array'; 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 select-all-filter\">\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) | titlecase ) }}\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 == 'string'\">\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\n            <ng-container *ngIf=\"col.type == 'number'\">\n              <option value=\"equal\">Equals To</option>\n              <option value=\"before\">Less Then </option>\n              <option value=\"after\">Greater Then </option>\n              <option value=\"less_then_equal\">less then Equal to</option>\n              <option value=\"greater_then_equal\">Greater then Equal to </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 == 'string'\">\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\n              <ng-container *ngIf=\"col.type == 'number'\">\n                <option value=\"equal\">Equals To</option>\n                <option value=\"before\">Less Then </option>\n                <option value=\"after\">Greater Then </option>\n                <option value=\"less_then_equal\">less then Equal to</option>\n                <option value=\"greater_then_equal\">Greater then Equal to </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    >\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 btn-light\"\n        (click)=\"$event.stopPropagation(); removeSideFilter(col)\"\n      >\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\">\n            <span\n              [inlineSVG]=\"\n                singleSpaAssetsPath + 'data-grid/icons/resize-handle.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' || col.type == 'array'\"\n        [class.disabled-search-input]=\"\n          col?.type == 'dropdown' || col?.type == 'image' || col.type == 'array'\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 shadow 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\" style=\"font-weight: 500\">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>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>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 shadow 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\" style=\"font-weight: 500\">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\">\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=\"Search...\"\n          [(ngModel)]=\"searchTextPresetTable\"\n          type=\"search\"\n        />\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          \"\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]=\"'unset'\"\n                    [style.left.px]=\"dataGridContainer.offsetWidth - 200\"\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\">\n                          Are you sure you want to delete <br /><b\n                            >\u201C{{ table?.name }}\u201D</b\n                          >?\n                        </div>\n                        <div class=\"d-flex gap-2\">\n                          <button\n                            class=\"btn btn-sm btn-light me-2\"\n                            (click)=\"table.confirmDelete = false\"\n                          >\n                            Cancel\n                          </button>\n                          <button\n                            class=\"btn btn-sm btn-danger\"\n                            (click)=\"actionPreset(table, 'deletePreset')\"\n                          >\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=\"fw-bold fs-14px mb-2\">\n      {{ isTablePresetNotChanged ? \"Save 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=\"mb-2\">\n      <label for=\"presetName\" class=\"form-label fs-12px fw-bold\"\n        >Preset Name</label\n      >\n      <div class=\"col-12 global-search\">\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-center gap-2\" style=\"height: 32px\">\n      <button\n        type=\"button\"\n        style=\"height: 32px\"\n        class=\"btn border w-100 d-flex align-items-center justify-content-center btn-light\"\n        (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n        style=\"margin-top: -2px\"\n      >\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=\"btn btn-primary w-100 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            >Save</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 shadow 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\" style=\"font-weight: 500\">Columns</h6>\n      </div>\n      <a\n        (click)=\"resetColumns()\"\n        href=\"javascript:void(0)\"\n        class=\"text-primary text-decoration-none d-none\"\n        >Reset</a\n      >\n    </div>\n\n    <!-- Search -->\n    <div class=\"mb-3\">\n      <div class=\"col-12 global-search\">\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>\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-blue.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/eye.svg'\"\n              class=\"data-grid-svg-icon me-2\"\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>\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-blue.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/eye-cross.svg'\n                \"\n                class=\"data-grid-svg-icon me-2\"\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=\"shadow 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=\"mb-2 px-3\">\n      <div class=\"col-12 global-search\">\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' && col.is_search_able\n          \"\n          class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n        >\n          <div class=\"d-flex gap-1\">\n            <div style=\"margin-top: -3px\"></div>\n            <div class=\"fw-semibold\">\n              {{ col.header }}\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' || selectedColumnForFilter.type == 'array'\"\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 global-search 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=\"btn btn-outline-secondary btn-light border 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=\"btn btn-primary w-100 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 == 'string'\">\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\n           <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n              <option value=\"equal\">Equals To</option>\n              <option value=\"before\">Less Then </option>\n              <option value=\"after\">Greater Then </option>\n              <option value=\"less_then_equal\">less then Equal to</option>\n              <option value=\"greater_then_equal\">Greater then Equal to </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 == 'string'\">\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               <ng-container *ngIf=\"selectedColumnForFilter.type == 'number'\">\n                <option value=\"equal\">Equals To</option>\n                <option value=\"before\">Less Then </option>\n                <option value=\"after\">Greater Then </option>\n                <option value=\"less_then_equal\">less then Equal to</option>\n                <option value=\"greater_then_equal\">Greater then Equal to </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    >\n      <button\n        [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\n        type=\"button\"\n        style=\"height: 32px\"\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\n        (click)=\"$event.stopPropagation(); resetTextFilterChanges()\"\n      >\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=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\n        (click)=\"applyDropdownFilter()\"\n      >\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-handle.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>\n", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #d9d9db;border-radius:12px;position:relative}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:8px 0 8px 8px;font-weight:700;border-bottom:1px solid #d9d9db;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 #d9d9db}.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}.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 #d9d9db}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#d9d9db}.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 #d9d9db;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #d9d9db}.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 #d9d9db!important}.right-pinned-body{right:0;border-left:1px solid #d9d9db}.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%;border-right:1px solid #d9d9db}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #d9d9db!important}.three-dots{width:22px;height:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-right:8px;cursor:pointer}.three-dots:hover{background-color:#ccc!important}.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:240px;border:1px solid #ddd;box-shadow:0 0 16px #00000026;border:1px solid #d9d9db;padding:4px 0;font-size:14px;position:fixed}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item:hover{background-color:#deebf7}.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 #d9d9db;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 #d9d9db;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 #d9d9db;font-size:14px}.border-start{border-left:1px solid #d9d9db!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 #d9d9db;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:17px;overflow-x:auto;overflow-y:hidden;height:17px}.border-dashed{border:1px dashed #d9d9db}.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 #d9d9db!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 #d9d9db}.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}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{max-width:380px!important;display:flex!important;align-items:center!important}.global-search span{margin-top:-4px!important}.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 #d9d9db!important;border-radius:8px!important}.custom-menu{width:220px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px}.custom-menu .dropdown-item:hover{background-color:#f5f5f5;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 #ccc!important;background-color:#fff}.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 .preview-box{border-color:#007cf5!important;background-color:transparent!important}#medium:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}#large:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 28px!important;width:82px;border-radius:8px!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:13px;color:#333}.page-size select{padding:3px 6px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:13px}.page-info{margin-left:10px}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{padding:3px 8px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2}.page-buttons button.active{background:#eee;font-weight:600}.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 #ccc;margin-right:8px}.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}.add-filter-button:hover,.button-filter:hover{color:#000!important}.button-filter:hover ::ng-deep svg path{stroke:#000!important}.table-layout .dropdown-item{border-radius:0!important;padding-inline:16px!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}.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 svg,:host ::ng-deep .three-dots-col-menu svg path{stroke:#000!important}.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;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026;max-height:400px;overflow:auto}.full-text-box ul{max-height:400px}.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:50px!important;height:26px;align-items:center}.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 #d9d9db}.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}.cell-editing-dropdown-menu .dropdown-item{width:99%}.cell-editing-dropdown-menu .selected{background-color:#f0f8ff}.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}\n"] }]
+                    ], template: "<div class=\"position-relative h-100\">\r\n  <div\r\n    class=\"d-flex justify-content-between mb-2 align-items-center position-relative\"\r\n  >\r\n    <div class=\"d-flex gap-2\">\r\n      <div class=\"nav nav-tabs\" *ngIf=\"true\">\r\n        <div class=\"nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\r\n          <span\r\n            *ngFor=\"let tab of tabs; let i = index\"\r\n            (click)=\"setActiveTab(tab)\"\r\n            class=\"nav-link cursor-pointer\"\r\n            [class.active]=\"activeTab == tab\"\r\n          >\r\n            {{ tab }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"global-search\" [style.width.px]=\"350\">\r\n        <span\r\n          *ngIf=\"enableGlobalSearch\"\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\r\n        ></span>\r\n        <input\r\n          *ngIf=\"enableGlobalSearch\"\r\n          style=\"height: 36px\"\r\n          class=\"form-control\"\r\n          placeholder=\"Type to search, then press Enter\"\r\n          [(ngModel)]=\"tableSearch\"\r\n          (keydown.enter)=\"onGlobalSearch()\"\r\n          (input)=\"onSearchInput($event)\"\r\n          type=\"search\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-2 align-items-center table-right-top-actions\">\r\n      <ng-container *ngFor=\"let button of buttons\">\r\n        <div\r\n          class=\"d-flex align-items-center gap-2 action-buttons-row\"\r\n          *ngIf=\"button?.has_permission\"\r\n        >\r\n          <a\r\n            href=\"JavaScript:void(0)\"\r\n            (click)=\"onActionButtonClick(button.name)\"\r\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\"\r\n          >\r\n            <span\r\n              *ngIf=\"button.is_showIcon\"\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/' + button.icon + '.svg'\r\n              \"\r\n              class=\"svg-icon svg-icon-2\"\r\n            ></span>\r\n            <span\r\n              class=\"label-hidden text-white\"\r\n              [class.ms-0]=\"button.is_showIcon\"\r\n              >{{ button?.name }}</span\r\n            >\r\n          </a>\r\n        </div>\r\n      </ng-container>\r\n      <div\r\n        *ngIf=\"!showFilterRow\"\r\n        class=\"cursor-pointer position-relative action-buttons-row\"\r\n        (click)=\"toggleOpenFilter()\"\r\n        [class.active]=\"showFilters\"\r\n      >\r\n        <a\r\n          href=\"JavaScript:void(0)\"\r\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n            class=\"svg-icon svg-icon-2\"\r\n          ></span>\r\n          <span class=\"label-hidden text-white\">Filters</span>\r\n        </a>\r\n        <span\r\n          *ngIf=\"activeFilteredColumns?.length\"\r\n          style=\"\r\n            width: 7px;\r\n            height: 7px;\r\n            box-shadow: 0px 0px 3px #0022ff;\r\n            background-color: rgb(0, 60, 255);\r\n            position: absolute;\r\n            right: 16px;\r\n            top: 10px;\r\n          \"\r\n          class=\"rounded-circle d-block\"\r\n        ></span>\r\n      </div>\r\n      <div\r\n        class=\"cursor-pointer d-none\"\r\n        (click)=\"toggleActions('advance-filter')\"\r\n        [class.active]=\"activeTopButton === 'advance-filter'\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/zoom-charge.svg'\"\r\n          class=\"data-grid-svg-icon top-icon me-2\"\r\n        ></span>\r\n      </div>\r\n      <div\r\n        class=\"cursor-pointer action-buttons-row\"\r\n        (click)=\"toggleActions('setting')\"\r\n        [class.active]=\"\r\n          activeTopButton === 'setting' ||\r\n          activeTopButton === 'table-layout' ||\r\n          activeTopButton === 'table-presets' ||\r\n          activeTopButton === 'show-hide-columns'\r\n        \"\r\n      >\r\n        <!-- <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\r\n          class=\"data-grid-svg-icon top-icon me-2\"\r\n        ></span> -->\r\n        <a\r\n          href=\"JavaScript:void(0)\"\r\n          class=\"button button-small btn btn-active-primary border border-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\r\n            class=\"svg-icon svg-icon-2\"\r\n          ></span>\r\n          <span class=\"label-hidden text-white\">Setting</span>\r\n        </a>\r\n\r\n        <div\r\n          *ngIf=\"activeTopButton === 'setting'\"\r\n          class=\"actions-dropdown mt-1 actions-dropdown-setting\"\r\n          style=\"position: absolute\"\r\n        >\r\n          <div class=\"dropdown-menu show shadow custom-menu\">\r\n            <!-- Table Layout -->\r\n            <a\r\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\r\n              (click)=\"$event.stopPropagation(); toggleActions('table-layout')\"\r\n            >\r\n              <span\r\n                ><span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/table-2.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n                Table Layout</span\r\n              >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n            </a>\r\n            <!-- Table Presets -->\r\n            <a\r\n              (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\r\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\r\n            >\r\n              <span\r\n                ><span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n                Table Presets</span\r\n              >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n            </a>\r\n\r\n            <!-- Columns -->\r\n            <a\r\n              *ngIf=\"!showSideMenu\"\r\n              (click)=\"\r\n                $event.stopPropagation(); toggleActions('show-hide-columns')\r\n              \"\r\n              class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\r\n            >\r\n              <span class=\"align-items-center d-flex\"\r\n                ><span\r\n                  [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n                Columns</span\r\n              >\r\n              <div class=\"d-flex gap-2\">\r\n                <span class=\"muted-text\">{{ columnsCount }}</span>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon me-2\"\r\n                ></span>\r\n              </div>\r\n            </a>\r\n\r\n            <div class=\"dropdown-divider\"></div>\r\n\r\n            <!-- Filter -->\r\n            <a\r\n              class=\"dropdown-item cursor-pointer\"\r\n              (click)=\"toggleOpenFilter(); activeTopButton = '';\"\r\n              *ngIf=\"!showFilterRow\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2 mt-1 cursor-pointer\"\r\n              ></span>\r\n              Filter\r\n            </a>\r\n\r\n            <!-- Download -->\r\n            <a\r\n              class=\"dropdown-item cursor-pointer\"\r\n              (click)=\"downloadCsv('csv')\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n              ></span>\r\n              CSV Export\r\n            </a>\r\n            <a\r\n              *ngIf=\"enableExport\"\r\n              class=\"dropdown-item cursor-pointer\"\r\n              (click)=\"downloadCsv('xlsx')\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/download.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n              ></span>\r\n              Excel Export\r\n            </a>\r\n            <!-- Font Family & Font Size -->\r\n            <div class=\"px-2 pb-2 pt-2\">\r\n              <div class=\"d-flex gap-2\">\r\n                <!-- Font Family -->\r\n                <select\r\n                  class=\"form-select form-select-sm\"\r\n                  [(ngModel)]=\"fontFaimly\"\r\n                  (change)=\"onFontChange()\"\r\n                >\r\n                  <option *ngFor=\"let font of fontFamilies\" [value]=\"font\">\r\n                    {{ font }}\r\n                  </option>\r\n                </select>\r\n\r\n                <!-- Font Size -->\r\n                <select\r\n                  class=\"form-select form-select-sm\"\r\n                  (change)=\"onFontChange()\"\r\n                  [(ngModel)]=\"bodyTextFontsSize\"\r\n                >\r\n                  <option *ngFor=\"let size of fontSizes\" [value]=\"size\">\r\n                    {{ size }}\r\n                  </option>\r\n                </select>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Table Layout -->\r\n\r\n        <ng-container *ngIf=\"activeTopButton === 'table-layout'\">\r\n          <div\r\n            *ngTemplateOutlet=\"tableLayout\"\r\n            class=\"actions-dropdown mt-1\"\r\n            style=\"position: absolute\"\r\n          ></div>\r\n        </ng-container>\r\n\r\n        <!-- Table Presets -->\r\n        <ng-container *ngIf=\"activeTopButton === 'table-presets'\">\r\n          <div\r\n            *ngTemplateOutlet=\"tablePreset\"\r\n            class=\"actions-dropdown mt-1\"\r\n            style=\"position: absolute\"\r\n          ></div>\r\n        </ng-container>\r\n\r\n        <!-- Table Presets -->\r\n        <ng-container *ngIf=\"activeTopButton === 'show-hide-columns'\">\r\n          <div\r\n            *ngTemplateOutlet=\"showHideColumns\"\r\n            class=\"actions-dropdown mt-1\"\r\n            style=\"position: absolute\"\r\n          ></div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"action-buttons-row\" *ngIf=\"showFullScreenButton\">\r\n        <a\r\n          *ngIf=\"!isFullScreen\"\r\n          class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\r\n          (click)=\"toggleFullscreen()\"\r\n          data-bs-toggle=\"tooltip\"\r\n          data-bs-placement=\"top\"\r\n          title=\"Minimise\"\r\n          [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\r\n          style=\"transition: color 0.2s\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/expend.svg'\"\r\n            class=\"svg-icon svg-icon-2 mb-1\"\r\n          ></span>\r\n        </a>\r\n        <a\r\n          *ngIf=\"isFullScreen\"\r\n          class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\r\n          (click)=\"toggleFullscreen()\"\r\n          data-bs-toggle=\"tooltip\"\r\n          data-bs-placement=\"top\"\r\n          title=\"Maximise\"\r\n          [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\r\n          style=\"transition: color 0.2s\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/minimize.svg'\"\r\n            class=\"svg-icon svg-icon-2 mb-1\"\r\n          ></span>\r\n        </a>\r\n      </div>\r\n      <div>\r\n        <!-- Example single danger button -->\r\n\r\n        <!-- <button\r\n          type=\"button\"\r\n          class=\"btn btn-primary btn-sm d-flex gap-2 action-button\"\r\n          (click)=\"toggleActions('actions')\"\r\n        >\r\n          Action\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/Vector.svg'\"\r\n            class=\"data-grid-svg-icon\"\r\n          ></span>\r\n        </button>\r\n        <div\r\n          *ngIf=\"activeTopButton === 'actions'\"\r\n          class=\"actions-dropdown mt-1\"\r\n        >\r\n          <div class=\"dropdown-menu show\">\r\n            <a class=\"dropdown-item\" href=\"#\">Action</a>\r\n            <a class=\"dropdown-item\" href=\"#\">Another action</a>\r\n            <a class=\"dropdown-item\" href=\"#\">Something else here</a>\r\n            <div class=\"dropdown-divider\"></div>\r\n            <a class=\"dropdown-item\" href=\"#\">Separated link</a>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"showFilters && !showFilterRow\"\r\n    class=\"top-filter-row border-top py-2 d-flex justify-content-between align-items-center\"\r\n    [style.height.px]=\"topFilterRowHeight\"\r\n  >\r\n    <!-- LEFT SIDE (Filter tags + Filter button) -->\r\n    <div class=\"d-flex gap-2 align-items-center\">\r\n      <ng-container>\r\n        <div\r\n          *ngFor=\"let col of activeFilteredColumns; trackBy: trackByField\"\r\n          class=\"filter-tags\"\r\n        >\r\n          <div\r\n            (click)=\"\r\n              isActiveFilterOpen = true;\r\n              activeTopButton = 'filter-columns';\r\n              openFilter(col)\r\n            \"\r\n            class=\"d-flex justify-content-center align-items-center muted-text add-filter-button active-filters\"\r\n            style=\"white-space: nowrap\"\r\n            [class.active]=\"\r\n              col?.field == selectedColumnForFilter?.field &&\r\n              isActiveFilterOpen &&\r\n              activeTopButton == 'filter-columns'\r\n            \"\r\n          >\r\n            <span class=\"header-tag mt-0 d-flex align-items-center\">\r\n              <span\r\n                *ngIf=\"col?.pinned\"\r\n                [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin.svg'\"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n              {{ col.header }}\r\n              <span\r\n                (click)=\"\r\n                  $event.stopPropagation(); removeColumnFilterFromColumn(col)\r\n                \"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon cross-secondary ms-2 mb-1\"\r\n              ></span>\r\n            </span>\r\n          </div>\r\n\r\n          <ng-container\r\n            *ngIf=\"\r\n              activeTopButton === 'filter-columns' &&\r\n              col?.field == selectedColumnForFilter?.field &&\r\n              isActiveFilterOpen\r\n            \"\r\n          >\r\n            <div\r\n              *ngTemplateOutlet=\"filterColumns; context: { column: col }\"\r\n              class=\"actions-dropdown mt-1\"\r\n            ></div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- Filter Button -->\r\n      <div class=\"add-filter-button-menu\">\r\n        <div\r\n          (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\r\n          class=\"d-flex justify-content-center align-items-center muted-text add-filter-button button-filter\"\r\n          style=\"width: 70px\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\r\n            class=\"me-2 data-grid-svg-icon\"\r\n          ></span>\r\n          Filter\r\n        </div>\r\n\r\n        <ng-container\r\n          *ngIf=\"activeTopButton === 'filter-columns' && !isActiveFilterOpen\"\r\n        >\r\n          <div\r\n            *ngTemplateOutlet=\"filterColumns\"\r\n            class=\"actions-dropdown mt-1\"\r\n          ></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- RIGHT SIDE (Update + Reset) -->\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div\r\n        (click)=\"savePreset()\"\r\n        class=\"text-primary cursor-pointer all-filters-reset-button\"\r\n        *ngIf=\"!checkFilterChangesEffect()\"\r\n      >\r\n        Update View\r\n      </div>\r\n\r\n      <div\r\n        class=\"text-primary cursor-pointer all-filters-reset-button\"\r\n        *ngIf=\"!tableFilterViewId && activeFilteredColumns?.length\"\r\n        (click)=\"clearAllFilters()\"\r\n      >\r\n        Reset\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    [style.height]=\"\r\n      showFilters ? 'calc(100% - ' + topFilterRowHeight + 'px)' : '100%'\r\n    \"\r\n    cdkDropListGroup\r\n    class=\"data-grid-table-wrapper overflow-hidden\"\r\n    #dataGridContainer\r\n    [style.fontFamily]=\"fontFaimly\"\r\n    [style.backgroundColor]=\"bodyBackgroundColor\"\r\n    id=\"data-grid-main-container\"\r\n  >\r\n    <div\r\n      *ngIf=\"showRowsGrouping\"\r\n      [style.height.px]=\"headerRowHeight\"\r\n      [cdkDropListData]=\"columns\"\r\n      [style.backgroundColor]=\"\r\n        topGroupedBadgesBackgroundColor || headerBackgroundColor\r\n      \"\r\n      cdkDropList\r\n      (cdkDropListEntered)=\"enterToTopRowGrouping($event)\"\r\n      (cdkDropListExited)=\"exitedFromTheTopRow($event)\"\r\n      (cdkDropListDropped)=\"onDropTopGroup($event)\"\r\n      [cdkDropListEnterPredicate]=\"canEnterToRowsGrouping\"\r\n      id=\"rows-grouping-top-container\"\r\n      class=\"border-below d-flex px-4 align-items-center\"\r\n    >\r\n      <div\r\n        class=\"d-flex gap-2 align-items-center\"\r\n        [style.color]=\"headerTextColor\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span>\r\n        <div *ngIf=\"!draggingInGroupArea && !groupedColumns?.length\">\r\n          Drag here to set row groups\r\n        </div>\r\n        <div\r\n          cdkDropListOrientation=\"horizontal\"\r\n          cdkDropList\r\n          (cdkDropListDropped)=\"onGroupReorder($event)\"\r\n          class=\"d-flex\"\r\n        >\r\n          <div\r\n            cdkDrag\r\n            [cdkDragLockAxis]=\"'x'\"\r\n            *ngFor=\"\r\n              let child of groupedColumns;\r\n              let i = index;\r\n              trackBy: trackByField\r\n            \"\r\n            class=\"d-flex align-items-center\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                topGroupingRowPlaceholder;\r\n                context: {\r\n                  $implicit: child,\r\n                  showChevron:\r\n                    groupedColumns.length > 1 && i != groupedColumns.length - 1\r\n                }\r\n              \"\r\n            ></ng-container>\r\n            <ng-template cdkDragPreview\r\n              ><div class=\"p-2 border d-flex gap-2\">\r\n                <div>\r\n                  <span\r\n                    *ngIf=\"!draggingInGroupArea\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div>{{ child.header }}</div>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"d-flex overflow-hidden\"\r\n      [style.height]=\"\r\n        'calc(100% - ' +\r\n        (showRowsGrouping\r\n          ? headerRowHeight + footerRowHeight\r\n          : footerRowHeight) +\r\n        'px)'\r\n      \"\r\n    >\r\n      <div\r\n        class=\"h-100\"\r\n        [style.width]=\"\r\n          !showSideMenu\r\n            ? '100%'\r\n            : sideMenuVisible\r\n            ? 'calc(100% - 280px)'\r\n            : 'calc(100% - 30px)'\r\n        \"\r\n      >\r\n        <div class=\"h-100 transition position-relative w-100\">\r\n          <!-- ##################################################################################################################################################################################### -->\r\n          <!-- ##################################################################################################################################################################################### -->\r\n          <!-- Data Grid Header starts here -->\r\n          <!-- ##################################################################################################################################################################################### -->\r\n          <!-- ##################################################################################################################################################################################### -->\r\n\r\n          <div\r\n            class=\"data-grid-header-wrapper w-100\"\r\n            [style.color]=\"headerTextColor\"\r\n            [style.fontSize.px]=\"headerTextFontsSize\"\r\n            [style.backgroundColor]=\"headerBackgroundColor\"\r\n            [class.border-below]=\"!hasAnyVisibleColumn\"\r\n            [style.height.px]=\"\r\n              showColumnsGrouping && showFilterRow\r\n                ? headerRowHeight * 3\r\n                : showColumnsGrouping || showFilterRow\r\n                ? headerRowHeight * 2\r\n                : headerRowHeight\r\n            \"\r\n          >\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- Data Grid Left Pinned Header starts here -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <div\r\n              class=\"data-grid-header left-pinned\"\r\n              #leftPinnedHeader\r\n              [class.border-right]=\"hasLeftPinnedColumns\"\r\n            >\r\n              <div\r\n                *ngIf=\"showSerialNumber\"\r\n                [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n                class=\"select-all-checkbox-cell border-below\"\r\n                [style.width.px]=\"55\"\r\n                [style.height.px]=\"\r\n                  showColumnsGrouping && showFilterRow\r\n                    ? headerRowHeight * 3\r\n                    : showColumnsGrouping || showFilterRow\r\n                    ? headerRowHeight * 2\r\n                    : headerRowHeight\r\n                \"\r\n              >\r\n                S.No\r\n              </div>\r\n              <div\r\n               *ngIf=\"showCheckboxes\"\r\n                [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n                class=\"select-all-checkbox-cell border-below\"\r\n                [style.height.px]=\"\r\n                  showColumnsGrouping && showFilterRow\r\n                    ? headerRowHeight * 3\r\n                    : showColumnsGrouping || showFilterRow\r\n                    ? headerRowHeight * 2\r\n                    : headerRowHeight\r\n                \"\r\n              >\r\n                <input\r\n                  *ngIf=\"hasAnyVisibleColumn\"\r\n                  style=\"width: 16px; height: 16px\"\r\n                  type=\"checkbox\"\r\n                  [indeterminate]=\"isIndeterminateState(dataSet)\"\r\n                  [checked]=\"isAllSelected(dataSet)\"\r\n                  (change)=\"toggleSelectAll(dataSet)\"\r\n                />\r\n              </div>\r\n              <div\r\n                [style.backgroundColor]=\"headerBackgroundColor\"\r\n                class=\"d-flex\"\r\n                cdkDropList\r\n                id=\"left-pinned-header\"\r\n                cdkDropListOrientation=\"horizontal\"\r\n                [cdkDropListData]=\"leftPinnedColumns\"\r\n                (cdkDropListEntered)=\"onDropListEnter($event, 'left')\"\r\n                (cdkDropListSorted)=\"\r\n                  onSortGroup($event, 'previewLeftPinnedColumns')\r\n                \"\r\n                (cdkDropListDropped)=\"onDropGroup()\"\r\n                style=\"min-width: 1px\"\r\n              >\r\n                <div\r\n                  class=\"dragable-header\"\r\n                  cdkDrag\r\n                  [cdkDragData]=\"col\"\r\n                  *ngFor=\"\r\n                    let col of leftPinnedColumns;\r\n                    let i = index;\r\n                    trackBy: trackByField\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      headerCell;\r\n                      context: {\r\n                        $implicit: col,\r\n                        index: i,\r\n                        section: 'previewLeftPinnedColumns'\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                  <ng-template cdkDragPreview\r\n                    ><div class=\"p-2 border d-flex gap-2\">\r\n                      <div>\r\n                        <span\r\n                          *ngIf=\"!draggingInGroupArea\"\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/arrows-move.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n                      <div>{{ col.header }}</div>\r\n                    </div>\r\n                  </ng-template>\r\n                  <ng-template cdkDragPlaceholder>\r\n                    <div *ngIf=\"!draggingInGroupArea\">\r\n                      <div\r\n                        *ngTemplateOutlet=\"\r\n                          headerCell;\r\n                          context: {\r\n                            $implicit: col,\r\n                            index: i,\r\n                            section: ''\r\n                          }\r\n                        \"\r\n                      ></div>\r\n                    </div>\r\n                    <div\r\n                      *ngIf=\"draggingInGroupArea\"\r\n                      class=\"d-flex gap-2 ms-2\"\r\n                      style=\"opacity: 0.6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngIf=\"col?.children?.length; else singleCol\"\r\n                      >\r\n                        <ng-container\r\n                          *ngFor=\"\r\n                            let child of col.children;\r\n                            let i = index;\r\n                            trackBy: trackByField\r\n                          \"\r\n                        >\r\n                          <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                              topGroupingRowPlaceholder;\r\n                              context: {\r\n                                $implicit: child,\r\n                                showChevron:\r\n                                  col.children.length > 1 &&\r\n                                  i != col.children.length - 1\r\n                              }\r\n                            \"\r\n                          ></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n\r\n                      <ng-template #singleCol>\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            topGroupingRowPlaceholder;\r\n                            context: {\r\n                              $implicit: col,\r\n                              showChevron: col?.children?.length > 1\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </ng-template>\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- Data Grid Center Pinned Header starts here -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <div\r\n              class=\"data-grid-header center-scrollable\"\r\n              #centerPinnedHeader\r\n              (scroll)=\"onCenterBodyScroll($event)\"\r\n              id=\"center-pinned-header\"\r\n              cdkDropList\r\n              [cdkDropListConnectedTo]=\"\r\n                showRowsGrouping ? ['rows-grouping-top-container'] : []\r\n              \"\r\n              [cdkDropListData]=\"centerColumns\"\r\n              cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListSortingDisabled]=\"\r\n                isDisableColumnGrouping && draggingInGroupArea\r\n              \"\r\n              (cdkDropListEntered)=\"onDropListEnter($event, 'center')\"\r\n              (cdkDropListSorted)=\"onSortGroup($event, 'previewCenterColumns')\"\r\n              (cdkDropListDropped)=\"onDropGroup()\"\r\n              [style.maxWidth]=\"\r\n                'calc(100% - ' +\r\n                (rightPinnedHeader.offsetWidth + leftPinnedHeader.offsetWidth) +\r\n                'px)'\r\n              \"\r\n            >\r\n              <div\r\n                *ngIf=\"groupedColumns?.length\"\r\n                style=\"min-width: 200px\"\r\n                class=\"h-100 align-items-center\"\r\n                #columnsGroupedBox\r\n                id=\"groupBoxHeaderDiv\"\r\n              >\r\n                <div\r\n                  class=\"d-flex w-100 justify-content-between align-items-center border-below\"\r\n                  [style.height.px]=\"\r\n                    showFilterRow ? headerRowHeight * 2 : headerRowHeight\r\n                  \"\r\n                >\r\n                  <div class=\"ps-3\">Group</div>\r\n                  <div class=\"d-flex\">\r\n                    <div\r\n                      class=\"three-dots cursor-pointer\"\r\n                      (click)=\"\r\n                        openThreeDotsMenu($event, 'group');\r\n                        isThreeDotsFilterOpen = false\r\n                      \"\r\n                    >\r\n                      <span\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          'data-grid/icons/three-dots-vertical.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      ></span>\r\n                    </div>\r\n                    <div\r\n                      (mousedown)=\"\r\n                        $event.stopPropagation(); onResizeGroupBox($event)\r\n                      \"\r\n                      class=\"resize-handle\"\r\n                      style=\"margin-right: -2px\"\r\n                    >\r\n                      <span\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          'data-grid/icons/resize-handle.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      ></span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <div\r\n                  [style.height.px]=\"headerRowHeight\"\r\n                  class=\"border-below\"\r\n                ></div>\r\n              </div>\r\n              <span\r\n                class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\r\n                style=\"min-width: 30px; height: 100%\"\r\n                *ngIf=\"gridType === 'Assets' || gridType === 'Tasks'\"\r\n              >\r\n              </span>\r\n              <div\r\n                class=\"dragable-header\"\r\n                (cdkDragStarted)=\"\r\n                  checkColumnGroupingStatus(col);\r\n                  dragStartOnGroup(col);\r\n                  onDragStarted(col)\r\n                \"\r\n                (cdkDragMoved)=\"onDragMoved($event)\"\r\n                (cdkDragEnded)=\"onDragEnded()\"\r\n                cdkDrag\r\n                [cdkDragData]=\"col\"\r\n                *ngFor=\"\r\n                  let col of centerColumns;\r\n                  let i = index;\r\n                  trackBy: trackById\r\n                \"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    headerCell;\r\n                    context: {\r\n                      $implicit: col,\r\n                      index: i,\r\n                      section: 'previewCenterColumns'\r\n                    }\r\n                  \"\r\n                >\r\n                </ng-container>\r\n                <ng-template cdkDragPreview\r\n                  ><div class=\"p-2 border d-flex gap-2\">\r\n                    <div>\r\n                      <span\r\n                        *ngIf=\"!isOutsideContainer\"\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          (draggingInGroupArea\r\n                            ? 'data-grid/icons/justify.svg'\r\n                            : 'data-grid/icons/arrows-move.svg')\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      >\r\n                      </span>\r\n                      <span\r\n                        *ngIf=\"isOutsideContainer\"\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      >\r\n                      </span>\r\n                    </div>\r\n                    <div>{{ col.header }}</div>\r\n                  </div>\r\n                </ng-template>\r\n                <ng-template cdkDragPlaceholder>\r\n                  <div *ngIf=\"!draggingInGroupArea\">\r\n                    <div\r\n                      *ngTemplateOutlet=\"\r\n                        headerCell;\r\n                        context: {\r\n                          $implicit: col,\r\n                          index: i,\r\n                          section: 'centerColumns'\r\n                        }\r\n                      \"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"draggingInGroupArea && !isOutsideContainer\"\r\n                    class=\"d-flex gap-2 ms-2\"\r\n                    style=\"opacity: 0.6\"\r\n                  >\r\n                    <ng-container *ngIf=\"col?.children?.length; else singleCol\">\r\n                      <ng-container\r\n                        *ngFor=\"\r\n                          let child of col.children;\r\n                          let i = index;\r\n                          trackBy: trackById\r\n                        \"\r\n                      >\r\n                        <ng-container *ngIf=\"child?.is_groupable\">\r\n                          <ng-container\r\n                            *ngTemplateOutlet=\"\r\n                              topGroupingRowPlaceholder;\r\n                              context: {\r\n                                $implicit: child,\r\n                                showChevron:\r\n                                  col.children.length > 1 &&\r\n                                  i != col.children.length - 1\r\n                              }\r\n                            \"\r\n                          ></ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-template #singleCol>\r\n                      <ng-container *ngIf=\"col?.is_groupable\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            topGroupingRowPlaceholder;\r\n                            context: {\r\n                              $implicit: col,\r\n                              showChevron: col?.children?.length > 1\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- Data Grid Right Pinned Header starts here -->\r\n            <!-- ********************************************************************************* -->\r\n            <!-- ********************************************************************************* -->\r\n            <div\r\n              [style.backgroundColor]=\"headerBackgroundColor\"\r\n              cdkDropList\r\n              id=\"right-pinned-header\"\r\n              [cdkDropListConnectedTo]=\"\r\n                showRowsGrouping ? ['rows-grouping-top-container'] : []\r\n              \"\r\n              cdkDropListOrientation=\"horizontal\"\r\n              class=\"data-grid-header right-pinned\"\r\n              (cdkDropListSorted)=\"\r\n                onSortGroup($event, 'previewRightPinnedColumns')\r\n              \"\r\n              (cdkDropListEntered)=\"onDropListEnter($event, 'right')\"\r\n              (cdkDropListDropped)=\"onDropGroup()\"\r\n              #rightPinnedHeader\r\n              class=\"right-pinned-header d-flex\"\r\n              style=\"min-width: 0.2px\"\r\n            >\r\n              <div\r\n                class=\"dragable-header\"\r\n                cdkDrag\r\n                [cdkDragData]=\"col\"\r\n                *ngFor=\"\r\n                  let col of rightPinnedColumns;\r\n                  let i = index;\r\n                  trackBy: trackById\r\n                \"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    headerCell;\r\n                    context: {\r\n                      $implicit: col,\r\n                      pinnedRight: true,\r\n                      index: i,\r\n                      section: 'right'\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n                <ng-template cdkDragPreview\r\n                  ><div class=\"p-2 border d-flex gap-2\">\r\n                    <div>\r\n                      <span\r\n                        *ngIf=\"!draggingInGroupArea\"\r\n                        [inlineSVG]=\"\r\n                          singleSpaAssetsPath +\r\n                          'data-grid/icons/arrows-move.svg'\r\n                        \"\r\n                        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                      ></span>\r\n                    </div>\r\n                    <div>{{ col.header }}</div>\r\n                  </div>\r\n                </ng-template>\r\n                <ng-template cdkDragPlaceholder>\r\n                  <div *ngIf=\"!draggingInGroupArea\">\r\n                    <div\r\n                      *ngTemplateOutlet=\"\r\n                        headerCell;\r\n                        context: {\r\n                          $implicit: col,\r\n                          index: i,\r\n                          section: 'right'\r\n                        }\r\n                      \"\r\n                    ></div>\r\n                  </div>\r\n                  <div\r\n                    *ngIf=\"draggingInGroupArea\"\r\n                    class=\"d-flex gap-2 ms-2\"\r\n                    style=\"opacity: 0.6\"\r\n                  >\r\n                    <ng-container *ngIf=\"col?.children?.length; else singleCol\">\r\n                      <ng-container\r\n                        *ngFor=\"\r\n                          let child of col.children;\r\n                          let i = index;\r\n                          trackBy: trackById\r\n                        \"\r\n                      >\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            topGroupingRowPlaceholder;\r\n                            context: {\r\n                              $implicit: child,\r\n                              showChevron:\r\n                                col.children.length > 1 &&\r\n                                i != col.children.length - 1\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-template #singleCol>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                          topGroupingRowPlaceholder;\r\n                          context: {\r\n                            $implicit: col,\r\n                            showChevron: col?.children?.length > 1\r\n                          }\r\n                        \"\r\n                      ></ng-container>\r\n                    </ng-template>\r\n                  </div>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <!-- Data Grid Body starts here -->\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <!--########################################################################################################################################################################################################################### -->\r\n          <div\r\n            class=\"h-100 d-flex justify-content-center align-items-center\"\r\n            *ngIf=\"!dataSet?.length && !loading && !dataSetLoading\"\r\n          >\r\n            <!-- <div\r\n            [inlineSVG]=\"\r\n              singleSpaAssetsPath + 'data-grid/icons/record-not-found.svg'\r\n            \"\r\n            class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n          ></div> -->\r\n            <div>No Record Found</div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"position-absolute w-100 h-100 d-flex justify-content-center align-items-center loading-overlay\"\r\n            *ngIf=\"loading || dataSetLoading\"\r\n            style=\"\r\n              z-index: 999;\r\n              backdrop-filter: blur(1px);\r\n            \"\r\n            [style.backgroundColor]=\"bodyBackgroundColor\"\r\n          >\r\n            <div class=\"spinner-border text-primary\" role=\"status\">\r\n              <!-- <span class=\"loader\"></span> -->\r\n              <!-- <span class=\"visually-hidden\">Loading...</span> -->\r\n              <!-- </div> -->\r\n            </div>\r\n          </div>\r\n\r\n          <div\r\n            class=\"data-grid-body-wrapper position-relative d-flex\"\r\n            [style.height]=\"bodyWrapperHeight\"\r\n            style=\"overflow-y: auto; overflow-x: hidden\"\r\n            #mainScroll\r\n            (scroll)=\"onMainScroll($event)\"\r\n            [style.scrollbarWidth]=\"verticalScrollbarWidth\"\r\n          >\r\n            <!-- LEFT PINNED -->\r\n            <div\r\n              [style.height.px]=\"\r\n                !groupedColumns.length ? originalDataSet.length * rowHeight : 0\r\n              \"\r\n            ></div>\r\n            <div [class.h-100]=\"originalDataSet.length < 8\">\r\n              <div\r\n                class=\"data-grid-body left-pinned-body w-100\"\r\n                style=\"overflow-y: hidden\"\r\n                [class.border-right]=\"hasLeftPinnedColumns\"\r\n                [class.transparent-border-right]=\"!hasLeftPinnedColumns\"\r\n                [style.transform]=\"'translateY(' + translateY + 'px)'\"\r\n                [style.backgroundColor]=\"leftPinnedBackgroundColor\"\r\n                [class.h-100]=\"originalDataSet.length < 8\"\r\n               *ngIf=\"!loading && !dataSetLoading\"\r\n                [@rowDynamic]=\"rowAnimation\"\r\n\r\n                \r\n              >\r\n                <ng-container\r\n                  *ngFor=\"\r\n                    let row of visibleRows;\r\n                    let i = index;\r\n                    trackBy: trackById\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: row,\r\n                        columns: previewLeftPinnedColumns,\r\n                        isEven: (startIndex + i) % 2 === 0,\r\n                        isOdd: (startIndex + i) % 2 !== 0,\r\n                        isLeft: true,\r\n                        section: 'left',\r\n                        isTotalRow: false\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: { __virtualIndex: 0 },\r\n                        columns: previewLeftPinnedColumns,\r\n                        isEven: false,\r\n                        isOdd: false,\r\n                        section: 'left',\r\n                        isTotalRow: true\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- CENTER -->\r\n            <div\r\n              class=\"h-100\"\r\n              [style.width.px]=\"centerPinnedHeader.clientWidth\"\r\n              [style.backgroundColor]=\"bodyBackgroundColor\"\r\n            >\r\n              <div\r\n                class=\"data-grid-body center-scrollable\"\r\n                [class.h-100]=\"originalDataSet.length < 8\"\r\n                style=\"overflow-y: hidden; overflow-x: auto\"\r\n                [style.transform]=\"'translateY(' + translateY + 'px)'\"\r\n                [style.backgroundColor]=\"bodyBackgroundColor\"\r\n                #centerScrollableBody\r\n                (scroll)=\"onCenterBodyScroll($event)\"\r\n                [style.boxShadow]=\"leftPinnedBoxshadow\"\r\n              >\r\n              <div [@rowDynamic]=\"rowAnimation\" *ngIf=\"!loading && !dataSetLoading\">\r\n                <ng-container\r\n                  *ngFor=\"\r\n                    let row of visibleRows;\r\n                    let i = index;\r\n                    trackBy: trackById\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: row,\r\n                        columns: previewCenterColumns,\r\n                        isEven: (startIndex + i) % 2 === 0,\r\n                        isOdd: (startIndex + i) % 2 !== 0,\r\n                        section: 'center',\r\n                        isTotalRow: false\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: { __virtualIndex: 0 },\r\n                        columns: previewCenterColumns,\r\n                        isEven: false,\r\n                        isOdd: false,\r\n                        section: 'center',\r\n                        isTotalRow: true\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- RIGHT PINNED -->\r\n            <div\r\n              class=\"right-pinned-body-wrapper\"\r\n              *ngIf=\"hasRightPinnedColumns\"\r\n              [class.h-100]=\"originalDataSet.length < 8\"\r\n              [style.maxWidth.px]=\"\r\n                isScrollbarVisible\r\n                  ? rightPinnedHeader.offsetWidth - 15\r\n                  : rightPinnedHeader.offsetWidth\r\n              \"\r\n              [style.backgroundColor]=\"rightPinnedBackgroundColor\"\r\n            >\r\n              <div\r\n                class=\"data-grid-body right-pinned-body w-100 h-100\"\r\n                style=\"overflow-y: hidden\"\r\n                [style.transform]=\"'translateY(' + translateY + 'px)'\"\r\n                [style.boxShadow]=\"rightPinnedBoxshadow\"\r\n                [style.backgroundColor]=\"rightPinnedBackgroundColor\"\r\n                *ngIf=\"!loading && !dataSetLoading\"\r\n                [@rowDynamic]=\"rowAnimation\"\r\n              >\r\n                <ng-container\r\n                  *ngFor=\"\r\n                    let row of visibleRows;\r\n                    let i = index;\r\n                    trackBy: trackById\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: row,\r\n                        columns: previewRightPinnedColumns,\r\n                        isEven: (startIndex + i) % 2 === 0,\r\n                        isOdd: (startIndex + i) % 2 !== 0,\r\n                        section: 'right',\r\n                        isTotalRow: false\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      rowCell;\r\n                      context: {\r\n                        $implicit: { __virtualIndex: 0 },\r\n                        columns: previewRightPinnedColumns,\r\n                        isEven: false,\r\n                        isOdd: false,\r\n                        section: 'right',\r\n                        isTotalRow: true\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              style=\"top: auto; left: auto\"\r\n              (click)=\"\r\n                $event.stopPropagation();\r\n                fullscreenImage = null;\r\n                cdr.detectChanges()\r\n              \"\r\n              [style.width.px]=\"dataGridContainer.offsetWidth\"\r\n              [style.height.px]=\"\r\n                dataGridContainer.offsetHeight - (footerRowHeight + 100)\r\n              \"\r\n              class=\"image-modal full-image-modal\"\r\n              *ngIf=\"fullscreenImage\"\r\n            >\r\n              <img\r\n                (click)=\"$event.stopPropagation()\"\r\n                [src]=\"fullscreenImage\"\r\n                alt=\"Fullscreen Image\"\r\n              />\r\n            </div>\r\n            <div\r\n              *ngIf=\"selectedRows.size > 0 && showTaskbar\"\r\n              class=\"taskbar w-100\"\r\n              [style.bottom.px]=\"85\"\r\n            >\r\n              <div class=\"selected-rows-action-bar\" [@slideUp]>\r\n                <span class=\"selected-count\">\r\n                  {{ selectedRows.size }} selected of\r\n                  {{\r\n                    paginationConfig.totalResults ||\r\n                      config?.paginationParams?.totalItems\r\n                  }}\r\n                  Total\r\n                </span>\r\n                <div class=\"action-buttons d-flex align-items-center\">\r\n                  <ng-container\r\n                    *ngFor=\"let action of taskbarActions; let i = index\"\r\n                  >\r\n                    <ng-container *ngIf=\"action?.has_permission\">\r\n                      <span\r\n                        class=\"action-btn verified btn {{ action }}\"\r\n                        (click)=\"onVerifyClick(action?.actionName)\"\r\n                        >{{ action?.actionName }}</span\r\n                      >\r\n                      <span\r\n                        *ngIf=\"\r\n                          taskbarActions.length > 1 &&\r\n                          i !== taskbarActions.length - 1 &&\r\n                          taskbarActions[i + 1]?.has_permission\r\n                        \"\r\n                        class=\"\"\r\n                        >|</span\r\n                      >\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <button (click)=\"clearSelectionState(tableType);selectedRows.clear();\" class=\"clear-btn ms-2 mt-2\">\r\n                    <i class=\"bi bi-x-circle\"></i> Clear Selection\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- Vertical Fake scroll Bar -->\r\n          <!-- <div\r\n            (scroll)=\"onMainFakeScroll($event)\"\r\n            class=\"fake-scrollbar fake-scrollbar-vertical d-none\"\r\n            [style.scrollbarWidth]=\"verticalScrollbarWidth\"\r\n            [style.top.px]=\"\r\n              showColumnsGrouping && showFilterRow\r\n                ? headerRowHeight * 3\r\n                : showColumnsGrouping || showFilterRow\r\n                ? headerRowHeight * 2\r\n                : headerRowHeight\r\n            \"\r\n            #fakeScroll\r\n            [style.height]=\"bodyWrapperHeight\"\r\n            style=\"\r\n              overflow-y: auto;\r\n              overflow-x: hidden;\r\n              width: 17px;\r\n              position: absolute;\r\n              right: 0;\r\n              background-color: f1f2f3;\r\n              z-index: 10;\r\n            \"\r\n          >\r\n            <div [style.height.px]=\"rowHeight * dataSetLength\"></div>\r\n          </div> -->\r\n        </div>\r\n\r\n        <!-- Horizintal Fake Scrollbars -->\r\n        <div\r\n          class=\"d-flex justify-content-between\"\r\n          *ngIf=\"hasScroll && !shouldRestoreScroll\"\r\n        >\r\n          <div\r\n            [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\r\n            class=\"fake-horizintal-scrollbar\"\r\n            #fakeScroll\r\n            [style.width.px]=\"leftPinnedHeader.offsetWidth\"\r\n            style=\"overflow-x: scroll\"\r\n          ></div>\r\n          <div\r\n            [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\r\n            (scroll)=\"onCenterBodyScroll($event)\"\r\n            class=\"fake-horizintal-scrollbar\"\r\n            #horizintalFakeScroll\r\n            [style.width.px]=\"centerPinnedHeader.offsetWidth\"\r\n          >\r\n            <div [style.width.px]=\"centerPinnedHeader.scrollWidth - 10\"></div>\r\n          </div>\r\n          <div\r\n            [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\r\n            class=\"fake-horizintal-scrollbar\"\r\n            #fakeScroll\r\n            [style.width.px]=\"rightPinnedHeader.offsetWidth\"\r\n            style=\"overflow-x: scroll\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Side Menu Implemented Here -->\r\n      <div\r\n        *ngIf=\"showSideMenu\"\r\n        [style.width.px]=\"sideMenuVisible ? 280 : 30\"\r\n        class=\"right-menu h-100\"\r\n        [style.backgroundColor]=\"sidemenuBackgroundColor\"\r\n      >\r\n        <div class=\"h-100 d-flex flex-row-reverse\">\r\n          <div\r\n            style=\"width: 30px\"\r\n            class=\"d-flex flex-column align-items-center cursor-pointer\"\r\n            [class.border-start]=\"sideMenuVisible\"\r\n          >\r\n            <div\r\n              (click)=\"toggleSideMenu('cols')\"\r\n              [class.bg-fff]=\"\r\n                currentOpenedSideMenue == 'cols' && sideMenuVisible\r\n              \"\r\n              [class.border-below]=\"sideMenuVisible\"\r\n              class=\"columns-button d-flex flex-column align-items-center\"\r\n            >\r\n              <div>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n              <div class=\"side-menue-text\">Columns</div>\r\n            </div>\r\n\r\n            <div\r\n              (click)=\"toggleSideMenu('filtrs')\"\r\n              [class.bg-fff]=\"\r\n                currentOpenedSideMenue == 'filtrs' && sideMenuVisible\r\n              \"\r\n              [class.border-below]=\"\r\n                sideMenuVisible && currentOpenedSideMenue == 'filtrs'\r\n              \"\r\n              class=\"columns-button d-flex flex-column align-items-center\"\r\n            >\r\n              <div>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n              <div class=\"side-menue-text\">Filter</div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            class=\"h-100\"\r\n            *ngIf=\"sideMenuVisible\"\r\n            [ngStyle]=\"{ width: sideMenuVisible ? '250px' : '' }\"\r\n          >\r\n            <div class=\"h-100\">\r\n              <ng-container\r\n                *ngIf=\"currentOpenedSideMenue == 'cols' && sideMenuVisible\"\r\n              >\r\n                <ng-container *ngTemplateOutlet=\"columnPannel\"></ng-container>\r\n                <!-- Column Items -->\r\n                <div class=\"column-panel-body px-3\">\r\n                  <ng-container\r\n                    *ngFor=\"let col of columns; trackBy: trackByField\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                </div>\r\n                <hr />\r\n\r\n                <div class=\"side-menu-row-groups\" style=\"height: 30%\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"sideMenuRowGroups\"\r\n                  ></ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngIf=\"currentOpenedSideMenue == 'filtrs' && sideMenuVisible\"\r\n              >\r\n                <ng-container *ngTemplateOutlet=\"sideFilters\"></ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      [style.height.px]=\"footerRowHeight\"\r\n      class=\"border-top\"\r\n      [style.backgroundColor]=\"footerRowBackgroundColor\"\r\n    >\r\n      <!-- Rows: <span class=\"fw-500 ms-1\">{{ dataSet.length }}</span> -->\r\n\r\n      <div\r\n        class=\"pagination-container\"\r\n        [style.height.px]=\"footerRowHeight\"\r\n        [style.padding.px]=\"footerPadding\"\r\n      >\r\n        <div class=\"page-size\">\r\n          <select\r\n            [(ngModel)]=\"paginationConfig.limit\"\r\n            (change)=\"onPageSizeChange()\"\r\n          >\r\n            <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\r\n              {{ size }}\r\n            </option>\r\n          </select>\r\n          <span class=\"separator\"> per page </span>\r\n        </div>\r\n\r\n        <div class=\"page-info\">\r\n          Results:\r\n          {{ (paginationConfig.page - 1) * paginationConfig.limit + 1 }}-{{\r\n            paginationConfig.page * paginationConfig.limit <\r\n            paginationConfig.totalResults\r\n              ? paginationConfig.page * paginationConfig.limit\r\n              : paginationConfig.totalResults\r\n          }}\r\n          of\r\n          {{ paginationConfig.totalResults }}\r\n        </div>\r\n\r\n        <div class=\"page-buttons\">\r\n          <button\r\n            (click)=\"goToPage(paginationConfig.page - 1)\"\r\n            [disabled]=\"paginationConfig.page === 1\"\r\n          >\r\n            \u2039\r\n          </button>\r\n\r\n          <ng-container *ngFor=\"let page of visiblePages\">\r\n            <button\r\n              *ngIf=\"page !== '...'\"\r\n              (click)=\"goToPage(page)\"\r\n              [class.active]=\"page === paginationConfig.page\"\r\n            >\r\n              {{ page }}\r\n            </button>\r\n            <span *ngIf=\"page === '...'\">...</span>\r\n          </ng-container>\r\n\r\n          <button\r\n            (click)=\"goToPage(paginationConfig.page + 1)\"\r\n            [disabled]=\"paginationConfig.page === paginationConfig.totalResults\"\r\n          >\r\n            \u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n<!-- Header Cell Template -->\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\r\n\r\n<ng-template\r\n  #headerCell\r\n  let-col\r\n  let-pinnedRight=\"pinnedRight\"\r\n  let-i=\"index\"\r\n  let-columnIndex=\"index\"\r\n  let-sections=\"section\"\r\n  let-calledFromNestedPlaceholder=\"calledFromNestedPlaceholder\"\r\n>\r\n  <div>\r\n    <!-- Group Header -->\r\n    <ng-container *ngIf=\"col.children?.length > 0; else flatHeader\">\r\n      <div cdkDroplistGroup class=\"group-column-wrapper\">\r\n        <!-- Parent Header -->\r\n        <div\r\n          *ngIf=\"shouldTheGroupHeaderShow(col)\"\r\n          class=\"header-cell group-header\"\r\n          [style.height.px]=\"headerRowHeight\"\r\n          [style.min-height.px]=\"headerRowHeight\"\r\n          [style.max-height.px]=\"headerRowHeight\"\r\n          [class.border-right]=\"showVerticalBorder\"\r\n          [style.gridColumn]=\"'span ' + col.children.length\"\r\n          [style.fontWeight]=\"headerFontWeight\"\r\n          [class.flex-row-reverse]=\"pinnedRight\"\r\n          [class.justify-content-end]=\"pinnedRight\"\r\n          style=\"grid-row: 1\"\r\n        >\r\n          <div\r\n            class=\"group-header-content\"\r\n            [title]=\"col.header\"\r\n            [class.ms-2]=\"pinnedRight\"\r\n          >\r\n            {{ col.header }}\r\n          </div>\r\n          <div\r\n            class=\"resize-handle\"\r\n            (dblclick)=\"autosizeColumn(col.children)\"\r\n            (mousedown)=\"\r\n              $event.stopPropagation(); onResizeGroup($event, col, pinnedRight)\r\n            \"\r\n          >\r\n            <span\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n              \"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Child Headers and Filters -->\r\n\r\n        <div\r\n          class=\"d-flex\"\r\n          cdkDropList\r\n          cdkDropListOrientation=\"horizontal\"\r\n          [cdkDropListData]=\"col.children\"\r\n          (cdkDropListSorted)=\"onChildDroplistSorted($event, sections)\"\r\n          (cdkDropListDropped)=\"onChildDroplistDroped($event)\"\r\n          [cdkDropListSortingDisabled]=\"false\"\r\n          [cdkDropListConnectedTo]=\"\r\n            showRowsGrouping ? ['rows-grouping-top-container'] : []\r\n          \"\r\n        >\r\n          <div\r\n            cdkDrag\r\n            [cdkDragData]=\"child\"\r\n            *ngFor=\"let child of col.children; let i = index\"\r\n          >\r\n            <!-- Child Header -->\r\n            <ng-container *ngIf=\"child.is_visible && !child['isRowGrouped']\">\r\n              <div\r\n                cdkDragHandle\r\n                class=\"header-cell one-row-header-cells cursor-pointer\"\r\n                [class.border-right]=\"showVerticalBorder\"\r\n                [attr.field]=\"child.field\"\r\n                [style.width.px]=\"child.width\"\r\n                [style.min-width.px]=\"child.width\"\r\n                [style.min-height.px]=\"headerRowHeight\"\r\n                [style.max-height.px]=\"headerRowHeight\"\r\n                [style.fontWeight]=\"headerFontWeight\"\r\n                style=\"grid-row: 2\"\r\n                [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(child)\"\r\n              >\r\n                <div\r\n                  class=\"d-flex justify-content-between h-100 align-items-center w-100\"\r\n                >\r\n                  <div\r\n                    class=\"d-flex justify-content-between align-items-center w-100\"\r\n                    [class.flex-row-reverse]=\"pinnedRight\"\r\n                  >\r\n                    <div\r\n                      class=\"text-ellipsis h-100 d-flex align-items-center w-100\"\r\n                      [title]=\"col.header\"\r\n                      [class.w-100]=\"pinnedRight\"\r\n                    >\r\n                      <div\r\n                        class=\"text-ellipsis h-100\"\r\n                        [class.editable-header]=\"child?.is_editable\"\r\n                        (click)=\"\r\n                          openThreeDotsMenu($event, child);\r\n                          openFilteronThreeDotsClick(child)\r\n                        \"\r\n                      >\r\n                        {{ child.header }}\r\n                      </div>\r\n                    </div>\r\n\r\n                    <div\r\n                      class=\"position-relative d-flex\"\r\n                      [class.flex-row-reverse]=\"pinnedRight\"\r\n                    >\r\n                      <div\r\n                        [class.me-2]=\"pinnedRight\"\r\n                        class=\"d-flex align-items-center\"\r\n                        *ngIf=\"child.pinned\"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n                      <div\r\n                        class=\"three-dots p-1\"\r\n                        (click)=\"\r\n                          openThreeDotsMenu($event, child);\r\n                          isThreeDotsFilterOpen = false\r\n                        \"\r\n                        style=\"cursor: pointer\"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/three-dots-vertical.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n\r\n                      <!-- Only show menu if this column is active -->\r\n                      <div\r\n                        class=\"position-absolute\"\r\n                        *ngIf=\"activeCol === child\"\r\n                        style=\"top: -50%; z-index: 21\"\r\n                        [style.left.px]=\"\r\n                          -(!child?.pinned ? centerPinnedHeader.scrollLeft : 0)\r\n                        \"\r\n                        [style.top.px]=\"\r\n                          isThreeDotsFilterOpen\r\n                            ? showFilterRow || showColumnsGrouping\r\n                              ? headerRowHeight * 2 - 10\r\n                              : headerRowHeight - 10\r\n                            : 0\r\n                        \"\r\n                      >\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            columnMenu;\r\n                            context: {\r\n                              col: child,\r\n                              isNestedTable: false,\r\n                              section: sections,\r\n                              columnIndex: columnIndex,\r\n                              childColIndex: i\r\n                            }\r\n                          \"\r\n                        ></ng-container>\r\n                      </div>\r\n\r\n                      <div\r\n                        class=\"resize-handle\"\r\n                        (dblclick)=\"autosizeColumn(child)\"\r\n                        (mousedown)=\"\r\n                          $event.stopPropagation();\r\n                          onResizeColumn($event, child)\r\n                        \"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/resize-handle.svg'\r\n                          \"\r\n                          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                        ></span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Filter Cell -->\r\n              <div\r\n                *ngIf=\"showFilterRow\"\r\n                [style.backgroundColor]=\"headerBackgroundColor\"\r\n                class=\"header-cell filter-cell\"\r\n                [class.border-right]=\"showVerticalBorder\"\r\n                [attr.field]=\"child.field\"\r\n                [style.width.px]=\"child.width\"\r\n                [style.min-width.px]=\"child.width\"\r\n                [style.height.px]=\"headerRowHeight\"\r\n                [style.min-height.px]=\"headerRowHeight\"\r\n                [style.max-height.px]=\"headerRowHeight\"\r\n                [class.border-right]=\"showVerticalBorder\"\r\n                style=\"grid-row: 3\"\r\n              >\r\n                <div\r\n                  class=\"header-cell filter-cell\"\r\n                  [attr.field]=\"col.field\"\r\n                  [style.width.px]=\"col.width\"\r\n                  [style.min-width.px]=\"col.width\"\r\n                  [style.height.px]=\"headerRowHeight\"\r\n                  [style.min-height.px]=\"headerRowHeight\"\r\n                  [style.max-height.px]=\"headerRowHeight\"\r\n                >\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control form-control-sm\"\r\n                    placeholder=\"Filter\"\r\n                    [(ngModel)]=\"child.filterValue\"\r\n                    (ngModelChange)=\"onFilterChange(child)\"\r\n                    (paste)=\"onFilterChange(child); applyDropdownFilter()\"\r\n                    [readonly]=\"\r\n                      child?.type == 'dropdown' || child?.type == 'image' || child?.type == 'array'\r\n                    \"\r\n                    [class.disabled-search-input]=\"\r\n                      child?.type == 'dropdown' || child?.type == 'image' || child?.type == 'array'\r\n                    \"\r\n                    (click)=\"\r\n                      $event.stopPropagation();\r\n                      openFilterFromDisabledSearchedInput(child)\r\n                    \"\r\n                    (keydown.enter)=\"applyDropdownFilter()\"\r\n                    (mousedown)=\"$event.stopPropagation()\"\r\n                  />\r\n                  <span\r\n                    class=\"filter-icon-wrapper\"\r\n                    (click)=\"$event.stopPropagation(); openFilter(child)\"\r\n                    [class.filter-applied]=\"isFilterAppliedOnColumn(child)\"\r\n                    [class.pe-none]=\"child?.type == 'image'\"\r\n                    ><span\r\n                      [inlineSVG]=\"\r\n                        singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\r\n                      \"\r\n                      class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                    ></span>\r\n                    <span\r\n                      *ngIf=\"isFilterAppliedOnColumn(child)\"\r\n                      style=\"\r\n                        width: 7px;\r\n                        height: 7px;\r\n                        box-shadow: 0px 0px 3px #7486ff;\r\n                        background-color: rgb(0 163 233);\r\n                        position: absolute;\r\n                        right: 4px;\r\n                        top: 12px;\r\n                      \"\r\n                      class=\"rounded-circle d-block\"\r\n                    ></span\r\n                  ></span>\r\n\r\n                  <div\r\n                    class=\"position-absolute filter-row-filter-wrapper\"\r\n                    *ngIf=\"activeFilterCell?.field == child?.field\"\r\n                    style=\"top: 100%; right: 0; z-index: 99\"\r\n                    [style.left.px]=\"\r\n                      child?.pinned ? 0 : -centerPinnedHeader.scrollLeft\r\n                    \"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"filterMenu; context: { col: child }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template cdkDragPreview\r\n              ><div class=\"p-2 border d-flex gap-2\">\r\n                <div\r\n                  *ngIf=\"\r\n                    !draggingInGroupArea ||\r\n                    (child.is_groupable && draggingInGroupArea)\r\n                  \"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div *ngIf=\"draggingInGroupArea && !child.is_groupable\">\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/ban.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div>{{ child.header }}</div>\r\n              </div>\r\n            </ng-template>\r\n            <ng-template cdkDragPlaceholder>\r\n              <div *ngIf=\"!draggingInGroupArea\" class=\"position-relative\">\r\n                <div\r\n                  *ngTemplateOutlet=\"\r\n                  childHeaderPlaceholder;\r\n                  context: {\r\n                    $implicit: child,\r\n                    index: i,\r\n                    sections: sections,\r\n                    calledFromNestedPlaceholder: true,\r\n                  }\r\n                \"\r\n                ></div>\r\n              </div>\r\n              <div\r\n                *ngIf=\"draggingInGroupArea && child?.is_groupable\"\r\n                class=\"d-flex gap-2 ms-2\"\r\n                style=\"opacity: 0.6\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    topGroupingRowPlaceholder;\r\n                    context: {\r\n                      $implicit: child,\r\n                      showChevron: false,\r\n                      pinnedRight: pinnedRight,\r\n                      sections: sections,\r\n                      index: i\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- Flat Header || Single Header Cell-->\r\n    <ng-template #flatHeader>\r\n      <div\r\n        class=\"group-column-wrapper\"\r\n        *ngIf=\"col.is_visible && !col['isRowGrouped']\"\r\n      >\r\n        <!-- Full-height Header Cell (spans 2 rows visually) -->\r\n        <div\r\n          class=\"header-cell one-row-header-cells\"\r\n          [attr.field]=\"col.field\"\r\n          [style.width.px]=\"col.width\"\r\n          [style.min-width.px]=\"col.width\"\r\n          [class.border-right]=\"showVerticalBorder\"\r\n          [style.min-height.px]=\"\r\n            showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\r\n          \"\r\n          [style.height.px]=\"\r\n            showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\r\n          \"\r\n          [style.fontWeight]=\"headerFontWeight\"\r\n          style=\"grid-row: 1 / span 2\"\r\n        >\r\n          <div\r\n            class=\"d-flex justify-content-between h-100 align-items-center w-100\"\r\n          >\r\n            <div\r\n              class=\"d-flex justify-content-between w-100 align-items-center\"\r\n              [class.flex-row-reverse]=\"pinnedRight\"\r\n            >\r\n              <div\r\n                class=\"text-ellipsis h-100 d-flex align-items-center w-100\"\r\n                [title]=\"col.header\"\r\n              >\r\n                <div\r\n                  class=\"text-ellipsis h-100 cursor-pointer\"\r\n                  [class.editable-header]=\"col?.is_editable\"\r\n                  [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(col)\"\r\n                  (click)=\"\r\n                    openThreeDotsMenu($event, col);\r\n                    openFilteronThreeDotsClick(col)\r\n                  \"\r\n                >\r\n                  {{ col.header }}\r\n                </div>\r\n              </div>\r\n\r\n              <div\r\n                class=\"position-relative d-flex\"\r\n                [class.flex-row-reverse]=\"pinnedRight\"\r\n              >\r\n                <div\r\n                  [class.me-2]=\"pinnedRight\"\r\n                  class=\"d-flex align-items-center\"\r\n                  *ngIf=\"col?.pinned\"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n                <div\r\n                  [class.me-2]=\"col.order_by\"\r\n                  class=\"d-flex align-items-center\"\r\n                  *ngIf=\"sortingConfig?.field == col.field\"\r\n                >\r\n                  <!-- Ascending Sort Icon -->\r\n                  <span\r\n                    *ngIf=\"sortingConfig?.order_by == 'asc'\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/sort-asc.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\r\n                    (click)=\"sortDesc(col)\"\r\n                    [class.active]=\"sortingConfig?.order_by === 'asc'\"\r\n                  ></span>\r\n\r\n                  <!-- Descending Sort Icon -->\r\n                  <span\r\n                    *ngIf=\"sortingConfig?.order_by == 'desc'\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/sort-desc.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\r\n                    (click)=\"sortAsc(col)\"\r\n                    [class.active]=\"sortingConfig?.order_by === 'desc'\"\r\n                  ></span>\r\n                </div>\r\n                <div\r\n                  class=\"three-dots p-1\"\r\n                  (click)=\"\r\n                    openThreeDotsMenu($event, col);\r\n                    isThreeDotsFilterOpen = false\r\n                  \"\r\n                  style=\"cursor: pointer\"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath +\r\n                      'data-grid/icons/three-dots-vertical.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <!-- Only show menu if this column is active -->\r\n                <div\r\n                  class=\"position-absolute\"\r\n                  *ngIf=\"activeCol === col\"\r\n                  style=\"top: -50%; z-index: 21\"\r\n                  [style.left.px]=\"\r\n                    -(!col?.pinned ? centerPinnedHeader.scrollLeft : 0)\r\n                  \"\r\n                  [style.top.px]=\"\r\n                    isThreeDotsFilterOpen\r\n                      ? showFilterRow || showColumnsGrouping\r\n                        ? headerRowHeight * 2 - 10\r\n                        : headerRowHeight - 10\r\n                      : 0\r\n                  \"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      columnMenu;\r\n                      context: {\r\n                        col: col,\r\n                        isNestedTable: false,\r\n                        section: sections,\r\n                        columnIndex: columnIndex,\r\n                        childColIndex: 0\r\n                      },\r\n                    \"\r\n                  ></ng-container>\r\n                </div>\r\n\r\n                <div\r\n                  class=\"resize-handle\"\r\n                  [class.w-100]=\"col.pinned == 'right'\"\r\n                  (dblclick)=\"autosizeColumn(col)\"\r\n                  (mousedown)=\"\r\n                    $event.stopPropagation(); onResizeColumn($event, col)\r\n                  \"\r\n                >\r\n                  <span\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n                    \"\r\n                    class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                  ></span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Filter Cell -->\r\n        <div\r\n          *ngIf=\"showFilterRow\"\r\n          [style.backgroundColor]=\"headerBackgroundColor\"\r\n          class=\"header-cell filter-cell\"\r\n          [class.border-right]=\"showVerticalBorder\"\r\n          [attr.field]=\"col.field\"\r\n          [style.width.px]=\"col.width\"\r\n          [style.min-width.px]=\"col.width\"\r\n          [style.height.px]=\"headerRowHeight\"\r\n          [style.min-height.px]=\"headerRowHeight\"\r\n          [style.max-height.px]=\"headerRowHeight\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control form-control-sm\"\r\n            placeholder=\"Filter\"\r\n            [(ngModel)]=\"col.filterValue\"\r\n            (ngModelChange)=\"onFilterChange(col)\"\r\n            [readonly]=\"col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\"\r\n            [class.disabled-search-input]=\"\r\n              col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\r\n            \"\r\n            (paste)=\"onPasteInFilterRowSearch($event, col)\"\r\n            (click)=\"\r\n              $event.stopPropagation(); openFilterFromDisabledSearchedInput(col)\r\n            \"\r\n            (keydown.enter)=\"applyDropdownFilter()\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n          <span\r\n            class=\"filter-icon-wrapper\"\r\n            (click)=\"$event.stopPropagation(); openFilter(col)\"\r\n            [class.filter-applied]=\"isFilterAppliedOnColumn(col)\"\r\n            [class.pe-none]=\"col?.type == 'image'\"\r\n            ><span\r\n              [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n            <span\r\n              *ngIf=\"isFilterAppliedOnColumn(col)\"\r\n              style=\"\r\n                width: 7px;\r\n                height: 7px;\r\n                box-shadow: 0px 0px 3px #7486ff;\r\n                background-color: rgb(0 163 233);\r\n                position: absolute;\r\n                right: 4px;\r\n                top: 12px;\r\n              \"\r\n              class=\"rounded-circle d-block\"\r\n            ></span\r\n          ></span>\r\n\r\n          <div\r\n            class=\"position-absolute filter-row-filter-wrapper\"\r\n            *ngIf=\"activeFilterCell === col\"\r\n            style=\"top: 100%; right: 0; z-index: 99\"\r\n            [style.left.px]=\"col?.pinned ? 0 : -centerPinnedHeader.scrollLeft\"\r\n          >\r\n            <ng-container\r\n              *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\r\n            ></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n<!-- Body Cell Template -->\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\r\n\r\n<ng-template\r\n  #rowCell\r\n  let-row\r\n  let-columns=\"columns\"\r\n  let-isEven=\"isEven\"\r\n  let-isOdd=\"isOdd\"\r\n  let-isLeftSection=\"isLeft\"\r\n  let-section=\"section\"\r\n  let-rowIndex=\"rowIndex\"\r\n  let-isTotalRow=\"isTotalRow\"\r\n>\r\n  <!-- Check if row is a group -->\r\n  <ng-container\r\n    *ngTemplateOutlet=\"groupRowTemplate; context: { $implicit: row, depth: 0 }\"\r\n  ></ng-container>\r\n  <ng-template #groupRowTemplate let-row let-depth=\"depth\">\r\n    <ng-container *ngIf=\"row.isGroup; else regularRow\">\r\n      <!-- Group Header -->\r\n      <div\r\n        class=\"group-header-row d-flex align-items-center\"\r\n        [style.height.px]=\"rowHeight\"\r\n        [class.border-below]=\"section !== 'center'\"\r\n        [style.width]=\"\r\n          section === 'center'\r\n            ? (centerScrollableBody?.scrollWidth ?? 0) + 'px'\r\n            : '100%'\r\n        \"\r\n      >\r\n        <div\r\n          *ngIf=\"section == 'left'\"\r\n          class=\"h-100 d-flex\"\r\n          [style.width.px]=\"leftPinnedHeader.offsetWidth - 1\"\r\n          [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n        >\r\n          <div\r\n            *ngIf=\"showSerialNumber\"\r\n            style=\"width: 50px\"\r\n            class=\"d-flex align-items-center h-100 border-right justify-content-end pe-2 s-no\"\r\n            [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n            [style.width.px]=\"55\"\r\n            [style.cursor]=\"\r\n              'url(' +\r\n              singleSpaAssetsPath +\r\n              'data-grid/icons/arrow-right.svg), auto'\r\n            \"\r\n            (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\r\n            (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\r\n            [style.color]=\"checkboxesColor\"\r\n          >\r\n            {{ getStartIndex() + (row.__virtualIndex - 1) || \"\" }}\r\n          </div>\r\n          <div\r\n          *ngIf=\"showCheckboxes\"\r\n            style=\"width: 50px\"\r\n            class=\"d-flex align-items-center justify-content-center h-100 border-right\"\r\n            [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n            [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n            [class.left-selection-border]=\"\r\n              rowSelectedIndexes.has(row.__virtualIndex)\r\n            \"\r\n            [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n            [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n            [style.color]=\"checkboxesColor\"\r\n          >\r\n            <input\r\n              style=\"width: 16px; height: 16px\"\r\n              type=\"checkbox\"\r\n              [checked]=\"getGroupCheckedState(row) === true\"\r\n              [indeterminate]=\"getGroupCheckedState(row) === undefined\"\r\n              (change)=\"selectGroupRow($event, row)\"\r\n            />\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"section == 'center'\"\r\n          [style.width.px]=\"centerPinnedHeader.scrollWidth\"\r\n          [style.minWidth.px]=\"centerPinnedHeader.scrollWidth\"\r\n          class=\"d-flex align-items-center ps-2 h-100 border-below\"\r\n          [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n          [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n          [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n        >\r\n          <div\r\n            class=\"d-flex align-items-center justify-content-between\"\r\n            [style.paddingLeft.px]=\"depth > 0 ? depth * 30 : 0\"\r\n          >\r\n            <span class=\"me-2 filter-icon-wrapper\" (click)=\"toggleExpand(row)\">\r\n              <span\r\n                class=\"data-grid-svg-icon align-items-center d-flex\"\r\n                [inlineSVG]=\"\r\n                  row.isExpand\r\n                    ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n                    : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n                \"\r\n              ></span>\r\n            </span>\r\n            <strong (click)=\"toggleExpand(row)\" class=\"cursor-pointer\">\r\n              {{ row.groupValue }} ({{ countLeafRows(row) }})\r\n            </strong>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"section == 'right'\"\r\n          [style.width.px]=\"rightPinnedHeader.offsetWidth\"\r\n          [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n          [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n          [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n        ></div>\r\n      </div>\r\n\r\n      <!-- Recursive Children -->\r\n      <div class=\"group-children\" *ngIf=\"row.isExpand\" [@slideToggle]>\r\n        <ng-container\r\n          *ngFor=\"let child of row.children; let i = index; trackBy: trackById\"\r\n        >\r\n          <ng-container *ngIf=\"child.isGroup; else dataRow\">\r\n            <!-- Recursive call for nested group -->\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                groupRowTemplate;\r\n                context: { $implicit: child, depth: depth + 1 }\r\n              \"\r\n            ></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #dataRow>\r\n            <!-- Regular data row -->\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                rowCell;\r\n                context: {\r\n                  $implicit: child,\r\n                  columns: columns,\r\n                  isEven: i % 2 === 0,\r\n                  isOdd: i % 2 !== 0,\r\n                  isLeft: isLeftSection,\r\n                  section: section,\r\n                  isTotalRow: isTotalRow\r\n                }\r\n              \"\r\n            ></ng-container>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Regular row (not a group) -->\r\n  <ng-template #regularRow>\r\n    <div\r\n      class=\"d-flex\"\r\n      [style.height.px]=\"rowHeight\"\r\n      [style.minHeight.px]=\"rowHeight\"\r\n      [style.maxHeight.px]=\"rowHeight\"\r\n    >\r\n      <span\r\n        class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\r\n        style=\"min-width: 30px; height: 100%\"\r\n        *ngIf=\"\r\n          section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\r\n        \"\r\n        [ngStyle]=\"{\r\n          'background-color': rowSelectedIndexes.has(row.__virtualIndex)\r\n            ? null\r\n            : getBackgroundColor(row, isEven, section)\r\n        }\"\r\n        [class.selected-cell]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n        [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n        [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n      >\r\n        <span\r\n          (click)=\"toggleDetailRowExpand(row)\"\r\n          *ngIf=\"row?.detail?.result?.length || gridType === 'Tasks'\"\r\n          class=\"data-grid-svg-icon filter-icon-wrapper\"\r\n          [inlineSVG]=\"\r\n            isDetailsExpanded(row)\r\n              ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n              : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n        ></span>\r\n      </span>\r\n      <div\r\n        [style.min-width.px]=\"\r\n          section == 'center' && groupedColumns?.length ? groupBoxPadding : 0\r\n        \"\r\n        [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n        [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n        [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n        (contextmenu)=\"onRightClick($event, row)\"\r\n        [style.height.px]=\"rowHeight\"\r\n        class=\"data-grid-row h-100\"\r\n        [class.even-row]=\"isEven\"\r\n        [class.odd-row]=\"isOdd\"\r\n        [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\r\n        (mouseenter)=\"onRowHover(row)\"\r\n        (mouseleave)=\"onRowLeave()\"\r\n        [ngStyle]=\"{\r\n          'background-color': getBackgroundColor(row, isEven, section)\r\n        }\"\r\n        [style.minHeight.px]=\"rowHeight\"\r\n        [style.maxHeight.px]=\"rowHeight\"\r\n      ></div>\r\n      <div\r\n        (contextmenu)=\"onRightClick($event, row)\"\r\n        [style.height.px]=\"rowHeight\"\r\n        class=\"data-grid-row\"\r\n        [class.even-row]=\"isEven\"\r\n        [class.odd-row]=\"isOdd\"\r\n        [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\r\n        (mouseenter)=\"onRowHover(row)\"\r\n        (mouseleave)=\"onRowLeave()\"\r\n        [ngStyle]=\"{\r\n          'background-color': getBackgroundColor(row, isEven, section)\r\n        }\"\r\n      >\r\n        <div\r\n          [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n          class=\"select-all-checkbox-cell justify-content-end pe-2 s-no\"\r\n          [style.width.px]=\"55\"\r\n          *ngIf=\"isLeftSection && showSerialNumber\"\r\n          [style.cursor]=\"\r\n            'url(' +\r\n            singleSpaAssetsPath +\r\n            'data-grid/icons/arrow-right.svg), auto'\r\n          \"\r\n          (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\r\n          (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\r\n          [style.color]=\"checkboxesColor\"\r\n        >\r\n          {{ getStartIndex() + (row.__virtualIndex - 1) }}\r\n        </div>\r\n        <div\r\n        class=\"border-below\"\r\n          [style.backgroundColor]=\"\r\n            rowSelectedIndexes.has(row.__virtualIndex)\r\n              ? selectedRowsBackgroundColor\r\n              : checkboxesBackgroundColor\r\n          \"\r\n          class=\"select-all-checkbox-cell\"\r\n          *ngIf=\"isLeftSection && showCheckboxes\"\r\n          [class.left-selection-border]=\"\r\n            rowSelectedIndexes.has(row.__virtualIndex)\r\n          \"\r\n          [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\r\n          [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\r\n          [style.minHeight.px]=\"rowHeight - 1\"\r\n          [style.maxHeight.px]=\"rowHeight\"\r\n        >\r\n          <input\r\n            *ngIf=\"hasAnyVisibleColumn\"\r\n             style=\"width: 16px; height: 16px\"\r\n            type=\"checkbox\"\r\n            [checked]=\"isRowSelected(row)\"\r\n            (change)=\"toggleRowSelection(row)\"\r\n          />\r\n        </div>\r\n\r\n        <!-- Render all columns -->\r\n        <ng-container\r\n          *ngFor=\"\r\n            let col of columns;\r\n            trackBy: trackByField;\r\n            let colIndex = index\r\n          \"\r\n        >\r\n          <ng-container *ngIf=\"col.children?.length > 0; else flatColumn\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let child of col.children;\r\n                trackBy: trackByField;\r\n                let subColIndex = index\r\n              \"\r\n            >\r\n              <ng-container *ngIf=\"child?.is_visible && !child?.isRowGrouped\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    cellTemplate;\r\n                    context: {\r\n                      col: child,\r\n                      row: row,\r\n                      rowIndex: rowIndex,\r\n                      colIndex: colIndex,\r\n                      subColIndex: subColIndex,\r\n                      section: section,\r\n                      isTotalRow: isTotalRow\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-template #flatColumn>\r\n            <ng-container *ngIf=\"col?.is_visible && !col?.isRowGrouped\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  cellTemplate;\r\n                  context: {\r\n                    col: col,\r\n                    row: row,\r\n                    rowIndex: rowIndex,\r\n                    colIndex: colIndex,\r\n                    subColIndex: null,\r\n                    section: section,\r\n                    isTotalRow: isTotalRow\r\n                  }\r\n                \"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      [@slideToggle]\r\n      *ngIf=\"section === 'left' && isDetailsExpanded(row)\"\r\n      class=\"accordion-details\"\r\n      style=\"max-height: 350px; overflow: hidden\"\r\n      [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          leftRightNestedPlaceholder;\r\n          context: { $implicit: row }\r\n        \"\r\n      >\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      [@slideToggle]\r\n      *ngIf=\"section === 'center' && isDetailsExpanded(row)\"\r\n      class=\"accordion-details center-section\"\r\n      style=\"\r\n        max-height: 350px;\r\n        overflow-y: hidden;\r\n        overflow-x: auto;\r\n        scrollbar-width: thin;\r\n      \"\r\n      #nestedTable\r\n      [style.width]=\"\r\n        hasRightPinnedColumns\r\n          ? '100%'\r\n          : hasVerticalScroll\r\n          ? 'calc(100% - 12px)'\r\n          : '100%'\r\n      \"\r\n    >\r\n      <ng-container *ngIf=\"gridType == 'Assets'\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"nestedTableTemplate; context: { $implicit: row }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"gridType == 'Tasks'\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            taskManagementTemplate;\r\n            context: { taskDetails: row }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      [@slideToggle]\r\n      *ngIf=\"section === 'right' && isDetailsExpanded(row)\"\r\n      class=\"accordion-details\"\r\n      style=\"max-height: 350px; overflow: hidden\"\r\n      [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          leftRightNestedPlaceholder;\r\n          context: { $implicit: row }\r\n        \"\r\n      >\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<!-- Actual Cell is Here -->\r\n<ng-template\r\n  #cellTemplate\r\n  let-col=\"col\"\r\n  let-row=\"row\"\r\n  let-section=\"section\"\r\n  let-subColIndex=\"subColIndex\"\r\n  let-rowIndex=\"rowIndex\"\r\n  let-colIndex=\"colIndex\"\r\n  let-isTotalRow=\"isTotalRow\"\r\n>\r\n  <div\r\n    #cellContainer\r\n    (click)=\"\r\n      editingKey = ''; setActiveCell(row, col); collapseAllExpandedCells()\r\n    \"\r\n    [style.fontWeight]=\"bodyFontWeight\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    class=\"cell overflow-visible position-relative data-grid-cell\"\r\n    [attr.field]=\"col.field\"\r\n    [style.width.px]=\"col.width\"\r\n    [style.min-width.px]=\"col.width\"\r\n    [style.fontSize.px]=\"bodyTextFontsSize\"\r\n    [style.minHeight.px]=\"rowHeight\"\r\n    [style.maxHeight.px]=\"rowHeight\"\r\n    [class.active-cell]=\"\r\n      isActiveCell(row, col) && !isEditing(row, col) && selectedKeys.size == 1\r\n    \"\r\n    (dblclick)=\"\r\n      $event.stopPropagation();\r\n      $event.preventDefault();\r\n      enableEdit(row, col, false, cellContainer)\r\n    \"\r\n    [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\r\n    [class.first-row-selected]=\"firstSelectedRow === row?.__virtualIndex\"\r\n    [class.last-row-selected]=\"lastSelectedRow === row?.__virtualIndex\"\r\n    tabindex=\"-1\"\r\n    (keydown.enter)=\"$event.preventDefault(); enableEdit(row, col)\"\r\n    (mousedown)=\"\r\n      startSelection(\r\n        row.__virtualIndex,\r\n        colIndex,\r\n        subColIndex ?? 0,\r\n        col.field,\r\n        $event,\r\n        section\r\n      )\r\n    \"\r\n    (mouseenter)=\"\r\n      extendSelection(\r\n        row.__virtualIndex,\r\n        colIndex,\r\n        subColIndex ?? 0,\r\n        col.field,\r\n        $event,\r\n        section\r\n      )\r\n    \"\r\n    (mouseup)=\"endSelection()\"\r\n    [class.selected-cell]=\"\r\n      isSelected(\r\n        row.__virtualIndex,\r\n        colIndex,\r\n        subColIndex ?? 0,\r\n        col.field,\r\n        section\r\n      )\r\n    \"\r\n    [class.top-border]=\"\r\n      isTopBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.bottom-border]=\"\r\n      isBottomBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.left-border]=\"\r\n      isLeftBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.right-border]=\"\r\n      isRightBorder(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.top-left-corner]=\"\r\n      isTopLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.top-right-corner]=\"\r\n      isTopRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.bottom-left-corner]=\"\r\n      isBottomLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n    [class.bottom-right-corner]=\"\r\n      isBottomRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\r\n    \"\r\n  >\r\n    <!--  (mousedown)=\"startSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\r\n  (mouseenter)=\"extendSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\r\n  (mouseup)=\"endSelection()\"\r\n  [class.selected-cell]=\"isSelected(row.__virtualIndex, colIndex,  subColIndex ?? 0, col.field)\" -->\r\n    <div\r\n      class=\"table-cell\"\r\n      [class.active-for-editing]=\"\r\n        isEditing(row, col) &&\r\n        (getNestedValue(row, col.field)?.length === undefined ||\r\n          getNestedValue(row, col.field)?.length <= 50)\r\n      \"\r\n    >\r\n      <div\r\n        (click)=\"$event.stopPropagation()\"\r\n        *ngIf=\"\r\n          isEditing(row, col) &&\r\n            (getNestedValue(row, col.field)?.length === undefined ||\r\n              (getNestedValue(row, col.field)?.length <= 50 &&\r\n                !expandedCells.size));\r\n          else viewMode\r\n        \"\r\n      >\r\n\r\n       <ng-container *ngIf=\"col.cellEditor; else builtInEditors\">\r\n              <ng-container\r\n                [cellEditor]=\"col.cellEditor\"\r\n                [rowData]=\"row\"\r\n                [colData]=\"col\"\r\n                [cellValue]=\"getNestedValue(row, col.field)\"\r\n                (editorEvent)=\"finishEdit($event)\"\r\n              ></ng-container>\r\n        </ng-container>\r\n\r\n      <ng-template #builtInEditors>\r\n        <ng-container [ngSwitch]=\"col?.type\">\r\n          <!-- Text Input -->\r\n          <input\r\n            [style.height.px]=\"rowHeight - 10\"\r\n            *ngSwitchCase=\"'input'\"\r\n            type=\"text\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            (blur)=\"disableEdit(row, col)\"\r\n            autofocus\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            class=\"form-control form-control-sm\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n\r\n          <!-- Number Input -->\r\n          <input\r\n            [style.height.px]=\"rowHeight - 8\"\r\n            *ngSwitchCase=\"'number'\"\r\n            #numberInput=\"ngModel\"\r\n            #numberRef\r\n            (keypress)=\"allowOnlyNumbers($event)\"\r\n            type=\"number\"\r\n            required\r\n            [(ngModel)]=\"row[col.field]\"\r\n            (blur)=\"disableEdit(row, col, numberInput)\"\r\n            autofocus\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            class=\"form-control form-control-sm\"\r\n            [ngClass]=\"{\r\n              'is-invalid': numberInput.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n\r\n          <!-- Date Input -->\r\n          <input\r\n            [style.height.px]=\"rowHeight - 8\"\r\n            *ngSwitchCase=\"'date'\"\r\n            type=\"date\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            (blur)=\"disableEdit(row, col, dateInput)\"\r\n            autofocus\r\n            class=\"form-control form-control-sm\"\r\n            #dateInput=\"ngModel\"\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            [ngClass]=\"{\r\n              'is-invalid': dateInput.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n\r\n          <!-- Dropdown -->\r\n          <!-- ng-select like dropdown -->\r\n          <div\r\n            *ngSwitchCase=\"'dropdown'\"\r\n            class=\"dropdown w-100\"\r\n            (blur)=\"disableEdit(row, col)\"\r\n          >\r\n            <!-- Trigger -->\r\n            <button\r\n              class=\"form-select form-select-sm text-start w-100 text-ellipsis\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"dropdown\"\r\n              aria-expanded=\"false\"\r\n              [style.minHeight.px]=\"rowHeight - 10\"\r\n              data-bs-display=\"static\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n            >\r\n              <ng-container>\r\n                {{\r\n                  getNestedValue(row, col.field)?.value ||\r\n                    getNestedValue(row, col.field)?.name ||\r\n                    getNestedValue(row, col.field)\r\n                }}\r\n              </ng-container>\r\n              <ng-template #placeholder> Select options... </ng-template>\r\n            </button>\r\n\r\n            <!-- Menu -->\r\n            <div\r\n              class=\"dropdown-menu w-100 p-0 cell-editing-dropdown-menu rounded-3\"\r\n              [class.show]=\"isEditing(row, col)\"\r\n            >\r\n              <!-- Search -->\r\n              <div class=\"px-2 py-1 editing-dropdown-search-input\" *ngIf=\"col?.column_dropdown_value?.length > 5\">\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  placeholder=\"Search...\"\r\n                  [(ngModel)]=\"editinDropdownSearch\"\r\n                  (mousedown)=\"$event.stopPropagation()\"\r\n                />\r\n              </div>\r\n              <cdk-virtual-scroll-viewport \r\n                    itemSize=\"35\" \r\n                    class=\"dropdown-viewport\"\r\n                    style=\"height: 120px\"\r\n                  >\r\n                    <div\r\n                    [class.selected]=\"getNestedValue(row, col.field) == option?.value || getNestedValue(row, col.field) == option\"\r\n                      class=\"px-2 py-1 d-flex align-items-center dropdown-item\"\r\n                      *cdkVirtualFor=\"\r\n                        let option of col.column_dropdown_value \r\n                          | filter : editinDropdownSearch : 'value'\r\n                      \"\r\n                      (click)=\"setNestedValue(row, col, option, true); editingKey = null\"\r\n                    >\r\n                      <label\r\n                        \r\n                        class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\r\n                        [for]=\"col.field + '-' + (option.value || option)\"\r\n                      >\r\n                        {{ option.value || option }}\r\n                      </label>\r\n                    </div>\r\n                </cdk-virtual-scroll-viewport>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <input\r\n            *ngSwitchCase=\"'email'\"\r\n            [style.height.px]=\"rowHeight - 10\"\r\n            [style.maxHeight.px]=\"rowHeight - 10\"\r\n            #emailModel=\"ngModel\"\r\n            #emailInput\r\n            type=\"email\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            name=\"{{ col.field }}\"\r\n            required\r\n            pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\"\r\n            (blur)=\"disableEdit(row, col, emailModel)\"\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            autofocus\r\n            class=\"form-control form-control-sm\"\r\n            [ngClass]=\"{\r\n              'is-invalid': emailModel.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n          <!-- Default fallback -->\r\n          <input\r\n            *ngSwitchDefault\r\n            [style.height.px]=\"rowHeight - 10\"\r\n            [style.maxHeight.px]=\"rowHeight - 10\"\r\n            #textModel=\"ngModel\"\r\n            #textInput\r\n            type=\"text\"\r\n            (keydown.enter)=\"blurInput($event, row, col)\"\r\n            [(ngModel)]=\"row[col.field]\"\r\n            name=\"{{ col.field }}\"\r\n            required\r\n            (blur)=\"disableEdit(row, col, textModel)\"\r\n            autofocus\r\n            class=\"form-control form-control-sm\"\r\n            [ngClass]=\"{\r\n              'is-invalid': textModel.invalid\r\n            }\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n          />\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      </div>\r\n\r\n      <!-- Display mode -->\r\n      <ng-template #viewMode>\r\n        <div\r\n          class=\"d-flex justify-content-between align-items-center w-100 overflow-hidden\"\r\n          [ngClass]=\"getCellClasses(col, getNestedValue(row, col.field))\"\r\n        >\r\n          <!-- Field icon (for Tasks grid) -->\r\n          <ng-container\r\n            *ngIf=\"gridType === 'Tasks' && iconMap[col.field] && !isTotalRow\"\r\n          >\r\n            <span\r\n              class=\"cursor-pointer me-2\"\r\n              (click)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n              [inlineSVG]=\"iconMap[col.field](row, col)\"\r\n            ></span>\r\n          </ng-container>\r\n\r\n          <!-- \u2705 Custom cell renderer support -->\r\n          <ng-container *ngIf=\"col.cellRenderer; else defaultCell\">\r\n            <ng-container\r\n              [cellRenderInit]=\"col.cellRenderer\"\r\n              [rowData]=\"row\"\r\n              [colData]=\"col\"\r\n              [cellValue]=\"getNestedValue(row, col?.field)\"\r\n              (cellEvent)=\"onCellEvent($event)\"\r\n            >\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <!-- \uD83E\uDDFE Default text-based cell rendering -->\r\n          <ng-template #defaultCell>\r\n            <div\r\n              #cellText\r\n              class=\"text-ellipsis flex-grow-1\"\r\n              [title]=\"getCellTitle(row, col)\"\r\n            >\r\n              <!-- Normal cell -->\r\n              <ng-container\r\n                *ngIf=\"\r\n                  col?.type !== 'image' &&\r\n                  col?.field != 'image' &&\r\n                  col?.field != 'invoice.invoice_image' &&\r\n                  !isTotalRow\r\n                \"\r\n              >\r\n                <ng-container *ngIf=\"col.is_amount\">{{\r\n                  currencySymbol\r\n                }}</ng-container>\r\n                {{getCellTitle(row, col)}}\r\n              </ng-container>\r\n\r\n              <!-- Total row -->\r\n              <ng-container *ngIf=\"isTotalRow\">\r\n                {{ getTotalAmount(col) }}\r\n              </ng-container>\r\n\r\n              <!-- Invoice Image -->\r\n              <ng-container *ngIf=\"col.field == 'invoice.invoice_image'\">\r\n                <div style=\"display: flex; align-items: center; zoom: 0.7\">\r\n                  <span\r\n                    title=\"{{ getNestedValue(row, col.field) || 'Attachment' }}\"\r\n                    (click)=\"downloadAttchment(getNestedValue(row, col.field))\"\r\n                    [inlineSVG]=\"\r\n                      singleSpaAssetsPath +\r\n                      'data-grid/document-icons/' +\r\n                      getExtention(getNestedValue(row, col.field)) +\r\n                      '.svg'\r\n                    \"\r\n                  ></span>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <!-- Image cell -->\r\n              <ng-container *ngIf=\"col?.type == 'image' && !isTotalRow\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    defaultImagePlaceholder;\r\n                    context: { row: row, col: col }\r\n                  \"\r\n                ></ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <span\r\n            *ngIf=\"\r\n              (!col?.cellRenderer && showCellDetailsBox &&\r\n                getNestedValue(row, col.field)?.length > 50 && col?.type !== 'image') ||\r\n              (isNestedValueArray(row, col.field) &&\r\n                getNestedValue(row, col.field)?.length > 1)\r\n            \"\r\n            class=\"toggle-icon data-grid-svg-icon ms-2 cursor-pointer\"\r\n            [inlineSVG]=\"\r\n              isExpanded(row, col)\r\n                ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n                : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n            \"\r\n            (click)=\"\r\n              $event.stopPropagation();\r\n              toggleExpandOfLongCellText(row, col, columns, true)\r\n            \"\r\n            (dblclick)=\"$event.preventDefault(); $event.stopPropagation()\"\r\n          ></span>\r\n          </ng-template>\r\n          <!-- Expand / Collapse icon -->\r\n        </div>\r\n\r\n        <!-- Expanded text -->\r\n        <div\r\n          class=\"position-absolute w-100 expanded-box\"\r\n          *ngIf=\"isExpanded(row, col)\"\r\n          [style.zIndex]=\"getZIndex(row, col)\"\r\n          style=\"top: 100%; left: 0\"\r\n          [attr.id]=\"(row.id || row._id) + '-' + (col.id || col._id)\"\r\n          [class.invisible]=\"!showDetailsBox\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              fullTextTemplate;\r\n              context: {\r\n                row: row,\r\n                col: col,\r\n                isArray: isNestedValueArray(row, col.field)\r\n              }\r\n            \"\r\n          ></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Headers Action List On clicking three dots -->\r\n\r\n<ng-template\r\n  #columnMenu\r\n  let-col=\"col\"\r\n  let-isNestedTable=\"isNestedTable\"\r\n  let-columns=\"columns\"\r\n  let-section=\"section\"\r\n  let-columnIndex=\"columnIndex\"\r\n  let-childColIndex=\"childColIndex\"\r\n>\r\n  <div\r\n    class=\"column-menu three-dots-col-menu\"\r\n    [class.visually-hidden]=\"isMenueHidden\"\r\n    *ngIf=\"activeCol && !isThreeDotsFilterOpen\"\r\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    [style.color]=\"headerTextColor\"\r\n  >\r\n    <!-- Sort Ascending -->\r\n    <div class=\"border-below pb-2\" [class.disable-sorting]=\"!col.is_sortable\">\r\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span>\r\n      <div\r\n        *ngIf=\"\r\n          columnThreedotsMunuConfig?.showAscending &&\r\n          (sortingConfig?.field != col.field ||\r\n            sortingConfig?.order_by == 'desc')\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"sortAsc(activeCol)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-up.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Sort Ascending\r\n      </div>\r\n\r\n      <!-- Sort Descending -->\r\n      <div\r\n        *ngIf=\"\r\n          columnThreedotsMunuConfig?.showDescending &&\r\n          (sortingConfig?.field != col.field ||\r\n            sortingConfig?.order_by == 'asc')\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"sortDesc(activeCol)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-down.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Sort Descending\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"\r\n          sortingConfig?.field === col.field &&\r\n          (sortingConfig?.order_by === 'asc' ||\r\n            sortingConfig?.order_by === 'desc')\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"resetSort(activeCol)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\r\n          \"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Reset Sort\r\n      </div>\r\n    </div>\r\n    <div class=\"py-2 border-below three-dots-filter\" [class.disable-sorting]=\"col?.type == 'image' || !col.is_search_able\">\r\n      <div\r\n        *ngIf=\"columnThreedotsMunuConfig?.showFilter\"\r\n        class=\"column-menu-item three-dots-filter\"\r\n        (click)=\"openFilteronThreeDotsClick(col)\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n        Filter\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"py-2 border-below\">\r\n      <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span>\r\n      <div\r\n        *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\"\r\n        class=\"column-menu-item\"\r\n        (click)=\"\r\n          $event.stopPropagation();\r\n          updateColumnPinInSourceByField(\r\n            activeCol,\r\n            'left',\r\n            isNestedTable,\r\n            columns\r\n          )\r\n        \"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin-left.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span\r\n        >Pin Left\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"\r\n          columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\r\n        \"\r\n        class=\"column-menu-item\"\r\n        (click)=\"\r\n          $event.stopPropagation();\r\n          updateColumnPinInSourceByField(\r\n            activeCol,\r\n            'right',\r\n            isNestedTable,\r\n            columns\r\n          )\r\n        \"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin-right.svg'\"\r\n          class=\"data-grid-svg-icon data-grid-svg-icon me-2\"\r\n        ></span\r\n        >Pin Right\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"col?.pinned\"\r\n        class=\"column-menu-item\"\r\n        (click)=\"\r\n          $event.stopPropagation();\r\n          updateColumnPinInSourceByField(\r\n            activeCol,\r\n            null,\r\n            isNestedTable,\r\n            columns\r\n          )\r\n        \"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\r\n          \"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span\r\n        >Unpin\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showAutosizeThisColumn\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"autosizeColumn(activeCol)\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"\r\n          singleSpaAssetsPath + 'data-grid/icons/arrows-expand-vertical.svg'\r\n        \"\r\n        class=\"me-2\"\r\n      ></span>\r\n      Autosize This Column\r\n    </div>\r\n\r\n    <!-- Autosize All Columns -->\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showAutosizeAllColumns\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"autosizeAllColumns()\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"\r\n          singleSpaAssetsPath + 'data-grid/icons/arrows-angle-expand.svg'\r\n        \"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span\r\n      >Autosize All Columns\r\n    </div>\r\n\r\n    <!-- Group By -->\r\n    <div\r\n      *ngIf=\"showRowsGrouping\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"groupBy(activeCol)\"\r\n      [class.disable-sorting]=\"!col.is_groupable\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/diagram-3.svg'\"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span>\r\n      Group by {{ col.header }}\r\n    </div>\r\n\r\n    <!-- Choose Columns -->\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showChoseColumns\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"chooseColumns()\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span>\r\n      Choose Columns\r\n    </div>\r\n\r\n    <!-- Reset Columns -->\r\n    <div\r\n      *ngIf=\"columnThreedotsMunuConfig?.showResetColumns\"\r\n      class=\"column-menu-item\"\r\n      (click)=\"resetColumns()\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"\r\n          singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\r\n        \"\r\n        class=\"data-grid-svg-icon me-2\"\r\n      ></span\r\n      >Reset Columns\r\n    </div>\r\n  </div>\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"isThreeDotsFilterOpen && col?.is_search_able\"\r\n    class=\"three-dots-col-menu position-relative\"\r\n    [style.right.px]=\"getDynamicRight(col, section, columnIndex, childColIndex)\"\r\n    [class.visually-hidden]=\"isMenueHidden\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Filter Menue -->\r\n<ng-template #filterMenu let-col=\"col\">\r\n  <div\r\n    class=\"filter-menu-container filter-menu\"\r\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\r\n  >\r\n    <!-- Dropdown Type -->\r\n    <ng-container *ngIf=\"col?.type === 'dropdown'|| col?.type == 'array'; else textFilter\">\r\n      <div class=\"filter-dropdown-section p-1\">\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search...\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"addFilterColumnInput\"\r\n        />\r\n\r\n        <div class=\"form-check mb-1 mt-2 ms-1 select-all-filter\">\r\n          <input\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            [checked]=\"isAllSideFilterOptionsSelected(col)\"\r\n            (change)=\"toggleSelectAllSideFilters(col, $event)\"\r\n            id=\"selectAll_{{ col.field }}\"\r\n          />\r\n          <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\r\n            Select All\r\n          </label>\r\n        </div>\r\n\r\n        <!-- <div class=\"dropdown-options ps-1\">\r\n          <div\r\n            class=\"form-check mb-1\"\r\n            *ngFor=\"\r\n              let option of selectedColumnForFilter?.column_dropdown_value\r\n                | filter : addFilterColumnInput : 'value';\r\n              trackBy: trackById;\r\n              let i = index\r\n            \"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              [id]=\"i\"\r\n              [checked]=\"\r\n                currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\r\n              \"\r\n              (change)=\"toggleSelectionInFilter(option)\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" [for]=\"i\">\r\n              {{ option?.value ?? option?.name ?? option }}\r\n            </label>\r\n          </div>\r\n        </div> -->\r\n        <cdk-virtual-scroll-viewport\r\n              itemSize=\"32\"\r\n              class=\"filter-viewport\"\r\n              style=\"height: 120px\"\r\n            >\r\n              <div\r\n                class=\"form-check mb-1 ms-1\"\r\n                *cdkVirtualFor=\"\r\n                  let option of selectedColumnForFilter?.column_dropdown_value\r\n                    | filter : addFilterColumnInput : 'value';\r\n                  trackBy: trackById\r\n                \"\r\n              >\r\n                <input\r\n                  class=\"form-check-input\"\r\n                  type=\"checkbox\"\r\n                  [id]=\"option?.id ?? option?._id ?? option\"\r\n                  [checked]=\"\r\n                    currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\r\n                  \"\r\n                  (change)=\"toggleSelectionInFilter(option)\"\r\n                />\r\n\r\n                <label\r\n                  class=\"form-check-label fw-semibold\"\r\n                  [for]=\"option?.id ?? option?._id ?? option\"\r\n                >\r\n                  {{ ((option?.value ?? option?.name ?? option) | titlecase ) }}\r\n                </label>\r\n              </div>\r\n          </cdk-virtual-scroll-viewport>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- Text Filter Section -->\r\n    <ng-template #textFilter>\r\n      <div class=\"filter-text-section\">\r\n        <div class=\"form-group mb-2\">\r\n          <select\r\n            class=\"form-select form-select-sm custom-select\"\r\n            [(ngModel)]=\"firstCondition\"\r\n          >\r\n            <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n              <option value=\"contain\">Contains</option>\r\n              <option value=\"does_not_contain\">Does Not Contain</option>\r\n              <option value=\"equal\">Equals</option>\r\n              <option value=\"before\">Starts With</option>\r\n              <option value=\"after\">Ends With</option>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"not_equal\">Not Equal</option>\r\n              <option value=\"after\">After</option>\r\n              <option value=\"before\">Before</option>\r\n            </ng-container>\r\n\r\n             <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"before\">Less Then </option>\r\n              <option value=\"after\">Greater Then </option>\r\n              <option value=\"less_then_equal\">less then Equal to</option>\r\n              <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n          </select>\r\n        </div>\r\n\r\n        <input\r\n          [type]=\"col?.type == 'string' ? 'text' : col?.type\"\r\n          class=\"form-control form-control-sm mb-3\"\r\n          placeholder=\"Value\"\r\n          [(ngModel)]=\"firstValue\"\r\n          #filterMenueTextchInput\r\n          (keydown.enter)=\"applyDropdownFilter()\"\r\n        />\r\n\r\n        <div class=\"form-group mb-3 d-flex flex-row\">\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"condition\"\r\n              value=\"and\"\r\n              id=\"and_{{ col.field }}\"\r\n              (change)=\"cdr.detectChanges()\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\r\n              >AND</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"condition\"\r\n              value=\"or\"\r\n              id=\"or_{{ col.field }}\"\r\n              (change)=\"cdr.detectChanges()\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\r\n              >OR</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"condition\"\r\n              value=\"none\"\r\n              id=\"none_{{ col.field }}\"\r\n              (change)=\"cdr.detectChanges()\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"none_{{ col.field }}\"\r\n              >None</label\r\n            >\r\n          </div>\r\n        </div>\r\n        <div @slideToggle *ngIf=\"firstValue && condition != 'none'\">\r\n          <div class=\"form-group mb-2\">\r\n            <select\r\n              class=\"form-select form-select-sm custom-select\"\r\n              [(ngModel)]=\"secondCondition\"\r\n            >\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n                <option value=\"contain\">Contains</option>\r\n                <option value=\"does_not_contain\">Does Not Contain</option>\r\n                <option value=\"equal\">Equals</option>\r\n                <option value=\"before\">Starts With</option>\r\n                <option value=\"after\">Ends With</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"not_equal\">Not Equal</option>\r\n                <option value=\"after\">After</option>\r\n                <option value=\"before\">Before</option>\r\n              </ng-container>\r\n\r\n               <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"before\">Less Then </option>\r\n                <option value=\"after\">Greater Then </option>\r\n                <option value=\"less_then_equal\">less then Equal to</option>\r\n                <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n            </select>\r\n          </div>\r\n\r\n          <input\r\n            [type]=\"col?.type == 'string' ? 'text' : col?.type\"\r\n            class=\"form-control form-control-sm mb-3\"\r\n            placeholder=\"Second Value\"\r\n            [(ngModel)]=\"secondValue\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Actions -->\r\n    <div class=\"d-flex gap-2 mt-2\">\r\n      <div\r\n        class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center w-100\"\r\n        style=\"height: 30px\"\r\n        (click)=\"applyDropdownFilter()\"\r\n      >\r\n        Apply\r\n      </div>\r\n      <div\r\n        class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center w-100\"\r\n        style=\"height: 30px\"\r\n        (click)=\"resetSideFilter(col)\"\r\n      >\r\n        Reset\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Side Menue -->\r\n\r\n<!-- Column Pannel / Pivot Mode / Searching -->\r\n\r\n<ng-template #columnPannel>\r\n  <div class=\"column-panel-header\">\r\n    <!-- Pivot Toggle -->\r\n    <div\r\n      class=\"form-check form-switch d-flex align-items-center mb-2 pivot-mode px-5 ms-2 d-none\"\r\n    >\r\n      <input\r\n        class=\"form-check-input me-2\"\r\n        type=\"checkbox\"\r\n        id=\"pivotToggle\"\r\n        [(ngModel)]=\"pivotMode\"\r\n      />\r\n      <label class=\"form-check-label\" for=\"pivotToggle\">Pivot Mode</label>\r\n    </div>\r\n\r\n    <!-- Select All & Search -->\r\n    <div class=\"d-flex align-items-center mb-2 px-3 mt-3\">\r\n      <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            accordionState === 'all'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n              : accordionState === 'some'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\r\n              : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          (click)=\"toggleAllAccordions()\"\r\n        ></span>\r\n      </span>\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"form-check-input me-2\"\r\n        [checked]=\"allColumnsSelected()\"\r\n        (change)=\"toggleAllColumnsVisibility()\"\r\n      />\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control form-control-sm\"\r\n        placeholder=\"Search columns...\"\r\n        [(ngModel)]=\"columnSearch\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Separator -->\r\n    <hr class=\"my-2\" />\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Right Columns Menue -->\r\n\r\n<!-- Column Panel Item Template -->\r\n<ng-template #columnPanelItem let-col=\"col\">\r\n  <!-- Group Column -->\r\n  <ng-container *ngIf=\"col.children?.length\">\r\n    <div class=\"column-group d-flex align-items-center mb-2\">\r\n      <span class=\"filter-icon-wrapper me-2\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          [class.rotate]=\"col.expanded\"\r\n          (click)=\"col.expanded = !col.expanded\"\r\n        ></span>\r\n      </span>\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"form-check-input me-2\"\r\n        [id]=\"'group_' + col.header\"\r\n        [checked]=\"isColumnVisible(col)\"\r\n        (change)=\"toggleGroupVisibility(col)\"\r\n      />\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\r\n      ></span>\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        [for]=\"'group_' + col.header\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <span class=\"text-truncate\">{{ col.header }}</span>\r\n      </label>\r\n    </div>\r\n    <div *ngIf=\"col.expanded\" class=\"ps-4\">\r\n      <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"columnPanelItem; context: { col: child }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Leaf Column -->\r\n  <ng-container *ngIf=\"!col.children?.length\">\r\n    <div class=\"d-flex align-items-center mb-2\">\r\n      <span class=\"me-2\" style=\"width: 1.5rem\"></span>\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"form-check-input me-2\"\r\n        [(ngModel)]=\"col.is_visible\"\r\n        [id]=\"'col_' + col.field\"\r\n        (change)=\"onSideMenuColumnsVisibilityChange()\"\r\n      />\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\r\n      ></span>\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        [for]=\"'col_' + col.field\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <span class=\"text-truncate\">{{ col.header }}</span>\r\n      </label>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!-- Columns Side Filter -->\r\n<ng-template #sideFilters>\r\n  <div class=\"py-3 px-2 pe-3 h-100\">\r\n    <div class=\"d-flex align-items-center mb-2\">\r\n      <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            filterAccordionState === 'all'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n              : filterAccordionState === 'some'\r\n              ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\r\n              : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          (click)=\"toggleAllFilterAccordions()\"\r\n        ></span>\r\n      </span>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control form-control-sm\"\r\n        placeholder=\"Search...\"\r\n        [(ngModel)]=\"columnSearch\"\r\n      />\r\n    </div>\r\n    <div\r\n      class=\"overflow-auto side-filter-columns-wrapper\"\r\n      style=\"height: calc(100% - 70px); scrollbar-width: thin\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of columns | filter : columnSearch : 'header';\r\n          trackBy: trackByField\r\n        \"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"filterPannelItem; context: { col: col }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #filterPannelItem let-col=\"col\">\r\n  <!-- Group Column -->\r\n  <ng-container *ngIf=\"col.children?.length\">\r\n    <div\r\n      class=\"column-group d-flex align-items-center mb-2\"\r\n      *ngIf=\"col?.type !== 'image'\"\r\n    >\r\n      <!-- Chevron toggle -->\r\n      <span class=\"filter-icon-wrapper me-2\">\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          [class.rotate]=\"col.expandedFilter\"\r\n          (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n        ></span>\r\n      </span>\r\n\r\n      <!-- Group label toggle -->\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        style=\"cursor: pointer\"\r\n        (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n      >\r\n        <span class=\"fw-bold text-truncate\"\r\n          >{{ col.header }}\r\n          <span\r\n            class=\"text-primary ms-1\"\r\n            *ngIf=\"col?.query?._ids?.length || col?.query?._first_value\"\r\n            >*</span\r\n          >\r\n        </span>\r\n      </label>\r\n    </div>\r\n\r\n    <!-- Children columns -->\r\n    <div *ngIf=\"col.expandedFilter\" class=\"ps-4\">\r\n      <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"filterPannelItem; context: { col: child }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Leaf Column -->\r\n  <ng-container *ngIf=\"!col.children?.length\">\r\n    <div class=\"d-flex align-items-center mb-2\" *ngIf=\"col?.type !== 'image'\">\r\n      <span\r\n        class=\"me-2 filter-icon-wrapper me-2\"\r\n        (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n      >\r\n        <span\r\n          class=\"toggle-icon data-grid-svg-icon\"\r\n          [inlineSVG]=\"\r\n            singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n          \"\r\n          [class.rotate]=\"col.expandedFilter\"\r\n        ></span>\r\n      </span>\r\n\r\n      <label\r\n        class=\"d-flex align-items-center mb-0 w-100\"\r\n        style=\"cursor: pointer\"\r\n        (click)=\"col.expandedFilter = !col.expandedFilter\"\r\n      >\r\n        <span class=\"text-truncate fw-bold\">{{ col.header }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <!-- Show filter when expanded -->\r\n    <div *ngIf=\"col.expandedFilter\" class=\"ps-4 pe-3\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"sideNestedFilter; context: { col: col }\"\r\n      ></ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<!-- Side Nested Filters -->\r\n<ng-template #sideNestedFilter let-col=\"col\">\r\n  <div class=\"\">\r\n    <!-- Dropdown Type -->\r\n    <ng-container *ngIf=\"col?.type === 'dropdown' || col?.type == 'array'; else textFilter\">\r\n      <div class=\"p-1\">\r\n        <!-- Search -->\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm mb-2\"\r\n          placeholder=\"Search...\"\r\n          [(ngModel)]=\"sideNestedFilterSearch\"\r\n        />\r\n\r\n        <!-- Select All -->\r\n        <div class=\"form-check mb-1 ms-1 select-all-filter\">\r\n          <input\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            [checked]=\"\r\n              col.query?._ids?.length == col?.column_dropdown_value?.length\r\n            \"\r\n            (change)=\"toggleSelectAllSideFilters(col, $event)\"\r\n            id=\"selectAll_{{ col.field }}\"\r\n          />\r\n          <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\r\n            Select All\r\n          </label>\r\n        </div>\r\n\r\n        <!-- Options -->\r\n        <!-- <div class=\"dropdown-options\">\r\n          <div\r\n            class=\"form-check mb-1 ms-1\"\r\n            *ngFor=\"\r\n              let option of col?.column_dropdown_value\r\n                | filter : sideNestedFilterSearch : 'value'\r\n            \"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              [value]=\"option\"\r\n              [checked]=\"\r\n                col.query?._ids?.includes(option?._id || option?.id || option)\r\n              \"\r\n              (change)=\"onOptionToggle(col, option)\"\r\n              id=\"option_{{ col.field }}_{{\r\n                option?.id || option?._id || option\r\n              }}\"\r\n            />\r\n            <label\r\n              class=\"form-check-label\"\r\n              [for]=\"\r\n                'option_' +\r\n                col.field +\r\n                '_' +\r\n                (option?.id || option?._id || option)\r\n              \"\r\n            >\r\n              {{ option.value || option }}\r\n            </label>\r\n          </div>\r\n        </div> -->\r\n        <cdk-virtual-scroll-viewport\r\n            itemSize=\"32\"\r\n            class=\"dropdown-viewport\"\r\n            style=\"height: 120px\"\r\n          >\r\n            <div\r\n              class=\"form-check mb-1 ms-1\"\r\n              *cdkVirtualFor=\"\r\n                let option of col?.column_dropdown_value\r\n                  | filter : sideNestedFilterSearch : 'value'\r\n              \"\r\n            >\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [value]=\"option\"\r\n                [checked]=\"\r\n                  col.query?._ids?.includes(option?._id || option?.id || option)\r\n                \"\r\n                (change)=\"onOptionToggle(col, option)\"\r\n                id=\"option_{{ col.field }}_{{\r\n                  option?.id || option?._id || option\r\n                }}\"\r\n              />\r\n\r\n              <label\r\n                class=\"form-check-label\"\r\n                [for]=\"\r\n                  'option_' +\r\n                  col.field +\r\n                  '_' +\r\n                  (option?.id || option?._id || option)\r\n                \"\r\n              >\r\n                {{( (option.value || option) | titlecase ) }}\r\n              </label>\r\n            </div>\r\n          </cdk-virtual-scroll-viewport>\r\n\r\n\r\n        <!-- Actions -->\r\n        <!-- <div class=\"d-flex gap-2 mt-2\">\r\n      <div\r\n        class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\"\r\n        style=\"height: 22px;\"\r\n        (click)=\"applySideFilter(col)\"\r\n      >\r\n        Apply\r\n      </div>\r\n      <div\r\n        class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" \r\n        style=\"height: 22px;\"\r\n        (click)=\"resetSideFilter(col)\"\r\n      >\r\n        Reset\r\n      </div>\r\n    </div> -->\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!-- Text Filter Section -->\r\n    <ng-template #textFilter>\r\n      <div class=\"filter-text-section\">\r\n        <div class=\"form-group mb-2\">\r\n          <select\r\n            class=\"form-select form-select-sm\"\r\n            [(ngModel)]=\"col.query.first_condition\"\r\n          >\r\n            <ng-container *ngIf=\"col?.type == 'string'\">\r\n              <option value=\"contain\">Contains</option>\r\n               <option value=\"does_not_contain\">Does Not Contain</option>\r\n              <option value=\"equal\">Equals</option>\r\n              <option value=\"before\">Starts With</option>\r\n              <option value=\"after\">Ends With</option>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"col?.type == 'date'\">\r\n              <option value=\"equal\">Equals To</option>\r\n               <option value=\"not_equal\">Not Equal</option>\r\n              <option value=\"after\">After</option>\r\n              <option value=\"before\">Before</option>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"col?.type == 'number'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"before\">Less Then </option>\r\n              <option value=\"after\">Greater Then </option>\r\n              <option value=\"less_then_equal\">less then Equal to</option>\r\n              <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n          </select>\r\n        </div>\r\n\r\n        <input\r\n          [type]=\"col?.type == 'date' ? 'date' : 'text'\"\r\n          class=\"form-control form-control-sm mb-3\"\r\n          placeholder=\"Value\"\r\n          [(ngModel)]=\"col!.query!.first_value\"\r\n        />\r\n\r\n        <div\r\n          class=\"form-group mb-3 d-flex flex-row muted\"\r\n          style=\"font-size: 14px\"\r\n        >\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"col!.query.condition\"\r\n              value=\"and\"\r\n              id=\"and_{{ col.field }}\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\r\n              >AND</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"col!.query.condition\"\r\n              value=\"or\"\r\n              id=\"or_{{ col.field }}\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\r\n              >OR</label\r\n            >\r\n          </div>\r\n          <div\r\n            class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input filter-radio-inputs\"\r\n              type=\"radio\"\r\n              name=\"condition\"\r\n              [(ngModel)]=\"col!.query.condition\"\r\n              value=\"none\"\r\n              id=\"none_{{ col.field }}\"\r\n            />\r\n            <label\r\n              class=\"nnonem-check-label mb-0 mt-1\"\r\n              for=\"none_{{ col.field }}\"\r\n              >None</label\r\n            >\r\n          </div>\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"col?.query?.first_value && col?.query?.condition !== 'none'\"\r\n        >\r\n          <div class=\"form-group mb-2\">\r\n            <select\r\n              class=\"form-select form-select-sm\"\r\n              [(ngModel)]=\"col!.query.second_condition\"\r\n            >\r\n              <ng-container *ngIf=\"col?.type == 'string'\">\r\n                <option value=\"contain\">Contains</option>\r\n                <option value=\"does_not_contain\">Does Not Contain</option>\r\n                <option value=\"equal\">Equals</option>\r\n                <option value=\"before\">Starts With</option>\r\n                <option value=\"after\">Ends With</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"col?.type == 'date'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                 <option value=\"not_equal\">Not Equal</option>\r\n                <option value=\"after\">After</option>\r\n                <option value=\"before\">Before</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"col?.type == 'number'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"before\">Less Then </option>\r\n                <option value=\"after\">Greater Then </option>\r\n                <option value=\"less_then_equal\">less then Equal to</option>\r\n                <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n            </select>\r\n          </div>\r\n\r\n          <input\r\n            [type]=\"col?.type == 'date' ? 'date' : 'text'\"\r\n            class=\"form-control form-control-sm mb-3\"\r\n            placeholder=\"Second Value\"\r\n            [(ngModel)]=\"col!.query.second_value\"\r\n          />\r\n        </ng-container>\r\n        <!-- <div class=\"d-flex gap-2\">\r\n          <div class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">apply</div>\r\n          <div class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">reset</div>\r\n\r\n        </div> -->\r\n      </div>\r\n    </ng-template>\r\n    <div\r\n      class=\"d-flex justify-content-center gap-2 border-top\"\r\n      style=\"height: 38px\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        style=\"max-height: 30px\"\r\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\r\n        (click)=\"$event.stopPropagation(); removeSideFilter(col)\"\r\n      >\r\n        <span>Clear</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        style=\"max-height: 30px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\r\n        (click)=\"applySideFilter(col)\"\r\n        [class.disabled]=\"(col?.query.condition !== 'none' && !col?.query?.second_value)\"\r\n        [class.pe-none]=\"(col!?.query.condition !== 'none' && !col?.query?.second_value)\"\r\n      >\r\n        <span style=\"margin-top: -1px\">Apply</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Centr Overlay for showing the chose columns -->\r\n\r\n<div *ngIf=\"showColumnPanel\" class=\"custom-modal-overlay\">\r\n  <div\r\n    class=\"custom-modal-content\"\r\n    [style.backgroundColor]=\"dropdownsBackgroundColor\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"modalColumnPannel\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<!-- The existing ng-template you provided -->\r\n<ng-template #modalColumnPannel>\r\n  <div class=\"column-panel-header\">\r\n    <div\r\n      class=\"d-flex justify-content-between align-items-center px-2 ps-3 rounded-top-2 moda-header\"\r\n      [style.height.px]=\"48\"\r\n    >\r\n      Choose Columns\r\n      <span class=\"filter-icon-wrapper\" (click)=\"closeModalColumnPanel()\"\r\n        ><span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span\r\n      ></span>\r\n    </div>\r\n    <hr class=\"my-0\" />\r\n    <div>\r\n      <div class=\"d-flex align-items-center px-2 pe-3\" [style.height.px]=\"48\">\r\n        <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\r\n          <span\r\n            class=\"toggle-icon data-grid-svg-icon\"\r\n            [inlineSVG]=\"\r\n              accordionState === 'all'\r\n                ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\r\n                : accordionState === 'some'\r\n                ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\r\n                : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\r\n            \"\r\n            (click)=\"toggleAllAccordions()\"\r\n          ></span>\r\n        </span>\r\n        <input\r\n          type=\"checkbox\"\r\n          class=\"form-check-input me-2\"\r\n          [checked]=\"allColumnsSelected()\"\r\n          (change)=\"toggleAllColumnsVisibility()\"\r\n        />\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search columns...\"\r\n          [(ngModel)]=\"choseColumnsSearch\"\r\n        />\r\n      </div>\r\n\r\n      <hr class=\"mt-0 mb-1\" />\r\n      <div class=\"px-2 overlay-scrollable\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let col of columns | filter : choseColumnsSearch : 'header';\r\n            trackBy: trackByField\r\n          \"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\r\n          ></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #sideMenuRowGroups>\r\n  <div class=\"d-flex flex-column h-100 d-none\">\r\n    <div class=\"px-3 h-100\">\r\n      <div class=\"d-flex gap-3 mb-4\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span>\r\n        <span>Row Groups</span>\r\n      </div>\r\n      <div class=\"h-50\">\r\n        <div\r\n          class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\r\n          style=\"font-size: 14px\"\r\n        >\r\n          Drag here to set row Groups\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <hr class=\"mt-4\" />\r\n\r\n    <div class=\"px-3 h-100\">\r\n      <div class=\"d-flex gap-3 mb-4\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span>\r\n        <span>Values</span>\r\n      </div>\r\n      <div class=\"h-50 d-flex\">\r\n        <div\r\n          class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\r\n          style=\"font-size: 14px\"\r\n        >\r\n          Drag here aggregate\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- *************************************************** -->\r\n<!-- *************************************************** -->\r\n<!-- *************************************************** -->\r\n<!-- Drag Preview Template -->\r\n<!-- *************************************************** -->\r\n<!-- *************************************************** -->\r\n<ng-template #dragPreview let-col>\r\n  <div class=\"p-2 border d-flex gap-2\">\r\n    <div>\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n      ></span>\r\n    </div>\r\n    <div>{{ col.header }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Drag Placeholder Template -->\r\n<ng-template\r\n  #dragPlaceholder\r\n  let-col\r\n  let-i=\"index\"\r\n  let-section=\"section\"\r\n  let-draggingInGroupArea=\"draggingInGroupArea\"\r\n>\r\n  <div *ngIf=\"!draggingInGroupArea\">\r\n    <div\r\n      *ngTemplateOutlet=\"\r\n        headerCell;\r\n        context: { $implicit: col, index: i, section: section }\r\n      \"\r\n    ></div>\r\n  </div>\r\n  <div *ngIf=\"draggingInGroupArea\">New Placeholder</div>\r\n</ng-template>\r\n\r\n<!-- Top Group Row Placeholder -->\r\n<ng-template #topGroupingRowPlaceholder let-col let-showChevron=\"showChevron\">\r\n  <div class=\"d-flex gap-2\">\r\n    <div\r\n      class=\"d-flex gap-2 top-row-grouping-placeholder\"\r\n      [style.backgroundColor]=\"topGroupedBadgesBackgroundColor\"\r\n    >\r\n      <span\r\n        cdkDragHandle\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\r\n        class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n      ></span>\r\n      <span>{{ col.header }}</span>\r\n      <span\r\n        (click)=\"ungroupColumn(col)\"\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\r\n        class=\"cursor-pointer data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n      ></span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"showChevron\" style=\"opacity: 0.6; font-size: 14px\">\r\n    <span\r\n      [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\r\n      class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n    ></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #childHeaderPlaceholder\r\n  let-col\r\n  let-pinnedRight=\"pinnedRight\"\r\n  let-i=\"index\"\r\n  let-sections=\"sections\"\r\n>\r\n  <div\r\n    class=\"header-cell one-row-header-cells\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    [style.width.px]=\"col.width\"\r\n    [style.min-width.px]=\"col.width\"\r\n    [style.min-height.px]=\"headerRowHeight\"\r\n    [style.max-height.px]=\"headerRowHeight\"\r\n    [style.fontWeight]=\"headerFontWeight\"\r\n  >\r\n    <div class=\"d-flex justify-content-between h-100 align-items-center w-100\">\r\n      <div\r\n        class=\"d-flex justify-content-between align-items-center w-100\"\r\n        [class.flex-row-reverse]=\"pinnedRight\"\r\n      >\r\n        <div\r\n          class=\"text-ellipsis h-100 d-flex align-items-center\"\r\n          [title]=\"col.header\"\r\n          [class.w-100]=\"pinnedRight\"\r\n        >\r\n          {{ col.header }}\r\n        </div>\r\n\r\n        <div\r\n          class=\"position-relative d-flex\"\r\n          [class.flex-row-reverse]=\"pinnedRight\"\r\n        >\r\n          <div class=\"three-dots p-1\" style=\"cursor: pointer\">\r\n            <span\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/three-dots-vertical.svg'\r\n              \"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"resize-handle\">\r\n            <span\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n              \"\r\n              class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n            ></span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"showFilterRow\"\r\n    [style.backgroundColor]=\"headerBackgroundColor\"\r\n    class=\"header-cell filter-cell\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    [style.width.px]=\"col.width\"\r\n    [style.min-width.px]=\"col.width\"\r\n    [style.height.px]=\"headerRowHeight\"\r\n    [style.min-height.px]=\"headerRowHeight\"\r\n    [style.max-height.px]=\"headerRowHeight\"\r\n    [class.border-right]=\"showVerticalBorder\"\r\n    style=\"grid-row: 3\"\r\n  >\r\n    <div\r\n      class=\"header-cell filter-cell\"\r\n      [style.backgroundColor]=\"headerBackgroundColor\"\r\n      [style.width.px]=\"col.width\"\r\n      [style.min-width.px]=\"col.width\"\r\n      [style.height.px]=\"headerRowHeight\"\r\n      [style.min-height.px]=\"headerRowHeight\"\r\n      [style.max-height.px]=\"headerRowHeight\"\r\n    >\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control form-control-sm\"\r\n        placeholder=\"Filter\"\r\n        [(ngModel)]=\"col.filterValue\"\r\n        [readonly]=\"col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\"\r\n        [class.disabled-search-input]=\"\r\n          col?.type == 'dropdown' || col?.type == 'image' || col?.type == 'array'\r\n        \"\r\n      />\r\n      <span\r\n        class=\"filter-icon-wrapper\"\r\n        (click)=\"activeFilterCell = col; activeCol = null\"\r\n        ><span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\r\n          class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n        ></span\r\n      ></span>\r\n\r\n      <div\r\n        class=\"position-absolute\"\r\n        *ngIf=\"activeFilterCell === col\"\r\n        style=\"top: 100%; right: 0; z-index: 10; left: 0\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tableLayout>\r\n  <div\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"p-3 shadow actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\r\n    style=\"width: 320px\"\r\n  >\r\n    <div class=\"d-flex align-items-center mb-3\">\r\n      <button\r\n        class=\"btn btn-link p-0\"\r\n        style=\"margin-left: -10px\"\r\n        (click)=\"toggleActions('setting')\"\r\n      >\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n          class=\"data-grid-svg-icon me-2\"\r\n        ></span>\r\n      </button>\r\n      <h6 class=\"mb-0 ms-2\" style=\"font-weight: 500\">Table Layout</h6>\r\n    </div>\r\n    <hr class=\"my-2\" />\r\n    <div class=\"w-100 mb-3 d-flex\" role=\"group\">\r\n      <input\r\n        type=\"radio\"\r\n        class=\"btn-check layout-button-check\"\r\n        name=\"layoutSize\"\r\n        id=\"small\"\r\n        autocomplete=\"off\"\r\n        (change)=\"changeTableLayout($event, 'small')\"\r\n        [checked]=\"selectedTableLayout == 'small'\"\r\n      />\r\n      <label\r\n        class=\"border d-flex flex-column align-items-center layout-button\"\r\n        for=\"small\"\r\n        [ngStyle]=\"{\r\n          color: selectedTableLayout == 'small' ? '#000' : '#727272'\r\n        }\"\r\n      >\r\n        <div class=\"preview-box border mb-1\" style=\"height: 8px\"></div>\r\n        Small\r\n      </label>\r\n\r\n      <input\r\n        type=\"radio\"\r\n        class=\"btn-check layout-button-check\"\r\n        name=\"layoutSize\"\r\n        id=\"medium\"\r\n        autocomplete=\"off\"\r\n        [checked]=\"selectedTableLayout == 'medium'\"\r\n        (change)=\"changeTableLayout($event, 'medium')\"\r\n      />\r\n      <label\r\n        class=\"border mx-3 d-flex flex-column align-items-center layout-button\"\r\n        for=\"medium\"\r\n        [ngStyle]=\"{\r\n          color: selectedTableLayout == 'medium' ? '#000' : '#727272'\r\n        }\"\r\n      >\r\n        <div class=\"preview-box border mb-1\" style=\"height: 12px\"></div>\r\n        Medium\r\n      </label>\r\n\r\n      <input\r\n        type=\"radio\"\r\n        class=\"btn-check layout-button-check\"\r\n        name=\"layoutSize\"\r\n        id=\"large\"\r\n        autocomplete=\"off\"\r\n        (change)=\"changeTableLayout($event, 'large')\"\r\n        [checked]=\"selectedTableLayout == 'large'\"\r\n      />\r\n      <label\r\n        class=\"border d-flex flex-column align-items-center layout-button\"\r\n        for=\"large\"\r\n        [ngStyle]=\"{\r\n          color: selectedTableLayout == 'large' ? '#000' : '#727272'\r\n        }\"\r\n      >\r\n        <div class=\"preview-box border mb-1\" style=\"height: 16px\"></div>\r\n        Large\r\n      </label>\r\n    </div>\r\n\r\n    <hr class=\"my-2\" />\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <span>Show separators</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          type=\"checkbox\"\r\n          id=\"separators\"\r\n          [(ngModel)]=\"showVerticalBorder\"\r\n          (change)=\"onFontChange()\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <span>Row shading</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          [(ngModel)]=\"rowShadingEnabled\"\r\n          (change)=\"toggleRowShading()\"\r\n          type=\"checkbox\"\r\n          id=\"rowShading\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <span>Show Side Menu</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          [(ngModel)]=\"showSideMenu\"\r\n          type=\"checkbox\"\r\n          id=\"rowShading\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <span>Show Filter Row</span>\r\n      <div class=\"form-check form-switch m-0\">\r\n        <input\r\n          class=\"form-check-input\"\r\n          [(ngModel)]=\"showFilterRow\"\r\n          type=\"checkbox\"\r\n          id=\"rowShading\"\r\n        />\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #tablePreset>\r\n  <div\r\n    *ngIf=\"activeSubButton !== 'save-preset'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"p-3 shadow actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\r\n    style=\"width: 280px\"\r\n  >\r\n    <!-- Header -->\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <button\r\n          class=\"btn btn-link p-0\"\r\n          style=\"margin-left: -10px\"\r\n          (click)=\"toggleActions('setting')\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n            class=\"data-grid-svg-icon\"\r\n          ></span>\r\n        </button>\r\n        <h6 class=\"mb-0 ms-2\" style=\"font-weight: 500\">Table Presets</h6>\r\n      </div>\r\n      <!-- Save Preset Button with Dropdown -->\r\n      <div>\r\n        <a\r\n          class=\"text-decoration-none text-primary\"\r\n          type=\"button\"\r\n          id=\"savePresetDropdown\"\r\n          (click)=\"$event.stopPropagation(); toggleSubActions('save-preset')\"\r\n        >\r\n          {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\r\n        </a>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Search -->\r\n    <div class=\"mb-3\">\r\n      <div class=\"col-12 global-search\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\r\n        ></span>\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search...\"\r\n          [(ngModel)]=\"searchTextPresetTable\"\r\n          type=\"search\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Preset List -->\r\n    <ng-container\r\n      *ngIf=\"\r\n        tableView | filter : searchTextPresetTable : 'name' as filteredList\r\n      \"\r\n    >\r\n      <!-- If filteredList exists and none is default -> show fallback -->\r\n      <div\r\n        class=\" pb-5 overflow-auto\"\r\n        [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 250\"\r\n      >\r\n        <div\r\n          class=\"cursor-pointer\"\r\n          (click)=\"\r\n            clearAllFilters();\r\n            openIndex = null;\r\n            temp_state.id = '';\r\n            activeTopButton = '';\r\n            curretaTablePresetForUpdate = null\r\n          \"\r\n        >\r\n          <div class=\"fw-semibold\">Default View</div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-between\">\r\n          <small class=\"text-dark\">Created by system</small>\r\n          <span\r\n            *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\r\n            class=\"badge bg-light text-primary ms-2\"\r\n            >Default</span\r\n          >\r\n          <!-- <span\r\n            *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\"\r\n            class=\"me-2\"\r\n          ></span> -->\r\n          <div\r\n            class=\"dropdown d-flex justify-content-end\"\r\n            *ngIf=\"tableFilterViewId\"\r\n          ></div>\r\n        </div>\r\n\r\n        <!-- The list: render each table from filteredList -->\r\n        <div\r\n          class=\"list-group list-group-flush\"\r\n          *ngFor=\"\r\n            let table of filteredList;\r\n            let i = index;\r\n            trackBy: trackByTable\r\n          \"\r\n        >\r\n          <!-- Item -->\r\n          <div\r\n            (click)=\"\r\n              $event.stopPropagation(); openIndex = null; activeTopButton = ''\r\n            \"\r\n            class=\"list-group-item px-0 d-flex justify-content-between align-items-center\"\r\n          >\r\n            <div (click)=\"selectFilter(table); openIndex = null\">\r\n              <div class=\"fw-semibold\" style=\"cursor: pointer\">\r\n                {{ table?.name }}\r\n                <!-- {{table?.is_temp}} -->\r\n                <span\r\n                  *ngIf=\"\r\n                    (table?.is_temp && !temp_state.id) ||\r\n                    temp_state.id == table.id\r\n                  \"\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\r\n                  \"\r\n                  class=\"me-2\"\r\n                ></span>\r\n                <span\r\n                  *ngIf=\"table?.is_default\"\r\n                  class=\"badge bg-light text-primary ms-2\"\r\n                  >Default</span\r\n                >\r\n              </div>\r\n              <small class=\"text-dark\" *ngIf=\"table?.config?.filterNames\" [title]=\"table?.config?.filterNames\">\r\n              {{\r\n              table?.config?.filterNames?.length > 25\r\n              ? (table?.config?.filterNames | slice:0:25) + '...'\r\n              : table?.config?.filterNames\r\n              }}\r\n              ({{ table?.config?.totalCount }})\r\n            </small>\r\n             <small class=\"text-dark\" *ngIf=\"!table?.config?.filterNames\">{{ table?.createdAt | date : \"MMM d, y\" }}</small>\r\n            </div>\r\n\r\n            <div class=\"d-flex align-items-center\">\r\n              <span\r\n                *ngIf=\"table?.is_default\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\r\n                \"\r\n                class=\"me-2\"\r\n              ></span>\r\n\r\n              <div class=\"dropdown\" *ngIf=\"!table?.is_default\">\r\n                <div\r\n                  class=\"dropdown-wrapper\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                >\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"btn-icon muted-text\"\r\n                    (click)=\"toggleMenu(i, $event)\"\r\n                    aria-haspopup=\"true\"\r\n                    [attr.aria-expanded]=\"openIndex === i\"\r\n                  >\r\n                    <span\r\n                      [inlineSVG]=\"\r\n                        singleSpaAssetsPath +\r\n                        'data-grid/icons/horizontal-dots.svg'\r\n                      \"\r\n                      class=\"me-2\"\r\n                    ></span>\r\n                  </button>\r\n\r\n                  <!-- menu -->\r\n                 <ul\r\n                    *ngIf=\"openIndex === i\"\r\n                    class=\"custom-dropdown-menu position-fixed top-auto\"\r\n                    role=\"menu\"\r\n                    [style.right.px]=\"'unset'\"\r\n                    [style.left.px]=\"dataGridContainer.offsetWidth - 200\"\r\n                    style=\"top: unset; right: unset\"\r\n                  >\r\n                    <li role=\"none\">\r\n                      <button\r\n                        role=\"menuitem\"\r\n                        class=\"dropdown-item\"\r\n                        (click)=\"\r\n                          actionPreset(table, 'setPreset'); temp_state.id = ''\r\n                        \"\r\n                      >\r\n                        <span\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath + 'data-grid/icons/star.svg'\r\n                          \"\r\n                          class=\"me-2\"\r\n                        ></span>\r\n                        Set as default\r\n                      </button>\r\n                    </li>\r\n\r\n                    <li role=\"none\" *ngIf=\"!table.confirmDelete\">\r\n                      <button\r\n                        role=\"menuitem\"\r\n                        class=\"dropdown-item text-danger\"\r\n                        (click)=\"table.confirmDelete = true\"\r\n                      >\r\n                        <span\r\n                          style=\"margin-top: -4px\"\r\n                          [inlineSVG]=\"\r\n                            singleSpaAssetsPath +\r\n                            'data-grid/icons/trash-red.svg'\r\n                          \"\r\n                          class=\"me-2\"\r\n                        ></span>\r\n                        Delete\r\n                      </button>\r\n                    </li>\r\n\r\n                    <li\r\n                      role=\"none\"\r\n                      *ngIf=\"table.confirmDelete\"\r\n                      class=\"confirm-block\"\r\n                    >\r\n                      <div class=\"px-3 py-2 text-center\">\r\n                        <div class=\"mb-2\">\r\n                          Are you sure you want to delete <br /><b\r\n                            >\u201C{{ table?.name }}\u201D</b\r\n                          >?\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                          <button\r\n                            class=\"btn btn-sm btn-light me-2\"\r\n                            (click)=\"table.confirmDelete = false\"\r\n                          >\r\n                            Cancel\r\n                          </button>\r\n                          <button\r\n                            class=\"btn btn-sm btn-danger\"\r\n                            (click)=\"actionPreset(table, 'deletePreset')\"\r\n                          >\r\n                            Delete\r\n                          </button>\r\n                        </div>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- Item End Here -->\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div\r\n    (click)=\"$event.stopPropagation()\"\r\n    *ngIf=\"activeSubButton == 'save-preset'\"\r\n    class=\"dropdown-menu p-3 badge mt-4 save-preset-dropdown mt-1\"\r\n    aria-labelledby=\"savePresetDropdown\"\r\n    style=\"min-width: 250px\"\r\n  >\r\n    <div class=\"fw-bold fs-14px mb-2\">\r\n      {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\r\n    </div>\r\n    <div class=\"fs-14px mb-2\" style=\"line-height: 20px\">\r\n      This will save the current table adjustments as a preset.\r\n    </div>\r\n    <!-- Input -->\r\n    <div class=\"mb-2\">\r\n      <label for=\"presetName\" class=\"form-label fs-12px fw-bold\"\r\n        >Preset Name</label\r\n      >\r\n      <div class=\"col-12 global-search\">\r\n        <input\r\n          #presetNameCtrl=\"ngModel\"\r\n          required\r\n          [(ngModel)]=\"presetName\"\r\n          [ngClass]=\"{\r\n            'is-invalid':\r\n              presetNameCtrl.invalid &&\r\n              (presetNameCtrl.dirty || presetNameCtrl.touched)\r\n          }\"\r\n          class=\"form-control form-control-sm ps-2\"\r\n          placeholder=\"Enter preset name\"\r\n          type=\"text\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Checkbox -->\r\n    <div class=\"form-check mb-2\">\r\n      <input\r\n        class=\"form-check-input\"\r\n        [(ngModel)]=\"presetFilter\"\r\n        type=\"checkbox\"\r\n        id=\"saveFilters\"\r\n      />\r\n      <label class=\"form-check-label mt-1\" for=\"saveFilters\">\r\n        Save active filters\r\n      </label>\r\n    </div>\r\n\r\n    <!-- Save Button -->\r\n    <div class=\"d-flex justify-content-center gap-2\" style=\"height: 32px\">\r\n      <button\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn border w-100 d-flex align-items-center justify-content-center btn-light\"\r\n        (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\r\n        style=\"margin-top: -2px\"\r\n      >\r\n        <span>Cancel</span>\r\n      </button>\r\n      <button\r\n        [disabled]=\"closeDropdown.preset.loading\"\r\n        (click)=\"savePreset(presetNameCtrl)\"\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center\"\r\n      >\r\n        <span style=\"margin-top: -2px\" *ngIf=\"isTablePresetNotChanged\">\r\n          <ng-container *ngIf=\"!closeDropdown.preset.loading\"\r\n            >Save</ng-container\r\n          >\r\n          <ng-container *ngIf=\"closeDropdown.preset.loading\"\r\n            ><span class=\"spinner-border spinner-border-sm\"></span\r\n          ></ng-container>\r\n        </span>\r\n        <span style=\"white-space: nowrap\" *ngIf=\"!isTablePresetNotChanged\"\r\n          >Update Preset</span\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showHideColumns>\r\n  <div\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"p-3 shadow actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\r\n    style=\"width: 280px\"\r\n  >\r\n    <!-- Header -->\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <button\r\n          class=\"btn btn-link p-0\"\r\n          style=\"margin-left: -10px\"\r\n          (click)=\"toggleActions('setting')\"\r\n        >\r\n          <span\r\n            [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n            class=\"data-grid-svg-icon\"\r\n          ></span>\r\n        </button>\r\n        <h6 class=\"mb-0 ms-2\" style=\"font-weight: 500\">Columns</h6>\r\n      </div>\r\n      <a\r\n        (click)=\"resetColumns()\"\r\n        href=\"javascript:void(0)\"\r\n        class=\"text-primary text-decoration-none d-none\"\r\n        >Reset</a\r\n      >\r\n    </div>\r\n\r\n    <!-- Search -->\r\n    <div class=\"mb-3\">\r\n      <div class=\"col-12 global-search\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"mx-2 position-absolute icon data-grid-svg-icon\"\r\n        ></span>\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Search column\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"topShowHideColumns\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <!-- Preset List -->\r\n    <div\r\n      class=\"list-group list-group-flush\"\r\n      style=\"overflow: auto; scrollbar-width: thin\"\r\n      [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 220\"\r\n    >\r\n      <div class=\"muted-text show-hide-table-label d-flex justify-content-between\" *ngIf=\"hasAnyVisibleColumn\">\r\n        Show in table\r\n         <div class=\"form-check\">\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              id=\"hide_all\"\r\n              [checked]=\"allColumnsSelected()\"\r\n              (change)=\"toggleAllColumnsVisibility()\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" for=\"hide_all\">\r\n              Show/Hide All \r\n            </label>\r\n          </div>\r\n      </div>\r\n      <!-- Item -->\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of columns | filter : topShowHideColumns : 'header';\r\n          trackBy: trackByField\r\n        \"\r\n      >\r\n        <div\r\n          *ngIf=\"col.is_visible\"\r\n          class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\r\n        >\r\n          <div class=\"d-flex gap-1\">\r\n            <div>\r\n              <span\r\n                *ngIf=\"!col?.pinned\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\r\n                \"\r\n                class=\"cursor-grap data-grid-svg-icon\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              ></span>\r\n              <span\r\n                *ngIf=\"col?.pinned\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                \"\r\n                class=\"cursor-grap data-grid-svg-icon\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              ></span>\r\n            </div>\r\n            <div class=\"fw-semibold\">\r\n              {{ col.header }}\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"!col?.query?.first_value && !col?.query?._ids?.length\"\r\n            class=\"d-flex align-items-center cursor-pointer\"\r\n            (click)=\"toggleColumnVisibility(col, false)\"\r\n            [class.disabled]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\r\n            [class.pe-none]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\r\n            [class.opacity-50]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\r\n          >\r\n            <span\r\n              [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\r\n              class=\"data-grid-svg-icon me-2\"\r\n            ></span>\r\n          </div>\r\n          <div\r\n            *ngIf=\"col?.query?.first_value || col?.query?._ids?.length\"\r\n            class=\"d-flex align-items-center\"\r\n            style=\"opacity: 0.5\"\r\n          >\r\n            <span\r\n              [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\r\n              class=\"data-grid-svg-icon me-2\"\r\n            ></span>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- Item End Here -->\r\n\r\n      <div\r\n        class=\"dropdown-divider\"\r\n        *ngIf=\"hasAnyVisibleColumn && hasAnyInVisibleColumn\"\r\n      ></div>\r\n\r\n      <div\r\n        class=\"muted-text show-hide-table-label d-flex justify-content-between\"\r\n        *ngIf=\"hasAnyInVisibleColumn\"\r\n      >\r\n        Hide in table\r\n        <div class=\"form-check\">\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              id=\"show_all\"\r\n              [checked]=\"allColumnsSelected()\"\r\n              (change)=\"toggleAllColumnsVisibility()\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" for=\"show_all\">\r\n              Show/Hide All \r\n            </label>\r\n          </div>\r\n      </div>\r\n      <div class=\"list-group list-group-flush\">\r\n        <ng-container *ngFor=\"let col of columns; trackBy: trackByField\">\r\n          <div\r\n            *ngIf=\"!col.is_visible\"\r\n            class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\r\n          >\r\n            <div class=\"d-flex gap-1\">\r\n              <div>\r\n                <span\r\n                  *ngIf=\"!col?.pinned\"\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon cursor-grap\"\r\n                  (mousedown)=\"$event.preventDefault()\"\r\n                ></span>\r\n                <span\r\n                  *ngIf=\"col?.pinned\"\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon cursor-grap\"\r\n                  (mousedown)=\"$event.preventDefault()\"\r\n                ></span>\r\n              </div>\r\n              <div class=\"fw-semibold\">\r\n                {{ col.header }}\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"d-flex align-items-center cursor-pointer\"\r\n              (click)=\"toggleColumnVisibility(col, true)\"\r\n            >\r\n              <span\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\r\n                \"\r\n                class=\"data-grid-svg-icon me-2\"\r\n              ></span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Item End Here -->\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #filterColumns let-col=\"column\">\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"!isFilterOpen && activeTopButton == 'filter-columns'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns\"\r\n    style=\"width: 280px; right: unset; max-width: 230px\"\r\n    [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n  >\r\n    <div class=\"mb-2 px-3\">\r\n      <div class=\"col-12 global-search\">\r\n        <span\r\n          [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\r\n          class=\"data-grid-svg-icon mx-2 position-absolute icon\"\r\n        ></span>\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Filter by\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"addFilterColumnInput\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-group list-group-flush\"\r\n      style=\"max-height: calc(100vh - 500px); overflow: auto\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of columns | filter : addFilterColumnInput : 'header';\r\n          trackBy: trackByField\r\n        \"\r\n      >\r\n        <div\r\n          (click)=\"openFilter(col)\"\r\n          *ngIf=\"\r\n            col.is_visible &&\r\n            !col?.query?.first_value &&\r\n            !col?.query?._ids?.length && col?.type !== 'image' && col.is_search_able\r\n          \"\r\n          class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\r\n        >\r\n          <div class=\"d-flex gap-1\">\r\n            <div style=\"margin-top: -3px\"></div>\r\n            <div class=\"fw-semibold\">\r\n              {{ col.header }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown -->\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"isFilterOpen && selectedColumnForFilter?.type == 'dropdown' || selectedColumnForFilter?.type == 'array'\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\r\n    style=\"width: 280px; right: unset; max-width: 230px\"\r\n    [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n  >\r\n    <div class=\"px-3 my-2 border-below py-1 pb-2 mb-3 d-flex ps-1\">\r\n      <span\r\n        (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n        class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n      ></span\r\n      ><b>{{ selectedColumnForFilter?.header }}</b>\r\n    </div>\r\n    <div class=\"mb-2 px-3\">\r\n      <div\r\n        class=\"col-12 global-search position-relative border rounded d-flex align-items-center flex-wrap px-2 filter-serach-inpt\"\r\n      >\r\n        <span\r\n          *ngFor=\"let selected of selectedFilterOptions\"\r\n          class=\"badge d-flex align-items-center gap-1 me-1 mb-1 top-row-filter-dropdown\"\r\n        >\r\n          {{ selected?.value ? selected.value : selected }}\r\n          <span\r\n            (click)=\"toggleSelectionInFilter(selected)\"\r\n            [inlineSVG]=\"\r\n              singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\r\n            \"\r\n            class=\"me-2\"\r\n          ></span>\r\n        </span>\r\n        <input\r\n          class=\"form-control form-control-sm border-0 flex-grow-1\"\r\n          style=\"padding: 0\"\r\n          [placeholder]=\"selectedFilterOptions?.length ? '' : 'Filter by'\"\r\n          type=\"search\"\r\n          [(ngModel)]=\"searchTextForFilterDropDown\"\r\n          (keydown.backspace)=\"handleBackspace($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"list-group list-group-flush\"\r\n      style=\"max-height: calc(100vh - 600px); overflow: auto\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"\r\n          let col of selectedColumnForFilter.column_dropdown_value\r\n            | filter : searchTextForFilterDropDown : 'value';\r\n          let i = index\r\n        \"\r\n      >\r\n        <div\r\n          class=\"list-group-item border-0 px-2 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\r\n        >\r\n          <div class=\"form-check\">\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              [id]=\"i\"\r\n              [checked]=\"currentFilterSelectedIds.has(col.id || col._id || col)\"\r\n              (change)=\"toggleSelectionInFilter(col)\"\r\n            />\r\n            <label class=\"form-check-label fw-semibold\" [for]=\"i\">\r\n              {{ col?.value || col?.name || col }}\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      class=\"d-flex justify-content-center gap-2 px-2 border-top\"\r\n      style=\"height: 38px\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\r\n        (click)=\"$event.stopPropagation(); resetFilterChanges()\"\r\n      >\r\n        <span>Cancel</span>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\r\n        (click)=\"applyDropdownFilter()\"\r\n      >\r\n        <span style=\"margin-top: -2px\">Save</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- For Text fields and number fields-->\r\n\r\n  <div\r\n    @slideToggle\r\n    *ngIf=\"\r\n      isFilterOpen &&\r\n      (selectedColumnForFilter?.type == 'string' ||\r\n        selectedColumnForFilter?.type == 'number' ||\r\n        selectedColumnForFilter?.type == 'date')\r\n    \"\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\r\n    style=\"width: 210px; right: unset; max-width: 230px\"\r\n    [style.backgroundColor]=\"checkboxesBackgroundColor\"\r\n  >\r\n    <div class=\"px-3 border-below py-1 pb-2 d-flex ps-1\">\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\r\n        (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\r\n        class=\"data-grid-svg-icon me-2 cursor-pointer\"\r\n      ></span\r\n      ><b>{{ selectedColumnForFilter?.header }}</b>\r\n    </div>\r\n    <div class=\"col-12 position-relative p-2 text-filter\">\r\n      <div class=\"mb-2\">\r\n        <select\r\n          class=\"form-select form-select-sm custom-select border\"\r\n          [(ngModel)]=\"firstCondition\"\r\n        >\r\n          <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n            <option value=\"contain\">Contains</option>\r\n             <option value=\"does_not_contain\">Does Not Contain</option>\r\n            <option value=\"equal\">Equals</option>\r\n            <option value=\"before\">Starts With</option>\r\n            <option value=\"after\">Ends With</option>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n            <option value=\"equal\">Equals To</option>\r\n             <option value=\"not_equal\">Not Equal</option>\r\n            <option value=\"after\">After</option>\r\n            <option value=\"before\">Before</option>\r\n          </ng-container>\r\n\r\n           <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n              <option value=\"equal\">Equals To</option>\r\n              <option value=\"before\">Less Then </option>\r\n              <option value=\"after\">Greater Then </option>\r\n              <option value=\"less_then_equal\">less then Equal to</option>\r\n              <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n        </select>\r\n      </div>\r\n      <div class=\"mb-2\">\r\n        <input\r\n          class=\"form-control form-control-sm\"\r\n          placeholder=\"Enter first value\"\r\n          type=\"search\"\r\n          [type]=\"\r\n            selectedColumnForFilter?.type == 'string'\r\n              ? 'text'\r\n              : selectedColumnForFilter?.type\r\n          \"\r\n          [(ngModel)]=\"firstValue\"\r\n          (keydown.enter)=\"applyDropdownFilter()\"\r\n        />\r\n      </div>\r\n      <div>\r\n        <div class=\"d-flex my-3 d-flex flex-row\" style=\"font-size: 14px\">\r\n          <div\r\n            class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"radio\"\r\n              id=\"logicalAnd\"\r\n              name=\"logicalOperator\"\r\n              value=\"and\"\r\n              [(ngModel)]=\"condition\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"logicalAnd\"\r\n              >AND</label\r\n            >\r\n          </div>\r\n\r\n          <div\r\n            class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"radio\"\r\n              id=\"logicalOr\"\r\n              name=\"logicalOperator\"\r\n              value=\"or\"\r\n              [(ngModel)]=\"condition\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"logicalOr\">OR</label>\r\n          </div>\r\n\r\n          <div\r\n            class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\r\n          >\r\n            <input\r\n              class=\"form-check-input\"\r\n              type=\"radio\"\r\n              id=\"logicalNone\"\r\n              name=\"logicalOperator\"\r\n              value=\"none\"\r\n              [(ngModel)]=\"condition\"\r\n            />\r\n            <label class=\"form-check-label mb-0 mt-1\" for=\"logicalNone\"\r\n              >None</label\r\n            >\r\n          </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"condition !== 'none' && firstValue\">\r\n          <div class=\"mb-2 mt-3\">\r\n            <!-- Second condition select -->\r\n            <select\r\n              class=\"form-select form-select-sm border\"\r\n              [(ngModel)]=\"secondCondition\"\r\n            >\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'string'\">\r\n                <option value=\"contain\">Contains</option>\r\n                <option value=\"does_not_contain\">Does Not Contain</option>\r\n                <option value=\"equal\">Equals</option>\r\n                <option value=\"before\">Starts With</option>\r\n                <option value=\"after\">Ends With</option>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"selectedColumnForFilter?.type == 'date'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"not_equal\">Not Equal</option>\r\n                <option value=\"after\">After</option>\r\n                <option value=\"before\">Before</option>\r\n              </ng-container>\r\n               <ng-container *ngIf=\"selectedColumnForFilter?.type == 'number'\">\r\n                <option value=\"equal\">Equals To</option>\r\n                <option value=\"before\">Less Then </option>\r\n                <option value=\"after\">Greater Then </option>\r\n                <option value=\"less_then_equal\">less then Equal to</option>\r\n                <option value=\"greater_then_equal\">Greater then Equal to </option>\r\n            </ng-container>\r\n            </select>\r\n          </div>\r\n\r\n          <div class=\"mb-2\">\r\n            <!-- Second value input -->\r\n            <input\r\n              [type]=\"\r\n                selectedColumnForFilter?.type == 'string'\r\n                  ? 'text'\r\n                  : selectedColumnForFilter?.type\r\n              \"\r\n              class=\"form-control form-control-sm\"\r\n              placeholder=\"Enter second value\"\r\n              type=\"search\"\r\n              [(ngModel)]=\"secondValue\"\r\n              (keydown.enter)=\"applyDropdownFilter()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"d-flex justify-content-center gap-2 px-2 border-top\"\r\n      style=\"height: 38px\"\r\n    >\r\n      <button\r\n        [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\r\n        (click)=\"$event.stopPropagation(); resetTextFilterChanges()\"\r\n      >\r\n        <span>Cancel</span>\r\n      </button>\r\n      <button\r\n        [disabled]=\"(currentFilterSelectedIds?.size === 0 && !firstValue) || (condition !== 'none' && !secondValue)\"\r\n        type=\"button\"\r\n        style=\"height: 32px\"\r\n        class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\r\n        (click)=\"applyDropdownFilter()\"\r\n      >\r\n        <span style=\"margin-top: -2px\">Apply</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Edit dropdown here -->\r\n<ng-template let-col>\r\n  <div class=\"drop-down-edit\"></div>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #fullTextTemplate\r\n  let-row=\"row\"\r\n  let-col=\"col\"\r\n  let-isArray=\"isArray\"\r\n>\r\n  <div\r\n    class=\"full-text-box\"\r\n    (dblclick)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n    (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n    [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\r\n  >\r\n    <ng-container *ngIf=\"!isEditing(row, col)\">\r\n      <div\r\n        *ngIf=\"!isArray\"\r\n        class=\"full-text-content\"\r\n        [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\r\n        (dblclick)=\"\r\n          $event.stopPropagation();\r\n          $event.preventDefault();\r\n          enableEdit(row, col, true)\r\n        \"\r\n        (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n      >\r\n        {{\r\n          getNestedValue(row, col.field)?.value ||\r\n            getNestedValue(row, col.field)?.name ||\r\n            getNestedValue(row, col.field)\r\n        }}\r\n      </div>\r\n      <div *ngIf=\"isArray\">\r\n        <ul>\r\n          <ng-container\r\n            *ngFor=\"let item of getNestedValue(row, col.field); let i = index\"\r\n          >\r\n            <li *ngIf=\"i !== 0\">\r\n              <ng-container>\r\n                {{\r\n                  item?.department_name ||\r\n                    item?.roleName ||\r\n                    item?.full_name ||\r\n                    \"-\"\r\n                }}\r\n              </ng-container>\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isEditing(row, col)\">\r\n      <textarea\r\n        (dblclick)=\"\r\n          $event.stopPropagation();\r\n          $event.preventDefault();\r\n          enableEdit(row, col, true)\r\n        \"\r\n        #textModel=\"ngModel\"\r\n        rows=\"4\"\r\n        #textAreadInput\r\n        [(ngModel)]=\"row[col.field]\"\r\n        name=\"{{ col.field }}\"\r\n        required\r\n        (blur)=\"disableEdit(row, col, textModel)\"\r\n        (keydown.enter)=\"textAreadInput.blur()\"\r\n        autofocus\r\n        class=\"form-control\"\r\n        [ngClass]=\"{\r\n          'is-invalid': textModel.invalid\r\n        }\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n      ></textarea>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultImagePlaceholder let-row=\"row\" let-col=\"col\">\r\n  <span\r\n    class=\"px-2 d-flex w-100 cell-content image-placeholder\"\r\n    [title]=\"row?.full_name || row?.name || 'N/A'\"\r\n  >\r\n    <ng-container\r\n      *ngIf=\"\r\n        row?.logo ||\r\n          row?.assetImage ||\r\n          row?.invoice?.invoice_image ||\r\n          row?.invoice_image;\r\n        else placeholder\r\n      \"\r\n    >\r\n      <span\r\n        (click)=\"fullscreenImage = row?.profile_pictures?.[4]?.path ||\r\n            row?.logo ||\r\n            row?.assetImage ||\r\n            row?.invoice_image\"\r\n        class=\"pic\"\r\n        [style.width.px]=\"rowHeight - 10\"\r\n        [style.height.px]=\"rowHeight - 10\"\r\n        [class.assets-pic]=\"gridType == 'Assets'\"\r\n      >\r\n        <img\r\n          [width]=\"rowHeight - 12\"\r\n          [height]=\"rowHeight - 12\"\r\n          [style.width.px]=\"rowHeight - 10\"\r\n          [style.height.px]=\"rowHeight - 10\"\r\n          [src]=\"\r\n            row?.profile_pictures?.[4]?.path ||\r\n            row?.logo ||\r\n            row?.assetImage ||\r\n            row?.invoice_image\r\n          \"\r\n          alt=\"icon\"\r\n          class=\"option-icon\"\r\n          loading=\"lazy\"\r\n        />\r\n      </span>\r\n    </ng-container>\r\n    <!-- <div\r\n      class=\"fullscreen-overlay\"\r\n      *ngIf=\"fullscreenImage\"\r\n      (click)=\"fullscreenImage = null\"\r\n    >\r\n      <img [src]=\"fullscreenImage\" class=\"fullscreen-img\" />\r\n    </div> -->\r\n\r\n    <ng-template #placeholder>\r\n      <span\r\n        [ngClass]=\"getDynamicClass(row?.full_name || row?.name)\"\r\n        class=\"pic d-flex align-items-center rounded-circle\"\r\n        [style.width.px]=\"rowHeight - 12\"\r\n        [style.height.px]=\"rowHeight - 12\"\r\n        [style.fontSize.px]=\"rowHeight / 3\"\r\n        [class.assets-pic]=\"gridType == 'Assets'\"\r\n      >\r\n        {{ getInitials(row?.full_name) }}\r\n      </span>\r\n    </ng-template>\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Right Click Menue -->\r\n<div\r\n  [class.invisible]=\"!positionedYet\"\r\n  class=\"context-menu p-2\"\r\n  *ngIf=\"actionHide && actions?.length\"\r\n  [ngStyle]=\"{ 'top.px': yPos, 'left.px': xPos }\"\r\n  [class.show]=\"isVisible\"\r\n  appendTo=\"body\"\r\n>\r\n  <ul>\r\n    <li\r\n      *ngFor=\"let action of actions\"\r\n      class=\"rounded d-flex align-items-center\"\r\n      (click)=\"onActionClick(action)\"\r\n    >\r\n      <span\r\n        [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/' + action + '.svg'\"\r\n        class=\"data-grid-svg-icon right-click-menu-icons me-2\"\r\n      ></span>\r\n      <span class=\"text-capitalize fw-500\">{{ action }}</span>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- Details Toggle from bottom -->\r\n\r\n<ng-template #nestedTableTemplate let-row>\r\n  <div\r\n    class=\"nested-table table table-sm w-100 mb-0 center-nested-table w-100\"\r\n    style=\"table-layout: fixed !important\"\r\n    #nestedTableContainer\r\n  >\r\n    <thead\r\n      #nestedHeader\r\n      [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\r\n    >\r\n      <div\r\n        cdkDropList\r\n        [cdkDropListData]=\"row?.detail.columns\"\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"dropColumn($event, row)\"\r\n        (cdkDropListSorted)=\"onNestedColSort($event, previewNestedCols)\"\r\n        [style.height.px]=\"nestedTableHeaderRowHeight\"\r\n        class=\"d-flex tr border-below\"\r\n      >\r\n        <div\r\n          *ngFor=\"let col of row.detail.columns; let i = index\"\r\n          [style.width.px]=\"col?.width || 250\"\r\n          [style.minWidth.px]=\"col?.width || 250\"\r\n          [style.maxWidth.px]=\"col?.width || 250\"\r\n          class=\"px-4 th\"\r\n          [attr.field]=\"col.field\"\r\n          [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\r\n          cdkDrag\r\n        >\r\n          <div\r\n            class=\"d-flex h-100 justify-content-between position-relative align-items-center\"\r\n          >\r\n            <div class=\"text-ellipsis\" (click)=\"sortNestedCol(col, row)\">\r\n              {{ col.header }}\r\n            </div>\r\n            <div class=\"d-flex gap-2\">\r\n              <span\r\n                *ngIf=\"currentSubSortColumn == col.field\"\r\n                [inlineSVG]=\"\r\n                  singleSpaAssetsPath +\r\n                  (col?.order_by == 'desc'\r\n                    ? 'data-grid/icons/sort-desc.svg'\r\n                    : 'data-grid/icons/sort-asc.svg')\r\n                \"\r\n                class=\"data-grid-svg-icon d-flex justify-content-center align-items-center ms-2 start-50\"\r\n              >\r\n              </span>\r\n              <!-- <div\r\n                class=\"three-dots p-1\"\r\n                (click)=\"openThreeDotsMenu($event, col)\"\r\n                style=\"cursor: pointer\"\r\n              >\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath +\r\n                    'data-grid/icons/three-dots-vertical.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div> -->\r\n\r\n              <!-- Only show menu if this column is active -->\r\n              <div\r\n                class=\"position-absolute\"\r\n                *ngIf=\"activeCol === col\"\r\n                style=\"top: -50%; z-index: 21; left: 0\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    columnMenu;\r\n                    context: {\r\n                      col: col,\r\n                      isNestedTable: true,\r\n                      columns: row?.detail.columns\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </div>\r\n              <div\r\n                class=\"resize-handle\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (mousedown)=\"\r\n                  $event.preventDefault();\r\n                  onResizeColumn($event, col);\r\n                  $event.stopPropagation()\r\n                \"\r\n              >\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/resize-handle.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <ng-template cdkDragPreview>\r\n            <div class=\"p-2 border d-flex gap-2\">\r\n              <div>\r\n                <span\r\n                  [inlineSVG]=\"\r\n                    singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\r\n                  \"\r\n                  class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\r\n                ></span>\r\n              </div>\r\n              <div>{{ col.header }}</div>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </thead>\r\n    <div\r\n      [style.width.px]=\"nestedHeader.offsetWidth - 10\"\r\n      [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\r\n    >\r\n      <cdk-virtual-scroll-viewport\r\n        [itemSize]=\"nestedTablerowHeight\"\r\n        class=\"viewport\"\r\n        [style.height.px]=\"\r\n          (row?.detail?.result?.length < 5\r\n            ? nestedTablerowHeight * row?.detail?.result?.length + 40\r\n            : 300) + (hasHorizontalScroll ? -12 : 1)\r\n        \"\r\n        [style.width.px]=\"nestedHeader.offsetWidth - 10\"\r\n        [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\r\n      >\r\n        <div\r\n          class=\"cursor-pointer border-below d-flex tr\"\r\n          *cdkVirtualFor=\"let d of row?.detail?.result; trackBy: trackById\"\r\n          [style.height.px]=\"nestedTablerowHeight\"\r\n          [style.width.px]=\"nestedHeader?.offsetWidth\"\r\n          [style.minWidth.px]=\"nestedHeader?.offsetWidth\"\r\n          [style.backgroundColor]=\"bodyBackgroundColor\"\r\n          (contextmenu)=\"onRightClick($event, d)\"\r\n        >\r\n          <div\r\n            class=\"px-4 py-0 td\"\r\n            *ngFor=\"let col of previewNestedCols; let j = index\"\r\n            [style.fontSize.px]=\"nestedTablerowFontsize\"\r\n            [attr.field]=\"col.field\"\r\n            [style.width.px]=\"col?.width || 250\"\r\n            [style.minWidth.px]=\"col?.width || 250\"\r\n            [style.maxWidth.px]=\"col?.width || 250\"\r\n          >\r\n            <div\r\n              [style.height.px]=\"nestedTablerowHeight - 1\"\r\n              [style.max-width.px]=\"col?.width\"\r\n              class=\"d-flex align-items-center\"\r\n            >\r\n              <!-- {{ d[col.field] || (col.is_amount ? 0 : \"-\") }} -->\r\n              <div\r\n                #cellText\r\n                class=\"text-ellipsis flex-grow-1\"\r\n                [title]=\"\r\n                  col?.type === 'date'\r\n                    ? (getNestedValue(d, col.field) | date : dateFormat)\r\n                    : getNestedValue(d, col.field) || '-'\r\n                \"\r\n              >\r\n                <ng-container *ngIf=\"col?.type !== 'image'\">\r\n                  <ng-container *ngIf=\"col.is_amount\">{{\r\n                    currencySymbol\r\n                  }}</ng-container>\r\n                  {{\r\n                          !isNestedValueArray(d, col.field)\r\n                            ? col?.type === 'date'\r\n                              ? (isDate(getNestedValue(d, col.field))\r\n                                  ? (getNestedValue(d, col.field) | date: dateFormat)\r\n                                  : (getNestedValue(d, col.field)?.value ||\r\n                                    getNestedValue(d, col.field)?.name ||\r\n                                    getNestedValue(d, col.field) ||\r\n                                    '-'))\r\n                              : (getNestedValue(d, col.field)?.value ||\r\n                                getNestedValue(d, col.field)?.name ||\r\n                                getNestedValue(d, col.field) ||\r\n                                (col.is_amount ? 0: '-'))\r\n                            : (getNestedValue(d, col.field)?.[0]?.department_name ||\r\n                              getNestedValue(d, col.field)?.[0]?.roleName || getNestedValue(d, col.field)?.[0]?.full_name ||\r\n                              '-')\r\n                  }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"false\">\r\n                  {{ getTotalAmount(col) }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"col?.type == 'image'\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      defaultImagePlaceholder;\r\n                      context: {\r\n                        row: d,\r\n                        col: col,\r\n                      }\r\n                    \"\r\n                  ></ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </cdk-virtual-scroll-viewport>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #leftRightNestedPlaceholder let-row>\r\n  <table\r\n    class=\"nested-table table table-sm w-100 mb-0\"\r\n    [style.backgroundColor]=\"bodyBackgroundColor\"\r\n    [style.height.px]=\"\r\n      gridType == 'Assets'\r\n        ? (nestedTableContainer?.nativeElement?.offsetHeight ?? 0) + 12\r\n        : (taskManagementContainer?.nativeElement?.offsetHeight ?? 0)\r\n    \"\r\n  >\r\n    <!-- <div class=\"thead\">\r\n      <div\r\n        class=\"tr d-flex border-below\"\r\n        [style.height.px]=\"nestedTableHeaderRowHeight\"\r\n        [style.backgroundColor]=\"headerBackgroundColor\"\r\n      >\r\n        <div class=\"th\" *ngFor=\"let _ of [1, 2, 3, 4, 5]\"></div>\r\n      </div>\r\n    </div> -->\r\n    <!-- <div class=\"tbody\">\r\n      <div\r\n        class=\"tr border-below\"\r\n        [style.height.px]=\"nestedTablerowHeight\"\r\n        *ngFor=\"let _ of row?.detail?.result\"\r\n        [style.backgroundColor]=\"headerBackgroundColor\"\r\n      >\r\n        <div class=\"td\" *ngFor=\"let __ of [1, 2, 3, 4, 5]\" class=\"py-0\">\r\n          <span\r\n            [style.height.px]=\"nestedTablerowHeight\"\r\n            [style.max-width.px]=\"nestedTablerowHeight\"\r\n          ></span>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n  </table>\r\n</ng-template>\r\n\r\n<ng-template #taskManagementTemplate let-taskDetails=\"taskDetails\">\r\n  <div\r\n    class=\"p-4\"\r\n    #taskManagementContainer\r\n    [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\r\n    [style.fontFaimly]=\"fontFaimly\"\r\n  >\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"col-4\">\r\n        <div class=\"item-title\">Description</div>\r\n        <!-- <div class=\"item-content firstDiv\">\r\n        {{ taskDetails.description }}\r\n      </div> -->\r\n        <p\r\n          [style.fontSize]=\"bodyTextFontsSize\"\r\n          class=\"item-content firstDiv taskDescription pe-4\"\r\n          [innerHTML]=\"getSafeComment(taskDetails?.editor_description)\"\r\n          (click)=\"openFullImage($event)\"\r\n        ></p>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div class=\"item-title\">Attachments</div>\r\n        <h5 *ngIf=\"taskDetails?.attachments?.length == 0\">\r\n          No Attachments found\r\n        </h5>\r\n        <div\r\n          *ngIf=\"taskDetails?.attachments?.length\"\r\n          class=\"item-content d-flex flex-wrap\"\r\n          style=\"gap: 10px\"\r\n        >\r\n          <a\r\n            *ngFor=\"let attachement of taskDetails?.attachments; let i = index\"\r\n            class=\"symbol-label fs-2 fw-semibold text-success cursor-pointer\"\r\n          >\r\n            <span\r\n              title=\"{{ taskDetails?.attachments_name[i] || 'Attachment' }}\"\r\n              (click)=\"downloadAttchment(attachement)\"\r\n              [inlineSVG]=\"\r\n                singleSpaAssetsPath +\r\n                'data-grid/document-icons/' +\r\n                getExtention(attachement) +\r\n                '.svg'\r\n              \"\r\n            >\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4\">\r\n        <div class=\"item-title\">\r\n          Comments ({{ taskDetails?.comments?.length }})\r\n        </div>\r\n        <h5 *ngIf=\"taskDetails?.comments?.length == 0\">No Comments found</h5>\r\n        <div *ngIf=\"taskDetails?.comments?.length\" class=\"item-content\">\r\n          <div class=\"comment\" *ngFor=\"let comment of taskDetails.comments\">\r\n            <div class=\"d-flex align-items-center pe-3\">\r\n              <img\r\n                class=\"pic image-input-wrapper\"\r\n                [style.width.px]=\"rowHeight - 12\"\r\n                [style.height.px]=\"rowHeight - 12\"\r\n                *ngIf=\"comment?.comment_by.logo\"\r\n                src=\"{{ comment?.comment_by.logo }}\"\r\n                alt=\"{{ comment.comment_by.full_name }}\"\r\n              />\r\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> -->\r\n              <span\r\n                *ngIf=\"!comment?.comment_by.logo\"\r\n                [ngClass]=\"getDynamicClass(comment.comment_by.full_name)\"\r\n                class=\"pic d-flex align-items-center rounded-circle\"\r\n                [style.width.px]=\"rowHeight - 12\"\r\n                [style.height.px]=\"rowHeight - 12\"\r\n                [style.fontSize.px]=\"rowHeight / 3\"\r\n                title=\"{{ comment.comment_by.full_name }}\"\r\n              >\r\n                {{ getInitials(comment.comment_by.full_name) }}\r\n              </span>\r\n            </div>\r\n            <div>\r\n              <div class=\"comment-author fs-14px\">\r\n                {{ comment?.comment_by.full_name }}\r\n              </div>\r\n              <div\r\n                class=\"comment-content forCommentImg\"\r\n                [innerHTML]=\"getSafeComment(comment.comment)\"\r\n              ></div>\r\n              <div class=\"comment-timestamp\">\r\n                {{ comment.comment_date | date }}\r\n              </div>\r\n              <div class=\"comment-timestamp\">\r\n                Replies: ({{ comment.replies.length }})\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #d9d9db;border-radius:12px;position:relative}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:8px 0 8px 8px;font-weight:700;border-bottom:1px solid #d9d9db;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 #d9d9db}.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}.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 #d9d9db}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#d9d9db}.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 #d9d9db;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #d9d9db}.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 #d9d9db!important}.right-pinned-body{right:0;border-left:1px solid #d9d9db}.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%;border-right:1px solid #d9d9db}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #d9d9db!important}.three-dots{width:22px;height:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;margin-right:8px;cursor:pointer}.three-dots:hover{background-color:#ccc!important}.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:240px;border:1px solid #ddd;box-shadow:0 0 16px #00000026;border:1px solid #d9d9db;padding:4px 0;font-size:14px;position:fixed}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item:hover{background-color:#deebf7}.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 #d9d9db;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 #d9d9db;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 #d9d9db;font-size:14px}.border-start{border-left:1px solid #d9d9db!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 #d9d9db;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:17px;overflow-x:auto;overflow-y:hidden;height:17px}.border-dashed{border:1px dashed #d9d9db}.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 #d9d9db!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 #d9d9db}.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}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{max-width:380px!important;display:flex!important;align-items:center!important}.global-search span{margin-top:-4px!important}.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 #d9d9db!important;border-radius:8px!important}.custom-menu{width:220px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px}.custom-menu .dropdown-item:hover{background-color:#f5f5f5;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 #ccc!important;background-color:#fff}.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 .preview-box{border-color:#007cf5!important;background-color:transparent!important}#medium:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}#large:checked+label .preview-box{border-color:#007cf5!important;background-color:transparent!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 28px!important;width:82px;border-radius:8px!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:13px;color:#333}.page-size select{padding:3px 6px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:13px}.page-info{margin-left:10px}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{padding:3px 8px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2}.page-buttons button.active{background:#eee;font-weight:600}.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 #ccc;margin-right:8px}.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}.add-filter-button:hover,.button-filter:hover{color:#000!important}.button-filter:hover ::ng-deep svg path{stroke:#000!important}.table-layout .dropdown-item{border-radius:0!important;padding-inline:16px!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}.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 svg,:host ::ng-deep .three-dots-col-menu svg path{stroke:#000!important}.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;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026;max-height:400px;overflow:auto}.full-text-box ul{max-height:400px}.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:50px!important;height:26px;align-items:center}.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 #d9d9db}.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}.cell-editing-dropdown-menu .dropdown-item{width:99%}.cell-editing-dropdown-menu .selected{background-color:#f0f8ff}.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}\n"] }]
         }], 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: [{
                 type: Input
             }], paginationConfig: [{