update to new correctly working beta package, improve code

Author: max-umain

package-lock.json

@@ -21,7 +21,7 @@
     "@angular/router": "^18.1.0",
     "@faker-js/faker": "^8.4.1",
     "@scania/tegel-angular-17": "^1.31.2",
-    "@scania/tegel-styles": "1.0.0-ag-grid-design-review-beta.3",
+    "@scania/tegel-styles": "1.0.0-ag-grid-v33-beta.1",
     "@tanstack/angular-table": "^8.19.2",
     "ag-grid-angular": "^33.3.1",
     "ag-grid-community": "^33.3.1",

package.json

@@ -1,7 +1,8 @@
 <ag-grid-angular
-  style="width: 100%; height: 100%;"
+  style="width: 100%; height: 100%"
   [rowData]="rowData"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
-  (gridReady)="onGridReady($event)">
-</ag-grid-angular>
+  (gridReady)="onGridReady($event)"
+>
+</ag-grid-angular>

src/app/pages/ag-grid/ag-grid-column-search.component.html

@@ -8,21 +8,16 @@ import {
   GridReadyEvent,
   AllCommunityModule,
   ModuleRegistry,
-  provideGlobalGridOptions,
 } from "ag-grid-community";
 import { AgGridModule } from "ag-grid-angular";
 
 ModuleRegistry.registerModules([AllCommunityModule]);
-provideGlobalGridOptions({
-  theme: "legacy",
-});
 
 @Component({
   selector: "app-ag-grid-column-search",
   standalone: true,
   encapsulation: ViewEncapsulation.None, // Disable Angular's style encapsulation
   templateUrl: "./ag-grid-column-search.component.html",
-  styleUrls: ["ag-styles-loader.css"],
   imports: [TegelModule, AgGridModule, AgGridAngular],
 })
 export default class AgGridColumnSearchComponent {

src/app/pages/ag-grid/ag-grid-column-search.component.ts

@@ -1,7 +1,8 @@
 <ag-grid-angular
-  style="width: 100%; height: 100%;"
+  style="width: 100%; height: 100%"
   [rowData]="rowData"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
-  (gridReady)="onGridReady($event)">
-</ag-grid-angular>
+  (gridReady)="onGridReady($event)"
+>
+</ag-grid-angular>

src/app/pages/ag-grid/ag-grid-editable-cells.component.html

@@ -10,7 +10,6 @@ import { AgGridModule } from "ag-grid-angular";
   standalone: true,
   encapsulation: ViewEncapsulation.None, // Disable Angular's style encapsulation
   templateUrl: "./ag-grid-editable-cells.component.html",
-  styleUrls: ["ag-styles-loader.css"],
   imports: [TegelModule, AgGridModule, AgGridAngular],
 })
 export default class AgGridEditableCellsComponent {

src/app/pages/ag-grid/ag-grid-editable-cells.component.ts

@@ -7,50 +7,23 @@ import { TegelModule } from "@scania/tegel-angular-17";
 @Component({
   selector: "app-table-page",
   template: `
-    <div class="tds-u-pb3">
-      <tds-toggle
-        (tdsToggle)="toggleMode()"
-        headline="Toggle compact mode (currently not working)"
-        size="sm"
-      >
-        <div slot="label">{{ labelText }}</div>
-      </tds-toggle>
-    </div>
-
     <div
-      class="ag-theme-quartz tds-mode-variant-primary"
-      [class.compact]="classCompact"
-      style="height: 500px; width: 100%;"
+      class="tds-mode-variant-primary"
+      style="height: 500px; width: 100%; padding: 20px; padding-bottom: 100px"
     >
       <h4>Primary mode variant</h4>
       <app-ag-grid-column-search></app-ag-grid-column-search>
     </div>
 
     <div
-      class="ag-theme-quartz tds-mode-variant-secondary"
-      [class.compact]="classCompact"
-      style="height: 500px; width: 100%;"
+      class="tds-mode-variant-secondary"
+      style="height: 500px; width: 100%; padding: 20px; padding-bottom: 100px; margin-top: 10px; margin-bottom: 10px"
     >
-      <h4 style="margin-top: 100px">Secondary mode variant</h4>
+      <h4 style="margin-top: 10px">Secondary mode variant</h4>
       <app-ag-grid-editable-cells></app-ag-grid-editable-cells>
     </div>
-
-    <div style="margin-top: 100px"></div>
   `,
-  styles: [``],
   standalone: true,
   imports: [AgGridColumnSearch, AgGridEditableCells, AsyncPipe, TegelModule],
 })
-export default class AgGridPageComponent {
-  classCompact = false;
-  labelText: "Compact" | "Default" = "Default";
-
-  public toggleMode() {
-    this.classCompact = !this.classCompact;
-    if (this.labelText === "Compact") {
-      this.labelText = "Default";
-    } else {
-      this.labelText = "Compact";
-    }
-  }
-}
+export default class AgGridPageComponent {}

src/app/pages/ag-grid/ag-grid-page.component.ts

@@ -1,10 +1,8 @@
 @import "reset.css";
 @import url("@scania/tegel/dist/tegel/tegel.css");
 
-/* Core Data Grid CSS */
-@import url("ag-grid-community/styles/ag-grid.css");
-/* Quartz Theme Specific CSS */
-@import url("ag-grid-community/styles/ag-theme-quartz.css");
+/* AG Grid Tegel styling */
+@import url("@scania/tegel-styles/dist/customization/ag-grid/theme.css");
 
 .tds-mode-dark {
   color: var(--tds-grey-100);