chore(ag-grid): bump @koobiq/ag-grid-angular-theme to 34 version, updated examples (#DS-3957)

apps/docs/src/assets/stackblitz/package.json

@@ -20,7 +20,7 @@
         "@angular/platform-browser": "^18.2.6",
         "@angular/platform-browser-dynamic": "^18.2.6",
         "@angular/router": "^18.2.6",
-        "@koobiq/ag-grid-angular-theme": "^30.2.0",
+        "@koobiq/ag-grid-angular-theme": "^34.0.0",
         "@koobiq/angular-luxon-adapter": "${version}",
         "@koobiq/angular-moment-adapter": "${version}",
         "@koobiq/cdk": "${version}",
@@ -33,8 +33,8 @@
         "@koobiq/luxon-date-adapter": "^3.4.0",
         "@koobiq/moment-date-adapter": "^3.4.0",
         "@messageformat/core": "^3.0.0",
-        "ag-grid-angular": "^30.2.1",
-        "ag-grid-community": "^30.2.1",
+        "ag-grid-angular": "^34.3.1",
+        "ag-grid-community": "^34.3.1",
         "highlight.js": "^11.10.0",
         "luxon": "^3.4.4",
         "marked": "^15.0.7",

package.json

@@ -29,13 +29,13 @@
         "@docsearch/js": "^3.9.0",
         "@fontsource/inter": "^5.2.6",
         "@fontsource/jetbrains-mono": "^5.2.6",
-        "@koobiq/ag-grid-angular-theme": "^30.2.0",
+        "@koobiq/ag-grid-angular-theme": "^34.0.0",
         "@koobiq/date-adapter": "^3.4.0",
         "@koobiq/date-formatter": "^3.4.0",
         "@koobiq/icons": "^10.10.0",
         "@radix-ng/primitives": "0.23.0",
-        "ag-grid-angular": "^30.2.1",
-        "ag-grid-community": "^30.2.1",
+        "ag-grid-angular": "^34.3.1",
+        "ag-grid-community": "^34.3.1",
         "highlight.js": "^11.11.1",
         "marked": "^12.0.2",
         "overlayscrollbars": "2.7.3",

packages/docs-examples/components/ag-grid/ag-grid-overview/ag-grid-overview-example.ts

@@ -2,7 +2,16 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAgGridThemeModule } from '@koobiq/ag-grid-angular-theme';
 import { KbqLinkModule } from '@koobiq/components/link';
 import { AgGridModule, ICellRendererAngularComp } from 'ag-grid-angular';
-import { ColDef, FirstDataRenderedEvent, ICellRendererParams } from 'ag-grid-community';
+import {
+    AllCommunityModule,
+    ColDef,
+    FirstDataRenderedEvent,
+    ICellRendererParams,
+    ModuleRegistry,
+    RowSelectionOptions
+} from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 type ExampleRowData = {
     column0: string;
@@ -53,18 +62,17 @@ export class ExampleLinkCellRenderer implements ICellRendererAngularComp {
     selector: 'ag-grid-overview-example',
     template: `
         <ag-grid-angular
-            rowSelection="multiple"
             kbqAgGridTheme
             disableCellFocusStyles
             kbqAgGridToNextRowByTab
             kbqAgGridSelectRowsByShiftArrow
             kbqAgGridSelectAllRowsByCtrlA
             kbqAgGridSelectRowsByCtrlClick
+            [rowSelection]="rowSelection"
             [style.height.px]="300"
             [columnDefs]="columnDefs"
             [defaultColDef]="defaultColDef"
             [rowData]="rowData"
-            [suppressRowClickSelection]="true"
             (firstDataRendered)="onFirstDataRendered($event)"
         />
     `,
@@ -77,19 +85,14 @@ export class AgGridOverviewExample {
         width: 140
     };
 
+    protected readonly rowSelection: RowSelectionOptions = {
+        mode: 'multiRow',
+        headerCheckbox: true,
+        checkboxes: true,
+        hideDisabledCheckboxes: false
+    };
+
     protected readonly columnDefs: ColDef[] = [
-        {
-            headerCheckboxSelection: true,
-            checkboxSelection: true,
-            width: 34,
-            headerName: '',
-            sortable: false,
-            filter: false,
-            resizable: false,
-            suppressMovable: true,
-            editable: false,
-            lockPosition: true
-        },
         {
             field: 'column0',
             headerName: 'Link',
@@ -154,5 +157,7 @@ export class AgGridOverviewExample {
                 node.setSelected(true);
             }
         });
+
+        api.setColumnWidths([{ key: 'ag-Grid-SelectionColumn', newWidth: 36 }]);
     }
 }

