cats-data-grid 2.0.72 → 2.0.74

package/index.d.ts

@@ -63,7 +63,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     filter: EventEmitter<any>;
     onHideSettings: EventEmitter<any>;
     onCellEdit: EventEmitter<any>;
-    onColCongifgChange: EventEmitter<any>;
+    onColConfigChange: EventEmitter<any>;
     activeFilterIndex: number | null;
     originalRowData: any[];
     activeAll: boolean;
@@ -95,6 +95,14 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     groupBy: string[];
     groupByField: string;
     dragGroupIndex: number | null;
+    categorizedCols: any;
+    noCategoryCols: any[];
+    objectKeys: {
+        (o: object): string[];
+        (o: {}): string[];
+    };
+    allActiveDefault: boolean;
+    allActiveColMap: Record<string, boolean>;
     dateConfig: DateConfig;
     filterOptions: {
         label: string;
@@ -142,11 +150,33 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     skeletonColsLength: number;
     skeletonRows: any;
     skeletonCols: any;
+    allActiveCol: boolean;
+    originalCategorizedCols: any;
+    originalNoCategoryCols: any[];
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    onColConfigSearch(event: any): void;
+    resetDefaultColConfig(): void;
+    /**
+     * Autosize column to fit content
+     */
+    protected autosizeColumn(col: any): void;
+    /**
+     * Autosize all columns
+     */
+    protected autosizeAllColumns(): void;
+    getColConfigCategory(colDefs: any[]): {
+        categorized: Record<string, any[]>;
+        noCategory: any[];
+    };
     getColumnDetail(colDefs: any, groupByField: any): any;
     activeAllSelection(event: Event): void;
+    showAllSelection(): void;
+    showAllDefaultSelection(): void;
+    showAllCategorySelection(category: string): void;
+    toggleSelectedCol(col: any): void;
+    updateGlobalState(): void;
     changeActiveColSelection(event: Event, col: any): void;
     getActiveCols(): void;
     /**
@@ -506,7 +536,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     onCellEditSave(): void;
     setFieldValue(row: any, field: string, value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": true; }; "colDefs": { "alias": "colDefs"; "required": true; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "bigRows": { "alias": "bigRows"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "groupByField": { "alias": "groupByField"; "required": false; }; "appliedFilters": { "alias": "appliedFilters"; "required": false; }; "rowGripFieldName": { "alias": "rowGripFieldName"; "required": false; }; "pageNumber": { "alias": "pageNumber"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; "isRowsEditable": { "alias": "isRowsEditable"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; "skeletonRowsLength": { "alias": "skeletonRowsLength"; "required": false; }; "skeletonColsLength": { "alias": "skeletonColsLength"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "onCellEdit": "onCellEdit"; "onColCongifgChange": "onColCongifgChange"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; "onRowClicked": "onRowClicked"; "onCellClicked": "onCellClicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": true; }; "colDefs": { "alias": "colDefs"; "required": true; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "bigRows": { "alias": "bigRows"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "groupByField": { "alias": "groupByField"; "required": false; }; "appliedFilters": { "alias": "appliedFilters"; "required": false; }; "rowGripFieldName": { "alias": "rowGripFieldName"; "required": false; }; "pageNumber": { "alias": "pageNumber"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; "isRowsEditable": { "alias": "isRowsEditable"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; "skeletonRowsLength": { "alias": "skeletonRowsLength"; "required": false; }; "skeletonColsLength": { "alias": "skeletonColsLength"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "onCellEdit": "onCellEdit"; "onColConfigChange": "onColConfigChange"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; "onRowClicked": "onRowClicked"; "onCellClicked": "onCellClicked"; }, never, never, true, never>;
 }
 
 declare class CommonRendererComponent {
@@ -759,6 +789,7 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
     linkDoubleClick: EventEmitter<CatsTreeLinkClickEvent<T>>;
     onHideSettings: EventEmitter<any>;
     onPaginationChange: EventEmitter<any>;
+    onColConfigChange: EventEmitter<any>;
     dateConfig: DateConfig;
     protected rows: RowView<T>[];
     private linkClickTimer;
@@ -792,6 +823,8 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
     atLeastOneColumnChecked: boolean;
     selectedRow: T[];
     originalColumns: CatsTreeTableColumn[];
+    originalCategorizedCols: any;
+    originalNoCategoryCols: any[];
     skeletonRowsLength: number;
     skeletonColsLength: number;
     skeletonRows: any;
@@ -816,13 +849,32 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
     private fallbackSeq;
     private resolvedTreeColumnField?;
     activeColumns: CatsTreeTableColumn[];
+    categorizedCols: any;
+    noCategoryCols: any[];
+    objectKeys: {
+        (o: object): string[];
+        (o: {}): string[];
+    };
+    allActiveDefault: boolean;
+    allActiveColMap: Record<string, boolean>;
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     getUpdatedColDefs(colDefs: any[]): any[];
+    resetDefaultColConfig(): void;
     normalizeSetFilterType(value: any, key: string): any[] | undefined;
     ngOnChanges(changes: SimpleChanges): void;
     ngDoCheck(): void;
+    getColConfigCategory(colDefs: any[]): {
+        categorized: Record<string, any[]>;
+        noCategory: any[];
+    };
+    onColConfigSearch(event: any): void;
+    showAllDefaultSelection(): void;
+    showAllCategorySelection(category: string): void;
+    toggleSelectedCol(col: any): void;
+    updateGlobalState(): void;
+    getActiveCols(): void;
     protected get treeColumn(): CatsTreeTableColumn;
     /**
      * Initialize column properties for filtering, sorting, and customization
@@ -1107,7 +1159,7 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
      */
     toggleSelectAll(col: any, event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommonTreeTableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CommonTreeTableComponent<any>, "cats-tree-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "tableOptions": { "alias": "tableOptions"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "labelField": { "alias": "labelField"; "required": false; }; "childrenField": { "alias": "childrenField"; "required": false; }; "treeColumnField": { "alias": "treeColumnField"; "required": false; }; "indentPx": { "alias": "indentPx"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "iconBasePath": { "alias": "iconBasePath"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showNodeIcon": { "alias": "showNodeIcon"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "emitExpandAlways": { "alias": "emitExpandAlways"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "rowOptionsResolver": { "alias": "rowOptionsResolver"; "required": false; }; "nodeIconResolver": { "alias": "nodeIconResolver"; "required": false; }; "linkResolver": { "alias": "linkResolver"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; "skeletonRowsLength": { "alias": "skeletonRowsLength"; "required": false; }; "skeletonColsLength": { "alias": "skeletonColsLength"; "required": false; }; }, { "nodeToggle": "nodeToggle"; "selectionChange": "selectionChange"; "linkClick": "linkClick"; "linkDoubleClick": "linkDoubleClick"; "onHideSettings": "onHideSettings"; "onPaginationChange": "onPaginationChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommonTreeTableComponent<any>, "cats-tree-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "tableOptions": { "alias": "tableOptions"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "labelField": { "alias": "labelField"; "required": false; }; "childrenField": { "alias": "childrenField"; "required": false; }; "treeColumnField": { "alias": "treeColumnField"; "required": false; }; "indentPx": { "alias": "indentPx"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "iconBasePath": { "alias": "iconBasePath"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showNodeIcon": { "alias": "showNodeIcon"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "emitExpandAlways": { "alias": "emitExpandAlways"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "rowOptionsResolver": { "alias": "rowOptionsResolver"; "required": false; }; "nodeIconResolver": { "alias": "nodeIconResolver"; "required": false; }; "linkResolver": { "alias": "linkResolver"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; "skeletonRowsLength": { "alias": "skeletonRowsLength"; "required": false; }; "skeletonColsLength": { "alias": "skeletonColsLength"; "required": false; }; }, { "nodeToggle": "nodeToggle"; "selectionChange": "selectionChange"; "linkClick": "linkClick"; "linkDoubleClick": "linkDoubleClick"; "onHideSettings": "onHideSettings"; "onPaginationChange": "onPaginationChange"; "onColConfigChange": "onColConfigChange"; }, never, never, true, never>;
 }
 
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'adaptive';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-data-grid",
-  "version": "2.0.72",
+  "version": "2.0.74",
   "peerDependencies": {
     "@angular/core": ">=18 <22",
     "@angular/common": ">=18 <22"

package/styles/component/_form.scss

@@ -5,12 +5,12 @@
   @include box(rem(14px), rem(14px));
 }
 #table_scroll::-webkit-scrollbar-track {
-  background-color: var(--neutral-200);
+  background-color: var(--border-core-default);
   @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
   background-clip: padding-box;
 }
 #table_scroll::-webkit-scrollbar-thumb {
-  background-color: var(--neutral-500);
+  background-color: var(--text-heading-secondary);
   @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
   background-clip: padding-box;
 }
@@ -19,16 +19,16 @@
 }
 #table_scroll::-webkit-scrollbar-button {
   @include box(rem(14px), rem(14px));
-  background-color: var(--neutral-100);
+  background-color: var(--surface-background-subtle);
   border-radius: rem(2px);
   cursor: pointer;
   display: none;
   background-repeat: no-repeat;
   background-position: center;
-  background-size: rem(10px);
+  background-size: rem(15px);
 }
 #table_scroll::-webkit-scrollbar-button:hover {
-  background-color: var(--neutral-300);
+  background-color: var(--text-body-muted);
 }
 #table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
   background-image: url("/images/chevron-up.svg");
@@ -57,47 +57,81 @@
       to bottom,
       rgb(240, 240, 240) 0%,
       rgb(240, 240, 240) 70.5%,
-      var(--neutral-200) 70.5%,
-      var(--neutral-200) 72.5%,
-      var(--neutral-100) 72.5%,
-      var(--neutral-100) 100%
+      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;
   &:hover {
+    background:
+      url("/images/chevron-up.svg") bottom / rem(15px) 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%
+      );
+  }
+}
+//CSS for large height rows
+.tableArea.large {
+  #table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement {
+    height: rem(71px);
     background:
       url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
       linear-gradient(
         to bottom,
         rgb(240, 240, 240) 0%,
-        rgb(240, 240, 240) 70.5%,
-        var(--neutral-200) 70.5%,
-        var(--neutral-200) 72.5%,
-        var(--neutral-300) 72.5%,
-        var(--neutral-300) 100%
+        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%
       );
+    &:hover {
+      background:
+        url("/images/chevron-up.svg") bottom / rem(15px) 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%
+        );
+    }
   }
 }
 
 // ----------------  CUSTOM RADIO INPUT START HERE--------
