Fix select theming, add object field

src/app/editor/editor.component.ts

@@ -32,7 +32,7 @@ export class EditorComponent {
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(private sanitizer: DomSanitizer) {
+  constructor(sanitizer: DomSanitizer) {
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {

src/app/editor/object-field/object-field.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  model,
+} from '@angular/core';
+import { ObjectMessage } from '../../model/proto-message.model';
+import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+
+@Component({
+  selector: 'app-object-field',
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ProtoFieldComponent)],
+  template: `<h3>
+      {{ label() }} ({{ configuration().messageDefinition.name }})
+    </h3>
+    <div>
+      @for (item of configuration().messageDefinition.values; track $index) {
+      <app-proto-field
+        [label]="item.name"
+        [configuration]="item.configuration"
+        [value]="currentValue()[item.name]"
+        (valueChange)="updateValue(item.name, $event)"
+      ></app-proto-field>
+      }
+    </div>`,
+  styleUrl: './object-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ObjectFieldComponent {
+  label = input<string>();
+  configuration = input.required<ObjectMessage>();
+
+  values = model<Record<string, any>>();
+
+  currentValue = computed(() => this.values() ?? {});
+
+  protected updateValue(key: string, value: any) {
+    const existingValue = { ...this.currentValue() };
+    existingValue[key] = value;
+    this.values.set(existingValue);
+  }
+}

src/app/editor/proto-field/proto-field.component.ts

@@ -17,9 +17,11 @@ import {
   MapMessage,
   MessageConfiguration,
   MessageTypeEnum,
+  ObjectMessage,
 } from '../../model/proto-message.model';
 import { ListFieldComponent } from '../list-field/list-field.component';
 import { MapFieldComponent } from '../map-field/map-field.component';
+import { ObjectFieldComponent } from '../object-field/object-field.component';
 
 @Component({
   selector: 'app-proto-field',
@@ -33,6 +35,7 @@ import { MapFieldComponent } from '../map-field/map-field.component';
     MatFormFieldModule,
     MatSelectModule,
     MatInputModule,
+    ObjectFieldComponent,
   ],
   template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
     <mat-form-field>
@@ -71,7 +74,13 @@ import { MapFieldComponent } from '../map-field/map-field.component';
       [(values)]="value"
       [configuration]="mapConfiguration()"
     ></app-map-field>
-    } @case (MessageTypeEnum.Object) {} @case (MessageTypeEnum.Raw) {}}`,
+    } @case (MessageTypeEnum.Object) {
+    <app-object-field
+      [label]="label()"
+      [(values)]="value"
+      [configuration]="objectConfiguration()"
+    ></app-object-field>
+    } @case (MessageTypeEnum.Raw) {}}`,
   styleUrl: './proto-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -92,5 +101,9 @@ export class ProtoFieldComponent {
     () => this.configuration() as MapMessage
   );
 
+  protected objectConfiguration = computed(
+    () => this.configuration() as ObjectMessage
+  );
+
   protected readonly MessageTypeEnum = MessageTypeEnum;
 }

src/styles.scss

@@ -28,6 +28,7 @@ html {
   @include mat.icon-theme(theme.$rose-theme);
   @include mat.form-field-theme(theme.$rose-theme);
   @include mat.list-theme(theme.$rose-theme);
+  @include mat.select-theme(theme.$rose-theme);
   @include custom-colours(theme.$rose-theme);
 }