package.json

@@ -13,12 +13,12 @@
   "dependencies": {
     "@angular-devkit/build-angular": "^19.1.6",
     "@angular/animations": "^19.1.5",
-    "@angular/cdk": "^18.1.1",
+    "@angular/cdk": "^19.1.3",
     "@angular/common": "^19.1.5",
     "@angular/compiler": "^19.1.5",
     "@angular/core": "^19.1.5",
     "@angular/forms": "^19.1.5",
-    "@angular/material": "^18.1.1",
+    "@angular/material": "^19.1.3",
     "@angular/platform-browser": "^19.1.5",
     "@angular/platform-browser-dynamic": "^19.1.5",
     "@angular/router": "^19.1.5",

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component, signal } from '@angular/core';
+import { Component, signal, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -34,6 +34,8 @@ const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
   ],
 })
 export class AppComponent {
+  private breakpointObserver = inject(BreakpointObserver);
+
   protected selectedFile = signal<FileOrFolder | undefined>(undefined);
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
@@ -44,7 +46,9 @@ export class AppComponent {
     this.breakpointObserver.isMatched(mobileBreakpoints)
   );
 
-  constructor(private breakpointObserver: BreakpointObserver) {
+  constructor() {
+    const breakpointObserver = this.breakpointObserver;
+
     breakpointObserver
       .observe(mobileBreakpoints)
       .pipe(takeUntilDestroyed())

src/app/editor/editor.component.ts

@@ -8,6 +8,7 @@ import {
   input,
   signal,
   viewChild,
+  inject,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -28,20 +29,22 @@ declare const __TAURI__: any;
 type PreviewType = 'raw' | 'edit' | 'diff';
 
 @Component({
-    selector: 'app-editor',
+  selector: 'app-editor',
-    imports: [
+  imports: [
-        CommonModule,
+    CommonModule,
-        ProtoFieldComponent,
+    ProtoFieldComponent,
-        MatButtonModule,
+    MatButtonModule,
-        MatButtonToggleModule,
+    MatButtonToggleModule,
-        MatIconModule,
+    MatIconModule,
-        MonacoEditorModule,
+    MonacoEditorModule,
-        FormsModule,
+    FormsModule,
-    ],
+  ],
-    templateUrl: './editor.component.html',
+  templateUrl: './editor.component.html',
-    styleUrl: './editor.component.scss'
+  styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
+  private snackBar = inject(MatSnackBar);
+
   selectedFile = input<FileOrFolder>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
@@ -79,7 +82,9 @@ export class EditorComponent {
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) {
+  constructor() {
+    const sanitizer = inject(DomSanitizer);
+
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {

src/app/proto-definition-selector/definition-editor/definition-editor.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import {
@@ -38,6 +38,8 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefinitionEditorComponent {
+  protected protoMessage = inject<ProtoMessage>(MAT_DIALOG_DATA);
+
   protected editableMessages = this.protoMessage.values.filter((message) =>
     this.filterMessageConfiguration(message.configuration)
   );
@@ -60,6 +62,4 @@ export class DefinitionEditorComponent {
     // Note: Map can always be configured, as key needs to be a string or numeric type
     return EDITABLE_MESSAGE_TYPES.includes(configuration.type);
   }
-
-  constructor(@Inject(MAT_DIALOG_DATA) protected protoMessage: ProtoMessage) {}
 }

src/app/proto-definition-selector/proto-definition-selector.component.ts

@@ -1,16 +1,5 @@
 import { CommonModule } from '@angular/common';
-import {
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, computed, output, signal, viewChild, inject } from '@angular/core';
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  computed,
-  output,
-  signal,
-  viewChild,
-} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule, MatSelectionList } from '@angular/material/list';
 import { ProtoMessage } from '../model/proto-message.model';
@@ -101,6 +90,10 @@ const collator = new Intl.Collator(undefined, { numeric: true });
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProtoDefinitionSelectorComponent {
+  private protoDefinitionService = inject(ProtoDefinitionService);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+
   messageSelected = output<ProtoMessage>();
 
   protected protoSelector =
@@ -134,12 +127,6 @@ export class ProtoDefinitionSelectorComponent {
     return this.isDragging();
   }
 
-  constructor(
-    private protoDefinitionService: ProtoDefinitionService,
-    private snackBar: MatSnackBar,
-    private dialog: MatDialog
-  ) {}
-
   protected async addDefinitionFiles() {
     const files = this.protoSelector()?.nativeElement.files;
     if (files) {

src/styles.scss

@@ -1,7 +1,8 @@
 @use "@angular/material" as mat;
 @use "./theme.scss";
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 @mixin custom-colours($theme) {
   .mat-toolbar {
@@ -20,7 +21,8 @@
 }
 
 html {
-  @include mat.core-theme(theme.$rose-theme);
+  @include mat.elevation-classes();
+  @include mat.app-background();
   @include mat.toolbar-theme(theme.$rose-theme);
   @include mat.button-theme(theme.$rose-theme);
   @include mat.tree-theme(theme.$rose-theme);