-.radio_option {
+.cats-radio-option {
   display: flex;
   @include box(rem(16px), rem(16px));
-  [type="radio"]:not(:checked)[disabled] + label {
-    color: var(--neutral-300);
+  [type="radio"]:not(:checked)[disabled] + .label {
+    color: var(--text-body-muted);
     cursor: default;
     &::before {
-      background-color: var(--neutral-100);
+      background-color: var(--surface-background-subtle);
     }
   }
-  [type="radio"]:is(:checked)[disabled] + label {
-    color: var(--neutral-300);
+  [type="radio"]:is(:checked)[disabled] + .label {
+    color: var(--text-body-muted);
     cursor: default;
     &::before {
-      border-color: var(--neutral-100);
+      border-color: var(--border-core-muted);
     }
     &::after {
-      background-color: var(--neutral-100);
+      background-color: var(--surface-background-subtle);
     }
   }
   %check-style {
@@ -105,64 +139,68 @@
     position: absolute;
     @include positioning(0, 0);
     @include box(rem(16px), rem(16px));
-    background: var(--white);
+    background: var(--surface-background-canvas);
   }
   [type="radio"]:checked,
   [type="radio"]:not(:checked) {
     position: absolute;
     left: -9999px;
   }
-  [type="radio"]:checked + label,
-  [type="radio"]:not(:checked) + label {
+  [type="radio"]:checked + .label,
+  [type="radio"]:not(:checked) + .label {
     position: relative;
     padding-left: rem(24px);
     cursor: pointer;
     display: inline-block;
-    color: var(--neutral-600);
+    color: var(--text-heading-primary);
     line-height: rem(16px);
   }
-  [type="radio"]:checked + label:before {
+  [type="radio"]:checked + .label:before {
     @extend %check-style;
-    @include border($width: rem(1.5px), $color: var(--blue-600), $radius: 100%);
+    @include border(
+      $width: rem(1.5px),
+      $color: var(--border-interaction-focus),
+      $radius: 100%
+    );
   }
-  [type="radio"]:not(:checked) + label:before {
+  [type="radio"]:not(:checked) + .label:before {
     @extend %check-style;
     @include border($width: rem(1.5px), $radius: 100%);
   }
-  [type="radio"]:checked + label:after,
-  [type="radio"]:not(:checked) + label:after {
+  [type="radio"]:checked + .label:after,
+  [type="radio"]:not(:checked) + .label:after {
     content: "";
     @include box(rem(6px), rem(6px));
-    background: var(--blue-600);
+    background: var(--surface-action-default);
     position: absolute;
     @include positioning(rem(5px), rem(5px));
     border-radius: 100%;
     transition: all 0.2s ease;
   }
-  [type="radio"]:not(:checked) + label:after {
+  [type="radio"]:not(:checked) + .label:after {
     opacity: 0;
     transform: scale(0);
   }
-  [type="radio"]:checked + label:after {
+  [type="radio"]:checked + .label:after {
     opacity: 1;
     transform: scale(1);
   }
 }
 
 // ----------------  CUSTOM CHECKBOX INPUT START HERE--------
-.checkbox_container {
+.cats-checkbox_container {
   @include flex(flex-start, center, rem(8px));
   @include fontStyle(var(--fs-14), rem(20px), 400);
-  color: var(--neutral-600);
+  color: var(--text-heading-primary);
   // --- Disabled (check & uncheck) ---
   input[type="checkbox"].custom_check_box,
   input[type="checkbox"].custom_check_box:checked {
     &[disabled] {
       cursor: default;
-      background-color: var(--neutral-300);
-      border-color: var(--neutral-300);
+      background-color: var(--text-body-muted);
+      border-color: var(--border-core-strong);
       & + span {
-        color: var(--neutral-300);
+        color: var(--text-body-muted);
       }
     }
   }
@@ -173,7 +211,7 @@
     min-width: rem(16px);
     @include border();
     cursor: pointer;
-    background-color: var(--white);
+    background-color: var(--surface-background-canvas);
     position: relative;
     transition: all 0.2s ease;
 
@@ -190,8 +228,8 @@
     }
     // --- Checked State ---
     &:checked {
-      border-color: var(--blue-600);
-      background-color: var(--blue-600);
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-action-default);
       &::after {
         display: block;
         background-image: url("/images/check-white.svg");
@@ -200,8 +238,8 @@
     }
     // --- Indeterminate (minus) state ---
     &:indeterminate {
-      border-color: var(--blue-600);
-      background-color: var(--white);
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-background-canvas);
       &::after {
         display: block;
         top: 0;
@@ -222,8 +260,8 @@
     @include border();
     padding: rem(10px) rem(12px);
     @include fontStyle(var(--fs-14), rem(20px));
-    background-color: var(--white);
-    color: var(--neutral-600);
+    background-color: var(--surface-background-canvas);
+    color: var(--text-heading-primary);
     cursor: pointer;
 
     .left_details {
@@ -244,7 +282,7 @@
     overflow: auto;
     position: absolute;
     z-index: 2;
-    background: var(--white);
+    background: var(--surface-background-canvas);
     box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
     top: rem(40px);
 
@@ -262,9 +300,9 @@
         @include fontStyle(var(--fs-14), rem(20px));
         padding: rem(10px) rem(12px);
         cursor: pointer;
-        color: var(--neutral-600);
+        color: var(--text-heading-primary);
         &:hover {
-          background-color: var(--neutral-50);
+          background-color: var(--surface-background-default);
         }
         &.disabled_option {
           opacity: 0.3;
@@ -281,7 +319,7 @@
   @include box(100%, rem(40px));
   @include border();
   padding: rem(10px) rem(12px);
-  background-color: var(--white);
+  background-color: var(--surface-background-canvas);
   @include flex(flex-start, center, rem(4px));
 
   img {
@@ -292,9 +330,9 @@
     @include box(100%, 100%);
     border: 0;
     @include fontStyle(var(--fs-14), rem(20px), 400);
-    color: var(--neutral-600);
+    color: var(--text-heading-primary);
     &::placeholder {
-      color: var(--neutral-500);
+      color: var(--text-heading-secondary);
     }
   }
 }
@@ -312,7 +350,7 @@
     .slider {
       position: absolute;
       cursor: pointer;
-      background-color: var(--neutral-100);
+      background-color: var(--surface-background-subtle);
       border-radius: rem(16px);
       inset: 0;
       transition: 0.3s;
@@ -322,7 +360,7 @@
         @include box(rem(12px), rem(12px));
         left: rem(2px);
         bottom: rem(2px);
-        background-color: var(--white);
+        background-color: var(--surface-background-canvas);
         border-radius: 50%;
         transition: 0.3s;
         box-shadow: 0 rem(0.8px) rem(2.4px) 0 var(--box-shadow);
@@ -330,14 +368,14 @@
     }
 
     input:checked + .slider {
-      background-color: var(--blue-600);
+      background-color: var(--surface-action-default);
       &:before {
         transform: translateX(rem(12px));
       }
     }
   }
 }
-.tableArea.big {
+.tableArea.large {
   .table_wrapper {
     table {
       tbody {
@@ -363,13 +401,22 @@
   }
 }
 
-.text-primary {
-  color: var(--blue-600);
+.cats-text-primary {
+  color: var(--text-link-default);
+}
+.cats-text-danger {
+  color: var(--semantics-error-default);
 }
-.text-danger {
-  color: var(--red) !important;
+//---------------Text Trunctae CSS -----------
+
+.ellipsis,
+.textTruncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* max-width: rem(200px); */
 }
 
 .tooltip-trigger {
   cursor: default;
-}
+}

package/styles/sass-utils/_mixin.scss

@@ -62,7 +62,7 @@ $ultraWideDesktop: 1919px;
 @mixin border(
   $width: rem(1px),
   $style: solid,
-  $color: var(--neutral-200),
+  $color: var(--border-core-default),
   $radius: rem(4px)
 ) {
   border: $width $style $color;