Angular Material: OneOf Enum Control Renderer

packages/angular-material/.eslintrc.js

@@ -9,45 +9,54 @@ module.exports = {
   },
   // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
   ignorePatterns: ['/*', '!/src', '!/test', '!/example', '/example/dist'],
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:@angular-eslint/recommended',
-    'plugin:@angular-eslint/template/process-inline-templates',
-    'plugin:prettier/recommended',
-  ],
-  rules: {
-    '@angular-eslint/component-class-suffix': 'off',
-    '@angular-eslint/directive-class-suffix': 'off',
-    '@angular-eslint/no-conflicting-lifecycle': 'warn',
-    '@typescript-eslint/no-explicit-any': 'off',
-    // Base rule must be disabled to avoid incorrect errors
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'warn', // or "error"
-      {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^_',
-      },
-    ],
-    // workaround for
-    // https://github.com/import-js/eslint-plugin-import/issues/1810:
-    'import/no-unresolved': [
-      'error',
-      {
-        ignore: [
-          '@angular/cdk/.*',
-          '@angular/core/.*',
-          '@angular/material/.*',
-          '@angular/platform-browser/.*',
-          '@angular/platform-browser-dynamic/.*',
-          'core-js/es7/.*',
-          'zone.js/.*',
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'plugin:@angular-eslint/recommended',
+        'plugin:@angular-eslint/template/process-inline-templates',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        '@angular-eslint/component-class-suffix': 'off',
+        '@angular-eslint/directive-class-suffix': 'off',
+        '@angular-eslint/no-conflicting-lifecycle': 'warn',
+        '@typescript-eslint/no-explicit-any': 'off',
+        // Base rule must be disabled to avoid incorrect errors
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'warn', // or "error"
+          {
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_',
+            caughtErrorsIgnorePattern: '^_',
+          },
+        ],
+        // workaround for
+        // https://github.com/import-js/eslint-plugin-import/issues/1810:
+        'import/no-unresolved': [
+          'error',
+          {
+            ignore: [
+              '@angular/cdk/.*',
+              '@angular/core/.*',
+              '@angular/material/.*',
+              '@angular/platform-browser/.*',
+              '@angular/platform-browser-dynamic/.*',
+              'core-js/es7/.*',
+              'zone.js/.*',
+            ],
+          },
         ],
       },
-    ],
-  },
+    },
+    {
+      files: '*.html',
+      extends: ['plugin:@angular-eslint/template/recommended'],
+    }
+  ],
 };

packages/angular-material/src/library/controls/enum.renderer.html

@@ -0,0 +1,30 @@
+<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>

packages/angular-material/src/library/controls/enum.renderer.scss

@@ -0,0 +1,7 @@
+:host {
+    display: flex;
+    flex-direction: row;
+}
+mat-form-field {
+    flex: 1 1 auto;
+}

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,
@@ -53,50 +55,9 @@ 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;
-      }
-    `,
-  ],
+  selector: 'OneOfEnumControlRenderer',
+  templateUrl: './enum.renderer.html',
+  styleUrls: ['./enum.renderer.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
@@ -106,11 +67,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 +84,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 +170,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
+);
 
-    return options.every((item) => typeof item === 'string')
-      ? options.map((str) => {
-          return {
-            label: str,
-            value: str,
-          } satisfies EnumOption;
-        })
-      : options;
+@Component({
+  selector: 'EnumControlRenderer, AutocompleteControlRenderer',
+  templateUrl: './enum.renderer.html',
+  styleUrls: ['./enum.renderer.scss'],
+  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,
+      };
+    });
+  }
+
+  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>