Remove common module, add friendy name editing, add enum options editing, fix list option warning

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -27,20 +26,19 @@ import { ObjectFieldComponent } from '../object-field/object-field.component';
 import { StringFieldComponent } from '../string-field/string-field.component';
 
 @Component({
-    selector: 'app-proto-field',
-    imports: [
-        CommonModule,
-        FormsModule,
-        ListFieldComponent,
-        MapFieldComponent,
-        MatCheckboxModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatInputModule,
-        ObjectFieldComponent,
-        StringFieldComponent,
-    ],
-    template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
+  selector: 'app-proto-field',
+  imports: [
+    FormsModule,
+    ListFieldComponent,
+    MapFieldComponent,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    ObjectFieldComponent,
+    StringFieldComponent,
+  ],
+  template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
     <app-string-field
       [label]="label()"
       [configuration]="stringConfiguration()"
@@ -57,14 +55,17 @@ import { StringFieldComponent } from '../string-field/string-field.component';
         [min]="numericConfiguration().min ?? null"
         [max]="numericConfiguration().max ?? null"
       />
-      <mat-hint *ngIf="number.hasError('min')"
+      @if(number.hasError('min')) {
+      <mat-hint
         >Number should not be less than
         {{ numericConfiguration().min }}</mat-hint
       >
-      <mat-hint *ngIf="number.hasError('max')"
+      } @if(number.hasError('max')) {
+      <mat-hint
         >Number should not greater than
         {{ numericConfiguration().max }}</mat-hint
       >
+      }
     </mat-form-field>
     } @case (MessageTypeEnum.Boolean) {
     <p>
@@ -74,10 +75,11 @@ import { StringFieldComponent } from '../string-field/string-field.component';
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
       <mat-select [(value)]="value">
-        @for(option of enumConfiguration().options; track
-        enumConfiguration()!.options) {
         <mat-option>None</mat-option>
-        <mat-option [value]="option">{{ option }}</mat-option>
+        @for(option of enumConfiguration().options; track option) {
+        <mat-option [value]="option">{{
+          option.friendlyName || option.protoName
+        }}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -100,8 +102,8 @@ import { StringFieldComponent } from '../string-field/string-field.component';
       [configuration]="objectConfiguration()"
     ></app-object-field>
     } @case (MessageTypeEnum.Raw) {}}`,
-    styleUrl: './proto-field.component.scss',
-    changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrl: './proto-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProtoFieldComponent {
   label = input<string>();