@openmfp/ngx 1.2.0 → 1.3.0

package/fesm2022/openmfp-ngx.mjs

@@ -27,6 +27,7 @@ import '@ui5/webcomponents-icons/dist/add.js';
 import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
 import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
+import { InputIcon } from '@fundamental-ngx/ui5-webcomponents/input-icon';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
 import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
@@ -1832,6 +1833,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-dialog\n  data-testid=\"generic-table-card-delete-dialog\"\n  [accessibleName]=\"config()?.title ?? 'Confirm Delete'\"\n  [open]=\"open()\"\n  (ui5BeforeClose)=\"cancelled.emit()\"\n>\n  <div class=\"dialog__header\" slot=\"header\">\n    <ui5-icon class=\"dialog__header-icon\" design=\"Critical\" name=\"alert\" />\n    <ui5-title level=\"H5\">\n      <span\n        [innerHTML]=\"config()?.title ?? 'Confirm Delete' | sanitizeHtml\"\n      ></span>\n    </ui5-title>\n  </div>\n  @if (config()?.message || requiresConfirmation()) {\n    <div class=\"dialog__body\">\n      @if (config()?.message; as message) {\n        <p class=\"dialog__message\" [innerHTML]=\"message | sanitizeHtml\"></p>\n      }\n      @if (requiresConfirmation()) {\n        <p class=\"dialog__message\">\n          <ui5-input\n            class=\"dialog__confirmation-input\"\n            data-testid=\"generic-table-card-delete-confirmation-input\"\n            [formControl]=\"confirmationControl\"\n            [placeholder]=\"\n              config()?.confirmationPlaceholder ?? 'Type to confirm'\n            \"\n            [valueState]=\"\n              confirmationControl.invalid && confirmationControl.dirty\n                ? 'Negative'\n                : 'None'\n            \"\n          />\n        </p>\n      }\n    </div>\n  }\n  <div class=\"dialog__footer\" slot=\"footer\">\n    <ui5-button\n      data-testid=\"generic-table-card-delete-confirm\"\n      design=\"Negative\"\n      [disabled]=\"confirmDisabled()\"\n      (click)=\"onConfirm()\"\n    >\n      {{ config()?.confirmLabel ?? 'Delete' }}\n    </ui5-button>\n    <ui5-button\n      data-testid=\"generic-table-card-delete-cancel\"\n      design=\"Transparent\"\n      (click)=\"cancelled.emit()\"\n    >\n      {{ config()?.cancelLabel ?? 'Cancel' }}\n    </ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.dialog__header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem}.dialog__header-icon{color:var(--sapCriticalColor)}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{margin:0;font-size:.875rem;max-width:320px}.dialog__message--critical{color:var(--sapCriticalElementColor)}.dialog__confirmation-input{display:block;width:100%;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
+function coerceBoolean(value) {
+    if (typeof value === 'boolean')
+        return value;
+    if (typeof value === 'string') {
+        return value.trim().toLowerCase() === 'true';
+    }
+    return false;
+}
+
 const FORBIDDEN_SEGMENTS = new Set(['__proto__', 'prototype', 'constructor']);
 function setPropertyByPath(object, path, value) {
     const segments = path.split('.').filter(Boolean);
@@ -1941,6 +1951,8 @@ class DeclarativeForm {
     form;
     collectionSeeds = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collectionSeeds" }] : /* istanbul ignore next */ []));
+    passwordVisible = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     fb = inject(FormBuilder);
     constructor() {
         this.form = this.fb.group({});
@@ -1977,6 +1989,47 @@ class DeclarativeForm {
             });
         }
     }
