cats-data-grid 2.0.54 → 2.0.56

package/index.d.ts

@@ -51,6 +51,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     settingsRequired: boolean;
     settingsClicked: boolean;
     resetPage: boolean;
+    rowId: any;
     showDropdown: boolean;
     height: number;
     groupByRequired: boolean;
@@ -105,10 +106,15 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     private removeMouseUp;
     private rafId;
     appliedFilters: ColumnFilter[];
+    rowGripFieldName: string;
+    pageNumber: number;
     appliedFiltersEvent: EventEmitter<ColumnFilter[]>;
     activeGroupsEvent: EventEmitter<any[]>;
     dynamicGroupingFiltering: boolean;
     atLeastOneColumnChecked: boolean;
+    draggedRowData: any;
+    firstCol: any;
+    isRowSelected: boolean;
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -456,8 +462,13 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     dateTimeSelected(date: any): void;
     convertToNumber(value: number | string): number;
     hideSettings(): void;
+    dragRow(e: Event, row: any): void;
+    allowRowDrop(e: Event): void;
+    dropRow(targetRow: any): void;
+    moveRow(from: number, to: number): void;
+    clearAllFilter(): 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": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "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; }; "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; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; }, 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": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "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; }; "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; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; }, never, never, true, never>;
 }
 
 declare class CommonRendererComponent {
@@ -469,6 +480,9 @@ declare class CommonRendererComponent {
     clickTimer: any;
     clickDelay: number;
     maxVisible: number;
+    data: any;
+    paramsVal: any;
+    tagClasses: any;
     cellInit(params: any, data: any): void;
     /**
      * @description Returns the renderer type defined in cellRendererParams.
@@ -542,19 +556,13 @@ declare class CommonRendererComponent {
      * @author Anand Pandey
      * @returns {string[]}
      */
-    get allTags(): {
-        tagValue: any;
-        class: any;
-    }[];
+    get allTags(): any;
     /**
      * @description Returns the subset of tags that should be visibly displayed in the UI based on maxVisible count.
      * @author Anand Pandey
      * @returns {string[]}
      */
-    get visibleTags(): {
-        tagValue: any;
-        class: any;
-    }[];
+    get visibleTags(): any;
     /**
      * @description Returns the count of tags hidden behind the "+" more indicator.
      * @author Anand Pandey
@@ -581,6 +589,25 @@ declare class CommonRendererComponent {
      * @returns {void}
      */
     closeDropdown(event: MouseEvent): void;
+    /**
+     * @description Returns normalized link values derived from the cell `value`.
+     * Uses the configured `linkKey` from `cellParams` to extract display data
+     * @author Anand Pandey
+     * @returns {Array<{ linkValue: string; class: string }>} Normalized link values
+     */
+    get linkVal(): any;
+    /**
+     * @description Normalizes the component `value` into a consistent array structure.
+     * @author Anand Pandey
+     * @param {string} key Key in `cellParams` used to determine which field to read from object values
+     * @param {string} valueProp Property name assigned to the normalized output value
+     * @returns {Array<{ [key: string]: string; class: string }>} Array of normalized value objects
+     */
+    transformValue(key: string, valueProp: any): {
+        [valueProp]: any;
+        class: any;
+    }[];
+    parseColValue(row: any, col: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommonRendererComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CommonRendererComponent, "lib-common-renderer", never, {}, {}, never, never, true, never>;
 }

package/package.json

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

package/styles/_index.scss

@@ -1,3 +1,3 @@
-@forward "sass-utils";
-@forward "component";
-@forward "base";
+@forward "sass-utils";
+@forward "component";
+@forward "base";

package/styles/base/_fonts.scss

@@ -1,74 +1,74 @@
-// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-@use "../sass-utils" as *;
-
-: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;
-}
-
-@include width-range($tablet, $mediumDesktop) {
-  :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));
-  }
-}
-
-@include width-range($largeDesktop, $extraLargeDesktop) {
-  :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));
-  }
-}
-
-@include width-range($xxlargeDesktop, $ultraWideDesktop) {
-  :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));
-  }
-}
+// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
+
+@use "../sass-utils" as *;
+
+: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;
+}
+
+@include width-range($tablet, $mediumDesktop) {
+  :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));
+  }
+}
+
+@include width-range($largeDesktop, $extraLargeDesktop) {
+  :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));
+  }
+}
+
+@include width-range($xxlargeDesktop, $ultraWideDesktop) {
+  :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));
+  }
+}

package/styles/base/_index.scss

@@ -1,2 +1,2 @@
-@forward "./reset";
+@forward "./reset";
 @forward "./fonts";

package/styles/base/_reset.scss

@@ -1,60 +1,60 @@
-// Box Sizing
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  // font-family: "Open Sans", sans-serif;
-}
-
-body {
-  font-size: 100%;
-}
-
-// Font-inflation
-html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  text-size-adjust: none;
-}
-
-// Remove default margin and padding
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol,
-p {
-  margin: 0;
-  padding: 0;
-  text-wrap: pretty;
-}
-
-// Remove list styles on ul, ol elements
-ul[role="list"],
-ol[role="list"] {
-  list-style: none;
-}
-
-ul {
-  list-style: none;
-}
-
-// images
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-input,
-select,
-textarea {
-  outline: none;
-  box-shadow: none;
-}
+// Box Sizing
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  // font-family: "Open Sans", sans-serif;
+}
+
+body {
+  font-size: 100%;
+}
+
+// Font-inflation
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+// Remove default margin and padding
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+p {
+  margin: 0;
+  padding: 0;
+  text-wrap: pretty;
+}
+
+// Remove list styles on ul, ol elements
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+ul {
+  list-style: none;
+}
+
+// images
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+select,
+textarea {
+  outline: none;
+  box-shadow: none;
+}