packages/docs-examples/components/ag-grid/ag-grid-row-dragging/ag-grid-row-dragging-example.ts

@@ -1,7 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAgGridThemeModule } from '@koobiq/ag-grid-angular-theme';
 import { AgGridModule } from 'ag-grid-angular';
-import { ColDef, FirstDataRenderedEvent } from 'ag-grid-community';
+import {
+    AllCommunityModule,
+    ColDef,
+    FirstDataRenderedEvent,
+    ModuleRegistry,
+    RowSelectionOptions
+} from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 type ExampleRowData = {
     column0: string;
@@ -25,21 +33,20 @@ type ExampleRowData = {
     selector: 'ag-grid-row-dragging-example',
     template: `
         <ag-grid-angular
-            rowSelection="multiple"
             kbqAgGridTheme
             disableCellFocusStyles
             kbqAgGridToNextRowByTab
             kbqAgGridSelectRowsByShiftArrow
             kbqAgGridSelectAllRowsByCtrlA
             kbqAgGridSelectRowsByCtrlClick
+            [rowSelection]="rowSelection"
             [style.height.px]="300"
             [columnDefs]="columnDefs"
             [defaultColDef]="defaultColDef"
             [rowData]="rowData"
             [rowDragManaged]="true"
             [rowDragMultiRow]="true"
             [suppressMoveWhenRowDragging]="true"
-            [suppressRowClickSelection]="true"
             (firstDataRendered)="onFirstDataRendered($event)"
         />
     `,
@@ -52,19 +59,14 @@ export class AgGridRowDraggingExample {
         width: 140
     };
 
-    readonly columnDefs: ColDef[] = [
-        {
-            headerCheckboxSelection: true,
-            checkboxSelection: true,
-            width: 34,
-            headerName: '',
-            sortable: false,
-            filter: false,
-            resizable: false,
-            suppressMovable: true,
-            editable: false,
-            lockPosition: true
-        },
+    protected readonly rowSelection: RowSelectionOptions = {
+        mode: 'multiRow',
+        headerCheckbox: true,
+        checkboxes: true,
+        hideDisabledCheckboxes: false
+    };
+
+    protected readonly columnDefs: ColDef[] = [
         {
             field: 'column0',
             headerName: 'Project name',
@@ -130,5 +132,7 @@ export class AgGridRowDraggingExample {
                 node.setSelected(true);
             }
         });
+
+        api.setColumnWidths([{ key: 'ag-Grid-SelectionColumn', newWidth: 36 }]);
     }
 }

packages/docs-examples/components/content-panel/content-panel-with-grid/content-panel-with-grid-example.ts

@@ -10,14 +10,19 @@ import { KbqLinkModule } from '@koobiq/components/link';
 import { KbqModalModule, KbqModalRef, KbqModalService } from '@koobiq/components/modal';
 import { AgGridModule } from 'ag-grid-angular';
 import {
+    AllCommunityModule,
     CellClickedEvent,
     CellFocusedEvent,
     CellKeyDownEvent,
     ColDef,
     FirstDataRenderedEvent,
-    FullWidthCellKeyDownEvent
+    FullWidthCellKeyDownEvent,
+    ModuleRegistry,
+    RowSelectionOptions
 } from 'ag-grid-community';
 
+ModuleRegistry.registerModules([AllCommunityModule]);
+
 type ExampleRowData = Record<string, string>;
 
 @Component({
@@ -26,18 +31,17 @@ type ExampleRowData = Record<string, string>;
     selector: 'example-grid',
     template: `
         <ag-grid-angular
-            rowSelection="multiple"
             kbqAgGridTheme
             disableCellFocusStyles
             kbqAgGridToNextRowByTab
             kbqAgGridSelectRowsByShiftArrow
             kbqAgGridSelectAllRowsByCtrlA
             kbqAgGridSelectRowsByCtrlClick
+            [rowSelection]="rowSelection"
             [style.height]="'100%'"
             [columnDefs]="columnDefs"
             [defaultColDef]="defaultColDef"
             [rowData]="rowData"
-            [suppressRowClickSelection]="true"
             (firstDataRendered)="onFirstDataRendered($event)"
             (cellClicked)="cellClicked.emit($event)"
             (cellFocused)="cellFocused.emit($event)"
@@ -57,27 +61,19 @@ export class ExampleGrid {
         width: 140
     };
 
+    protected readonly rowSelection: RowSelectionOptions = {
+        mode: 'multiRow',
+        headerCheckbox: true,
+        checkboxes: true,
+        hideDisabledCheckboxes: false
+    };
+
     private readonly _columnDefs: ColDef[] = Array.from({ length: 20 }, (_, index) => ({
         headerName: 'Text ',
         field: 'column' + index
     }));
 
-    protected readonly columnDefs: ColDef[] = [
-        {
-            headerCheckboxSelection: true,
-            checkboxSelection: true,
-            width: 34,
-            headerName: '',
-            sortable: false,
-            filter: false,
-            resizable: false,
-            suppressMovable: true,
-            editable: false,
-            lockPosition: true
-        },
-        ...this._columnDefs
-
-    ];
+    protected readonly columnDefs: ColDef[] = this._columnDefs;
 
     protected readonly rowData: ExampleRowData[] = Array.from({ length: 100 }, (_, index) => {
         return this._columnDefs.reduce((prev, _cur, i) => {
@@ -93,6 +89,8 @@ export class ExampleGrid {
                 node.setSelected(true);
             }
         });
+
+        api.setColumnWidths([{ key: 'ag-Grid-SelectionColumn', newWidth: 36 }]);
     }
 }
 

yarn.lock

@@ -5041,18 +5041,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@koobiq/ag-grid-angular-theme@npm:^30.2.0":
-  version: 30.2.0
-  resolution: "@koobiq/ag-grid-angular-theme@npm:30.2.0"
+"@koobiq/ag-grid-angular-theme@npm:^34.0.0":
+  version: 34.0.0
+  resolution: "@koobiq/ag-grid-angular-theme@npm:34.0.0"
   dependencies:
     tslib: "npm:^2.3.0"
   peerDependencies:
-    "@angular/cdk": ">=16.0.0"
-    "@angular/core": ">=16.0.0"
+    "@angular/cdk": ">=18.0.0"
+    "@angular/core": ">=18.0.0"
     "@koobiq/design-tokens": ^3.0.0
     "@koobiq/icons": ">=9.0.0"
-    ag-grid-community: ^30.0.0
-  checksum: 10c0/327f595525efdb50cdfc6172425c15c9774abb78dafb7f3489bb56f5dd66086d8c0d01b5d0f36d7ae54a174e0011daadde5ede06216c5002043f265360678b5b
+    ag-grid-angular: ^34.0.0
+    ag-grid-community: ^34.0.0
+  checksum: 10c0/4b46321d298e5577c816e6ad5209b8923917cc9e23ffbf3252053018ae0790101996d8d737d995e2bea44d7525ce8e48942b90859bc7dd87df4d751dad0768f7
   languageName: node
   linkType: hard
 
@@ -8009,23 +8010,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ag-grid-angular@npm:^30.2.1":
-  version: 30.2.1
-  resolution: "ag-grid-angular@npm:30.2.1"
+"ag-charts-types@npm:12.3.1":
+  version: 12.3.1
+  resolution: "ag-charts-types@npm:12.3.1"
+  checksum: 10c0/e2db0006ddb96f7d5766749cbfd15371725027dacd7fd516c511ad69e72acbbd6bca6ec96c445ca7c962c05e7d915503572a050f92485c6a8d3efaabbfcf0b59
+  languageName: node
+  linkType: hard
+
+"ag-grid-angular@npm:^34.3.1":
+  version: 34.3.1
+  resolution: "ag-grid-angular@npm:34.3.1"
   dependencies:
+    ag-grid-community: "npm:34.3.1"
     tslib: "npm:^2.3.0"
   peerDependencies:
-    "@angular/common": ">= 12.0.0"
-    "@angular/core": ">= 12.0.0"
-    ag-grid-community: ~30.2.1
-  checksum: 10c0/075ff308773d6dfbee5d682b871a462eca2d4c6be3d3991e29e3993b341178c0b08d9a41ea84102d9d868e287a08311f06c589c2048c3bda0920890663f991fa
+    "@angular/common": ">= 17.0.0"
+    "@angular/core": ">= 17.0.0"
+  checksum: 10c0/792ed11b190992edb3e6b55c4a35a8070c16349824f288cbe12d6742703930a6b85c21017ee635513de85df2bfcacfc015abb2643d11a91e098addb1dbc01e27
   languageName: node
   linkType: hard
 
-"ag-grid-community@npm:^30.2.1":
-  version: 30.2.1
-  resolution: "ag-grid-community@npm:30.2.1"
-  checksum: 10c0/0eb89416e7dd1e253a1580ad2deb0a94612b21def187bf25ed615bf17c0d0b2e883ff844134937b944609541beba6beea96f70b06f3dfa26dd6b407fea538c8e
+"ag-grid-community@npm:34.3.1, ag-grid-community@npm:^34.3.1":
+  version: 34.3.1
+  resolution: "ag-grid-community@npm:34.3.1"
+  dependencies:
+    ag-charts-types: "npm:12.3.1"
+  checksum: 10c0/13e0ccaaac10dbbbb8fcee664e4bbb70cef14e84b662fa1c9e294993dd1fda857be9ff8c6e13d82550513816a62d528489b08c06add5d5b7f0344481301b79b9
   languageName: node
   linkType: hard
 
@@ -15679,7 +15689,7 @@ __metadata:
     "@eslint-community/eslint-plugin-eslint-comments": "npm:^4.5.0"
     "@fontsource/inter": "npm:^5.2.6"
     "@fontsource/jetbrains-mono": "npm:^5.2.6"
-    "@koobiq/ag-grid-angular-theme": "npm:^30.2.0"
+    "@koobiq/ag-grid-angular-theme": "npm:^34.0.0"
     "@koobiq/date-adapter": "npm:^3.4.0"
     "@koobiq/date-formatter": "npm:^3.4.0"
     "@koobiq/design-tokens": "npm:^3.14.0"
@@ -15724,8 +15734,8 @@ __metadata:
     "@types/ws": "npm:<8.18.2"
     "@typescript-eslint/eslint-plugin": "npm:^7.18.0"
     "@typescript-eslint/parser": "npm:^7.18.0"
-    ag-grid-angular: "npm:^30.2.1"
-    ag-grid-community: "npm:^30.2.1"
+    ag-grid-angular: "npm:^34.3.1"
+    ag-grid-community: "npm:^34.3.1"
     autoprefixer: "npm:^10.4.21"
     chalk: "npm:^4.1.2"
     commander: "npm:^11.1.0"