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 (ɵ)

+ + + + + + + + + + + + + + + + + + + +{{output | json}} 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 (ɵ)

- - - - - - - - - - - - - - - - - - - -{{output | json}} 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"