diff --git a/apps/components/src/app/app.routes.ts b/apps/components/src/app/app.routes.ts
index d5a44691..5f526cc3 100644
--- a/apps/components/src/app/app.routes.ts
+++ b/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},
},
{
diff --git a/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.html b/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.html
new file mode 100644
index 00000000..336e6a5d
--- /dev/null
+++ b/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.html
@@ -0,0 +1,41 @@
+
sci-key-value-field (ɵ)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.scss b/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.scss
similarity index 100%
rename from apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.scss
rename to apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.scss
diff --git a/apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.ts b/apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.ts
similarity index 64%
rename from apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.ts
rename to apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.ts
index 4b997cc0..9ad03a2d 100644
--- a/apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.ts
+++ b/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);
}
}
diff --git a/apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.html b/apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.html
deleted file mode 100644
index 5a7de468..00000000
--- a/apps/components/src/app/sci-params-enter-page/sci-params-enter-page.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-sci-params-enter (ɵ)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/projects/scion/components.internal/params-enter/ng-package.json b/projects/scion/components.internal/key-value-field/ng-package.json
similarity index 100%
rename from projects/scion/components.internal/params-enter/ng-package.json
rename to projects/scion/components.internal/key-value-field/ng-package.json
diff --git a/projects/scion/components.internal/params-enter/src/params-enter.component.html b/projects/scion/components.internal/key-value-field/src/key-value-field.component.html
similarity index 51%
rename from projects/scion/components.internal/params-enter/src/params-enter.component.html
rename to projects/scion/components.internal/key-value-field/src/key-value-field.component.html
index e0a06485..76eafbab 100644
--- a/projects/scion/components.internal/params-enter/src/params-enter.component.html
+++ b/projects/scion/components.internal/key-value-field/src/key-value-field.component.html
@@ -6,18 +6,18 @@ {{title}}
-
-
-
+
+
+
-
+
-
-
+
+
-
-
+
+
diff --git a/projects/scion/components.internal/params-enter/src/params-enter.component.scss b/projects/scion/components.internal/key-value-field/src/key-value-field.component.scss
similarity index 100%
rename from projects/scion/components.internal/params-enter/src/params-enter.component.scss
rename to projects/scion/components.internal/key-value-field/src/key-value-field.component.scss
diff --git a/projects/scion/components.internal/params-enter/src/params-enter.component.ts b/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts
similarity index 59%
rename from projects/scion/components.internal/params-enter/src/params-enter.component.ts
rename to projects/scion/components.internal/key-value-field/src/key-value-field.component.ts
index 078f08e2..1afcaeef 100644
--- a/projects/scion/components.internal/params-enter/src/params-enter.component.ts
+++ b/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts
@@ -18,12 +18,12 @@ 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,
@@ -31,7 +31,7 @@ export const PARAM_VALUE = 'paramValue';
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,7 +58,7 @@ 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.
@@ -66,14 +66,14 @@ export class SciParamsEnterComponent {
}
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();
}
/**
@@ -81,21 +81,21 @@ export class SciParamsEnterComponent {
*
* 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;
}
/**
@@ -103,10 +103,10 @@ export class SciParamsEnterComponent {
*
* By default, if empty, `null` is returned.
*/
- public static toParamsMap(formArray: FormArray, returnNullIfEmpty?: true): Map | null;
- public static toParamsMap(formArray: FormArray, returnNullIfEmpty: false): Map;
- public static toParamsMap(formArray: FormArray, returnNullIfEmpty: boolean): Map | null;
- public static toParamsMap(formArray: FormArray, returnNullIfEmpty: boolean = true): Map | null {
- return Maps.coerce(SciParamsEnterComponent.toParamsDictionary(formArray, returnNullIfEmpty), {coerceNullOrUndefined: false}) ?? null;
+ public static toMap(formArray: FormArray, returnNullIfEmpty?: true): Map | null;
+ public static toMap(formArray: FormArray, returnNullIfEmpty: false): Map;
+ public static toMap(formArray: FormArray, returnNullIfEmpty: boolean): Map | null;
+ public static toMap(formArray: FormArray, returnNullIfEmpty: boolean = true): Map | null {
+ return Maps.coerce(SciKeyValueFieldComponent.toDictionary(formArray, returnNullIfEmpty), {coerceNullOrUndefined: false}) ?? null;
}
}
diff --git a/projects/scion/components.internal/params-enter/src/public_api.ts b/projects/scion/components.internal/key-value-field/src/public_api.ts
similarity index 73%
rename from projects/scion/components.internal/params-enter/src/public_api.ts
rename to projects/scion/components.internal/key-value-field/src/public_api.ts
index 8e56a24b..6e5e236a 100644
--- a/projects/scion/components.internal/params-enter/src/public_api.ts
+++ b/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';
diff --git a/tsconfig.json b/tsconfig.json
index 173febf6..6100533b 100644
--- a/tsconfig.json
+++ b/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"