+    setSwitchValue($event, field) {
+        const target = $event.target;
+        const control = this.form.controls[field.name];
+        const checked = coerceBoolean(target.checked);
+        control.setValue(checked);
+        control.markAsTouched();
+        control.markAsDirty();
+        this.formValueChange.emit(this.form.value);
+        if (field.validation === 'onChange') {
+            this.fieldChange.emit({
+                fieldProperty: field.name,
+                value: checked,
+            });
+        }
+    }
+    coerceChecked = coerceBoolean;
+    isPasswordVisible(field) {
+        return this.passwordVisible()[field.name] ?? false;
+    }
+    passwordInputType(field) {
+        if (field.inputType !== 'Password') {
+            return 'Text';
+        }
+        return this.isPasswordVisible(field) ? 'Text' : 'Password';
+    }
+    passwordToggleIcon(field) {
+        return this.isPasswordVisible(field) ? 'hide' : 'show';
+    }
+    passwordToggleLabel(field) {
+        return this.isPasswordVisible(field) ? 'Hide value' : 'Show value';
+    }
+    shouldShowPasswordToggle(field) {
+        return field.inputType === 'Password' && (field.showPasswordToggle ?? true);
+    }
+    togglePasswordVisibility(field, event) {
+        event.stopPropagation();
+        this.passwordVisible.update((state) => ({
+            ...state,
+            [field.name]: !this.isPasswordVisible(field),
+        }));
+    }
     onCollectionValueChange(field, entries) {
         const array = this.form.controls[field.name];
         if (!array)
@@ -2017,6 +2070,7 @@ class DeclarativeForm {
     }
     clear() {
         this.form.reset();
+        this.passwordVisible.set({});
     }
     collectionEntries(field) {
         return this.collectionSeeds()[field.name] ?? [];
@@ -2039,6 +2093,9 @@ class DeclarativeForm {
             if (wantsCollection) {
                 this.form.addControl(field.name, this.fb.array([]));
             }
+            else if (field.inputType === 'Switch') {
+                this.form.addControl(field.name, new FormControl(false));
+            }
             else {
                 this.form.addControl(field.name, new FormControl(''));
             }
@@ -2073,7 +2130,13 @@ class DeclarativeForm {
             seeds[field.name] = entries;
         }
         this.collectionSeeds.set(seeds);
-        this.form.patchValue(initialValues, { emitEvent: false });
+        const normalizedValues = { ...initialValues };
+        for (const field of this.fields()) {
+            if (field.inputType === 'Switch') {
+                normalizedValues[field.name] = coerceBoolean(normalizedValues[field.name]);
+            }
+        }
+        this.form.patchValue(normalizedValues, { emitEvent: false });
         this.form.markAsPristine({ emitEvent: false });
         this.form.updateValueAndValidity({ emitEvent: false });
     }
@@ -2095,18 +2158,20 @@ class DeclarativeForm {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DeclarativeForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DeclarativeForm, isStandalone: true, selector: "mfp-declarative-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, fieldErrors: { classPropertyName: "fieldErrors", publicName: "fieldErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange", formSubmit: "formSubmit", formValueChange: "formValueChange" }, ngImport: i0, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n  @for (field of fields(); track field.name) {\n    @let control = form.controls[field.name];\n    <div\n      class=\"inputs\"\n      [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n    >\n      <ui5-label\n        show-colon\n        [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n        [attr.for]=\"'generic-form-field-input-' + field.name\"\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.propertyCollection?.length) {\n        <mfp-form-collection-field\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [fields]=\"field.propertyCollection!\"\n          [initialEntries]=\"collectionEntries(field)\"\n          [label]=\"field.label\"\n          (valueChange)=\"onCollectionValueChange(field, $event)\"\n        />\n        @if (getError(field.name); as error) {\n          <div class=\"collection-error\" role=\"alert\">{{ error }}</div>\n        }\n      } @else if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n          @for (value of [''].concat(field.values ?? []); track value) {\n            <ui5-option\n              [attr.data-testid]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [selected]=\"value === control.value\"\n              [value]=\"value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n        </ui5-input>\n      }\n    </div>\n  }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}.collection-error{color:var(--sapNegativeColor, #b00);font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["accessibleDescription", "accessibleDescriptionRef", "accessibleName", "accessibleNameRef", "disabled", "filter", "maxlength", "name", "noTypeahead", "open", "placeholder", "readonly", "required", "showClearIcon", "showSuggestions", "type", "value", "valueState"], outputs: ["ui5Change", "ui5Close", "ui5Input", "ui5Open", "ui5Select", "ui5SelectionChange"], exportAs: ["ui5Input"] }, { kind: "component", type: Label, selector: "ui5-label, [ui5-label]", inputs: ["for", "required", "showColon", "wrappingType"], exportAs: ["ui5Label"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["accessibleDescription", "accessibleDescriptionRef", "accessibleName", "accessibleNameRef", "disabled", "name", "readonly", "required", "textSeparator", "tooltip", "value", "valueState"], outputs: ["ui5Change", "ui5Close", "ui5LiveChange", "ui5Open"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["additionalText", "icon", "selected", "tooltip", "value"], outputs: ["ui5Click"], exportAs: ["ui5Option"] }, { kind: "component", type: FormCollectionField, selector: "mfp-form-collection-field", inputs: ["fields", "label", "initialEntries"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DeclarativeForm, isStandalone: true, selector: "mfp-declarative-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, fieldErrors: { classPropertyName: "fieldErrors", publicName: "fieldErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange", formSubmit: "formSubmit", formValueChange: "formValueChange" }, ngImport: i0, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n  @for (field of fields(); track field.name) {\n    @let control = form.controls[field.name];\n    <div\n      class=\"inputs\"\n      [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n      [class.inputs--switch]=\"field.inputType === 'Switch'\"\n    >\n      <ui5-label\n        show-colon\n        [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n        [attr.for]=\"\n          field.inputType === 'Switch'\n            ? null\n            : 'generic-form-field-input-' + field.name\n        \"\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.propertyCollection?.length) {\n        <mfp-form-collection-field\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [fields]=\"field.propertyCollection!\"\n          [initialEntries]=\"collectionEntries(field)\"\n          [label]=\"field.label\"\n          (valueChange)=\"onCollectionValueChange(field, $event)\"\n        />\n        @if (getError(field.name); as error) {\n          <div class=\"collection-error\" role=\"alert\">{{ error }}</div>\n        }\n      } @else if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n          @for (value of [''].concat(field.values ?? []); track value) {\n            <ui5-option\n              [attr.data-testid]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [selected]=\"value === control.value\"\n              [value]=\"value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else if (field.inputType === 'Switch') {\n        <ui5-switch\n          class=\"switch\"\n          [accessibleName]=\"field.label\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [checked]=\"coerceChecked(control.value)\"\n          [disabled]=\"field.disabled\"\n          (blur)=\"onFieldBlur(field)\"\n          (ui5Change)=\"setSwitchValue($event, field)\"\n        />\n        @if (getError(field.name); as error) {\n          <div class=\"field-error\" role=\"alert\">{{ error }}</div>\n        }\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [attr.title]=\"field.placeholder || null\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [required]=\"field.required\"\n          [type]=\"passwordInputType(field)\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (shouldShowPasswordToggle(field)) {\n            <ui5-input-icon\n              slot=\"icon\"\n              [accessibleName]=\"passwordToggleLabel(field)\"\n              [attr.data-testid]=\"\n                'generic-form-field-' + field.name + '-password-toggle'\n              \"\n              [name]=\"passwordToggleIcon(field)\"\n              (ui5Click)=\"togglePasswordVisibility(field, $event)\"\n            />\n          }\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n        </ui5-input>\n      }\n      @if (field.hint && !field.propertyCollection?.length) {\n        <div\n          class=\"field-hint\"\n          [attr.data-testid]=\"'generic-form-field-hint-' + field.name\"\n        >\n          {{ field.hint }}\n        </div>\n      }\n    </div>\n  }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}.inputs--switch{flex-direction:row;align-items:center;gap:.75rem}.switch{flex-shrink:0}.inputs--switch .field-hint{flex-basis:100%}.collection-error,.field-error{color:var(--sapNegativeColor, #b00);font-size:.75rem;margin-top:.25rem}.inputs--switch .field-error{flex-basis:100%}.field-hint{color:var(--sapContent_LabelColor, #6a6d70);font-size:.75rem;line-height:1.4;margin-top:.25rem;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["accessibleDescription", "accessibleDescriptionRef", "accessibleName", "accessibleNameRef", "disabled", "filter", "maxlength", "name", "noTypeahead", "open", "placeholder", "readonly", "required", "showClearIcon", "showSuggestions", "type", "value", "valueState"], outputs: ["ui5Change", "ui5Close", "ui5Input", "ui5Open", "ui5Select", "ui5SelectionChange"], exportAs: ["ui5Input"] }, { kind: "component", type: InputIcon, selector: "ui5-input-icon, [ui5-input-icon]", inputs: ["accessibleName", "name"], outputs: ["ui5Click"], exportAs: ["ui5InputIcon"] }, { kind: "component", type: Label, selector: "ui5-label, [ui5-label]", inputs: ["for", "required", "showColon", "wrappingType"], exportAs: ["ui5Label"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["accessibleDescription", "accessibleDescriptionRef", "accessibleName", "accessibleNameRef", "disabled", "name", "readonly", "required", "textSeparator", "tooltip", "value", "valueState"], outputs: ["ui5Change", "ui5Close", "ui5LiveChange", "ui5Open"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["additionalText", "icon", "selected", "tooltip", "value"], outputs: ["ui5Click"], exportAs: ["ui5Option"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["accessibleName", "accessibleNameRef", "checked", "design", "disabled", "name", "readonly", "required", "textOff", "textOn", "tooltip", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { kind: "component", type: FormCollectionField, selector: "mfp-form-collection-field", inputs: ["fields", "label", "initialEntries"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DeclarativeForm, decorators: [{
             type: Component,
             args: [{ selector: 'mfp-declarative-form', imports: [
                         ReactiveFormsModule,
                         Input,
+                        InputIcon,
                         Label,
                         Select,
                         Option,
+                        Switch,
                         FormCollectionField,
-                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n  @for (field of fields(); track field.name) {\n    @let control = form.controls[field.name];\n    <div\n      class=\"inputs\"\n      [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n    >\n      <ui5-label\n        show-colon\n        [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n        [attr.for]=\"'generic-form-field-input-' + field.name\"\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.propertyCollection?.length) {\n        <mfp-form-collection-field\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [fields]=\"field.propertyCollection!\"\n          [initialEntries]=\"collectionEntries(field)\"\n          [label]=\"field.label\"\n          (valueChange)=\"onCollectionValueChange(field, $event)\"\n        />\n        @if (getError(field.name); as error) {\n          <div class=\"collection-error\" role=\"alert\">{{ error }}</div>\n        }\n      } @else if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n          @for (value of [''].concat(field.values ?? []); track value) {\n            <ui5-option\n              [attr.data-testid]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [selected]=\"value === control.value\"\n              [value]=\"value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n        </ui5-input>\n      }\n    </div>\n  }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}.collection-error{color:var(--sapNegativeColor, #b00);font-size:.75rem;margin-top:.25rem}\n"] }]
+                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n  @for (field of fields(); track field.name) {\n    @let control = form.controls[field.name];\n    <div\n      class=\"inputs\"\n      [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n      [class.inputs--switch]=\"field.inputType === 'Switch'\"\n    >\n      <ui5-label\n        show-colon\n        [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n        [attr.for]=\"\n          field.inputType === 'Switch'\n            ? null\n            : 'generic-form-field-input-' + field.name\n        \"\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.propertyCollection?.length) {\n        <mfp-form-collection-field\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [fields]=\"field.propertyCollection!\"\n          [initialEntries]=\"collectionEntries(field)\"\n          [label]=\"field.label\"\n          (valueChange)=\"onCollectionValueChange(field, $event)\"\n        />\n        @if (getError(field.name); as error) {\n          <div class=\"collection-error\" role=\"alert\">{{ error }}</div>\n        }\n      } @else if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n          @for (value of [''].concat(field.values ?? []); track value) {\n            <ui5-option\n              [attr.data-testid]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [selected]=\"value === control.value\"\n              [value]=\"value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else if (field.inputType === 'Switch') {\n        <ui5-switch\n          class=\"switch\"\n          [accessibleName]=\"field.label\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [checked]=\"coerceChecked(control.value)\"\n          [disabled]=\"field.disabled\"\n          (blur)=\"onFieldBlur(field)\"\n          (ui5Change)=\"setSwitchValue($event, field)\"\n        />\n        @if (getError(field.name); as error) {\n          <div class=\"field-error\" role=\"alert\">{{ error }}</div>\n        }\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [attr.title]=\"field.placeholder || null\"\n          [disabled]=\"field.disabled\"\n          [id]=\"'generic-form-field-input-' + field.name\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [required]=\"field.required\"\n          [type]=\"passwordInputType(field)\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (shouldShowPasswordToggle(field)) {\n            <ui5-input-icon\n              slot=\"icon\"\n              [accessibleName]=\"passwordToggleLabel(field)\"\n              [attr.data-testid]=\"\n                'generic-form-field-' + field.name + '-password-toggle'\n              \"\n              [name]=\"passwordToggleIcon(field)\"\n              (ui5Click)=\"togglePasswordVisibility(field, $event)\"\n            />\n          }\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n        </ui5-input>\n      }\n      @if (field.hint && !field.propertyCollection?.length) {\n        <div\n          class=\"field-hint\"\n          [attr.data-testid]=\"'generic-form-field-hint-' + field.name\"\n        >\n          {{ field.hint }}\n        </div>\n      }\n    </div>\n  }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}.inputs--switch{flex-direction:row;align-items:center;gap:.75rem}.switch{flex-shrink:0}.inputs--switch .field-hint{flex-basis:100%}.collection-error,.field-error{color:var(--sapNegativeColor, #b00);font-size:.75rem;margin-top:.25rem}.inputs--switch .field-error{flex-basis:100%}.field-hint{color:var(--sapContent_LabelColor, #6a6d70);font-size:.75rem;line-height:1.4;margin-top:.25rem;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], fieldErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldErrors", required: false }] }], fieldChange: [{ type: i0.Output, args: ["fieldChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formValueChange: [{ type: i0.Output, args: ["formValueChange"] }] } });
 
 class ResourceFormDialog {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmfp/ngx",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/types/openmfp-ngx.d.ts

@@ -526,6 +526,22 @@ interface FormFieldDefinition {
     values?: string[];
     /** When `true`, the field is disabled (not interactive). */
     disabled?: boolean;
+    /** UI5 input type rendered by `mfp-declarative-form`. */
+    inputType?: 'Text' | 'Password' | 'Switch';
+    /**
+     * When `inputType` is `Password`, renders a show/hide icon inside the input.
+     * Defaults to `true`; set to `false` to keep the field masked without a toggle.
+     */
+    showPasswordToggle?: boolean;
+    /** UI5 input placeholder (functional, not example values). */
+    placeholder?: string;
+    /** Persistent help text below the control; never submitted with the form. */
+    hint?: string;
+    /**
+     * When `true`, the host should omit this field from read queries and skip
+     * empty values on edit submit (e.g. write-only secrets).
+     */
+    writeOnly?: boolean;
     /** Controls when `fieldChange` is emitted for this field. When omitted, `fieldChange` is never emitted. */
     validation?: 'onBlur' | 'onChange';
     /**
@@ -553,6 +569,8 @@ interface FormFieldChangeEvent {
 /** Map of field names to their current validation error messages (`null` = no error). */
 type FormFieldErrors = Record<string, string | null>;
 
+declare function coerceBoolean(value: unknown): boolean;
+
 declare class DeclarativeForm<T extends GenericResource> {
     readonly fields: _angular_core.InputSignal<FormFieldDefinition[]>;
     readonly initialValues: _angular_core.InputSignal<T>;
@@ -562,9 +580,18 @@ declare class DeclarativeForm<T extends GenericResource> {
     readonly formValueChange: _angular_core.OutputEmitterRef<Record<string, unknown>>;
     readonly form: FormGroup;
     protected readonly collectionSeeds: _angular_core.WritableSignal<Record<string, Record<string, unknown>[]>>;
+    private readonly passwordVisible;
     private readonly fb;
     constructor();
     setFormControlValue($event: Event, field: FormFieldDefinition): void;
+    setSwitchValue($event: Event, field: FormFieldDefinition): void;
+    protected readonly coerceChecked: typeof coerceBoolean;
+    isPasswordVisible(field: FormFieldDefinition): boolean;
+    passwordInputType(field: FormFieldDefinition): 'Text' | 'Password';
+    passwordToggleIcon(field: FormFieldDefinition): 'hide' | 'show';
+    passwordToggleLabel(field: FormFieldDefinition): string;
+    shouldShowPasswordToggle(field: FormFieldDefinition): boolean;
+    togglePasswordVisibility(field: FormFieldDefinition, event: Event): void;
     onCollectionValueChange(field: FormFieldDefinition, entries: Record<string, unknown>[]): void;
     getError(name: string): string | null;
     getValueState(name: string): 'None' | 'Negative';