cats-data-grid 2.0.78 → 2.0.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3200,7 +3200,7 @@ class CatsDataGridComponent {
|
|
|
3200
3200
|
}
|
|
3201
3201
|
}
|
|
3202
3202
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", bigRows: "bigRows", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering", isRowsEditable: "isRowsEditable", showSkeleton: "showSkeleton", skeletonRowsLength: "skeletonRowsLength", skeletonColsLength: "skeletonColsLength" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", onCellEdit: "onCellEdit", onColConfigChange: "onColConfigChange", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-tableArea\" [ngClass]=\"{ large: bigRows }\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active-filters-container\">\n <div class=\"filter-static-label\">Filter by:</div>\n <div class=\"filter-tag-wrapper\" id=\"table_scroll\">\n @for (filter of appliedFilters; track filter.fieldName) {\n @if (filter.filters?.length) {\n <div class=\"active-filter-tag\">\n <div class=\"active-filter-label ellipsis\">\n @for (item of filter.filters; track $index) {\n @if (item.filterValue) {\n @if ($index > 0 && item.filterValue) {\n <span class=\"filter-logic\">\n {{ filter.filterLogic }}\n </span>\n }\n <span class=\"filter-field\"\n >{{ filter.fieldName.split(\".\")[0] }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : item.filterOperation\n }}</span\n >\n <span class=\"filter-value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove-filter-btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n }\n }\n </div>\n <div class=\"clear-all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n @if (groupByRequired && colDefs.length > 0) {\n <!-- Group Panel -->\n <div\n class=\"table-group-panel\"\n [ngClass]=\"{ disable_group: groupingDisabled }\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group-tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove-tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group-placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (colDefs?.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th-wraper\">\n <span class=\"cats-checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n } @else {\n @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n <th style=\"min-width: 50px; width: 50px\"></th>\n }\n }\n @if (activeGroups.length > 0) {\n <th class=\"active_group\">\n <div class=\"th-wraper\">\n <div class=\"text-wrapper\">\n <span class=\"ellipsis headerName\">Group</span>\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <div class=\"three-dots\">\n <img src=\"images/t-more-vertical.svg\" />\n </div>\n </div>\n </div>\n </th>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <th\n [ngStyle]=\"getStyle(col, 'action')\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === $index,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (dragover)=\"onDragOver($event, $index)\"\n (drop)=\"onDrop($event, $index)\"\n (mouseenter)=\"onMouseEnterHeader($index)\"\n (mouseleave)=\"onMouseLeaveHeader($index)\"\n >\n <div class=\"th-wraper\">\n <div\n class=\"text-wrapper\"\n [ngStyle]=\"getStyle(col, 'action')\"\n (click)=\"onSortingRowData($index, col)\"\n >\n @if (showMoveIcon[$index] && !col.isAction) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing || columnDraggable[$index]\"\n (dragstart)=\"onDragStart($event, $index, col)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <!-- Add icon -->\n @if (col?.headerIcon) {\n <div\n [appTooltip]=\"col?.tooltipText\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n class=\"filters\"\n >\n <img\n [src]=\"col?.headerIcon\"\n alt=\"image\"\n class=\"filter-icon\"\n />\n </div>\n }\n\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"applyAllFilters()\"\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col)\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-this.svg\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-all.svg\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{\n disabled_option:\n !groupByRequired || col.disableGrouping,\n }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <!-- <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/rotate-ccw.svg\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div\n class=\"cats-see-more-data\"\n id=\"table_scroll\"\n >\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"cats-checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label class=\"label\" [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td\n (click)=\"onCellClick(data, col)\"\n (dblclick)=\"onCellDblClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n isRowsEditable &&\n isCellDblClicked[col.colId + \"-\" + data.rowId]\n ) {\n <input\n [formControl]=\"cellClickedCtrl\"\n type=\"text\"\n name=\"cellClickedCtrl\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter()\"\n />\n }\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img\n class=\"gripper-img\"\n src=\"images/gripper.svg\"\n />\n </div>\n }\n\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n <span\n class=\"node_label\"\n [appTooltip]=\"\n parseColValue(data, col) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ parseColValue(data, col) }}</span\n >\n </div>\n <!-- <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div> -->\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n data[col.fieldName] || parseColValue(data, col)\n \"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"cats-see-more-data\" id=\"table_scroll\">\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired && colDefs.length > 0) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <!-- <span>Page</span> -->\n\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"header-dropdown-wrapper d-none\">\n <div class=\"right-click-dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second-dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .cats-see-more-data .cats-item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.cats-tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.cats-tableArea.large .table_wrapper table thead tr,.cats-tableArea.large .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table .filter_wrapper{top:calc(2rem / var(--scale))}.cats-tableArea.large .header-dropdown-wrapper{top:calc(5.25rem / var(--scale))}.cats-tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale))}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.cats-tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper table td,.cats-tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .table_wrapper table td.pinned_column,.cats-tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value,.cats-tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value .node_label,.cats-tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper table td .cell-value.ellipsis,.cats-tableArea .table_wrapper table td .cell-value .ellipsis,.cats-tableArea .table_wrapper table th .cell-value.ellipsis,.cats-tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cats-tableArea .table_wrapper table td .cell-value.ellipsis:hover .cats-see-more-data,.cats-tableArea .table_wrapper table th .cell-value.ellipsis:hover .cats-see-more-data{display:flex}.cats-tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--text-heading-secondary)}.cats-tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary);text-transform:uppercase}.cats-tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table thead th:nth-last-child(2) .second-dropdown,.cats-tableArea .table_wrapper table thead th:nth-last-child(3) .second-dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.cats-tableArea .table_wrapper table thead th:last-child .th-wraper{border:0}.cats-tableArea .table_wrapper table thead th:hover .none{display:block}.cats-tableArea .table_wrapper table thead th:hover .up,.cats-tableArea .table_wrapper table thead th:hover .down{display:none}.cats-tableArea .table_wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.cats-tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.cats-tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.cats-tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr:hover,.cats-tableArea .table_wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .cats-see-more-data{bottom:calc(2.1666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.cats-tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.cats-tableArea .table_wrapper table tbody tr td .gripper{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.cats-tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:inherit;max-width:-webkit-fill-available}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));width:calc(18.8333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .cats-checkbox_container{color:var(--text-body-primary)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(18rem / var(--scale));overflow-y:auto}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(1.8333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(7.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.active-filters-container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-blue);margin-bottom:calc(.6666666667rem / var(--scale));border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));min-height:calc(4.1666666667rem / var(--scale))}.active-filters-container .filter-static-label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);min-width:calc(5rem / var(--scale))}.active-filters-container .filter-tag-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 17.0833333333rem / var(--scale));overflow:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));color:var(--text-heading-secondary)}.active-filters-container .filter-tag-wrapper .active-filter-tag .active-filter-label{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding:calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-logic{color:var(--text-body-secondary);text-transform:uppercase}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-value{padding-left:calc(.3333333333rem / var(--scale))}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn img{max-width:calc(1.3333333333rem / var(--scale))}.active-filters-container .clear-all{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default);cursor:pointer;padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));min-width:calc(8.3333333333rem / var(--scale));text-align:right;border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-canvas)}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--surface-background-canvas);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.d-none{display:none}.table-group-panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--surface-background-default);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.table-group-panel img.divider:last-child{display:none}.table-group-panel .group-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-transform:uppercase;color:var(--text-heading-secondary);cursor:grab}.table-group-panel .group-tag .remove_tag{border:0;padding:0;cursor:pointer}.table-group-panel .group-placeholder{color:var(--text-heading-secondary)}.table-group-panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-primary);cursor:pointer}.cats-tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--surface-background-blue);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-default)}.header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.header-dropdown-wrapper .right_click_item:hover,.header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.header-dropdown-wrapper .right_click_item .right_chevron{stroke:var(--text-body-secondary)}.second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.setting-options .setting-item-container .setting-item-wrapper{width:100%}.setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted);pointer-events:none}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.disable_group{pointer-events:none}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
|
|
3203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CatsDataGridComponent, isStandalone: true, selector: "cats-data-grid", inputs: { tableOptions: "tableOptions", totalRecords: "totalRecords", sortingRequired: "sortingRequired", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", rowData: "rowData", colDefs: "colDefs", paginationRequired: "paginationRequired", selectedRowEmpty: "selectedRowEmpty", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", resetPage: "resetPage", rowId: "rowId", bigRows: "bigRows", height: "height", groupByRequired: "groupByRequired", pageSizeList: "pageSizeList", groupByField: "groupByField", appliedFilters: "appliedFilters", rowGripFieldName: "rowGripFieldName", pageNumber: "pageNumber", pageSize: "pageSize", dynamicGroupingFiltering: "dynamicGroupingFiltering", isRowsEditable: "isRowsEditable", showSkeleton: "showSkeleton", skeletonRowsLength: "skeletonRowsLength", skeletonColsLength: "skeletonColsLength" }, outputs: { onPaginationChange: "onPaginationChange", onCheckboxSelection: "onCheckboxSelection", onScrollEmitter: "onScrollEmitter", filter: "filter", onHideSettings: "onHideSettings", onCellEdit: "onCellEdit", onColConfigChange: "onColConfigChange", appliedFiltersEvent: "appliedFiltersEvent", activeGroupsEvent: "activeGroupsEvent", onRowClicked: "onRowClicked", onCellClicked: "onCellClicked" }, viewQueries: [{ propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }, { propertyName: "colActionMenu", first: true, predicate: ["colActionMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-tableArea\" [ngClass]=\"{ large: bigRows }\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active-filters-container\">\n <div class=\"filter-static-label\">Filter by:</div>\n <div class=\"filter-tag-wrapper\" id=\"table_scroll\">\n @for (filter of appliedFilters; track filter.fieldName) {\n @if (filter.filters?.length) {\n <div class=\"active-filter-tag\">\n <div class=\"active-filter-label ellipsis\">\n @for (item of filter.filters; track $index) {\n @if (item.filterValue) {\n @if ($index > 0 && item.filterValue) {\n <span class=\"filter-logic\">\n {{ filter.filterLogic }}\n </span>\n }\n <span class=\"filter-field\"\n >{{ filter.fieldName.split(\".\")[0] }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : item.filterOperation\n }}</span\n >\n <span class=\"filter-value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove-filter-btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n }\n }\n </div>\n <div class=\"clear-all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n @if (groupByRequired && colDefs.length > 0) {\n <!-- Group Panel -->\n <div\n class=\"table-group-panel\"\n [ngClass]=\"{ disable_group: groupingDisabled }\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group-tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove-tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group-placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (colDefs?.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th-wraper\">\n <span class=\"cats-checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n } @else {\n @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n <th style=\"min-width: 50px; width: 50px\"></th>\n }\n }\n @if (activeGroups.length > 0) {\n <th class=\"active_group\">\n <div class=\"th-wraper\">\n <div class=\"text-wrapper\">\n <span class=\"ellipsis headerName\">Group</span>\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <div class=\"three-dots\">\n <img src=\"images/t-more-vertical.svg\" />\n </div>\n </div>\n </div>\n </th>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <th\n [ngStyle]=\"getStyle(col, 'action')\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === $index,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (dragover)=\"onDragOver($event, $index)\"\n (drop)=\"onDrop($event, $index)\"\n (mouseenter)=\"onMouseEnterHeader($index)\"\n (mouseleave)=\"onMouseLeaveHeader($index)\"\n >\n <div class=\"th-wraper\">\n <div\n class=\"text-wrapper\"\n [ngStyle]=\"getStyle(col, 'action')\"\n (click)=\"onSortingRowData($index, col)\"\n >\n @if (showMoveIcon[$index] && !col.isAction) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing || columnDraggable[$index]\"\n (dragstart)=\"onDragStart($event, $index, col)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <!-- Add icon -->\n @if (col?.headerIcon) {\n <div\n [appTooltip]=\"col?.tooltipText\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n class=\"filters\"\n >\n <img\n [src]=\"col?.headerIcon\"\n alt=\"image\"\n class=\"filter-icon\"\n />\n </div>\n }\n\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}\n </span>\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"applyAllFilters()\"\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col)\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-this.svg\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-all.svg\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{\n disabled_option:\n !groupByRequired || col.disableGrouping,\n }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <!-- <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/rotate-ccw.svg\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div\n class=\"cats-see-more-data\"\n id=\"table_scroll\"\n >\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"cats-checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label class=\"label\" [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td\n (click)=\"onCellClick(data, col)\"\n (dblclick)=\"onCellDblClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n isRowsEditable &&\n isCellDblClicked[col.colId + \"-\" + data.rowId]\n ) {\n <input\n [formControl]=\"cellClickedCtrl\"\n type=\"text\"\n name=\"cellClickedCtrl\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter()\"\n />\n }\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img\n class=\"gripper-img\"\n src=\"images/gripper.svg\"\n />\n </div>\n }\n\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n <span\n class=\"node_label\"\n [appTooltip]=\"\n parseColValue(data, col) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ parseColValue(data, col) }}</span\n >\n </div>\n <!-- <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div> -->\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n data[col.fieldName] || parseColValue(data, col)\n \"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"cats-see-more-data\" id=\"table_scroll\">\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired && colDefs.length > 0) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <!-- <span>Page</span> -->\n\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"header-dropdown-wrapper d-none\">\n <div class=\"right-click-dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second-dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .cats-see-more-data .cats-item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.cats-tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.cats-tableArea.large .table_wrapper table thead tr,.cats-tableArea.large .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table .filter_wrapper{top:calc(2rem / var(--scale))}.cats-tableArea.large .header-dropdown-wrapper{top:calc(5.25rem / var(--scale))}.cats-tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale))}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.cats-tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper table td,.cats-tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .table_wrapper table td.pinned_column,.cats-tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value,.cats-tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value .node_label,.cats-tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper table td .cell-value.ellipsis,.cats-tableArea .table_wrapper table td .cell-value .ellipsis,.cats-tableArea .table_wrapper table th .cell-value.ellipsis,.cats-tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cats-tableArea .table_wrapper table td .cell-value.ellipsis:hover .cats-see-more-data,.cats-tableArea .table_wrapper table th .cell-value.ellipsis:hover .cats-see-more-data{display:flex}.cats-tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--text-heading-secondary)}.cats-tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary);text-transform:uppercase}.cats-tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table thead th:nth-last-child(2) .second-dropdown,.cats-tableArea .table_wrapper table thead th:nth-last-child(3) .second-dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.cats-tableArea .table_wrapper table thead th:last-child .th-wraper{border:0}.cats-tableArea .table_wrapper table thead th:hover .none{display:block}.cats-tableArea .table_wrapper table thead th:hover .up,.cats-tableArea .table_wrapper table thead th:hover .down{display:none}.cats-tableArea .table_wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.cats-tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.cats-tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.cats-tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr:hover,.cats-tableArea .table_wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .cats-see-more-data{bottom:calc(2.1666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.cats-tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.cats-tableArea .table_wrapper table tbody tr td .gripper{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.cats-tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:inherit;max-width:-webkit-fill-available}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .cats-checkbox_container{color:var(--text-body-primary)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(18.6666666667rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(1.8333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:auto;height:calc(2.6666666667rem / var(--scale));min-width:calc(7.5rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.active-filters-container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-blue);margin-bottom:calc(.6666666667rem / var(--scale));border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));min-height:calc(4.1666666667rem / var(--scale))}.active-filters-container .filter-static-label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);min-width:calc(5rem / var(--scale))}.active-filters-container .filter-tag-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 17.0833333333rem / var(--scale));overflow:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));color:var(--text-heading-secondary)}.active-filters-container .filter-tag-wrapper .active-filter-tag .active-filter-label{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding:calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-logic{color:var(--text-body-secondary);text-transform:uppercase}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-value{padding-left:calc(.3333333333rem / var(--scale))}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn img{max-width:calc(1.3333333333rem / var(--scale))}.active-filters-container .clear-all{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default);cursor:pointer;padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));min-width:calc(8.3333333333rem / var(--scale));text-align:right;border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-canvas)}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--surface-background-canvas);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.d-none{display:none}.table-group-panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--surface-background-default);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.table-group-panel img.divider:last-child{display:none}.table-group-panel .group-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-transform:uppercase;color:var(--text-heading-secondary);cursor:grab}.table-group-panel .group-tag .remove_tag{border:0;padding:0;cursor:pointer}.table-group-panel .group-placeholder{color:var(--text-heading-secondary)}.table-group-panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-primary);cursor:pointer}.cats-tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--surface-background-blue);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-default)}.header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.header-dropdown-wrapper .right_click_item:hover,.header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.header-dropdown-wrapper .right_click_item .right_chevron{stroke:var(--text-body-secondary)}.second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.setting-options .setting-item-container .setting-item-wrapper{width:100%}.setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted);pointer-events:none}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.disable_group{pointer-events:none}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AddClassPipe, name: "addClass" }] });
|
|
3204
3204
|
}
|
|
3205
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CatsDataGridComponent, decorators: [{
|
|
3206
3206
|
type: Component,
|
|
@@ -3215,7 +3215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3215
3215
|
AddClassPipe,
|
|
3216
3216
|
CommonInputComponent,
|
|
3217
3217
|
TooltipDirective,
|
|
3218
|
-
], template: "<div class=\"cats-tableArea\" [ngClass]=\"{ large: bigRows }\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active-filters-container\">\n <div class=\"filter-static-label\">Filter by:</div>\n <div class=\"filter-tag-wrapper\" id=\"table_scroll\">\n @for (filter of appliedFilters; track filter.fieldName) {\n @if (filter.filters?.length) {\n <div class=\"active-filter-tag\">\n <div class=\"active-filter-label ellipsis\">\n @for (item of filter.filters; track $index) {\n @if (item.filterValue) {\n @if ($index > 0 && item.filterValue) {\n <span class=\"filter-logic\">\n {{ filter.filterLogic }}\n </span>\n }\n <span class=\"filter-field\"\n >{{ filter.fieldName.split(\".\")[0] }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : item.filterOperation\n }}</span\n >\n <span class=\"filter-value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove-filter-btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n }\n }\n </div>\n <div class=\"clear-all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n @if (groupByRequired && colDefs.length > 0) {\n <!-- Group Panel -->\n <div\n class=\"table-group-panel\"\n [ngClass]=\"{ disable_group: groupingDisabled }\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group-tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove-tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group-placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (colDefs?.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th-wraper\">\n <span class=\"cats-checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n } @else {\n @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n <th style=\"min-width: 50px; width: 50px\"></th>\n }\n }\n @if (activeGroups.length > 0) {\n <th class=\"active_group\">\n <div class=\"th-wraper\">\n <div class=\"text-wrapper\">\n <span class=\"ellipsis headerName\">Group</span>\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <div class=\"three-dots\">\n <img src=\"images/t-more-vertical.svg\" />\n </div>\n </div>\n </div>\n </th>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <th\n [ngStyle]=\"getStyle(col, 'action')\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === $index,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (dragover)=\"onDragOver($event, $index)\"\n (drop)=\"onDrop($event, $index)\"\n (mouseenter)=\"onMouseEnterHeader($index)\"\n (mouseleave)=\"onMouseLeaveHeader($index)\"\n >\n <div class=\"th-wraper\">\n <div\n class=\"text-wrapper\"\n [ngStyle]=\"getStyle(col, 'action')\"\n (click)=\"onSortingRowData($index, col)\"\n >\n @if (showMoveIcon[$index] && !col.isAction) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing || columnDraggable[$index]\"\n (dragstart)=\"onDragStart($event, $index, col)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <!-- Add icon -->\n @if (col?.headerIcon) {\n <div\n [appTooltip]=\"col?.tooltipText\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n class=\"filters\"\n >\n <img\n [src]=\"col?.headerIcon\"\n alt=\"image\"\n class=\"filter-icon\"\n />\n </div>\n }\n\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"applyAllFilters()\"\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col)\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-this.svg\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-all.svg\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{\n disabled_option:\n !groupByRequired || col.disableGrouping,\n }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <!-- <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/rotate-ccw.svg\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div\n class=\"cats-see-more-data\"\n id=\"table_scroll\"\n >\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"cats-checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label class=\"label\" [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td\n (click)=\"onCellClick(data, col)\"\n (dblclick)=\"onCellDblClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n isRowsEditable &&\n isCellDblClicked[col.colId + \"-\" + data.rowId]\n ) {\n <input\n [formControl]=\"cellClickedCtrl\"\n type=\"text\"\n name=\"cellClickedCtrl\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter()\"\n />\n }\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img\n class=\"gripper-img\"\n src=\"images/gripper.svg\"\n />\n </div>\n }\n\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n <span\n class=\"node_label\"\n [appTooltip]=\"\n parseColValue(data, col) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ parseColValue(data, col) }}</span\n >\n </div>\n <!-- <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div> -->\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n data[col.fieldName] || parseColValue(data, col)\n \"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"cats-see-more-data\" id=\"table_scroll\">\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired && colDefs.length > 0) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <!-- <span>Page</span> -->\n\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"header-dropdown-wrapper d-none\">\n <div class=\"right-click-dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second-dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .cats-see-more-data .cats-item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.cats-tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.cats-tableArea.large .table_wrapper table thead tr,.cats-tableArea.large .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table .filter_wrapper{top:calc(2rem / var(--scale))}.cats-tableArea.large .header-dropdown-wrapper{top:calc(5.25rem / var(--scale))}.cats-tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale))}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.cats-tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper table td,.cats-tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .table_wrapper table td.pinned_column,.cats-tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value,.cats-tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value .node_label,.cats-tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper table td .cell-value.ellipsis,.cats-tableArea .table_wrapper table td .cell-value .ellipsis,.cats-tableArea .table_wrapper table th .cell-value.ellipsis,.cats-tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cats-tableArea .table_wrapper table td .cell-value.ellipsis:hover .cats-see-more-data,.cats-tableArea .table_wrapper table th .cell-value.ellipsis:hover .cats-see-more-data{display:flex}.cats-tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--text-heading-secondary)}.cats-tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary);text-transform:uppercase}.cats-tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table thead th:nth-last-child(2) .second-dropdown,.cats-tableArea .table_wrapper table thead th:nth-last-child(3) .second-dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.cats-tableArea .table_wrapper table thead th:last-child .th-wraper{border:0}.cats-tableArea .table_wrapper table thead th:hover .none{display:block}.cats-tableArea .table_wrapper table thead th:hover .up,.cats-tableArea .table_wrapper table thead th:hover .down{display:none}.cats-tableArea .table_wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.cats-tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.cats-tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.cats-tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr:hover,.cats-tableArea .table_wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .cats-see-more-data{bottom:calc(2.1666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.cats-tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.cats-tableArea .table_wrapper table tbody tr td .gripper{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.cats-tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:inherit;max-width:-webkit-fill-available}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));width:calc(18.8333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .cats-checkbox_container{color:var(--text-body-primary)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(18rem / var(--scale));overflow-y:auto}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(1.8333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:calc(7.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.active-filters-container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-blue);margin-bottom:calc(.6666666667rem / var(--scale));border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));min-height:calc(4.1666666667rem / var(--scale))}.active-filters-container .filter-static-label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);min-width:calc(5rem / var(--scale))}.active-filters-container .filter-tag-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 17.0833333333rem / var(--scale));overflow:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));color:var(--text-heading-secondary)}.active-filters-container .filter-tag-wrapper .active-filter-tag .active-filter-label{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding:calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-logic{color:var(--text-body-secondary);text-transform:uppercase}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-value{padding-left:calc(.3333333333rem / var(--scale))}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn img{max-width:calc(1.3333333333rem / var(--scale))}.active-filters-container .clear-all{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default);cursor:pointer;padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));min-width:calc(8.3333333333rem / var(--scale));text-align:right;border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-canvas)}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--surface-background-canvas);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.d-none{display:none}.table-group-panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--surface-background-default);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.table-group-panel img.divider:last-child{display:none}.table-group-panel .group-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-transform:uppercase;color:var(--text-heading-secondary);cursor:grab}.table-group-panel .group-tag .remove_tag{border:0;padding:0;cursor:pointer}.table-group-panel .group-placeholder{color:var(--text-heading-secondary)}.table-group-panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-primary);cursor:pointer}.cats-tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--surface-background-blue);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-default)}.header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.header-dropdown-wrapper .right_click_item:hover,.header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.header-dropdown-wrapper .right_click_item .right_chevron{stroke:var(--text-body-secondary)}.second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.setting-options .setting-item-container .setting-item-wrapper{width:100%}.setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted);pointer-events:none}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.disable_group{pointer-events:none}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"] }]
|
|
3218
|
+
], template: "<div class=\"cats-tableArea\" [ngClass]=\"{ large: bigRows }\" #table>\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (activeFilters.size > 0) {\n <div class=\"active-filters-container\">\n <div class=\"filter-static-label\">Filter by:</div>\n <div class=\"filter-tag-wrapper\" id=\"table_scroll\">\n @for (filter of appliedFilters; track filter.fieldName) {\n @if (filter.filters?.length) {\n <div class=\"active-filter-tag\">\n <div class=\"active-filter-label ellipsis\">\n @for (item of filter.filters; track $index) {\n @if (item.filterValue) {\n @if ($index > 0 && item.filterValue) {\n <span class=\"filter-logic\">\n {{ filter.filterLogic }}\n </span>\n }\n <span class=\"filter-field\"\n >{{ filter.fieldName.split(\".\")[0] }}:</span\n >\n <span class=\"\">\n {{\n item.filterOperation == \"=\" ||\n item.filterOperation == \"equals\"\n ? \":\"\n : item.filterOperation\n }}</span\n >\n <span class=\"filter-value\">{{ item.filterValue }}</span>\n }\n }\n </div>\n <button\n class=\"remove-filter-btn\"\n (click)=\"removeActiveFilter(filter)\"\n >\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n }\n }\n </div>\n <div class=\"clear-all\" (click)=\"clearAllFilter()\">Clear All Filters</div>\n </div>\n }\n @if (groupByRequired && colDefs.length > 0) {\n <!-- Group Panel -->\n <div\n class=\"table-group-panel\"\n [ngClass]=\"{ disable_group: groupingDisabled }\"\n (dragover)=\"onGroupDragOver($event)\"\n (drop)=\"onGroupDrop($event)\"\n >\n <img alt=\"\" src=\"images/t-data-pipeline.svg\" class=\"icon\" />\n @for (g of activeGroups; track $index) {\n <div\n class=\"group-tag\"\n draggable=\"true\"\n (dragstart)=\"onGroupDragStart($event, $index)\"\n (dragover)=\"onActiveDragOver($event, $index)\"\n (drop)=\"onActiveGroupDrop($event, $index)\"\n >\n <img src=\"images/t-gripper.svg\" alt=\"\" />\n <span>{{ g.headerName }}</span>\n <button class=\"remove-tag\" (click)=\"removeGroup(g, $index)\">\n <img src=\"images/t-x.svg\" alt=\"\" />\n </button>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" class=\"divider\" />\n }\n @if (activeGroups.length === 0) {\n <div class=\"group-placeholder\">Drag here to set row groups</div>\n }\n </div>\n }\n\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n #parent\n (scroll)=\"infinityScroll($event)\"\n [ngClass]=\"{ tbody_height: activeFilters.size > 0 }\"\n [class.no-horizontal-scroll]=\"\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n \"\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (colDefs?.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n @if (\n checkBoxSelection &&\n checkboxSelectionType == \"multiple\" &&\n atLeastOneColumnChecked\n ) {\n <th style=\"min-width: 50px; width: 50px\">\n <div class=\"th-wraper\">\n <span class=\"cats-checkbox_container\"\n ><input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n name=\"\"\n id=\"\"\n [checked]=\"checkAllSelected()\"\n [indeterminate]=\"checkInterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n /></span>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n } @else {\n @if (checkBoxSelection && checkboxSelectionType == \"single\") {\n <th style=\"min-width: 50px; width: 50px\"></th>\n }\n }\n @if (activeGroups.length > 0) {\n <th class=\"active_group\">\n <div class=\"th-wraper\">\n <div class=\"text-wrapper\">\n <span class=\"ellipsis headerName\">Group</span>\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <div class=\"three-dots\">\n <img src=\"images/t-more-vertical.svg\" />\n </div>\n </div>\n </div>\n </th>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <th\n [ngStyle]=\"getStyle(col, 'action')\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === $index,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (dragover)=\"onDragOver($event, $index)\"\n (drop)=\"onDrop($event, $index)\"\n (mouseenter)=\"onMouseEnterHeader($index)\"\n (mouseleave)=\"onMouseLeaveHeader($index)\"\n >\n <div class=\"th-wraper\">\n <div\n class=\"text-wrapper\"\n [ngStyle]=\"getStyle(col, 'action')\"\n (click)=\"onSortingRowData($index, col)\"\n >\n @if (showMoveIcon[$index] && !col.isAction) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing || columnDraggable[$index]\"\n (dragstart)=\"onDragStart($event, $index, col)\"\n (dragend)=\"onDragEnd()\"\n (mouseenter)=\"enableColumnDrag($event, $index)\"\n (mouseleave)=\"disableColumnDrag($event, $index)\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col?.headerName\n }}</span>\n\n @if (\n sortingRequired &&\n sortingColumnIndex == $index &&\n col?.sortable &&\n !col.isAction\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[$index] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n class=\"sorting_up\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (sortingType[$index] === \"dsc\") {\n <!-- <i class=\"fa fa-caret-down\" [ngClass]=\"sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''\"></i> -->\n <img\n src=\"images/t-arrow-down.svg\"\n class=\"sorting_down\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n </span>\n }\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <!-- Add icon -->\n @if (col?.headerIcon) {\n <div\n [appTooltip]=\"col?.tooltipText\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n class=\"filters\"\n >\n <img\n [src]=\"col?.headerIcon\"\n alt=\"image\"\n class=\"filter-icon\"\n />\n </div>\n }\n\n <!-- Column Filters Logic-->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, $index, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters()\"\n />\n </div>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters[1].filterValue\n \"\n (keyup)=\"applyAllFilters()\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters()\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[0].filterOperation = $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters()\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n [preSelectedValue]=\"\n col.filters[0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters[0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters()\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters[1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters[1].filterOperation =\n $event;\n applyAllFilters()\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n [preSelectedValue]=\"\n col.filters[1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}\n </span>\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter_btn\">\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n <button\n class=\"reset_btn\"\n type=\"button\"\n (click)=\"applyAllFilters()\"\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired && col.columnAction) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, $index)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n @if (!col.isAction) {\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, $index)\"\n >\n |\n </span>\n }\n </div>\n </div>\n\n <!-- popup open -->\n @if (menuVisible[$index]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n @if (\n sortingType[$index] === \"dsc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', $index)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n @if (\n sortingType[$index] === \"asc\" ||\n sortingType[$index] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', $index)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n <div class=\"divder\"></div>\n\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n (click)=\"pinColumn(col, $index, 'none')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n (pinActionClicked[col.colId] ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'left')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"left\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n (click)=\"pinColumn(col, $index, 'right')\"\n class=\"right_click_item\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[col.colId] === \"right\"\n ) {\n <img src=\"images/check.svg\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'left')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">{{\n col.leftPinned ? \"Unpin Left Column\" : \"Pin Column Left\"\n }}</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, $index, 'right')\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" />\n <span class=\"text\">\n {{\n col.rightPinned\n ? \"Unpin Right Column\"\n : \"Pin Column Right\"\n }}\n </span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/arrow-right.svg\" alt=\"\" />\n </div>\n </div> -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col)\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-this.svg\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"images/autosize-all.svg\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n [ngClass]=\"{\n disabled_option:\n !groupByRequired || col.disableGrouping,\n }\"\n >\n <div\n class=\"left_item\"\n (click)=\"groupByColumnAction(col, $index)\"\n >\n <img src=\"images/t-group-by-name.svg\" alt=\"\" />\n <span class=\"text\"\n >Group by {{ col.headerName }}</span\n >\n </div>\n </div>\n <!-- <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/t-choose-column.svg\" alt=\"\" />\n <span class=\"text\">Choose Columns</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/rotate-ccw.svg\" alt=\"\" />\n <span class=\"text\">Reset Columns</span>\n </div>\n </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @if (groupedResult && groupedResult.length > 0) {\n @for (group of groupedResult; track group.key) {\n <tr (click)=\"toggleGroup(group)\">\n <td\n class=\"group-cell\"\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n group.expanded\n ? 'chevron-down.svg'\n : 'chevron-right.svg'\n }}\"\n />\n {{ group.key }} ({{ group.children.length }})\n </span>\n </td>\n </tr>\n\n @if (group.expanded) {\n <!-- CASE 1: CHILDREN ARE MORE GROUPS -->\n @if (group.children[0]?.children) {\n @for (child of group.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: 1,\n }\"\n ></ng-container>\n }\n }\n\n <!-- CASE 2: CHILDREN ARE RAW ROWS -->\n @if (!group.children[0]?.children) {\n @for (row of group.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(row) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div\n class=\"cats-see-more-data\"\n id=\"table_scroll\"\n >\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n } @else {\n @for (data of rowData; track data.rowId) {\n <tr\n [ngClass]=\"data | addClass: tableOptions\"\n (dragover)=\"allowRowDrop($event)\"\n (drop)=\"dropRow(data)\"\n (click)=\"onRowClick(data)\"\n >\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px\">\n @if (checkboxSelectionType == \"multiple\") {\n <span class=\"cats-checkbox_container\"\n ><input\n type=\"checkbox\"\n class=\"pointer custom_check_box\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [disabled]=\"data.isLocked\"\n [checked]=\"data.isSelected || data.isLocked\"\n (change)=\"onRowCheckboxSelection($event)\"\n /></span>\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n name=\"\"\n id=\"{{ data.rowId }}\"\n [checked]=\"data?.isSelected\"\n (change)=\"onRowCheckboxSelection($event)\"\n />\n <label class=\"label\" [for]=\"data.rowId\"></label>\n </span>\n }\n </td>\n }\n @for (col of colDefs; track col.colId) {\n @if (col.active) {\n <td\n (click)=\"onCellClick(data, col)\"\n (dblclick)=\"onCellDblClick(data, col)\"\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col?.addClass ? col.addClass(data) : '',\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n <div class=\"col_wrapper\">\n @if (\n isRowsEditable &&\n isCellDblClicked[col.colId + \"-\" + data.rowId]\n ) {\n <input\n [formControl]=\"cellClickedCtrl\"\n type=\"text\"\n name=\"cellClickedCtrl\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onEnter()\"\n />\n }\n @if (\n rowGripFieldName &&\n rowGripFieldName === col?.fieldName\n ) {\n <div\n [draggable]=\"true\"\n (dragstart)=\"dragRow($event, data)\"\n class=\"gripper\"\n >\n <img\n class=\"gripper-img\"\n src=\"images/gripper.svg\"\n />\n </div>\n }\n\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n <span\n class=\"node_label\"\n [appTooltip]=\"\n parseColValue(data, col) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ parseColValue(data, col) }}</span\n >\n </div>\n <!-- <div class=\"see_more_data\" id=\"table_scroll\">\n <div class=\"item\">\n <span class=\"desc\">\n {{ parseColValue(data, col) }}</span\n >\n </div>\n </div> -->\n </div>\n } @else {\n <div\n [rowParam]=\"data\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n data[col.fieldName] || parseColValue(data, col)\n \"\n appRendererParser\n ></div>\n }\n </div>\n <!-- Commented for later use -->\n <!-- <div class=\"tool_tip\">\n <span class=\"\"> {{ parseColValue(data, col.fieldName) }}aditya </span>\n </div> -->\n </td>\n }\n }\n </tr>\n }\n }\n }\n </tbody>\n\n <ng-template\n #groupTemplate\n let-node\n let-colDefs=\"colDefs\"\n let-checkBoxSelection=\"checkBoxSelection\"\n let-activeGroups=\"activeGroups\"\n let-level=\"level\"\n >\n <!-- GROUP HEADER -->\n <tr (click)=\"toggleGroup(node)\">\n <td\n [attr.colspan]=\"\n colDefs.length +\n (checkBoxSelection ? 1 : 0) +\n (activeGroups.length > 0 ? 1 : 0)\n \"\n [style.paddingLeft.px]=\"level * 20\"\n class=\"group-cell\"\n >\n <span class=\"group-toggle\">\n <img\n src=\"images/{{\n node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'\n }}\"\n />\n {{ node.key }} ({{ node.children.length }})\n </span>\n </td>\n </tr>\n\n <!-- CHILDREN -->\n @if (node.expanded) {\n <!-- CASE: more groups -->\n @if (node.children[0]?.children) {\n @for (child of node.children; track child.key) {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: child,\n colDefs: colDefs,\n checkBoxSelection: checkBoxSelection,\n activeGroups: activeGroups,\n level: level + 1,\n }\"\n >\n </ng-container>\n }\n }\n\n <!-- CASE: final rows -->\n @if (!node.children[0]?.children) {\n @for (row of node.children; track row.rowId) {\n <tr [ngClass]=\"row | addClass: tableOptions\">\n <!-- Checkbox column if any -->\n @if (checkBoxSelection) {\n <td>\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox custom_check_box\"\n [checked]=\"row.isSelected\"\n /></span>\n </td>\n }\n @if (activeGroups.length > 0) {\n <td class=\"group-placeholder\"></td>\n }\n\n <!-- Render columns -->\n @for (col of colDefs; track col.colId) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n >\n <!-- {{ row[col.fieldName] }} -->\n @if (!col?.cellRenderer) {\n <div class=\"cell-value ellipsis\">\n <div\n class=\"more_data_wrapper\"\n [ngClass]=\"{ ellipsis: !col.wrapText }\"\n >\n {{ parseColValue(row, col) }}\n </div>\n <div class=\"cats-see-more-data\" id=\"table_scroll\">\n <div class=\"cats-item\">\n <span class=\"cats-desc\">\n {{ parseColValue(row, col) }}</span\n >\n </div>\n </div>\n </div>\n } @else {\n <div\n [rowParam]=\"row\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"row[col.fieldName]\"\n appRendererParser\n ></div>\n }\n </td>\n }\n </tr>\n }\n }\n }\n </ng-template>\n </table>\n\n @if (\n (!rowData || rowData.length === 0) &&\n (!groupedResult || groupedResult.length === 0)\n ) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n @if (tableOptions?.noDataTemplate) {\n <ng-container\n *ngTemplateOutlet=\"tableOptions.noDataTemplate\"\n ></ng-container>\n } @else {\n <span>No Data To Show</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Table Wrapper Ends-->\n @if (paginationRequired && colDefs.length > 0) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <!-- <span>Page</span> -->\n\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <!-- <span>of {{ pageDetails.totalPages }}</span> -->\n\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n\n<!-- cell right click code start here -->\n<div class=\"header-dropdown-wrapper d-none\">\n <div class=\"right-click-dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/scissors.svg\" />\n <span class=\"text\">Cut</span>\n </div>\n\n <span class=\"right_item\">Ctrl+X</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy</span>\n </div>\n\n <span class=\"right_item\">Ctrl+C</span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/copy.svg\" alt=\"\" />\n <span class=\"text\">Copy with Group Headers</span>\n </div>\n <span class=\"right_item\"></span>\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/clipboard.svg\" alt=\"\" />\n <span class=\"text\">Paste</span>\n </div>\n\n <span class=\"right_item\">Ctrl+V</span>\n </div>\n\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/bar-chart.svg\" alt=\"\" />\n <span class=\"text\">Chart</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/download.svg\" alt=\"\" />\n <span class=\"text\">Export</span>\n </div>\n\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Chart section Start Here -->\n <div class=\"second-dropdown\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <span class=\"text\">Column</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Bar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Pie</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Line</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Area</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">XY(Scatter)</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Polar</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stastical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Hierarchical</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Specialized</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Funnel</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Combination</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Export Section start Here -->\n <div class=\"export_section d-none\">\n <div class=\"right_click_item active\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">CSV Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <img src=\"images/file.svg\" alt=\"\" />\n <span class=\"text\">Excel Report</span>\n </div>\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n </div>\n </div>\n\n <!-- Column Group Section Start Here -->\n <div class=\"third_dropdown\">\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Grouped</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">Stacked</span>\n </div>\n </div>\n <div class=\"right_click_item\">\n <div class=\"left_item\">\n <span class=\"text\">100% Stacked</span>\n </div>\n </div>\n </div>\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.pointer,.cursor-pointer{cursor:pointer}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:inherit}:host::ng-deep .cats-see-more-data{position:absolute;min-width:calc(11.6666666667rem / var(--scale));max-width:calc(26.4166666667rem / var(--scale));background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale)) 0 var(--box-shadow);display:none;flex-direction:column;max-height:calc(20.8333333333rem / var(--scale));overflow-y:auto;z-index:1;left:0}:host::ng-deep .cats-see-more-data .cats-item{width:100%;height:\"\";min-height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:start;flex-wrap:nowrap;gap:0;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}:host::ng-deep .cats-see-more-data .cats-item .cats-desc{text-wrap:wrap;word-break:break-word}.cats-tableArea{width:100%;height:100%;border-radius:calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;position:relative}.cats-tableArea.large .table_wrapper table thead tr,.cats-tableArea.large .table_wrapper table tbody tr{height:calc(4.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table .filter_wrapper{top:calc(2rem / var(--scale))}.cats-tableArea.large .header-dropdown-wrapper{top:calc(5.25rem / var(--scale))}.cats-tableArea .table_wrapper{position:relative;overflow:auto;height:100%;min-height:calc(16.6666666667rem / var(--scale));max-height:calc(80rem / var(--scale))}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 3.5rem / var(--scale))}.cats-tableArea .table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper table td,.cats-tableArea .table_wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);min-width:calc(12.5rem / var(--scale));max-width:calc(80rem / var(--scale));text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .table_wrapper table td.pinned_column,.cats-tableArea .table_wrapper table th.pinned_column{min-width:calc(11.6666666667rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value,.cats-tableArea .table_wrapper table th .cell-value{line-height:calc(1.5rem / var(--scale))!important}.cats-tableArea .table_wrapper table td .cell-value .node_label,.cats-tableArea .table_wrapper table th .cell-value .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper table td .cell-value.ellipsis,.cats-tableArea .table_wrapper table td .cell-value .ellipsis,.cats-tableArea .table_wrapper table th .cell-value.ellipsis,.cats-tableArea .table_wrapper table th .cell-value .ellipsis{max-width:-webkit-fill-available;width:inherit}.cats-tableArea .table_wrapper table td .cell-value.ellipsis:hover .cats-see-more-data,.cats-tableArea .table_wrapper table th .cell-value.ellipsis:hover .cats-see-more-data{display:flex}.cats-tableArea .table_wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));color:var(--text-heading-secondary)}.cats-tableArea .table_wrapper table thead tr .headerName{text-wrap:nowrap;padding-left:0;cursor:pointer;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary);text-transform:uppercase}.cats-tableArea .table_wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table thead th:nth-last-child(2) .second-dropdown,.cats-tableArea .table_wrapper table thead th:nth-last-child(3) .second-dropdown{right:unset;left:calc(-20.25rem / var(--scale))}.cats-tableArea .table_wrapper table thead th:last-child .th-wraper{border:0}.cats-tableArea .table_wrapper table thead th:hover .none{display:block}.cats-tableArea .table_wrapper table thead th:hover .up,.cats-tableArea .table_wrapper table thead th:hover .down{display:none}.cats-tableArea .table_wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:all .3s ease-in-out}.cats-tableArea .table_wrapper table tbody tr.urgent{background-color:var(--red-10)}.cats-tableArea .table_wrapper table tbody tr.important{background-color:var(--orange-10)}.cats-tableArea .table_wrapper table tbody tr.disable{opacity:.4;pointer-events:none;background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper table tbody tr.outline{border:calc(.0833333333rem / var(--scale)) solid var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr:hover,.cats-tableArea .table_wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr:last-child:not(:first-child) ::ng-deep .cats-see-more-data{bottom:calc(2.1666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper table tbody tr td.selected{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action{cursor:pointer}.cats-tableArea .table_wrapper table tbody tr td.action:hover{border:calc(.0833333333rem / var(--scale)) solid var(--border-interaction-focus)}.cats-tableArea .table_wrapper table tbody tr td.action:hover span{color:var(--text-link-hover)}.cats-tableArea .table_wrapper table tbody tr td.action span{text-decoration:underline}.cats-tableArea .table_wrapper table tbody tr td .gripper{margin-right:calc(.8333333333rem / var(--scale));cursor:grab}.cats-tableArea .table_wrapper table tbody tr td .gripper .gripper-img{min-width:16px}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:inherit;max-width:-webkit-fill-available}.cats-tableArea .table_wrapper table tbody tr td .col_wrapper:has(.tag_wrapper){width:unset;max-width:max-content}.th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap}.th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));transition:opacity .5s ease;cursor:grab}.th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .cats-checkbox_container{color:var(--text-body-primary)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(18.6666666667rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(1.8333333333rem / var(--scale));margin-top:calc(.3333333333rem / var(--scale));width:100%}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn{width:auto;height:calc(2.6666666667rem / var(--scale));min-width:calc(7.5rem / var(--scale));font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter_btn .reset_btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.active-filters-container{display:flex;flex-direction:\"\";justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-blue);margin-bottom:calc(.6666666667rem / var(--scale));border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));min-height:calc(4.1666666667rem / var(--scale))}.active-filters-container .filter-static-label{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary);min-width:calc(5rem / var(--scale))}.active-filters-container .filter-tag-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:calc(100% - 17.0833333333rem / var(--scale));overflow:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);font-size:var(--fs-12);line-height:calc(1.5rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));color:var(--text-heading-secondary)}.active-filters-container .filter-tag-wrapper .active-filter-tag .active-filter-label{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));max-width:calc(29.1666666667rem / var(--scale));padding:calc(.1666666667rem / var(--scale)) calc(.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-logic{color:var(--text-body-secondary);text-transform:uppercase}.active-filters-container .filter-tag-wrapper .active-filter-tag .filter-value{padding-left:calc(.3333333333rem / var(--scale))}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn{border:0;background-color:transparent;cursor:pointer;min-width:auto;width:auto;height:auto}.active-filters-container .filter-tag-wrapper .active-filter-tag .remove-filter-btn img{max-width:calc(1.3333333333rem / var(--scale))}.active-filters-container .clear-all{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default);cursor:pointer;padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));min-width:calc(8.3333333333rem / var(--scale));text-align:right;border-left:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-canvas)}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}.moving_column{width:calc(15.1666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.5rem / var(--scale));background-color:var(--surface-background-canvas);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));box-shadow:0 calc(.0833333333rem / var(--scale)) calc(.3333333333rem / var(--scale)) calc(.0833333333rem / var(--scale)) var(--filter-shadow);padding-left:calc(1rem / var(--scale));position:absolute;top:69%;left:10%;cursor:grab}.moving_column .column_text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.d-none{display:none}.table-group-panel{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(.6666666667rem / var(--scale));background:var(--surface-background-default);border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-top-left-radius:calc(.6666666667rem / var(--scale));border-top-right-radius:calc(.6666666667rem / var(--scale));height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.table-group-panel img.divider:last-child{display:none}.table-group-panel .group-tag{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));padding:calc(.25rem / var(--scale)) calc(.6666666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(2.1666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;text-transform:uppercase;color:var(--text-heading-secondary);cursor:grab}.table-group-panel .group-tag .remove_tag{border:0;padding:0;cursor:pointer}.table-group-panel .group-placeholder{color:var(--text-heading-secondary)}.table-group-panel img{max-width:calc(1.3333333333rem / var(--scale))}.group-toggle{display:flex;flex-direction:row;justify-content:start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-primary);cursor:pointer}.cats-tableArea:has(.group_panel) tr .group-cell:hover img{background-color:var(--surface-background-blue);border-radius:calc(.3333333333rem / var(--scale))}.active_group{width:calc(8.3333333333rem / var(--scale))}.header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:99;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-default)}.header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.header-dropdown-wrapper .right_click_item:hover,.header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.header-dropdown-wrapper .right_click_item .right_chevron{stroke:var(--text-body-secondary)}.second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.third_dropdown{position:absolute;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));right:calc(-40.1666666667rem / var(--scale));top:calc(-.5833333333rem / var(--scale));width:calc(20.25rem / var(--scale));height:calc(18.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.export_section{position:absolute;right:calc(-20.0833333333rem / var(--scale));top:calc(20.0833333333rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(13.3333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.table_wrapper.no-horizontal-scroll{overflow-x:hidden!important}.table_inner_wrapper{position:relative;min-height:100%}.empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.empty_content{max-width:100%;text-align:center}.setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.setting-options .setting-item-container .setting-item-wrapper{width:100%}.setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted);pointer-events:none}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.disable_group{pointer-events:none}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"] }]
|
|
3219
3219
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { pinMenu: [{
|
|
3220
3220
|
type: ViewChild,
|
|
3221
3221
|
args: ['pinMenu']
|
|
@@ -5554,7 +5554,7 @@ class CommonTreeTableComponent {
|
|
|
5554
5554
|
this.applyAllFilters();
|
|
5555
5555
|
}
|
|
5556
5556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonTreeTableComponent, isStandalone: true, selector: "cats-tree-table", inputs: { data: "data", columns: "columns", tableOptions: "tableOptions", idField: "idField", labelField: "labelField", childrenField: "childrenField", treeColumnField: "treeColumnField", indentPx: "indentPx", showHeader: "showHeader", expandIcon: "expandIcon", collapseIcon: "collapseIcon", iconBasePath: "iconBasePath", showCheckbox: "showCheckbox", showNodeIcon: "showNodeIcon", noDataText: "noDataText", loadingText: "loadingText", expandAllNodes: "expandAllNodes", emitExpandAlways: "emitExpandAlways", sortingRequired: "sortingRequired", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", paginationRequired: "paginationRequired", pageSizeList: "pageSizeList", totalRecords: "totalRecords", resetPage: "resetPage", isExpandable: "isExpandable", rowOptionsResolver: "rowOptionsResolver", nodeIconResolver: "nodeIconResolver", linkResolver: "linkResolver", showSkeleton: "showSkeleton", skeletonRowsLength: "skeletonRowsLength", skeletonColsLength: "skeletonColsLength" }, outputs: { nodeToggle: "nodeToggle", selectionChange: "selectionChange", linkClick: "linkClick", linkDoubleClick: "linkDoubleClick", onHideSettings: "onHideSettings", onPaginationChange: "onPaginationChange", onColConfigChange: "onColConfigChange" }, viewQueries: [{ propertyName: "tableAreaRef", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-tableArea\" #table [class.is-resizing]=\"isResizing\">\n <!-- Settings Panel for Column Selection -->\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.header | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Main Table Wrapper -->\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n [class.no-horizontal-scroll]=\"!rows || rows.length === 0\"\n #parent\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (columns.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n <!-- Checkbox header column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n <div class=\"th-wraper\">\n <div class=\"cats-checkbox_container\">\n <input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n [checked]=\"checkHeaderChecked()\"\n [indeterminate]=\"checkHeaderIndeterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n />\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n\n <!-- Column Headers -->\n @for (col of columns; track col.fieldName; let colIdx = $index) {\n @if (col.active !== false) {\n <th\n [ngStyle]=\"getStyle(col)\"\n [attr.data-col-idx]=\"colIdx\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === colIdx,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (mouseenter)=\"showMoveIcon[colIdx] = true\"\n (mouseleave)=\"showMoveIcon[colIdx] = false\"\n >\n <div class=\"th-wraper\">\n <!-- Sortable column header -->\n <div\n class=\"text-wrapper\"\n [ngClass]=\"{ sortable: col.sortable }\"\n (click)=\"onSortingRowData(colIdx, col)\"\n >\n @if (showMoveIcon[colIdx] && col.sortable) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing\"\n (dragstart)=\"onDragStart($event, colIdx)\"\n (dragend)=\"onDragEnd()\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col.header || col.fieldName\n }}</span>\n\n <!-- Sorting indicator -->\n @if (\n sortingRequired &&\n sortingColumnIndex === colIdx &&\n col.sortable\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[colIdx] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n alt=\"Ascending\"\n />\n } @else if (sortingType[colIdx] === \"dsc\") {\n <img\n src=\"images/t-arrow-down.svg\"\n alt=\"Descending\"\n />\n }\n </span>\n }\n </div>\n\n @if (showExpandAllControl(col)) {\n <button\n class=\"header-tree-toggle\"\n type=\"button\"\n [attr.aria-label]=\"\n allNodesExpanded()\n ? 'Collapse all nodes'\n : 'Expand all nodes'\n \"\n (click)=\"toggleAllNodes(); $event.stopPropagation()\"\n >\n <img\n [src]=\"\n resolveIconSrc(\n allNodesExpanded()\n ? collapseIcon\n : expandIcon\n )\n \"\n alt=\"\"\n />\n </button>\n }\n\n <!-- Filter and Menu -->\n <div class=\"filter-three-dot-wrapper\">\n <!-- Filter Icon -->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n alt=\"Filter active\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n alt=\"Filter\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (input)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters(col)\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n [preSelectedValue]=\"\n col.filters![0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n [preSelectedValue]=\"\n col.filters![1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n (Select All)\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues!.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter-btn\">\n <button\n class=\"filter-reset-btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n </span>\n </div>\n </div>\n\n @if (menuVisible[colIdx]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n <!-- Sort Ascending -->\n @if (\n sortingType[colIdx] === \"dsc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', colIdx)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n\n <!-- Sort Descending -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n\n <!-- Clear Sort -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n sortingType[colIdx] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" alt=\"\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n\n <div class=\"divder\"></div>\n\n <!-- Pin Column -->\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" alt=\"\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'none')\"\n >\n <div class=\"left_item\">\n @if (\n ((col.colId &&\n pinActionClicked[col.colId]) ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'left')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"left\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'right')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"right\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Autosize This Column -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col, colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n\n <!-- Autosize All Columns -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n\n <!-- <div class=\"divder\"></div> -->\n\n <!-- Group by Column -->\n <!-- <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Group by {{ col.header || col.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n <!-- Choose Columns -->\n <!-- <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Choose Columns</span>\n\t </div>\n\t </div> -->\n\n <!-- Reset Columns -->\n <!-- <div class=\"right_click_item\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Reset Columns</span>\n\t </div>\n\t </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @for (row of rows; track row.trackKey) {\n @if (row.kind === \"node\") {\n <tr [class.disabled]=\"isDisabledRow(row)\">\n <!-- Checkbox column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px; max-width: 50px\">\n @if (checkboxSelectionType === \"multiple\") {\n @if (showCheckboxFor(row)) {\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [indeterminate]=\"isNodeIndeterminate(row.node)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n [name]=\"'row_' + row.trackKey\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label\n class=\"label\"\n [for]=\"'row_' + row.trackKey\"\n ></label>\n </span>\n }\n </td>\n }\n\n <!-- Data columns -->\n @for (\n col of columns;\n track col.fieldName;\n let colIndex = $index\n ) {\n @if (col.active !== false) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n @if (col.fieldName === treeColumn.fieldName) {\n @if (!col?.cellRenderer) {\n <div\n class=\"tree_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n @if (showToggleFor(row)) {\n <button\n class=\"toggle_btn\"\n type=\"button\"\n [disabled]=\"isDisabledRow(row)\"\n (click)=\"\n toggle(row.node, row.level, row.path)\n \"\n >\n <img\n [src]=\"resolveIconSrc(toggleIconFor(row))\"\n alt=\"\"\n />\n </button>\n } @else {\n <span class=\"toggle_spacer\"></span>\n }\n\n <!-- @if (showCheckboxFor(row)) {\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n ($any($event.target).checked)\n )\n \"\n />\n } -->\n\n @if (showNodeIconFor(row)) {\n @if (nodeIconFor(row); as icon) {\n <img\n class=\"node_icon\"\n [src]=\"resolveIconSrc(icon)\"\n alt=\"\"\n />\n }\n }\n\n @if (\n showLinkFor(row) && linkUrlFor(row);\n as url\n ) {\n <a\n class=\"node_link ellipsis\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n >\n {{ labelFor(row) || \"N/A\" }}\n </a>\n } @else {\n <span\n class=\"node_label\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ labelFor(row) || \"N/A\" }}</span\n >\n }\n </div>\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\n appRendererParser\n [style.padding-left.px]=\"row.level * indentPx\"\n ></div>\n }\n } @else {\n <div class=\"col_wrapper\">\n @if (!col?.cellRenderer) {\n <span\n class=\"ellipsis\"\n [appTooltip]=\"\n getValue(row.node, col.fieldName) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >\n {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span\n >\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n getValue(row.node, col.fieldName)\n \"\n appRendererParser\n ></div>\n }\n </div>\n }\n </td>\n }\n }\n </tr>\n } @else if (row.kind === \"loading\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ loadingText }}\n </div>\n </td>\n </tr>\n } @else if (row.kind === \"no-data\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ noDataText }}\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n </table>\n\n @if (!rows || rows.length === 0) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n <span>{{ noDataText }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Pagination -->\n @if (paginationRequired) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.table_wrapper.no-horizontal-scroll{overflow:hidden!important}.cats-tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper.global{margin:0}.cats-tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height:100%}.cats-tableArea .table_wrapper .table-inner-wrapper table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper .table-inner-wrapper table td,.cats-tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);overflow:visible}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));vertical-align:middle;line-height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.cats-tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.cats-tableArea.is-resizing .table_wrapper table th,.cats-tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.cats-tableArea .th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale));position:relative}.cats-tableArea .th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap;flex:1;min-width:0;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .text-wrapper.sortable{-webkit-user-select:none;user-select:none}.cats-tableArea .th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.cats-tableArea .th-wraper .text-wrapper .move-icon:hover{opacity:1}.cats-tableArea .th-wraper .text-wrapper .ellipsis{flex:1;min-width:0}.cats-tableArea .th-wraper .text-wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary)}.cats-tableArea .th-wraper .text-wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .header-tree-toggle{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .header-tree-toggle:hover{background:var(--border-core-default)}.cats-tableArea .th-wraper .header-tree-toggle img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));width:calc(18.8333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.cats-tableArea .th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-tableArea .th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.cats-tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .tree_cell .toggle_btn:hover{background:var(--border-core-default)}.cats-tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.cats-tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.cats-tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .tree_cell .node_link{color:var(--text-link-default);text-decoration:none;cursor:pointer;transition:color .2s ease}.cats-tableArea .tree_cell .node_link:hover{color:var(--text-link-hover);text-decoration:underline}.cats-tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.cats-tableArea .cats-checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.cats-tableArea .cats-radio-option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-radio-option input[type=radio]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-radio-option label{cursor:pointer}.cats-tableArea .meta_row td{background-color:var(--surface-background-default);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.cats-tableArea .meta_cell{color:var(--text-body-secondary);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center;justify-content:center;width:100vw}.cats-tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.cats-tableArea .empty_overlay .empty_content{text-align:center;color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.cats-tableArea .setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.cats-tableArea .setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.cats-tableArea .setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.cats-tableArea .setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.cats-tableArea .setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.cats-tableArea .setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.cats-tableArea .setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper{width:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.cats-tableArea .header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-strong)}.cats-tableArea .header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.cats-tableArea .header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.cats-tableArea .header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.cats-tableArea .header-dropdown-wrapper .right_click_item:hover,.cats-tableArea .header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.cats-tableArea .header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-tableArea .header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.cats-tableArea .header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-tableArea .second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.cats-tableArea .drag-over{background-color:#e3f2fd}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-heading-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
5557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonTreeTableComponent, isStandalone: true, selector: "cats-tree-table", inputs: { data: "data", columns: "columns", tableOptions: "tableOptions", idField: "idField", labelField: "labelField", childrenField: "childrenField", treeColumnField: "treeColumnField", indentPx: "indentPx", showHeader: "showHeader", expandIcon: "expandIcon", collapseIcon: "collapseIcon", iconBasePath: "iconBasePath", showCheckbox: "showCheckbox", showNodeIcon: "showNodeIcon", noDataText: "noDataText", loadingText: "loadingText", expandAllNodes: "expandAllNodes", emitExpandAlways: "emitExpandAlways", sortingRequired: "sortingRequired", filterRequired: "filterRequired", threeDotsMenuRequired: "threeDotsMenuRequired", settingsRequired: "settingsRequired", settingsClicked: "settingsClicked", checkBoxSelection: "checkBoxSelection", checkboxSelectionType: "checkboxSelectionType", paginationRequired: "paginationRequired", pageSizeList: "pageSizeList", totalRecords: "totalRecords", resetPage: "resetPage", isExpandable: "isExpandable", rowOptionsResolver: "rowOptionsResolver", nodeIconResolver: "nodeIconResolver", linkResolver: "linkResolver", showSkeleton: "showSkeleton", skeletonRowsLength: "skeletonRowsLength", skeletonColsLength: "skeletonColsLength" }, outputs: { nodeToggle: "nodeToggle", selectionChange: "selectionChange", linkClick: "linkClick", linkDoubleClick: "linkDoubleClick", onHideSettings: "onHideSettings", onPaginationChange: "onPaginationChange", onColConfigChange: "onColConfigChange" }, viewQueries: [{ propertyName: "tableAreaRef", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "pinMenu", first: true, predicate: ["pinMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cats-tableArea\" #table [class.is-resizing]=\"isResizing\">\n <!-- Settings Panel for Column Selection -->\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.header | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Main Table Wrapper -->\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n [class.no-horizontal-scroll]=\"!rows || rows.length === 0\"\n #parent\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (columns.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n <!-- Checkbox header column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n <div class=\"th-wraper\">\n <div class=\"cats-checkbox_container\">\n <input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n [checked]=\"checkHeaderChecked()\"\n [indeterminate]=\"checkHeaderIndeterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n />\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n\n <!-- Column Headers -->\n @for (col of columns; track col.fieldName; let colIdx = $index) {\n @if (col.active !== false) {\n <th\n [ngStyle]=\"getStyle(col)\"\n [attr.data-col-idx]=\"colIdx\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === colIdx,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (mouseenter)=\"showMoveIcon[colIdx] = true\"\n (mouseleave)=\"showMoveIcon[colIdx] = false\"\n >\n <div class=\"th-wraper\">\n <!-- Sortable column header -->\n <div\n class=\"text-wrapper\"\n [ngClass]=\"{ sortable: col.sortable }\"\n (click)=\"onSortingRowData(colIdx, col)\"\n >\n @if (showMoveIcon[colIdx] && col.sortable) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing\"\n (dragstart)=\"onDragStart($event, colIdx)\"\n (dragend)=\"onDragEnd()\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col.header || col.fieldName\n }}</span>\n\n <!-- Sorting indicator -->\n @if (\n sortingRequired &&\n sortingColumnIndex === colIdx &&\n col.sortable\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[colIdx] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n alt=\"Ascending\"\n />\n } @else if (sortingType[colIdx] === \"dsc\") {\n <img\n src=\"images/t-arrow-down.svg\"\n alt=\"Descending\"\n />\n }\n </span>\n }\n </div>\n\n @if (showExpandAllControl(col)) {\n <button\n class=\"header-tree-toggle\"\n type=\"button\"\n [attr.aria-label]=\"\n allNodesExpanded()\n ? 'Collapse all nodes'\n : 'Expand all nodes'\n \"\n (click)=\"toggleAllNodes(); $event.stopPropagation()\"\n >\n <img\n [src]=\"\n resolveIconSrc(\n allNodesExpanded() ? collapseIcon : expandIcon\n )\n \"\n alt=\"\"\n />\n </button>\n }\n\n <!-- Filter and Menu -->\n <div class=\"filter-three-dot-wrapper\">\n <!-- Filter Icon -->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n alt=\"Filter active\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n alt=\"Filter\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (input)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters(col)\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n [preSelectedValue]=\"\n col.filters![0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n [preSelectedValue]=\"\n col.filters![1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues!.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}</span\n >\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter-btn\">\n <button\n class=\"filter-reset-btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n </span>\n </div>\n </div>\n\n @if (menuVisible[colIdx]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n <!-- Sort Ascending -->\n @if (\n sortingType[colIdx] === \"dsc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', colIdx)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n\n <!-- Sort Descending -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n\n <!-- Clear Sort -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n sortingType[colIdx] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" alt=\"\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n\n <div class=\"divder\"></div>\n\n <!-- Pin Column -->\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" alt=\"\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'none')\"\n >\n <div class=\"left_item\">\n @if (\n ((col.colId &&\n pinActionClicked[col.colId]) ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'left')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"left\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'right')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"right\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Autosize This Column -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col, colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n\n <!-- Autosize All Columns -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n\n <!-- <div class=\"divder\"></div> -->\n\n <!-- Group by Column -->\n <!-- <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Group by {{ col.header || col.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n <!-- Choose Columns -->\n <!-- <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Choose Columns</span>\n\t </div>\n\t </div> -->\n\n <!-- Reset Columns -->\n <!-- <div class=\"right_click_item\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Reset Columns</span>\n\t </div>\n\t </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @for (row of rows; track row.trackKey) {\n @if (row.kind === \"node\") {\n <tr [class.disabled]=\"isDisabledRow(row)\">\n <!-- Checkbox column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px; max-width: 50px\">\n @if (checkboxSelectionType === \"multiple\") {\n @if (showCheckboxFor(row)) {\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [indeterminate]=\"isNodeIndeterminate(row.node)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n [name]=\"'row_' + row.trackKey\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label\n class=\"label\"\n [for]=\"'row_' + row.trackKey\"\n ></label>\n </span>\n }\n </td>\n }\n\n <!-- Data columns -->\n @for (\n col of columns;\n track col.fieldName;\n let colIndex = $index\n ) {\n @if (col.active !== false) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n @if (col.fieldName === treeColumn.fieldName) {\n @if (!col?.cellRenderer) {\n <div\n class=\"tree_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n @if (showToggleFor(row)) {\n <button\n class=\"toggle_btn\"\n type=\"button\"\n [disabled]=\"isDisabledRow(row)\"\n (click)=\"\n toggle(row.node, row.level, row.path)\n \"\n >\n <img\n [src]=\"resolveIconSrc(toggleIconFor(row))\"\n alt=\"\"\n />\n </button>\n } @else {\n <span class=\"toggle_spacer\"></span>\n }\n\n <!-- @if (showCheckboxFor(row)) {\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n ($any($event.target).checked)\n )\n \"\n />\n } -->\n\n @if (showNodeIconFor(row)) {\n @if (nodeIconFor(row); as icon) {\n <img\n class=\"node_icon\"\n [src]=\"resolveIconSrc(icon)\"\n alt=\"\"\n />\n }\n }\n\n @if (\n showLinkFor(row) && linkUrlFor(row);\n as url\n ) {\n <a\n class=\"node_link ellipsis\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n >\n {{ labelFor(row) || \"N/A\" }}\n </a>\n } @else {\n <span\n class=\"node_label\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ labelFor(row) || \"N/A\" }}</span\n >\n }\n </div>\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\n appRendererParser\n [style.padding-left.px]=\"row.level * indentPx\"\n ></div>\n }\n } @else {\n <div class=\"col_wrapper\">\n @if (!col?.cellRenderer) {\n <span\n class=\"ellipsis\"\n [appTooltip]=\"\n getValue(row.node, col.fieldName) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >\n {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span\n >\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n getValue(row.node, col.fieldName)\n \"\n appRendererParser\n ></div>\n }\n </div>\n }\n </td>\n }\n }\n </tr>\n } @else if (row.kind === \"loading\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ loadingText }}\n </div>\n </td>\n </tr>\n } @else if (row.kind === \"no-data\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ noDataText }}\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n </table>\n\n @if (!rows || rows.length === 0) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n <span>{{ noDataText }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Pagination -->\n @if (paginationRequired) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.table_wrapper.no-horizontal-scroll{overflow:hidden!important}.cats-tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper.global{margin:0}.cats-tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height:100%}.cats-tableArea .table_wrapper .table-inner-wrapper table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper .table-inner-wrapper table td,.cats-tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);overflow:visible}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));vertical-align:middle;line-height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.cats-tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.cats-tableArea.is-resizing .table_wrapper table th,.cats-tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.cats-tableArea .th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale));position:relative}.cats-tableArea .th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap;flex:1;min-width:0;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .text-wrapper.sortable{-webkit-user-select:none;user-select:none}.cats-tableArea .th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.cats-tableArea .th-wraper .text-wrapper .move-icon:hover{opacity:1}.cats-tableArea .th-wraper .text-wrapper .ellipsis{flex:1;min-width:0}.cats-tableArea .th-wraper .text-wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary)}.cats-tableArea .th-wraper .text-wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .header-tree-toggle{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .header-tree-toggle:hover{background:var(--border-core-default)}.cats-tableArea .th-wraper .header-tree-toggle img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(11.5rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.cats-tableArea .th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-tableArea .th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.cats-tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .tree_cell .toggle_btn:hover{background:var(--border-core-default)}.cats-tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.cats-tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.cats-tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .tree_cell .node_link{color:var(--text-link-default);text-decoration:none;cursor:pointer;transition:color .2s ease}.cats-tableArea .tree_cell .node_link:hover{color:var(--text-link-hover);text-decoration:underline}.cats-tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.cats-tableArea .cats-checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.cats-tableArea .cats-radio-option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-radio-option input[type=radio]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-radio-option label{cursor:pointer}.cats-tableArea .meta_row td{background-color:var(--surface-background-default);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.cats-tableArea .meta_cell{color:var(--text-body-secondary);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center;justify-content:center;width:100vw}.cats-tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.cats-tableArea .empty_overlay .empty_content{text-align:center;color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.cats-tableArea .setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.cats-tableArea .setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.cats-tableArea .setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.cats-tableArea .setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.cats-tableArea .setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.cats-tableArea .setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.cats-tableArea .setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper{width:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.cats-tableArea .header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-strong)}.cats-tableArea .header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.cats-tableArea .header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.cats-tableArea .header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.cats-tableArea .header-dropdown-wrapper .right_click_item:hover,.cats-tableArea .header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.cats-tableArea .header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-tableArea .header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.cats-tableArea .header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-tableArea .second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.cats-tableArea .drag-over{background-color:#e3f2fd}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OutsideClickDirective, selector: "[appOutsideClick]", outputs: ["clickOutside"] }, { kind: "directive", type: AdaptivePositionDirective, selector: "[adaptivePosition]", inputs: ["adaptive", "trigger", "parentContainer", "matchWidth", "closeOnOutside", "isAction", "isColumnActionMenu"] }, { kind: "directive", type: RendererParserDirective, selector: "[appRendererParser]", inputs: ["rowParam", "col", "api", "currentValue"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "tooltipPosition", "tooltipDelay", "tooltipBgColor", "tooltipTextColor", "tooltipPadding", "tooltipFontSize", "tooltipBorderRadius", "tooltipMaxWidth", "followCursor", "tooltipParentContainer"] }, { kind: "component", type: CommonInputComponent, selector: "lib-common-input", inputs: ["options", "selectedValue", "placeholder", "elementType"], outputs: ["valueChange"] }, { kind: "component", type: CommonCalendarComponent, selector: "lib-common-calendar", inputs: ["dateConfig", "minDate", "maxDate", "preSelectedValue"], outputs: ["dateTimeSelected", "clearDateEvent"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
5558
5558
|
}
|
|
5559
5559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonTreeTableComponent, decorators: [{
|
|
5560
5560
|
type: Component,
|
|
@@ -5567,7 +5567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5567
5567
|
TooltipDirective,
|
|
5568
5568
|
CommonInputComponent,
|
|
5569
5569
|
CommonCalendarComponent,
|
|
5570
|
-
], template: "<div class=\"cats-tableArea\" #table [class.is-resizing]=\"isResizing\">\n <!-- Settings Panel for Column Selection -->\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.header | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Main Table Wrapper -->\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n [class.no-horizontal-scroll]=\"!rows || rows.length === 0\"\n #parent\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (columns.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n <!-- Checkbox header column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n <div class=\"th-wraper\">\n <div class=\"cats-checkbox_container\">\n <input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n [checked]=\"checkHeaderChecked()\"\n [indeterminate]=\"checkHeaderIndeterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n />\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n\n <!-- Column Headers -->\n @for (col of columns; track col.fieldName; let colIdx = $index) {\n @if (col.active !== false) {\n <th\n [ngStyle]=\"getStyle(col)\"\n [attr.data-col-idx]=\"colIdx\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === colIdx,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (mouseenter)=\"showMoveIcon[colIdx] = true\"\n (mouseleave)=\"showMoveIcon[colIdx] = false\"\n >\n <div class=\"th-wraper\">\n <!-- Sortable column header -->\n <div\n class=\"text-wrapper\"\n [ngClass]=\"{ sortable: col.sortable }\"\n (click)=\"onSortingRowData(colIdx, col)\"\n >\n @if (showMoveIcon[colIdx] && col.sortable) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing\"\n (dragstart)=\"onDragStart($event, colIdx)\"\n (dragend)=\"onDragEnd()\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col.header || col.fieldName\n }}</span>\n\n <!-- Sorting indicator -->\n @if (\n sortingRequired &&\n sortingColumnIndex === colIdx &&\n col.sortable\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[colIdx] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n alt=\"Ascending\"\n />\n } @else if (sortingType[colIdx] === \"dsc\") {\n <img\n src=\"images/t-arrow-down.svg\"\n alt=\"Descending\"\n />\n }\n </span>\n }\n </div>\n\n @if (showExpandAllControl(col)) {\n <button\n class=\"header-tree-toggle\"\n type=\"button\"\n [attr.aria-label]=\"\n allNodesExpanded()\n ? 'Collapse all nodes'\n : 'Expand all nodes'\n \"\n (click)=\"toggleAllNodes(); $event.stopPropagation()\"\n >\n <img\n [src]=\"\n resolveIconSrc(\n allNodesExpanded()\n ? collapseIcon\n : expandIcon\n )\n \"\n alt=\"\"\n />\n </button>\n }\n\n <!-- Filter and Menu -->\n <div class=\"filter-three-dot-wrapper\">\n <!-- Filter Icon -->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n alt=\"Filter active\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n alt=\"Filter\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (input)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters(col)\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n [preSelectedValue]=\"\n col.filters![0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n [preSelectedValue]=\"\n col.filters![1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n (Select All)\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues!.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n {{ opt }}\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter-btn\">\n <button\n class=\"filter-reset-btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n </span>\n </div>\n </div>\n\n @if (menuVisible[colIdx]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n <!-- Sort Ascending -->\n @if (\n sortingType[colIdx] === \"dsc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', colIdx)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n\n <!-- Sort Descending -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n\n <!-- Clear Sort -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n sortingType[colIdx] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" alt=\"\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n\n <div class=\"divder\"></div>\n\n <!-- Pin Column -->\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" alt=\"\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'none')\"\n >\n <div class=\"left_item\">\n @if (\n ((col.colId &&\n pinActionClicked[col.colId]) ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'left')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"left\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'right')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"right\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Autosize This Column -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col, colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n\n <!-- Autosize All Columns -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n\n <!-- <div class=\"divder\"></div> -->\n\n <!-- Group by Column -->\n <!-- <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Group by {{ col.header || col.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n <!-- Choose Columns -->\n <!-- <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Choose Columns</span>\n\t </div>\n\t </div> -->\n\n <!-- Reset Columns -->\n <!-- <div class=\"right_click_item\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Reset Columns</span>\n\t </div>\n\t </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @for (row of rows; track row.trackKey) {\n @if (row.kind === \"node\") {\n <tr [class.disabled]=\"isDisabledRow(row)\">\n <!-- Checkbox column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px; max-width: 50px\">\n @if (checkboxSelectionType === \"multiple\") {\n @if (showCheckboxFor(row)) {\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [indeterminate]=\"isNodeIndeterminate(row.node)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n [name]=\"'row_' + row.trackKey\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label\n class=\"label\"\n [for]=\"'row_' + row.trackKey\"\n ></label>\n </span>\n }\n </td>\n }\n\n <!-- Data columns -->\n @for (\n col of columns;\n track col.fieldName;\n let colIndex = $index\n ) {\n @if (col.active !== false) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n @if (col.fieldName === treeColumn.fieldName) {\n @if (!col?.cellRenderer) {\n <div\n class=\"tree_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n @if (showToggleFor(row)) {\n <button\n class=\"toggle_btn\"\n type=\"button\"\n [disabled]=\"isDisabledRow(row)\"\n (click)=\"\n toggle(row.node, row.level, row.path)\n \"\n >\n <img\n [src]=\"resolveIconSrc(toggleIconFor(row))\"\n alt=\"\"\n />\n </button>\n } @else {\n <span class=\"toggle_spacer\"></span>\n }\n\n <!-- @if (showCheckboxFor(row)) {\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n ($any($event.target).checked)\n )\n \"\n />\n } -->\n\n @if (showNodeIconFor(row)) {\n @if (nodeIconFor(row); as icon) {\n <img\n class=\"node_icon\"\n [src]=\"resolveIconSrc(icon)\"\n alt=\"\"\n />\n }\n }\n\n @if (\n showLinkFor(row) && linkUrlFor(row);\n as url\n ) {\n <a\n class=\"node_link ellipsis\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n >\n {{ labelFor(row) || \"N/A\" }}\n </a>\n } @else {\n <span\n class=\"node_label\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ labelFor(row) || \"N/A\" }}</span\n >\n }\n </div>\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\n appRendererParser\n [style.padding-left.px]=\"row.level * indentPx\"\n ></div>\n }\n } @else {\n <div class=\"col_wrapper\">\n @if (!col?.cellRenderer) {\n <span\n class=\"ellipsis\"\n [appTooltip]=\"\n getValue(row.node, col.fieldName) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >\n {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span\n >\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n getValue(row.node, col.fieldName)\n \"\n appRendererParser\n ></div>\n }\n </div>\n }\n </td>\n }\n }\n </tr>\n } @else if (row.kind === \"loading\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ loadingText }}\n </div>\n </td>\n </tr>\n } @else if (row.kind === \"no-data\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ noDataText }}\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n </table>\n\n @if (!rows || rows.length === 0) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n <span>{{ noDataText }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Pagination -->\n @if (paginationRequired) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.table_wrapper.no-horizontal-scroll{overflow:hidden!important}.cats-tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper.global{margin:0}.cats-tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height:100%}.cats-tableArea .table_wrapper .table-inner-wrapper table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper .table-inner-wrapper table td,.cats-tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);overflow:visible}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));vertical-align:middle;line-height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.cats-tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.cats-tableArea.is-resizing .table_wrapper table th,.cats-tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.cats-tableArea .th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale));position:relative}.cats-tableArea .th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap;flex:1;min-width:0;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .text-wrapper.sortable{-webkit-user-select:none;user-select:none}.cats-tableArea .th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.cats-tableArea .th-wraper .text-wrapper .move-icon:hover{opacity:1}.cats-tableArea .th-wraper .text-wrapper .ellipsis{flex:1;min-width:0}.cats-tableArea .th-wraper .text-wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary)}.cats-tableArea .th-wraper .text-wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .header-tree-toggle{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .header-tree-toggle:hover{background:var(--border-core-default)}.cats-tableArea .th-wraper .header-tree-toggle img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));width:calc(18.8333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(10.8333333333rem / var(--scale));overflow-y:auto}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn{display:flex;flex-direction:row;justify-content:end;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.cats-tableArea .th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-tableArea .th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.cats-tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .tree_cell .toggle_btn:hover{background:var(--border-core-default)}.cats-tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.cats-tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.cats-tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .tree_cell .node_link{color:var(--text-link-default);text-decoration:none;cursor:pointer;transition:color .2s ease}.cats-tableArea .tree_cell .node_link:hover{color:var(--text-link-hover);text-decoration:underline}.cats-tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.cats-tableArea .cats-checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.cats-tableArea .cats-radio-option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-radio-option input[type=radio]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-radio-option label{cursor:pointer}.cats-tableArea .meta_row td{background-color:var(--surface-background-default);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.cats-tableArea .meta_cell{color:var(--text-body-secondary);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center;justify-content:center;width:100vw}.cats-tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.cats-tableArea .empty_overlay .empty_content{text-align:center;color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.cats-tableArea .setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.cats-tableArea .setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.cats-tableArea .setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.cats-tableArea .setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.cats-tableArea .setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.cats-tableArea .setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.cats-tableArea .setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper{width:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.cats-tableArea .header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-strong)}.cats-tableArea .header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.cats-tableArea .header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.cats-tableArea .header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.cats-tableArea .header-dropdown-wrapper .right_click_item:hover,.cats-tableArea .header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.cats-tableArea .header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-tableArea .header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.cats-tableArea .header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-tableArea .second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.cats-tableArea .drag-over{background-color:#e3f2fd}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-heading-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"] }]
|
|
5570
|
+
], template: "<div class=\"cats-tableArea\" #table [class.is-resizing]=\"isResizing\">\n <!-- Settings Panel for Column Selection -->\n @if (settingsRequired && settingsClicked) {\n <div\n class=\"setting-options\"\n appOutsideClick\n (clickOutside)=\"hideSettings()\"\n >\n <div class=\"header-section\">\n <div class=\"column-header\">CONFIGURE Column</div>\n <div class=\"reset-default\" (click)=\"resetDefaultColConfig()\">\n Reset to default\n </div>\n </div>\n\n <div class=\"header-search-wrapper\">\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n placeholder=\"Type to Search\"\n (input)=\"onColConfigSearch($event)\"\n />\n </div>\n </div>\n <div class=\"border-divider\"></div>\n\n <!-- <div class=\"add-more\">\n <div class=\"add-more-text\">Add more</div>\n <img src=\"images/add-more-right-blue.svg\" alt=\"\" />\n </div>\n <div class=\"border-divider\"></div> -->\n <div id=\"table_scroll\" class=\"setting-item-container\">\n <div class=\"setting-item-wrapper\">\n @if (noCategoryCols.length > 0) {\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllDefaultSelection()\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveDefault) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>Default</span>\n </div>\n }\n @for (col of noCategoryCols; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"col.active\"\n (change)=\"changeActiveColSelection($event, col)\"\n [disabled]=\"col.headerLocked\"\n /> -->\n <span>{{ col.header | titlecase }}</span>\n </div>\n }\n </div>\n @for (category of objectKeys(categorizedCols); track category) {\n <div class=\"setting-item-wrapper\">\n <div\n class=\"setting-column-item item-title\"\n (click)=\"showAllCategorySelection(category)\"\n >\n <!-- <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"activeAll\"\n (change)=\"activeAllSelection($event)\"\n /> -->\n @if (allActiveColMap[category]) {\n <img\n class=\"eye-icon\"\n src=\"images/eye-custom-header.svg\"\n alt=\"\"\n />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n alt=\"\"\n />\n }\n <span>{{ category | titlecase }}</span>\n </div>\n <!-- Category Title -->\n\n <!-- <div class=\"setting-column-item item-title\">\n <span>{{ category | titlecase }}</span>\n </div> -->\n\n <!-- Columns inside category -->\n @for (col of categorizedCols[category]; track col.colId) {\n <div\n class=\"setting-column-item\"\n (click)=\"toggleSelectedCol(col)\"\n [ngClass]=\"{ disable: col.headerLocked }\"\n >\n @if (col.active) {\n <img class=\"eye-icon\" src=\"images/eye-custom-header.svg\" />\n } @else {\n <img\n class=\"eye-icon\"\n src=\"images/eye-off-custom-header.svg\"\n />\n }\n\n <span>{{ col.headerName | titlecase }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Main Table Wrapper -->\n <div\n class=\"table_wrapper global\"\n id=\"table_scroll\"\n [class.no-horizontal-scroll]=\"!rows || rows.length === 0\"\n #parent\n >\n <div class=\"table-inner-wrapper\">\n <table cellspacing=\"0\" cellpadding=\"0\">\n <thead class=\"sticky-top\">\n @if (columns.length === 0 && showSkeleton) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <th>\n <div class=\"th-wraper\">\n <div class=\"line\"></div>\n </div>\n </th>\n }\n </tr>\n } @else {\n <tr>\n <!-- Checkbox header column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <th style=\"min-width: 50px; width: 50px; max-width: 50px\">\n <div class=\"th-wraper\">\n <div class=\"cats-checkbox_container\">\n <input\n class=\"pointer custom_check_box\"\n type=\"checkbox\"\n [checked]=\"checkHeaderChecked()\"\n [indeterminate]=\"checkHeaderIndeterminate()\"\n (change)=\"onHeaderCheckboxChange($event)\"\n />\n </div>\n <div class=\"filter-three-dot-wrapper\">\n <span class=\"resize-handle default_cursor\"> | </span>\n </div>\n </div>\n </th>\n }\n\n <!-- Column Headers -->\n @for (col of columns; track col.fieldName; let colIdx = $index) {\n @if (col.active !== false) {\n <th\n [ngStyle]=\"getStyle(col)\"\n [attr.data-col-idx]=\"colIdx\"\n [ngClass]=\"{\n 'drag-over': dragOverIndex === colIdx,\n pinned_column: col.leftPinned || col.rightPinned,\n }\"\n (mouseenter)=\"showMoveIcon[colIdx] = true\"\n (mouseleave)=\"showMoveIcon[colIdx] = false\"\n >\n <div class=\"th-wraper\">\n <!-- Sortable column header -->\n <div\n class=\"text-wrapper\"\n [ngClass]=\"{ sortable: col.sortable }\"\n (click)=\"onSortingRowData(colIdx, col)\"\n >\n @if (showMoveIcon[colIdx] && col.sortable) {\n <img\n src=\"images/t-move.svg\"\n class=\"move-icon\"\n [draggable]=\"!isResizing\"\n (dragstart)=\"onDragStart($event, colIdx)\"\n (dragend)=\"onDragEnd()\"\n />\n }\n <span class=\"ellipsis headerName\">{{\n col.header || col.fieldName\n }}</span>\n\n <!-- Sorting indicator -->\n @if (\n sortingRequired &&\n sortingColumnIndex === colIdx &&\n col.sortable\n ) {\n <span class=\"sorting_icon\">\n @if (sortingType[colIdx] === \"asc\") {\n <img\n src=\"images/t-arrow-up.svg\"\n alt=\"Ascending\"\n />\n } @else if (sortingType[colIdx] === \"dsc\") {\n <img\n src=\"images/t-arrow-down.svg\"\n alt=\"Descending\"\n />\n }\n </span>\n }\n </div>\n\n @if (showExpandAllControl(col)) {\n <button\n class=\"header-tree-toggle\"\n type=\"button\"\n [attr.aria-label]=\"\n allNodesExpanded()\n ? 'Collapse all nodes'\n : 'Expand all nodes'\n \"\n (click)=\"toggleAllNodes(); $event.stopPropagation()\"\n >\n <img\n [src]=\"\n resolveIconSrc(\n allNodesExpanded() ? collapseIcon : expandIcon\n )\n \"\n alt=\"\"\n />\n </button>\n }\n\n <!-- Filter and Menu -->\n <div class=\"filter-three-dot-wrapper\">\n <!-- Filter Icon -->\n @if (filterRequired && col.filterable) {\n <div\n #trigger\n class=\"filters\"\n (click)=\"toggleFilter(col, colIdx, $event)\"\n >\n @if (activeFilters.has(col.fieldName)) {\n <img\n src=\"images/t-filter-applied.svg\"\n alt=\"Filter active\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n } @else {\n <img\n src=\"images/t-filter.svg\"\n alt=\"Filter\"\n class=\"filter-icon\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n }\n\n <!-- Filter Dropdown -->\n @if (activeFilterIndex === $index) {\n <div class=\"filt-wrap\">\n <div\n adaptivePosition\n [trigger]=\"trigger\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n class=\"filter_wrapper\"\n id=\"filter_wrapper-{{ $index }}\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <!-- Text Filter -->\n @if (col.filterType === \"text\") {\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"filterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n }\n }\n\n <!-- Number Filter -->\n @if (col.filterType === \"number\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"number\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (input)=\"applyAllFilters(col)\"\n /> -->\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"number\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![0].filterValue\n \"\n (input)=\"applyAllFilters(col)\"\n />\n </div>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Filter\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n (keyup)=\"applyAllFilters(col)\"\n />\n </div>\n <!-- <input\n type=\"text\"\n [(ngModel)]=\"col.filters[1].filterValue\"\n placeholder=\"Filter\u2026\"\n (keyup)=\"applyAllFilters(col)\"\n /> -->\n }\n }\n\n <!-- DATE FILTER -->\n @if (col.filterType === \"date\") {\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![0].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![0].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <!-- <input\n type=\"date\"\n [(ngModel)]=\"col.filters[0].filterValue\"\n (change)=\"applyAllFilters(col)\"\n /> -->\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"col.filters![0].filterValue\"\n [preSelectedValue]=\"\n col.filters![0].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n\n @if (col.filters![0].filterValue) {\n <div class=\"logic-row cats-radio-option\">\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"AND\"\n id=\"{{ $index }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index\"\n >AND</label\n >\n\n <input\n type=\"radio\"\n name=\"filterLogic{{ col.fieldName }}\"\n [(ngModel)]=\"col.filterLogic\"\n value=\"OR\"\n id=\"{{ $index + 1 }}\"\n (change)=\"applyAllFilters(col)\"\n />\n <label class=\"label\" [for]=\"$index + 1\"\n >OR</label\n >\n </div>\n\n <lib-common-input\n [options]=\"numberFilterOptions\"\n [selectedValue]=\"\n col.filters![1].filterOperation\n \"\n placeholder=\"Select filter\"\n (valueChange)=\"\n col.filters![1].filterOperation =\n $event;\n applyAllFilters(col)\n \"\n ></lib-common-input>\n\n <lib-common-calendar\n [dateConfig]=\"dateConfig\"\n [(ngModel)]=\"\n col.filters![1].filterValue\n \"\n [preSelectedValue]=\"\n col.filters![1].filterValue\n \"\n (dateTimeSelected)=\"\n dateTimeSelected($event)\n \"\n ></lib-common-calendar>\n }\n }\n\n <!-- SET FILTER (CHECKBOX LIST) -->\n @if (col.filterType === \"set\") {\n <!-- <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n /> -->\n <div class=\"search_input\">\n <img src=\"images/search.svg\" alt=\"\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterSetOptions(col, $event)\"\n />\n </div>\n\n <div class=\"set-option-details\">\n <label class=\"cats-checkbox_container\">\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"isAllSelected(col)\"\n (change)=\"\n toggleSelectAll(col, $event)\n \"\n />\n Select All\n </label>\n <div\n class=\"set-options\"\n id=\"table_scroll\"\n >\n @for (\n opt of col.filteredOptions;\n track $index\n ) {\n <label\n class=\"cats-checkbox_container\"\n >\n <input\n class=\"custom_check_box\"\n type=\"checkbox\"\n [checked]=\"\n col.selectedValues!.has(opt)\n \"\n (change)=\"\n toggleSetOption(\n col,\n opt,\n $event\n )\n \"\n />\n <span class=\"textTruncate\">\n {{ opt }}</span\n >\n </label>\n }\n </div>\n </div>\n }\n <div class=\"filter-btn\">\n <button\n class=\"filter-reset-btn\"\n type=\"button\"\n (click)=\"resetFilter(col)\"\n >\n Reset\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Three dots menu-->\n <div #triggerColMenu>\n @if (threeDotsMenuRequired) {\n <div\n class=\"three-dots\"\n (click)=\"openMenu($event, col, colIdx)\"\n >\n <img\n src=\"images/t-more-vertical.svg\"\n alt=\"Menu\"\n [draggable]=\"false\"\n (dragstart)=\"\n $event.preventDefault();\n $event.stopPropagation()\n \"\n />\n </div>\n }\n </div>\n\n <!-- Column Resize Handle -->\n <span\n class=\"resize-handle\"\n (mousedown)=\"startResize($event, colIdx)\"\n >\n |\n </span>\n </div>\n </div>\n\n @if (menuVisible[colIdx]) {\n <div\n #colActionMenu\n class=\"header-dropdown-wrapper\"\n adaptivePosition\n [trigger]=\"triggerColMenu\"\n [parentContainer]=\"parent\"\n [matchWidth]=\"false\"\n [isColumnActionMenu]=\"true\"\n (click)=\"$event.stopPropagation()\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n <div class=\"right-click-dropdown\" id=\"table_scroll\">\n <!-- Sort Ascending -->\n @if (\n sortingType[colIdx] === \"dsc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'asc', colIdx)\"\n >\n <div class=\"left_item\">\n <img\n src=\"images/arrow-up.svg\"\n class=\"sorting_up\"\n [ngClass]=\"{ disable: !col.sortable }\"\n />\n <span class=\"text\">Sort Ascending</span>\n </div>\n </div>\n }\n\n <!-- Sort Descending -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n !sortingType[colIdx]\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, 'dsc', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/arrow-down.svg\" alt=\"\" />\n <span class=\"text\">Sort Descending</span>\n </div>\n </div>\n }\n\n <!-- Clear Sort -->\n @if (\n sortingType[colIdx] === \"asc\" ||\n sortingType[colIdx] === \"dsc\"\n ) {\n <div\n class=\"right_click_item\"\n (click)=\"onSort(col, '', colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"images/trash-2.svg\" alt=\"\" />\n <span class=\"text\">Clear Sort</span>\n </div>\n </div>\n }\n\n <div class=\"divder\"></div>\n\n <!-- Pin Column -->\n <div\n class=\"right_click_item\"\n (mouseenter)=\"showPinActions($event)\"\n (mouseleave)=\"hidePinActions()\"\n >\n <div class=\"left_item\">\n <img src=\"images/pin.svg\" alt=\"\" />\n <span class=\"text\">Pin Column</span>\n </div>\n <div class=\"right_item\">\n <img src=\"images/chevron-right.svg\" alt=\"\" />\n @if (showPin) {\n <div class=\"second-dropdown\" #pinMenu>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'none')\"\n >\n <div class=\"left_item\">\n @if (\n ((col.colId &&\n pinActionClicked[col.colId]) ??\n \"none\") === \"none\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">No Pin</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'left')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"left\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Left</span>\n </div>\n </div>\n <div\n class=\"right_click_item\"\n (click)=\"pinColumn(col, colIdx, 'right')\"\n >\n <div class=\"left_item\">\n @if (\n pinActionClicked[\n col.colId || col.fieldName\n ] === \"right\"\n ) {\n <img src=\"images/check.svg\" alt=\"\" />\n } @else {\n <img src=\"\" alt=\"\" />\n }\n <span class=\"text\">Pin Right</span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Autosize This Column -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeColumn(col, colIdx)\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize This Column</span>\n </div>\n </div>\n\n <!-- Autosize All Columns -->\n <div\n class=\"right_click_item\"\n (click)=\"autosizeAllColumns()\"\n >\n <div class=\"left_item\">\n <img src=\"\" alt=\"\" />\n <span class=\"text\">Autosize All Columns</span>\n </div>\n </div>\n\n <!-- <div class=\"divder\"></div> -->\n\n <!-- Group by Column -->\n <!-- <div class=\"right_click_item\" (click)=\"groupByColumn(col, colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Group by {{ col.header || col.fieldName }}</span>\n\t </div>\n\t </div> -->\n\n <!-- Choose Columns -->\n <!-- <div class=\"right_click_item\" (click)=\"showColumnChooser(colIdx)\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Choose Columns</span>\n\t </div>\n\t </div> -->\n\n <!-- Reset Columns -->\n <!-- <div class=\"right_click_item\">\n\t <div class=\"left_item\">\n\t <img src=\"\" alt=\"\" />\n\t <span class=\"text\">Reset Columns</span>\n\t </div>\n\t </div> -->\n </div>\n </div>\n }\n </th>\n }\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @if (showSkeleton) {\n @for (r of skeletonRows; track $index) {\n <tr>\n @for (c of skeletonCols; track $index) {\n <td>\n <div class=\"line\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @for (row of rows; track row.trackKey) {\n @if (row.kind === \"node\") {\n <tr [class.disabled]=\"isDisabledRow(row)\">\n <!-- Checkbox column -->\n @if (checkBoxSelection && atLeastOneColumnChecked) {\n <td style=\"min-width: 50px; max-width: 50px\">\n @if (checkboxSelectionType === \"multiple\") {\n @if (showCheckboxFor(row)) {\n <span class=\"cats-checkbox_container\">\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [indeterminate]=\"isNodeIndeterminate(row.node)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label [for]=\"'row_' + row.trackKey\"></label>\n </span>\n }\n } @else {\n <span class=\"cats-radio-option\">\n <input\n type=\"radio\"\n [name]=\"'row_' + row.trackKey\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n $any($event.target).checked\n )\n \"\n />\n <label\n class=\"label\"\n [for]=\"'row_' + row.trackKey\"\n ></label>\n </span>\n }\n </td>\n }\n\n <!-- Data columns -->\n @for (\n col of columns;\n track col.fieldName;\n let colIndex = $index\n ) {\n @if (col.active !== false) {\n <td\n [ngStyle]=\"getStyle(col)\"\n [ngClass]=\"[\n col.leftPinned || col.rightPinned\n ? 'pinned_column'\n : '',\n ]\"\n class=\"table_cell\"\n >\n @if (col.fieldName === treeColumn.fieldName) {\n @if (!col?.cellRenderer) {\n <div\n class=\"tree_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n @if (showToggleFor(row)) {\n <button\n class=\"toggle_btn\"\n type=\"button\"\n [disabled]=\"isDisabledRow(row)\"\n (click)=\"\n toggle(row.node, row.level, row.path)\n \"\n >\n <img\n [src]=\"resolveIconSrc(toggleIconFor(row))\"\n alt=\"\"\n />\n </button>\n } @else {\n <span class=\"toggle_spacer\"></span>\n }\n\n <!-- @if (showCheckboxFor(row)) {\n <input\n type=\"checkbox\"\n [disabled]=\"isDisabledRow(row)\"\n [checked]=\"isChecked(row.node)\"\n (change)=\"\n onCheckboxChange(\n row.node,\n row.level,\n row.path,\n ($any($event.target).checked)\n )\n \"\n />\n } -->\n\n @if (showNodeIconFor(row)) {\n @if (nodeIconFor(row); as icon) {\n <img\n class=\"node_icon\"\n [src]=\"resolveIconSrc(icon)\"\n alt=\"\"\n />\n }\n }\n\n @if (\n showLinkFor(row) && linkUrlFor(row);\n as url\n ) {\n <a\n class=\"node_link ellipsis\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n (click)=\"\n onLinkClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n (dblclick)=\"\n onLinkDoubleClicked(\n $event,\n row.node,\n row.level,\n row.path,\n col\n )\n \"\n >\n {{ labelFor(row) || \"N/A\" }}\n </a>\n } @else {\n <span\n class=\"node_label\"\n [appTooltip]=\"labelFor(row) || 'N/A'\"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >{{ labelFor(row) || \"N/A\" }}</span\n >\n }\n </div>\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"getValue(row.node, col.fieldName)\"\n appRendererParser\n [style.padding-left.px]=\"row.level * indentPx\"\n ></div>\n }\n } @else {\n <div class=\"col_wrapper\">\n @if (!col?.cellRenderer) {\n <span\n class=\"ellipsis\"\n [appTooltip]=\"\n getValue(row.node, col.fieldName) || 'N/A'\n \"\n tooltipPosition=\"adaptive\"\n [tooltipParentContainer]=\"parent\"\n >\n {{\n getValue(row.node, col.fieldName) || \"N/A\"\n }}</span\n >\n } @else {\n <div\n [rowParam]=\"row.node\"\n [col]=\"col\"\n [api]=\"tableOptions\"\n [currentValue]=\"\n getValue(row.node, col.fieldName)\n \"\n appRendererParser\n ></div>\n }\n </div>\n }\n </td>\n }\n }\n </tr>\n } @else if (row.kind === \"loading\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ loadingText }}\n </div>\n </td>\n </tr>\n } @else if (row.kind === \"no-data\") {\n <tr class=\"meta_row\">\n <td\n [attr.colspan]=\"\n columns.length + (checkBoxSelection ? 1 : 0)\n \"\n >\n <div\n class=\"meta_cell\"\n [style.padding-left.px]=\"row.level * indentPx\"\n >\n {{ noDataText }}\n </div>\n </td>\n </tr>\n }\n }\n }\n </tbody>\n </table>\n\n @if (!rows || rows.length === 0) {\n <div class=\"empty_overlay\">\n <div class=\"empty_content\">\n <span>{{ noDataText }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Pagination -->\n @if (paginationRequired) {\n <div class=\"pagination-main\">\n <div class=\"entries-details\">\n <span>Showing</span>\n <div class=\"pagination-select\">\n <div\n class=\"select-dropdown pointer\"\n (click)=\"showPageSizeList = !showPageSizeList\"\n >\n <p class=\"select_text mb-0\">{{ pageDetails.pageSize }}</p>\n <span class=\"chevron-img\">\n <img src=\"images/chevron-down.svg\" class=\"pointer\" />\n </span>\n </div>\n @if (showPageSizeList) {\n <div\n class=\"select-option\"\n appOutsideClick\n (clickOutside)=\"onClickOutside()\"\n >\n @for (option of pageSizeList; track $index) {\n <span\n class=\"pointer\"\n (click)=\"onPageSizeChanged(option); onClickOutside()\"\n >{{ option }}</span\n >\n }\n </div>\n }\n </div>\n <span\n >Rows |\n {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -\n {{\n recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max\n }}\n of\n {{ totalRecords }} Entries</span\n >\n </div>\n <div class=\"pagination-form\">\n <button\n class=\"outlined_btn first_btn\"\n type=\"button\"\n (click)=\"onBtFirstClick()\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n >\n <span> <img src=\"images/chevrons-left.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn prev_btn\"\n [ngClass]=\"pageDetails.currentPage > 1 ? '' : 'disable_btn'\"\n type=\"button\"\n (click)=\"onBtPrevClick()\"\n >\n <span> <img src=\"images/chevron-left.svg\" alt=\"\" /> </span>\n </button>\n <div>\n <input\n class=\"input-style\"\n type=\"number\"\n [(ngModel)]=\"pageDetails.currentPage\"\n (change)=\"goToSelectedPage($event)\"\n name=\"\"\n id=\"\"\n />\n </div>\n <button\n class=\"outlined_btn next_btn\"\n type=\"button\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n (click)=\"onBtNextClick()\"\n >\n <span> <img src=\"images/chevron-right.svg\" alt=\"\" /> </span>\n </button>\n <button\n class=\"outlined_btn last_btn\"\n type=\"button\"\n (click)=\"onBtLastClick()\"\n [ngClass]=\"\n pageDetails.currentPage < pageDetails.totalPages\n ? ''\n : 'disable_btn'\n \"\n >\n <span> <img src=\"images/chevrons-right.svg\" alt=\"\" /> </span>\n </button>\n </div>\n </div>\n }\n <!-- Pagination Ends -->\n</div>\n", styles: [":root{--green-100: #ecf4ec;--green-200: #e1eee2;--red-100: #faeaea;--red-300: #f0c9c9;--yellow-100: #fff9e7;--box-shadow: #0a0d1214;--text-heading-primary: #040d17;--text-heading-secondary: #434a51;--text-heading-inverse: #ffffff;--text-body-primary: #434a51;--text-body-secondary: #81858a;--text-body-muted: #c0c2c5;--text-body-inversed: #ffffff;--text-link-default: #2680ea;--text-link-hover: #1c60af;--text-link-muted: #c8dff9;--text-link-inverse: #5ca0ef;--surface-background-canvas: #ffffff;--surface-background-default: #f0f0f0;--surface-background-subtle: #e6e7e8;--surface-background-blue: #f7fafe;--surface-contextual-green: #f7fbf7;--surface-contextual-red: #fdf7f7;--surface-contextual-yellow: #fffdf5;--surface-decorative-sage-green: #f3fcf9;--surface-decorative-amber-brown: #f9f1f1;--surface-decorative-teal: #eafafb;--surface-decorative-pink: #f9ebf5;--surface-decorative-orange: #fffbf5;--surface-decorative-purple: #f4f0fa;--surface-decorative-blue: #f7fafe;--surface-action-default: #2680ea;--surface-action-hover: #1c60af;--surface-action-muted: #e6e7e8;--border-core-default: #dadbdc;--border-core-muted: #e6e7e8;--border-core-strong: #c0c2c5;--border-core-inverted: #81858a;--border-interaction-default: #dfecfc;--border-interaction-focus: #2680ea;--border-semantics-red: #f7dfdf;--border-semantics-green: #cde2ce;--border-semantics-yellow: #ffefc1;--border-decorative-purple: #d9c9ed;--border-decorative-orange: #ffe5bf;--border-decorative-pink: #eec2e0;--border-decorative-teal: #b0edee;--border-decorative-amber-brown: #e5c1c5;--border-decorative-sage-green: #a8e9d2;--icons-main-primary: #040d17;--icons-main-secondary: #434a51;--icons-main-hover: #2680ea;--icons-main-muted: #c0c2c5;--icons-main-inverse: #ffffff;--semantics-success-subtle: #6aaa6d;--semantics-success-default: #388e3c;--semantics-success-strong: #2a6a2d;--semantics-error-subtle: #d45e5e;--semantics-error-default: #ff0000;--semantics-error-strong: #941e1e;--semantics-warning-subtle: #ffd145;--semantics-warning-default: #ffc107;--semantics-warning-strong: #bf9105;--accent-orange-subtle: #ffb240;--accent-orange-default: #ff9800;--accent-orange-strong: #bf7200;--accent-teal-subtle: #6adedf;--accent-teal-default: #2ac7c9;--accent-teal-strong: #23a4a6;--accent-purple-subtle: #976dcd;--accent-purple-default: #8656c5;--accent-purple-strong: #733fb7;--accent-amber-brown-subtle: #deafb4;--accent-amber-brown-default: #cf8a91;--accent-amber-brown-strong: #c77880;--accent-sage-green-subtle: #33c994;--accent-sage-green-default: #29a277;--accent-sage-green-dark: #1f7a5a;--accent-pink-subtle: #d772b9;--accent-pink-default: #d058ab;--accent-pink-dark: #c83d9e}html{font-size:12px}#table_scroll.filter-tag-wrapper::-webkit-scrollbar{width:calc(.8333333333rem / var(--scale));height:calc(.8333333333rem / var(--scale))}#table_scroll::-webkit-scrollbar-button{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale));background-color:var(--surface-background-subtle);border-radius:calc(.1666666667rem / var(--scale));cursor:pointer;display:none;background-repeat:no-repeat;background-position:center;background-size:calc(1.25rem / var(--scale))}#table_scroll::-webkit-scrollbar-button:hover{background-color:var(--text-body-muted)}#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url(/images/chevron-up.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url(/images/chevron-down.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url(/images/chevron-left.svg);display:block}#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url(/images/chevron-right.svg);display:block}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:calc(4.5833333333rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--surface-background-subtle) 72.5%,var(--surface-background-subtle) 100%);border-top-left-radius:0;border-top-right-radius:0}#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 70.5%,var(--border-core-default) 70.5%,var(--border-core-default) 72.5%,var(--text-body-muted) 72.5%,var(--text-body-muted) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement{height:calc(5.9166666667rem / var(--scale));background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,rgb(240,240,240) 0%,rgb(240,240,240) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--surface-background-subtle) 81.7%,var(--surface-background-subtle) 100%)}.cats-tableArea.large #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background:url(/images/chevron-up.svg) bottom/calc(1.25rem / var(--scale)) no-repeat,linear-gradient(to bottom,var(--surface-background-default) 0%,var(--surface-background-default) 78.8%,var(--border-core-default) 78.8%,var(--border-core-default) 81.7%,var(--text-body-muted) 81.7%,var(--text-body-muted) 100%)}.cats-radio-option{display:flex;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:not(:checked)[disabled]+.label:before{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label{color:var(--text-body-muted);cursor:default}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:before{border-color:var(--border-core-muted)}.cats-radio-option [type=radio]:is(:checked)[disabled]+.label:after{background-color:var(--surface-background-subtle)}.cats-radio-option [type=radio]:not(:checked)+.label:before,.cats-radio-option [type=radio]:checked+.label:before{content:\"\";position:absolute;top:0;left:0;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background:var(--surface-background-canvas)}.cats-radio-option [type=radio]:checked,.cats-radio-option [type=radio]:not(:checked){position:absolute;left:-9999px}.cats-radio-option [type=radio]:checked+.label,.cats-radio-option [type=radio]:not(:checked)+.label{position:relative;padding-left:calc(2rem / var(--scale));cursor:pointer;display:inline-block;color:var(--text-heading-primary);line-height:calc(1.3333333333rem / var(--scale))}.cats-radio-option [type=radio]:checked+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-interaction-focus);border-radius:100%}.cats-radio-option [type=radio]:not(:checked)+.label:before{border:calc(.125rem / var(--scale)) solid var(--border-core-default);border-radius:100%}.cats-radio-option [type=radio]:checked+.label:after,.cats-radio-option [type=radio]:not(:checked)+.label:after{content:\"\";width:calc(.5rem / var(--scale));height:calc(.5rem / var(--scale));background:var(--surface-action-default);position:absolute;top:calc(.4166666667rem / var(--scale));left:calc(.4166666667rem / var(--scale));border-radius:100%;transition:all .2s ease}.cats-radio-option [type=radio]:not(:checked)+.label:after{opacity:0;transform:scale(0)}.cats-radio-option [type=radio]:checked+.label:after{opacity:1;transform:scale(1)}.cats-checkbox_container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled],.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]{cursor:default;background-color:var(--text-body-muted);border-color:var(--border-core-strong)}.cats-checkbox_container input[type=checkbox].custom_check_box[disabled]+span,.cats-checkbox_container input[type=checkbox].custom_check_box:checked[disabled]+span{color:var(--text-body-muted)}.cats-checkbox_container input[type=checkbox].custom_check_box{appearance:none;-webkit-appearance:none;width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));min-width:calc(1.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;background-color:var(--surface-background-canvas);position:relative;transition:all .2s ease}.cats-checkbox_container input[type=checkbox].custom_check_box:after{content:\"\";display:none;position:absolute;top:calc(-.0833333333rem / var(--scale));left:calc(-.0833333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));background-size:auto;background-repeat:no-repeat;background-position:center}.cats-checkbox_container input[type=checkbox].custom_check_box:checked{border-color:var(--border-interaction-focus);background-color:var(--surface-action-default)}.cats-checkbox_container input[type=checkbox].custom_check_box:checked:after{display:block;background-image:url(/images/check-white.svg);background-size:calc(.6666666667rem / var(--scale)) calc(.5rem / var(--scale))}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate{border-color:var(--border-interaction-focus);background-color:var(--surface-background-canvas)}.cats-checkbox_container input[type=checkbox].custom_check_box:indeterminate:after{display:block;top:0;background-image:url(/images/minus-blue.svg);background-size:calc(.5833333333rem / var(--scale)) calc(.0833333333rem / var(--scale))}.text_filter_section{position:relative;width:100%}.text_filter_section .single_select_dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;background-color:var(--surface-background-canvas);color:var(--text-heading-primary);cursor:pointer}.text_filter_section .single_select_dropdown .left_details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:0;width:calc(100% - 1.6666666667rem / var(--scale));height:\"\"}.text_filter_section .single_select_dropdown .arrow_icon img{max-width:calc(1.6666666667rem / var(--scale))}.text_filter_section .dropdown_list{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));width:100%;max-height:calc(14.3333333333rem / var(--scale));overflow:auto;position:absolute;z-index:2;background:var(--surface-background-canvas);box-shadow:calc(0rem / var(--scale)) calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);top:calc(3.3333333333rem / var(--scale))}.text_filter_section .dropdown_list ul{list-style-type:none;padding:calc(.3333333333rem / var(--scale)) 0}.text_filter_section .dropdown_list ul:has(.no_data) li:hover{background-color:unset;cursor:default}.text_filter_section .dropdown_list ul li{height:calc(3.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));cursor:pointer;color:var(--text-heading-primary)}.text_filter_section .dropdown_list ul li:hover{background-color:var(--surface-background-default)}.text_filter_section .dropdown_list ul li.disabled_option{opacity:.3;pointer-events:none}.search_input{position:relative;width:100%;height:calc(3.3333333333rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));padding:calc(.8333333333rem / var(--scale)) calc(1rem / var(--scale));background-color:var(--surface-background-canvas);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.search_input img{width:calc(1.6666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale));opacity:.5}.search_input input{width:100%;height:100%;border:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.search_input input::placeholder{color:var(--text-heading-secondary)}.table_switch_wrapper{display:flex}.table_switch_wrapper .switch{position:relative;display:inline-block;width:calc(2.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.table_switch_wrapper .switch input{display:none}.table_switch_wrapper .switch .slider{position:absolute;cursor:pointer;background-color:var(--surface-background-subtle);border-radius:calc(1.3333333333rem / var(--scale));inset:0;transition:.3s}.table_switch_wrapper .switch .slider:before{content:\"\";position:absolute;width:calc(1rem / var(--scale));height:calc(1rem / var(--scale));left:calc(.1666666667rem / var(--scale));bottom:calc(.1666666667rem / var(--scale));background-color:var(--surface-background-canvas);border-radius:50%;transition:.3s;box-shadow:0 calc(.0666666667rem / var(--scale)) calc(.2rem / var(--scale)) 0 var(--box-shadow)}.table_switch_wrapper .switch input:checked+.slider{background-color:var(--surface-action-default)}.table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1rem / var(--scale)))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch{width:calc(3.1666666667rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch .slider:before{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea.large .table_wrapper table tbody tr :host .table_switch_wrapper .switch input:checked+.slider:before{transform:translate(calc(1.5rem / var(--scale)))}.cats-text-primary{color:var(--text-link-default)}.cats-text-danger{color:var(--semantics-error-default)}.ellipsis,.textTruncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-trigger{cursor:default}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-size:100%}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;text-wrap:pretty}ul[role=list],ol[role=list],ul{list-style:none}img,picture{max-width:100%;display:block}input,select,textarea{outline:none;box-shadow:none}:root{--fs-6: 6px;--fs-12: 12px;--fs-14: 14px;--fs-16: 16px;--fs-18: 18px;--fs-20: 20px;--fs-24: 24px;--fs-28: 28px;--fs-30: 30px;--fs-32: 32px;--fs-42: 42px;--fs-48: 48px;--img-w: 28px;--scale: 1}@media only screen and (min-width: 1024px) and (max-width: 1280px){:root{--scale: 1.5;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1360px) and (max-width: 1440px){:root{--scale: 1.33;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}@media only screen and (min-width: 1536px) and (max-width: 1919px){:root{--scale: 1.25;--fs-6: calc(6px / var(--scale));--fs-12: calc(12px / var(--scale));--fs-14: calc(14px / var(--scale));--fs-16: calc(16px / var(--scale));--fs-18: calc(18px / var(--scale));--fs-20: calc(20px / var(--scale));--fs-24: calc(24px / var(--scale));--fs-28: calc(28px / var(--scale));--fs-30: calc(30px / var(--scale));--fs-32: calc(32px / var(--scale));--fs-42: calc(42px / var(--scale));--fs-48: calc(48px / var(--scale))}}.pointer,.cursor-pointer{cursor:pointer}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.table_wrapper.no-horizontal-scroll{overflow:hidden!important}.cats-tableArea{width:100%;position:relative;display:flex;flex-direction:column;height:100%;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .table_wrapper{position:relative;overflow:auto;flex:1;min-height:calc(16.6666666667rem / var(--scale));background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper.global{margin:0}.cats-tableArea .table_wrapper .table-inner-wrapper{position:relative;width:100%;min-height:100%}.cats-tableArea .table_wrapper .table-inner-wrapper table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:calc(.3333333333rem / var(--scale));position:relative;z-index:1;background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table .sticky-top{top:0;position:sticky;z-index:20}.cats-tableArea .table_wrapper .table-inner-wrapper table td,.cats-tableArea .table_wrapper .table-inner-wrapper table th{font-size:var(--fs-14);line-height:1;font-weight:400;color:var(--text-heading-secondary);text-align:left;border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-right:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .table_wrapper .table-inner-wrapper table thead tr{height:calc(3.3333333333rem / var(--scale));background-color:var(--surface-background-default)}.cats-tableArea .table_wrapper .table-inner-wrapper table thead th{position:relative;padding:0 0 0 calc(.6666666667rem / var(--scale));background-color:var(--surface-background-default);overflow:visible}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody{background-color:var(--surface-background-canvas)}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr{overflow:visible;height:calc(3.3333333333rem / var(--scale));transition:background-color .12s ease-in-out}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover,.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr:hover td{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr.disabled{opacity:.6;pointer-events:none}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td{overflow:visible;position:relative;padding:calc(.3333333333rem / var(--scale)) calc(.6666666667rem / var(--scale));vertical-align:middle;line-height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .table_wrapper .table-inner-wrapper table tbody tr td:hover{background-color:var(--surface-background-blue)!important}.cats-tableArea .table_wrapper.tbody_height{height:calc(100% - 42px)}.cats-tableArea .table_wrapper.no-horizontal-scroll{overflow-x:hidden}.cats-tableArea.is-resizing .table_wrapper table th,.cats-tableArea.is-resizing .table_wrapper table td{will-change:width;transition:width 80ms linear,min-width 80ms linear,max-width 80ms linear}.cats-tableArea .th-wraper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(1.3333333333rem / var(--scale));position:relative}.cats-tableArea .th-wraper .text-wrapper{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));white-space:nowrap;flex:1;min-width:0;cursor:pointer;padding:0 calc(.3333333333rem / var(--scale));border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .text-wrapper.sortable{-webkit-user-select:none;user-select:none}.cats-tableArea .th-wraper .text-wrapper img{min-width:calc(1.3333333333rem / var(--scale));width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .move-icon{margin-right:calc(.3333333333rem / var(--scale));cursor:grab;opacity:.6;transition:opacity .2s ease}.cats-tableArea .th-wraper .text-wrapper .move-icon:hover{opacity:1}.cats-tableArea .th-wraper .text-wrapper .ellipsis{flex:1;min-width:0}.cats-tableArea .th-wraper .text-wrapper .headerName{text-transform:uppercase;font-size:var(--fs-14);line-height:140%;font-weight:600;color:var(--text-heading-secondary)}.cats-tableArea .th-wraper .text-wrapper .sorting_icon{display:inline-flex;align-items:center;margin-left:calc(.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .text-wrapper .sorting_icon img{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .header-tree-toggle{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .th-wraper .header-tree-toggle:hover{background:var(--border-core-default)}.cats-tableArea .th-wraper .header-tree-toggle img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper img{min-width:calc(1.5rem / var(--scale));width:calc(1.5rem / var(--scale));height:calc(1.5rem / var(--scale));cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters{position:relative;display:inline-block;cursor:pointer}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters:hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper{border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));position:absolute;top:calc(1.3333333333rem / var(--scale));right:calc(-4rem / var(--scale));min-width:calc(18.8333333333rem / var(--scale));max-width:calc(33.3333333333rem / var(--scale));background:var(--surface-background-default);padding:calc(1rem / var(--scale));box-shadow:0 0 calc(1.6666666667rem / var(--scale)) 0 #00000029;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:start;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper lib-common-input{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .logic-row{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(3.3333333333rem / var(--scale));height:calc(1.6666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details{width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .set-option-details .set-options{display:flex;flex-direction:column;justify-content:\"\";align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));margin-top:calc(.6666666667rem / var(--scale));padding-top:calc(.6666666667rem / var(--scale));width:100%;max-height:calc(11.5rem / var(--scale));overflow-y:auto;border-top:calc(.0833333333rem / var(--scale)) solid var(--border-core-default)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn{display:flex;flex-direction:row;justify-content:space-between;align-items:\"\";flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));width:100%}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn{width:calc(5.5rem / var(--scale));height:calc(2.6666666667rem / var(--scale));min-width:auto;font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:600;color:var(--text-heading-secondary);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));cursor:pointer;font-family:inherit;transition:all .2s ease;-webkit-user-select:none;user-select:none;background-color:var(--surface-background-canvas);padding:calc(.3333333333rem / var(--scale)) calc(1.0833333333rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filters .filter_wrapper .filter-btn .filter-reset-btn:hover{background:var(--surface-action-default);border-color:var(--border-interaction-focus);color:var(--text-heading-inverse)}.cats-tableArea .th-wraper .filter-three-dot-wrapper .filt-wrap{position:absolute;top:calc(1.6666666667rem / var(--scale));left:0}.cats-tableArea .th-wraper .filter-three-dot-wrapper .three-dots :hover{background:var(--border-core-default);border-radius:calc(.1666666667rem / var(--scale))}.cats-tableArea .th-wraper .filter-three-dot-wrapper .resize-handle{color:var(--border-core-default);cursor:w-resize;white-space:nowrap;overflow:hidden;font-size:var(--fs-24);line-height:calc(1.3333333333rem / var(--scale));font-weight:400}.cats-tableArea .th-wraper .filter-three-dot-wrapper .default_cursor{cursor:default}.cats-tableArea .tree_cell{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_btn{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));min-width:calc(1.8333333333rem / var(--scale));display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;border-radius:calc(.1666666667rem / var(--scale));transition:background-color .2s ease}.cats-tableArea .tree_cell .toggle_btn:hover{background:var(--border-core-default)}.cats-tableArea .tree_cell .toggle_btn img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale))}.cats-tableArea .tree_cell .toggle_spacer{width:calc(1.8333333333rem / var(--scale));height:calc(1.8333333333rem / var(--scale));display:inline-block;flex-shrink:0}.cats-tableArea .tree_cell .node_icon{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));flex-shrink:0}.cats-tableArea .tree_cell .node_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cats-tableArea .tree_cell .node_link{color:var(--text-link-default);text-decoration:none;cursor:pointer;transition:color .2s ease}.cats-tableArea .tree_cell .node_link:hover{color:var(--text-link-hover);text-decoration:underline}.cats-tableArea .tree_cell input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .col_wrapper{display:flex;align-items:center;gap:calc(.8333333333rem / var(--scale))}.cats-tableArea .cats-checkbox_container{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-checkbox_container input[type=checkbox]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-checkbox_container span{cursor:pointer;-webkit-user-select:none;user-select:none}.cats-tableArea .cats-radio-option{display:flex;align-items:center;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .cats-radio-option input[type=radio]{cursor:pointer;accent-color:var(--border-interaction-focus)}.cats-tableArea .cats-radio-option label{cursor:pointer}.cats-tableArea .meta_row td{background-color:var(--surface-background-default);padding:calc(.5rem / var(--scale)) calc(1rem / var(--scale))}.cats-tableArea .meta_cell{color:var(--text-body-secondary);font-size:calc(1rem / var(--scale));line-height:calc(1.3333333333rem / var(--scale));font-weight:500;min-height:calc(1.8333333333rem / var(--scale));display:flex;align-items:center;justify-content:center;width:100vw}.cats-tableArea .empty_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6}.cats-tableArea .empty_overlay .empty_content{text-align:center;color:var(--text-body-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500}.cats-tableArea .setting-options{position:absolute;background:var(--surface-background-canvas);z-index:10;right:0;top:calc(3.4166666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);width:calc(30.9166666667rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-muted);border-radius:calc(.6666666667rem / var(--scale));padding:calc(.6666666667rem / var(--scale)) 0}.cats-tableArea .setting-options .header-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));min-height:calc(3.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;padding:0 calc(1.3333333333rem / var(--scale))}.cats-tableArea .setting-options .header-section .column-header{text-transform:uppercase;color:var(--text-body-secondary)}.cats-tableArea .setting-options .header-section .reset-default{color:var(--text-link-default);min-width:calc(9.1666666667rem / var(--scale));cursor:pointer;text-align:right}.cats-tableArea .setting-options .header-search-wrapper{padding:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale)) calc(1.3333333333rem / var(--scale));border-radius:calc(.3333333333rem / var(--scale));background-color:var(--surface-background-blue);margin:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .add-more .add-more-text{font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-link-default)}.cats-tableArea .setting-options .border-divider{height:calc(.0833333333rem / var(--scale));margin:calc(.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));background-color:var(--border-core-default)}.cats-tableArea .setting-options .setting-item-container{max-height:calc(25rem / var(--scale));overflow:auto;display:flex;flex-direction:column;justify-content:start;align-items:start;flex-wrap:nowrap;gap:0;padding:0 calc(1.3333333333rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:400}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper{width:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper:not(:last-child){border-bottom:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);padding-bottom:calc(.3333333333rem / var(--scale));margin-bottom:calc(.3333333333rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item{color:var(--text-heading-primary);padding:calc(.5rem / var(--scale)) 0;cursor:pointer;width:100%;display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item .eye-icon{width:calc(1.3333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));height:100%}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.item-title{color:var(--text-body-secondary)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable{color:var(--text-body-muted)}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.disable .eye-icon{opacity:.2}.cats-tableArea .setting-options .setting-item-container .setting-item-wrapper .setting-column-item.eye-off{color:var(--text-body-primary)}.cats-tableArea .header-dropdown-wrapper{background-color:var(--surface-background-canvas);box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:1000;position:relative;width:calc(26.6666666667rem / var(--scale));right:calc(.8333333333rem / var(--scale));top:calc(3.9166666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .divder{margin:calc(.6666666667rem / var(--scale)) calc(1.3333333333rem / var(--scale));width:calc(100% - 2.6666666667rem / var(--scale));height:calc(.0833333333rem / var(--scale));background:var(--border-core-strong)}.cats-tableArea .header-dropdown-wrapper .right-click-dropdown{margin:calc(.3333333333rem / var(--scale)) 0}.cats-tableArea .header-dropdown-wrapper .right_click_item{min-height:calc(3.3333333333rem / var(--scale));width:100%;padding:calc(.8333333333rem / var(--scale)) calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;cursor:pointer;position:relative}.cats-tableArea .header-dropdown-wrapper .right_click_item.disabled_option{opacity:.4;pointer-events:none}.cats-tableArea .header-dropdown-wrapper .right_click_item:hover,.cats-tableArea .header-dropdown-wrapper .right_click_item.active{background-color:var(--surface-background-blue)}.cats-tableArea .header-dropdown-wrapper .right_click_item .left_item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:calc(.6666666667rem / var(--scale))}.cats-tableArea .header-dropdown-wrapper .right_click_item .text{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:400;color:var(--text-heading-primary)}.cats-tableArea .header-dropdown-wrapper .right_click_item .right_item{font-size:calc(1.1666666667rem / var(--scale));line-height:calc(1.6666666667rem / var(--scale));font-weight:500;color:var(--text-heading-secondary)}.cats-tableArea .header-dropdown-wrapper .right_click_item img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));opacity:.7}.cats-tableArea .second-dropdown{position:absolute;right:calc(-20.25rem / var(--scale));top:calc(-.4166666667rem / var(--scale));width:calc(20.25rem / var(--scale));padding:calc(.3333333333rem / var(--scale)) 0;max-height:calc(40.8333333333rem / var(--scale));overflow-y:auto;background-color:var(--surface-background-canvas);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.6666666667rem / var(--scale));box-shadow:0 calc(1rem / var(--scale)) calc(1.3333333333rem / var(--scale)) calc(-.3333333333rem / var(--scale)) var(--box-shadow)}.cats-tableArea .drag-over{background-color:#e3f2fd}.pinned_column:has(.cell-value:hover),.pinned_column:has(.tag_wrapper:hover),tr:has(.pinned_column .cell-value:hover) .pinned_column,tr:has(.pinned_column .tag_wrapper:hover) .pinned_column{z-index:13!important}.pagination-main{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0;height:calc(4rem / var(--scale));padding:calc(.6666666667rem / var(--scale));color:var(--text-heading-secondary);font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600}.pagination-main .entries-details{display:flex;flex-direction:row;justify-content:\"\";align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select{position:relative}.pagination-main .entries-details .pagination-select .select-dropdown{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:calc(.3333333333rem / var(--scale));width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));padding:calc(.5rem / var(--scale));border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img{width:calc(1.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:0}.pagination-main .entries-details .pagination-select .select-dropdown .chevron-img img{width:calc(1.3333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option{position:absolute;top:auto;bottom:100%;display:flex;flex-direction:column;background-color:var(--surface-background-canvas);box-shadow:0 calc(-.1666666667rem / var(--scale)) calc(1.6666666667rem / var(--scale)) calc(0rem / var(--scale)) var(--box-shadow);border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));z-index:10}.pagination-main .entries-details .pagination-select .select-option span{width:calc(4.0833333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:500;padding:calc(.3333333333rem / var(--scale)) calc(.8333333333rem / var(--scale))}.pagination-main .entries-details .pagination-select .select-option span:hover{background-color:var(--surface-background-blue)}.pagination-main .pagination-form{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(.8333333333rem / var(--scale))}.pagination-main .pagination-form .prev_btn,.pagination-main .pagination-form .next_btn,.pagination-main .pagination-form .first_btn,.pagination-main .pagination-form .last_btn{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:0;min-width:calc(2.6666666667rem / var(--scale));width:calc(2.6666666667rem / var(--scale));height:calc(2.6666666667rem / var(--scale))}.pagination-main .pagination-form .outlined_btn{background:transparent;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-secondary);cursor:pointer}.pagination-main .pagination-form .outlined_btn.disable_btn{opacity:.4;pointer-events:none;background-color:var(--border-core-default)}.pagination-main .pagination-form .outlined_btn img{max-width:calc(1.6666666667rem / var(--scale))}.pagination-main .pagination-form .input-style{width:calc(3.3333333333rem / var(--scale));height:calc(2.6666666667rem / var(--scale));font-size:var(--fs-14);line-height:calc(1.6666666667rem / var(--scale));font-weight:600;border:calc(.0833333333rem / var(--scale)) solid var(--border-core-default);border-radius:calc(.3333333333rem / var(--scale));color:var(--text-heading-primary);text-align:center;outline:none;padding:0}#table_scroll::-webkit-scrollbar{width:calc(1.1666666667rem / var(--scale));height:calc(1.1666666667rem / var(--scale))}#table_scroll::-webkit-scrollbar-track{background-color:var(--border-core-default);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-thumb{background-color:var(--text-body-secondary);border:calc(.25rem / var(--scale)) solid transparent;border-radius:calc(8.3333333333rem / var(--scale));background-clip:padding-box}#table_scroll::-webkit-scrollbar-corner{background:transparent}.line{display:flex;justify-content:center;align-items:center;width:calc(8.3333333333rem / var(--scale));height:calc(1.3333333333rem / var(--scale));border-radius:calc(.5833333333rem / var(--scale));background-image:linear-gradient(90deg,#f4f4f4,#e5e5e5cc,#f4f4f4 80px);background-size:600px;animation:shine-lines 2s infinite ease-out}@keyframes shine-lines{0%{background-position:calc(-8.3333333333rem / var(--scale))}40%,to{background-position:calc(11.6666666667rem / var(--scale))}}\n"] }]
|
|
5571
5571
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { tableAreaRef: [{
|
|
5572
5572
|
type: ViewChild,
|
|
5573
5573
|
args: ['table', { static: true }]
|