diff --git a/bun.lockb b/bun.lockb index 1bd4a08..14aea36 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 5d9cce9..834421f 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fee3ccc..2a44b6f 100644 --- a/src/app/app.component.ts +++ b/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(undefined); protected selectedMessage = signal(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()) diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts index 17d75d4..0777718 100644 --- a/src/app/editor/editor.component.ts +++ b/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', - imports: [ - CommonModule, - ProtoFieldComponent, - MatButtonModule, - MatButtonToggleModule, - MatIconModule, - MonacoEditorModule, - FormsModule, - ], - templateUrl: './editor.component.html', - styleUrl: './editor.component.scss' + selector: 'app-editor', + imports: [ + CommonModule, + ProtoFieldComponent, + MatButtonModule, + MatButtonToggleModule, + MatIconModule, + MonacoEditorModule, + FormsModule, + ], + templateUrl: './editor.component.html', + styleUrl: './editor.component.scss', }) export class EditorComponent { + private snackBar = inject(MatSnackBar); + selectedFile = input(); selectedMessage = input.required(); indentSize = input(2); @@ -79,7 +82,9 @@ export class EditorComponent { private code = viewChild>('code'); - constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) { + constructor() { + const sanitizer = inject(DomSanitizer); + effect(() => { const element = this.code()?.nativeElement; if (element) { diff --git a/src/app/proto-definition-selector/definition-editor/definition-editor.component.ts b/src/app/proto-definition-selector/definition-editor/definition-editor.component.ts index 9f735c8..ac60ea5 100644 --- a/src/app/proto-definition-selector/definition-editor/definition-editor.component.ts +++ b/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(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) {} } diff --git a/src/app/proto-definition-selector/proto-definition-selector.component.ts b/src/app/proto-definition-selector/proto-definition-selector.component.ts index eeb8681..b4666bd 100644 --- a/src/app/proto-definition-selector/proto-definition-selector.component.ts +++ b/src/app/proto-definition-selector/proto-definition-selector.component.ts @@ -1,16 +1,5 @@ import { CommonModule } from '@angular/common'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - HostListener, - computed, - output, - signal, - viewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, computed, output, signal, viewChild, inject } 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(); 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) { diff --git a/src/styles.scss b/src/styles.scss index 6bb4c59..900b0b3 100644 --- a/src/styles.scss +++ b/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);