Angular Material: OneOf Enum Control Renderer

packages/angular-material/src/library/controls/autocomplete.renderer.ts → packages/angular-material/src/library/controls/enum.renderer.ts

@@ -36,8 +36,10 @@ import {
   ControlElement,
   EnumOption,
   isEnumControl,
+  isOneOfEnumControl,
   JsonFormsState,
   mapStateToEnumControlProps,
+  mapStateToOneOfEnumControlProps,
   OwnPropsOfControl,
   OwnPropsOfEnum,
   RankedTester,
@@ -52,51 +54,53 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
-@Component({
-  selector: 'AutocompleteControlRenderer',
-  template: `
-    <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
-      <mat-label>{{ label }}</mat-label>
-      <input
-        matInput
-        type="text"
-        (change)="onChange($event)"
-        [id]="id"
-        [formControl]="form"
-        [matAutocomplete]="auto"
-        (keydown)="updateFilter($event)"
-        (focus)="focused = true"
-        (focusout)="focused = false"
-      />
-      <mat-autocomplete
-        autoActiveFirstOption
-        #auto="matAutocomplete"
-        (optionSelected)="onSelect($event)"
-        [displayWith]="displayFn"
-      >
-        @for (option of filteredOptions | async; track option.value) {
-        <mat-option [value]="option">
-          {{ option.label }}
-        </mat-option>
-        }
-      </mat-autocomplete>
-      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
-        description
-      }}</mat-hint>
-      <mat-error>{{ error }}</mat-error>
-    </mat-form-field>
-  `,
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: row;
-      }
-      mat-form-field {
-        flex: 1 1 auto;
+const template = `
+  <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
+    <mat-label>{{ label }}</mat-label>
+    <input
+      matInput
+      type="text"
+      (change)="onChange($event)"
+      [id]="id"
+      [formControl]="form"
+      [matAutocomplete]="auto"
+      (keydown)="updateFilter($event)"
+      (focus)="focused = true"
+      (focusout)="focused = false"
+    />
+    <mat-autocomplete
+      autoActiveFirstOption
+      #auto="matAutocomplete"
+      (optionSelected)="onSelect($event)"
+      [displayWith]="displayFn"
+    >
+      @for (option of filteredOptions | async; track option.value) {
+      <mat-option [value]="option">
+        {{ option.label }}
+      </mat-option>
       }
-    `,
-  ],
+    </mat-autocomplete>
+    <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
+      description
+    }}</mat-hint>
+    <mat-error>{{ error }}</mat-error>
+  </mat-form-field>
+`;
+
+const style = `
+  :host {
+    display: flex;
+    flex-direction: row;
+  }
+  mat-form-field {
+    flex: 1 1 auto;
+  }
+`;
+
+@Component({
+  selector: 'OneOfEnumControlRenderer',
+  template,
+  styles: [style],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
@@ -106,11 +110,11 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
     MatAutocompleteModule,
   ],
 })
-export class AutocompleteControlRenderer
+export class OneOfEnumControlRenderer
   extends JsonFormsControl
   implements OnInit
 {
-  @Input() options?: EnumOption[] | string[];
+  @Input() options?: EnumOption[];
   valuesToTranslatedOptions?: Map<string, EnumOption>;
   filteredOptions: Observable<EnumOption[]>;
   shouldFilter: boolean;
@@ -123,7 +127,7 @@ export class AutocompleteControlRenderer
   protected override mapToProps(
     state: JsonFormsState
   ): StatePropsOfControl & OwnPropsOfEnum {
-    return mapStateToEnumControlProps(state, this.getOwnProps());
+    return mapStateToOneOfEnumControlProps(state, this.getOwnProps());
   }
 
   getEventValue = (event: any) => event.target.value;
@@ -209,29 +213,51 @@ export class AutocompleteControlRenderer
   protected getOwnProps(): OwnPropsOfControl & OwnPropsOfEnum {
     return {
       ...super.getOwnProps(),
-      options: this.stringOptionsToEnumOptions(this.options),
+      options: this.options,
     };
   }
+}
 
-  /**
-   * For {@link options} input backwards compatibility
-   */
-  protected stringOptionsToEnumOptions(
-    options: typeof this.options
-  ): EnumOption[] | undefined {
-    if (!options) {
-      return undefined;
-    }
+export const oneOfEnumControlTester: RankedTester = rankWith(
+  5,
+  isOneOfEnumControl
+);
+
+@Component({
+  selector: 'EnumControlRenderer, AutocompleteControlRenderer',
+  template,
+  styles: [style],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+  ],
+})
+export class EnumControlRenderer extends OneOfEnumControlRenderer {
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('options')
+  set stringOptions(strOptions: string[]) {
+    this.options = strOptions.map((str) => {
+      return {
+        label: str,
+        value: str,
+      };
+    });
+  }
 
-    return options.every((item) => typeof item === 'string')
-      ? options.map((str) => {
-          return {
-            label: str,
-            value: str,
-          } satisfies EnumOption;
-        })
-      : options;
+  protected override mapToProps(
+    state: JsonFormsState
+  ): StatePropsOfControl & OwnPropsOfEnum {
+    return mapStateToEnumControlProps(state, this.getOwnProps());
   }
 }
 
+/**
+ * For {@link AutocompleteControlRenderer} class name backwards compatibility
+ */
+export { EnumControlRenderer as AutocompleteControlRenderer };
+
 export const enumControlTester: RankedTester = rankWith(2, isEnumControl);

packages/angular-material/src/library/controls/index.ts

@@ -29,4 +29,4 @@ export * from './number.renderer';
 export * from './range.renderer';
 export * from './date.renderer';
 export * from './toggle.renderer';
-export * from './autocomplete.renderer';
+export * from './enum.renderer';

packages/angular-material/src/library/index.ts

@@ -54,9 +54,11 @@ import {
   ToggleControlRendererTester,
 } from './controls/toggle.renderer';
 import {
-  AutocompleteControlRenderer,
+  EnumControlRenderer,
   enumControlTester,
-} from './controls/autocomplete.renderer';
+  OneOfEnumControlRenderer,
+  oneOfEnumControlTester,
+} from './controls/enum.renderer';
 import {
   ObjectControlRenderer,
   ObjectControlRendererTester,
@@ -106,7 +108,8 @@ export const angularMaterialRenderers: {
   { tester: RangeControlRendererTester, renderer: RangeControlRenderer },
   { tester: DateControlRendererTester, renderer: DateControlRenderer },
   { tester: ToggleControlRendererTester, renderer: ToggleControlRenderer },
-  { tester: enumControlTester, renderer: AutocompleteControlRenderer },
+  { tester: enumControlTester, renderer: EnumControlRenderer },
+  { tester: oneOfEnumControlTester, renderer: OneOfEnumControlRenderer },
   { tester: ObjectControlRendererTester, renderer: ObjectControlRenderer },
   // layouts
   { tester: verticalLayoutTester, renderer: VerticalLayoutRenderer },

packages/angular-material/src/library/module.ts

@@ -45,9 +45,12 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { JsonFormsModule } from '@jsonforms/angular';
-import { AutocompleteControlRenderer } from './controls/autocomplete.renderer';
 import { BooleanControlRenderer } from './controls/boolean.renderer';
 import { DateControlRenderer } from './controls/date.renderer';
+import {
+  EnumControlRenderer,
+  OneOfEnumControlRenderer,
+} from './controls/enum.renderer';
 import { NumberControlRenderer } from './controls/number.renderer';
 import { RangeControlRenderer } from './controls/range.renderer';
 import { TextAreaRenderer } from './controls/textarea.renderer';
@@ -104,7 +107,8 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     MasterListComponent,
     JsonFormsDetailComponent,
     ObjectControlRenderer,
-    AutocompleteControlRenderer,
+    EnumControlRenderer,
+    OneOfEnumControlRenderer,
     TableRenderer,
     ArrayLayoutRenderer,
     LayoutChildrenRenderPropsPipe,
@@ -144,7 +148,8 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     MasterListComponent,
     JsonFormsDetailComponent,
     ObjectControlRenderer,
-    AutocompleteControlRenderer,
+    EnumControlRenderer,
+    OneOfEnumControlRenderer,
     TableRenderer,
     ArrayLayoutRenderer,
     LayoutChildrenRenderPropsPipe,

packages/angular-material/src/library/other/master-detail/master.ts

@@ -101,7 +101,7 @@ export const removeSchemaKeywords = (path: string) => {
               mat-icon-button
               class="button item-button hide"
               (click)="onDeleteClick(i)"
-              [ngClass]="{ show: highlightedIdx == i }"
+              [ngClass]="{ show: highlightedIdx === i }"
               *ngIf="isEnabled()"
             >
               <mat-icon mat-list-icon>delete</mat-icon>

packages/angular-material/test/array-layout.spec.ts

@@ -125,11 +125,11 @@ describe('Array layout', () => {
 
       const arrayLayoutElement: HTMLElement = fixture.nativeElement;
       const matBadgeElement =
-        arrayLayoutElement.querySelector('.mat-badge-content')!;
+        arrayLayoutElement.querySelector('.mat-badge-content');
 
       const noDataElement = arrayLayoutElement.children[0].children[1];
 
-      expect(matBadgeElement.textContent).toBe('1');
+      expect(matBadgeElement?.textContent).toBe('1');
       expect(noDataElement.textContent).toBe('No data');
     });
   });
@@ -149,9 +149,9 @@ describe('Array layout', () => {
 
       const arrayLayoutElement: HTMLElement = fixture.nativeElement;
       const matBadgeElement =
-        arrayLayoutElement.querySelector('.mat-badge-content')!;
+        arrayLayoutElement.querySelector('.mat-badge-content');
 
-      expect(matBadgeElement.textContent).toBe('2');
+      expect(matBadgeElement?.textContent).toBe('2');
     });
   });
 
@@ -170,9 +170,9 @@ describe('Array layout', () => {
 
       const arrayLayoutElement: HTMLElement = fixture.nativeElement;
       const matBadgeElement =
-        arrayLayoutElement.querySelector('.mat-badge-content')!;
+        arrayLayoutElement.querySelector('.mat-badge-content');
 
-      expect(matBadgeElement.textContent).toBe('4');
+      expect(matBadgeElement?.textContent).toBe('4');
     });
   });
 });