refactor(ɵcomponents): rename SciParamsEnterComponent to `SciKeyVal…

…ueFieldComponent`

BREAKING CHANGE: Renaming `SciParamsEnterComponent` introduced a breaking change.

To migrate:
- Import `SciKeyValueFieldComponent` instead of `SciParamsEnterComponent`
- Change input from `paramsFormArray` to `keyValueFormArray`
- Use `SciParamsEnterComponent#toMap` instead of `SciParamsEnterComponent#toParamsMap`
- Use `SciParamsEnterComponent#toDictionary` instead of `SciParamsEnterComponent#toParamsDictionary`

apps/components/src/app/app.routes.ts

@@ -46,8 +46,8 @@ export const routes: Routes = [
     data: {internal: true},
   },
   {
-    path: 'sci-params-enter',
-    loadComponent: () => import('./sci-params-enter-page/sci-params-enter-page.component'),
+    path: 'sci-key-value-field',
+    loadComponent: () => import('./sci-key-value-field-page/sci-key-value-field-page.component'),
     data: {internal: true},
   },
   {

apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.html

@@ -0,0 +1,41 @@
+<h1>sci-key-value-field (ɵ)</h1>
+
+<sci-key-value-field [title]="'title'"
+                     [removable]="true"
+                     [addable]="true"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [title]="'title'"
+                     [removable]="true"
+                     [addable]="false"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [title]="'title'"
+                     [removable]="false"
+                     [addable]="true"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [title]="'title'"
+                     [removable]="false"
+                     [addable]="false"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [removable]="true"
+                     [addable]="true"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [removable]="true"
+                     [addable]="false"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [removable]="false"
+                     [addable]="true"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+<sci-key-value-field [removable]="false"
+                     [addable]="false"
+                     [keyValueFormArray]="formArray">
+</sci-key-value-field>
+
+<button class="print" (click)="onPrint()">Print</button>
+<output *ngIf="output">{{output | json}}</output>

apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.ts → apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.ts

@@ -9,22 +9,22 @@
  */
 import {Component} from '@angular/core';
 import {FormArray, FormBuilder} from '@angular/forms';
-import {SciParamsEnterComponent} from '@scion/components.internal/params-enter';
+import {SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Dictionary} from '@scion/toolkit/util';
 import {JsonPipe, NgIf} from '@angular/common';
 
 @Component({
-  selector: 'sci-params-enter-page',
-  templateUrl: './sci-params-enter-page.component.html',
-  styleUrls: ['./sci-params-enter-page.component.scss'],
+  selector: 'sci-key-value-field-page',
+  templateUrl: './sci-key-value-field-page.component.html',
+  styleUrls: ['./sci-key-value-field-page.component.scss'],
   standalone: true,
   imports: [
     NgIf,
     JsonPipe,
-    SciParamsEnterComponent,
+    SciKeyValueFieldComponent,
   ],
 })
-export default class SciParamsEnterPageComponent {
+export default class SciKeyValueFieldPageComponent {
 
   public formArray: FormArray;
   public output: Dictionary | null = null;
@@ -34,6 +34,6 @@ export default class SciParamsEnterPageComponent {
   }
 
   public onPrint(): void {
-    this.output = SciParamsEnterComponent.toParamsDictionary(this.formArray);
+    this.output = SciKeyValueFieldComponent.toDictionary(this.formArray);
   }
 }

projects/scion/components.internal/params-enter/src/params-enter.component.html → projects/scion/components.internal/key-value-field/src/key-value-field.component.html

@@ -6,18 +6,18 @@ <h2 *ngIf="title">{{title}}</h2>
   <button *ngIf="removable" (click)="onClear()" class="e2e-clear material-icons" type="button" title="Clear all entries">clear</button>
 </header>
 
-<ng-container *ngFor="let paramGroup of paramsFormArray.controls; index as i;">
-  <!-- label -->
-  <ng-container *ngIf="paramGroup.get(PARAM_NAME)!.disabled; then label_readonly; else label_editable"></ng-container>
+<ng-container *ngFor="let keyValueGroup of keyValueFormArray.controls; index as i;">
+  <!-- key -->
+  <ng-container *ngIf="keyValueGroup.get(PARAM_NAME)!.disabled; then key_readonly; else key_editable"></ng-container>
   <!-- value -->
-  <input [formControl]="$any(paramGroup.get(PARAM_VALUE))" [attr.id]="id + '_' + i" class="e2e-value">
+  <input [formControl]="$any(keyValueGroup.get(PARAM_VALUE))" [attr.id]="id + '_' + i" class="e2e-value">
   <!-- 'remove' button -->
   <button *ngIf="removable" class="material-icons e2e-remove" type="button" (click)="onRemove(i)" title="remove entry">remove</button>
 
-  <ng-template #label_readonly>
-    <label [for]="id + '_' + i">{{paramGroup.get(PARAM_NAME)!.value}}</label>
+  <ng-template #key_readonly>
+    <label [for]="id + '_' + i">{{keyValueGroup.get(PARAM_NAME)!.value}}</label>
   </ng-template>
-  <ng-template #label_editable>
-    <input [formControl]="$any(paramGroup.get(PARAM_NAME))" class="e2e-key">
+  <ng-template #key_editable>
+    <input [formControl]="$any(keyValueGroup.get(PARAM_NAME))" class="e2e-key">
   </ng-template>
 </ng-container>

projects/scion/components.internal/params-enter/src/params-enter.component.ts → projects/scion/components.internal/key-value-field/src/key-value-field.component.ts

@@ -18,20 +18,20 @@ export const PARAM_NAME = 'paramName';
 export const PARAM_VALUE = 'paramValue';
 
 /**
- * Allows to enter parameters.
+ * Allows entering key-value pairs.
  */
 @Component({
-  selector: 'sci-params-enter',
-  templateUrl: './params-enter.component.html',
-  styleUrls: ['./params-enter.component.scss'],
+  selector: 'sci-key-value-field',
+  templateUrl: './key-value-field.component.html',
+  styleUrls: ['./key-value-field.component.scss'],
   standalone: true,
   imports: [
     NgIf,
     NgFor,
     ReactiveFormsModule,
   ],
 })
-export class SciParamsEnterComponent {
+export class SciKeyValueFieldComponent {
 
   public readonly PARAM_NAME = PARAM_NAME;
   public readonly PARAM_VALUE = PARAM_VALUE;
@@ -41,7 +41,7 @@ export class SciParamsEnterComponent {
   public title?: string | undefined;
 
   @Input({required: true})
-  public paramsFormArray!: FormArray;
+  public keyValueFormArray!: FormArray;
 
   @Input()
   @HostBinding('class.removable')
@@ -58,55 +58,55 @@ export class SciParamsEnterComponent {
   }
 
   public onRemove(index: number): void {
-    this.paramsFormArray.removeAt(index);
+    this.keyValueFormArray.removeAt(index);
 
     // Focus the component to not lose the focus when the remove button is removed from the DOM.
     // Otherwise, if used in a popup, the popup would be closed because no element is focused anymore.
     this._host.nativeElement.focus({preventScroll: true});
   }
 
   public onAdd(): void {
-    this.paramsFormArray.push(this._formBuilder.group({
+    this.keyValueFormArray.push(this._formBuilder.group({
       [PARAM_NAME]: this._formBuilder.control(''),
       [PARAM_VALUE]: this._formBuilder.control(''),
     }));
   }
 
   public onClear(): void {
-    this.paramsFormArray.clear();
+    this.keyValueFormArray.clear();
   }
 
   /**
    * Creates a dictionary from the form controls in the given `FormArray`.
    *
    * By default, if empty, `null` is returned.
    */
-  public static toParamsDictionary(formArray: FormArray, returnNullIfEmpty?: true): Dictionary | null;
-  public static toParamsDictionary(formArray: FormArray, returnNullIfEmpty: false): Dictionary;
-  public static toParamsDictionary(formArray: FormArray, returnNullIfEmpty: boolean): Dictionary | null;
-  public static toParamsDictionary(formArray: FormArray, returnNullIfEmpty: boolean = true): Dictionary | null {
-    const params: Dictionary = {};
+  public static toDictionary(formArray: FormArray, returnNullIfEmpty?: true): Dictionary | null;
+  public static toDictionary(formArray: FormArray, returnNullIfEmpty: false): Dictionary;
+  public static toDictionary(formArray: FormArray, returnNullIfEmpty: boolean): Dictionary | null;
+  public static toDictionary(formArray: FormArray, returnNullIfEmpty: boolean = true): Dictionary | null {
+    const dictionary: Dictionary = {};
     formArray.controls.forEach(formGroup => {
       const paramName = formGroup.get(PARAM_NAME)!.value;
-      params[paramName] = formGroup.get(PARAM_VALUE)!.value;
+      dictionary[paramName] = formGroup.get(PARAM_VALUE)!.value;
     });
 
-    if (!Object.keys(params).length && returnNullIfEmpty) {
+    if (!Object.keys(dictionary).length && returnNullIfEmpty) {
       return null;
     }
 
-    return params;
+    return dictionary;
   }
 
   /**
    * Creates a {@link Map} from the form controls in the given `FormArray`.
    *
    * By default, if empty, `null` is returned.
    */
-  public static toParamsMap(formArray: FormArray, returnNullIfEmpty?: true): Map<string, any> | null;
-  public static toParamsMap(formArray: FormArray, returnNullIfEmpty: false): Map<string, any>;
-  public static toParamsMap(formArray: FormArray, returnNullIfEmpty: boolean): Map<string, any> | null;
-  public static toParamsMap(formArray: FormArray, returnNullIfEmpty: boolean = true): Map<string, any> | null {
-    return Maps.coerce(SciParamsEnterComponent.toParamsDictionary(formArray, returnNullIfEmpty), {coerceNullOrUndefined: false}) ?? null;
+  public static toMap(formArray: FormArray, returnNullIfEmpty?: true): Map<string, any> | null;
+  public static toMap(formArray: FormArray, returnNullIfEmpty: false): Map<string, any>;
+  public static toMap(formArray: FormArray, returnNullIfEmpty: boolean): Map<string, any> | null;
+  public static toMap(formArray: FormArray, returnNullIfEmpty: boolean = true): Map<string, any> | null {
+    return Maps.coerce(SciKeyValueFieldComponent.toDictionary(formArray, returnNullIfEmpty), {coerceNullOrUndefined: false}) ?? null;
   }
 }

projects/scion/components.internal/params-enter/src/public_api.ts → projects/scion/components.internal/key-value-field/src/public_api.ts

@@ -9,8 +9,8 @@
  */
 
 /*
- * Secondary entrypoint: '@scion/components.internal/params-enter'
+ * Secondary entrypoint: '@scion/components.internal/key-value-field'
  *
  * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
  */
-export {SciParamsEnterComponent} from './params-enter.component';
+export {SciKeyValueFieldComponent} from './key-value-field.component';

tsconfig.json

@@ -97,8 +97,8 @@
     //      "@scion/components.internal/list": [
     //        "projects/scion/components.internal/list/src/public_api"
     //      ],
-    //      "@scion/components.internal/params-enter": [
-    //        "projects/scion/components.internal/params-enter/src/public_api"
+    //      "@scion/components.internal/key-value-field": [
+    //        "projects/scion/components.internal/key-value-field/src/public_api"
     //      ],
     //      "@scion/components.internal/key-value": [
     //        "projects/scion/components.internal/key-value/src/public_api"