@openmfp/ngx 1.2.0 → 1.4.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 {
@@ -2230,6 +2295,48 @@ const decodeBase64 = (base64) => {
         throw new Error('Failed to decode Base64 string');
     }
 };
+/**
+ * Replaces every `{{path}}` placeholder in `template` with the value resolved
+ * from `resource` via the given path (dot-notation). Unresolved placeholders
+ * become an empty string.
+ *
+ * After substitution, the resulting href is resolved against `baseHref`
+ * (typically the current `window.location.href`):
+ * - An absolute URL (with a protocol, e.g. `https://…`) is returned unchanged.
+ * - A relative path is resolved via the standard URL algorithm:
+ *   a leading `/` resolves from the origin root, otherwise it resolves
+ *   relative to the current path.
+ */
+const resolveLinkTemplate = (template, resource, baseHref = window.location.href) => {
+    const substituted = template.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (_match, path) => {
+        if (!resource)
+            return '';
+        const value = getResourceValueByJsonPath(resource, { property: path });
+        return value == null ? '' : String(value);
+    });
+    if (!substituted || isAbsoluteUrl(substituted)) {
+        return substituted;
+    }
+    try {
+        return new URL(substituted, baseHref + '/').href;
+    }
+    catch {
+        return substituted;
+    }
+};
+/**
+ * True when `value` parses as an absolute URL on its own (has a protocol,
+ * e.g. `https://…`, `mailto:…`). Relative paths return `false`.
+ */
+const isAbsoluteUrl = (value) => {
+    try {
+        new URL(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
 
 function getFieldValue(field, resource) {
     if (resource) {
@@ -2331,16 +2438,18 @@ class LinkValue {
     ...(ngDevMode ? [{ debugName: "urlValue" }] : /* istanbul ignore next */ []));
     testId = input('link-value-link', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+    displayValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "displayValue" }] : /* istanbul ignore next */ []));
     stopPropagation(event) {
         event.stopPropagation();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LinkValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: LinkValue, isStandalone: true, selector: "mfp-link-value", inputs: { urlValue: { classPropertyName: "urlValue", publicName: "urlValue", isSignal: true, isRequired: true, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ui5-link\n  target=\"_blank\"\n  [attr.data-testid]=\"testId()\"\n  [href]=\"urlValue()\"\n  [tooltip]=\"urlValue()\"\n  (click)=\"stopPropagation($event)\"\n  >Link</ui5-link\n>\n", styles: [""], dependencies: [{ kind: "component", type: Link, selector: "ui5-link, [ui5-link]", inputs: ["accessibilityAttributes", "accessibleDescription", "accessibleName", "accessibleNameRef", "accessibleRole", "design", "disabled", "endIcon", "href", "icon", "interactiveAreaSize", "target", "tooltip", "wrappingType"], outputs: ["ui5Click"], exportAs: ["ui5Link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: LinkValue, isStandalone: true, selector: "mfp-link-value", inputs: { urlValue: { classPropertyName: "urlValue", publicName: "urlValue", isSignal: true, isRequired: true, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ui5-link\n  target=\"_blank\"\n  [attr.data-testid]=\"testId()\"\n  [href]=\"urlValue()\"\n  [tooltip]=\"urlValue()\"\n  (click)=\"stopPropagation($event)\"\n  >{{ displayValue() || urlValue() }}</ui5-link\n>\n", styles: [""], dependencies: [{ kind: "component", type: Link, selector: "ui5-link, [ui5-link]", inputs: ["accessibilityAttributes", "accessibleDescription", "accessibleName", "accessibleNameRef", "accessibleRole", "design", "disabled", "endIcon", "href", "icon", "interactiveAreaSize", "target", "tooltip", "wrappingType"], outputs: ["ui5Click"], exportAs: ["ui5Link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LinkValue, decorators: [{
             type: Component,
-            args: [{ selector: 'mfp-link-value', imports: [Link], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-link\n  target=\"_blank\"\n  [attr.data-testid]=\"testId()\"\n  [href]=\"urlValue()\"\n  [tooltip]=\"urlValue()\"\n  (click)=\"stopPropagation($event)\"\n  >Link</ui5-link\n>\n" }]
-        }], propDecorators: { urlValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
+            args: [{ selector: 'mfp-link-value', imports: [Link], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-link\n  target=\"_blank\"\n  [attr.data-testid]=\"testId()\"\n  [href]=\"urlValue()\"\n  [tooltip]=\"urlValue()\"\n  (click)=\"stopPropagation($event)\"\n  >{{ displayValue() || urlValue() }}</ui5-link\n>\n" }]
+        }], propDecorators: { urlValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }] } });
 
 /**
  * Read-only display for a `propertyCollection` field. Renders the resolved
@@ -2483,8 +2592,17 @@ class ResourceField {
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     isBoolLike = computed(() => this.boolValue() !== undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isBoolLike" }] : /* istanbul ignore next */ []));
-    isUrlValue = computed(() => this.checkValidUrl(this.stringValue()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isUrlValue" }] : /* istanbul ignore next */ []));
+    linkSettings = computed(() => this.uiSettings()?.linkSettings, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkSettings" }] : /* istanbul ignore next */ []));
+    linkHref = computed(() => {
+        const template = this.linkSettings()?.link;
+        return template
+            ? resolveLinkTemplate(template, this.resource())
+            : this.stringValue();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkHref" }] : /* istanbul ignore next */ []));
+    linkText = computed(() => this.linkSettings()?.text ?? this.stringValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkText" }] : /* istanbul ignore next */ []));
     testId = computed(() => `resource-field-${this.fieldDefinition().property}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
     buttonDisabled = computed(() => this.resource()?.isAvailable === false, /* @ts-ignore */
@@ -2552,18 +2670,6 @@ class ResourceField {
         }
         return [];
     }
-    checkValidUrl(value) {
-        if (!value) {
-            return false;
-        }
-        try {
-            new URL(value);
-            return true;
-        }
-        catch {
-            return false;
-        }
-    }
     copyValue(event) {
         event.stopPropagation();
         navigator.clipboard.writeText(this.value() || '').then(() => {
@@ -2585,7 +2691,7 @@ class ResourceField {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ResourceField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ResourceField, isStandalone: true, selector: "mfp-resource-field", inputs: { fieldDefinition: { classPropertyName: "fieldDefinition", publicName: "fieldDefinition", isSignal: true, isRequired: true, transformFunction: null }, resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class.resource-field--collection": "isCollection()" } }, ngImport: i0, template: "@if (canRenderField()) {\n  @if (isCollection()) {\n    <mfp-resource-collection-field\n      [fieldDefinition]=\"fieldDefinition()\"\n      [resource]=\"resource()\"\n    />\n  } @else {\n    @let displayType = displayAs();\n    <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n      @if (displayType === 'secret') {\n        <span class=\"secret-value-container\">\n          <mfp-secret-value\n            [isVisible]=\"isVisible()\"\n            [testId]=\"testId() + '-secret'\"\n            [value]=\"value()\"\n          />\n          <ui5-icon\n            class=\"toggle-icon\"\n            mode=\"Interactive\"\n            [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n            [attr.data-testid]=\"testId() + '-secret-toggle'\"\n            [name]=\"isVisible() ? 'hide' : 'show'\"\n            (click)=\"toggleVisibility($event)\"\n          />\n        </span>\n      } @else if (displayType === 'boolIcon' && isBoolLike()) {\n        <mfp-boolean-value\n          [boolValue]=\"boolValue()!\"\n          [testId]=\"testId() + '-boolean'\"\n        />\n      } @else if (displayType === 'link' && isUrlValue()) {\n        <mfp-link-value\n          [testId]=\"testId() + '-link'\"\n          [urlValue]=\"stringValue()!\"\n        />\n      } @else if (displayType === 'tooltip') {\n        <ui5-icon\n          [accessibleName]=\"stringValue()!\"\n          [attr.data-testid]=\"testId() + '-tooltip'\"\n          [name]=\"tooltipIcon() ?? 'hint'\"\n          [showTooltip]=\"true\"\n        />\n      } @else if (displayType === 'alert') {\n        @if (!value()) {\n          <ui5-icon\n            design=\"Critical\"\n            name=\"alert\"\n            [accessibleName]=\"resource()?.accessibleName ?? ''\"\n            [attr.data-testid]=\"testId() + '-icon'\"\n            [showTooltip]=\"true\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        }\n      } @else if (displayType === 'img' && value()) {\n        <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n      } @else if (displayType === 'button') {\n        @let buttonSettings = uiSettings()?.buttonSettings;\n        <ui5-button\n          [accessibleName]=\"buttonAccessibleName()\"\n          [attr.data-testid]=\"testId() + '-button'\"\n          [design]=\"buttonSettings?.design\"\n          [disabled]=\"buttonDisabled()\"\n          [endIcon]=\"buttonSettings?.endIcon\"\n          [icon]=\"buttonSettings?.icon\"\n          [tooltip]=\"buttonSettings?.tooltip\"\n          (click)=\"buttonClicked($event)\"\n          >{{ buttonSettings?.text }}</ui5-button\n        >&nbsp;\n      } @else if (displayType === 'tag') {\n        <mfp-tag-list-value\n          [tagSettings]=\"uiSettings()?.tagSettings\"\n          [tags]=\"tags()\"\n          [testId]=\"testId() + '-tags'\"\n        />\n      } @else {\n        {{ displayValue() }}\n      }\n    </span>\n\n    @if (withCopyButton()) {\n      <ui5-icon\n        class=\"toggle-icon\"\n        mode=\"Interactive\"\n        [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n        [attr.data-testid]=\"testId() + '-copy'\"\n        [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n        [name]=\"copySuccess() ? 'accept' : 'copy'\"\n        (click)=\"copyValue($event)\"\n      />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host(.resource-field--collection){display:block;width:100%}.secret-value-container{display:flex;align-items:center;gap:.25rem}.toggle-icon{cursor:pointer;transition:color .2s ease;padding:.25rem}.toggle-icon:hover{color:var(--sapButton_Hover_TextColor, #0854a0)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => Icon), selector: "ui5-icon, [ui5-icon]", inputs: ["accessibleName", "design", "mode", "name", "showTooltip"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: i0.forwardRef(() => BooleanValue), selector: "mfp-boolean-value", inputs: ["boolValue", "testId"] }, { kind: "component", type: i0.forwardRef(() => LinkValue), selector: "mfp-link-value", inputs: ["urlValue", "testId"] }, { kind: "component", type: i0.forwardRef(() => SecretValue), selector: "mfp-secret-value", inputs: ["value", "isVisible", "testId"] }, { kind: "component", type: i0.forwardRef(() => Button), selector: "ui5-button, [ui5-button]", inputs: ["accessibilityAttributes", "accessibleDescription", "accessibleName", "accessibleNameRef", "accessibleRole", "design", "disabled", "endIcon", "form", "icon", "loading", "loadingDelay", "submits", "tooltip", "type"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: i0.forwardRef(() => TagListValue), selector: "mfp-tag-list-value", inputs: ["tags", "tagSettings", "testId"] }, { kind: "component", type: i0.forwardRef(() => ResourceCollectionField), selector: "mfp-resource-collection-field", inputs: ["fieldDefinition", "resource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ResourceField, isStandalone: true, selector: "mfp-resource-field", inputs: { fieldDefinition: { classPropertyName: "fieldDefinition", publicName: "fieldDefinition", isSignal: true, isRequired: true, transformFunction: null }, resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class.resource-field--collection": "isCollection()" } }, ngImport: i0, template: "@if (canRenderField()) {\n  @if (isCollection()) {\n    <mfp-resource-collection-field\n      [fieldDefinition]=\"fieldDefinition()\"\n      [resource]=\"resource()\"\n    />\n  } @else {\n    @let displayType = displayAs();\n    <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n      @if (displayType === 'secret') {\n        <span class=\"secret-value-container\">\n          <mfp-secret-value\n            [isVisible]=\"isVisible()\"\n            [testId]=\"testId() + '-secret'\"\n            [value]=\"value()\"\n          />\n          <ui5-icon\n            class=\"toggle-icon\"\n            mode=\"Interactive\"\n            [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n            [attr.data-testid]=\"testId() + '-secret-toggle'\"\n            [name]=\"isVisible() ? 'hide' : 'show'\"\n            (click)=\"toggleVisibility($event)\"\n          />\n        </span>\n      } @else if (displayType === 'boolIcon' && isBoolLike()) {\n        <mfp-boolean-value\n          [boolValue]=\"boolValue()!\"\n          [testId]=\"testId() + '-boolean'\"\n        />\n      } @else if (displayType === 'link' && linkHref()) {\n        <mfp-link-value\n          [displayValue]=\"linkText()\"\n          [testId]=\"testId() + '-link'\"\n          [urlValue]=\"linkHref()!\"\n        />\n      } @else if (displayType === 'tooltip') {\n        <ui5-icon\n          [accessibleName]=\"stringValue()!\"\n          [attr.data-testid]=\"testId() + '-tooltip'\"\n          [name]=\"tooltipIcon() ?? 'hint'\"\n          [showTooltip]=\"true\"\n        />\n      } @else if (displayType === 'alert') {\n        @if (!value()) {\n          <ui5-icon\n            design=\"Critical\"\n            name=\"alert\"\n            [accessibleName]=\"resource()?.accessibleName ?? ''\"\n            [attr.data-testid]=\"testId() + '-icon'\"\n            [showTooltip]=\"true\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        }\n      } @else if (displayType === 'img' && value()) {\n        <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n      } @else if (displayType === 'button') {\n        @let buttonSettings = uiSettings()?.buttonSettings;\n        <ui5-button\n          [accessibleName]=\"buttonAccessibleName()\"\n          [attr.data-testid]=\"testId() + '-button'\"\n          [design]=\"buttonSettings?.design\"\n          [disabled]=\"buttonDisabled()\"\n          [endIcon]=\"buttonSettings?.endIcon\"\n          [icon]=\"buttonSettings?.icon\"\n          [tooltip]=\"buttonSettings?.tooltip\"\n          (click)=\"buttonClicked($event)\"\n          >{{ buttonSettings?.text }}</ui5-button\n        >&nbsp;\n      } @else if (displayType === 'tag') {\n        <mfp-tag-list-value\n          [tagSettings]=\"uiSettings()?.tagSettings\"\n          [tags]=\"tags()\"\n          [testId]=\"testId() + '-tags'\"\n        />\n      } @else {\n        {{ displayValue() }}\n      }\n    </span>\n\n    @if (withCopyButton()) {\n      <ui5-icon\n        class=\"toggle-icon\"\n        mode=\"Interactive\"\n        [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n        [attr.data-testid]=\"testId() + '-copy'\"\n        [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n        [name]=\"copySuccess() ? 'accept' : 'copy'\"\n        (click)=\"copyValue($event)\"\n      />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host(.resource-field--collection){display:block;width:100%}.secret-value-container{display:flex;align-items:center;gap:.25rem}.toggle-icon{cursor:pointer;transition:color .2s ease;padding:.25rem}.toggle-icon:hover{color:var(--sapButton_Hover_TextColor, #0854a0)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => Icon), selector: "ui5-icon, [ui5-icon]", inputs: ["accessibleName", "design", "mode", "name", "showTooltip"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: i0.forwardRef(() => BooleanValue), selector: "mfp-boolean-value", inputs: ["boolValue", "testId"] }, { kind: "component", type: i0.forwardRef(() => LinkValue), selector: "mfp-link-value", inputs: ["urlValue", "testId", "displayValue"] }, { kind: "component", type: i0.forwardRef(() => SecretValue), selector: "mfp-secret-value", inputs: ["value", "isVisible", "testId"] }, { kind: "component", type: i0.forwardRef(() => Button), selector: "ui5-button, [ui5-button]", inputs: ["accessibilityAttributes", "accessibleDescription", "accessibleName", "accessibleNameRef", "accessibleRole", "design", "disabled", "endIcon", "form", "icon", "loading", "loadingDelay", "submits", "tooltip", "type"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: i0.forwardRef(() => TagListValue), selector: "mfp-tag-list-value", inputs: ["tags", "tagSettings", "testId"] }, { kind: "component", type: i0.forwardRef(() => ResourceCollectionField), selector: "mfp-resource-collection-field", inputs: ["fieldDefinition", "resource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ResourceField, decorators: [{
             type: Component,
@@ -2603,7 +2709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         forwardRef(() => ResourceCollectionField),
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         '[class.resource-field--collection]': 'isCollection()',
-                    }, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (canRenderField()) {\n  @if (isCollection()) {\n    <mfp-resource-collection-field\n      [fieldDefinition]=\"fieldDefinition()\"\n      [resource]=\"resource()\"\n    />\n  } @else {\n    @let displayType = displayAs();\n    <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n      @if (displayType === 'secret') {\n        <span class=\"secret-value-container\">\n          <mfp-secret-value\n            [isVisible]=\"isVisible()\"\n            [testId]=\"testId() + '-secret'\"\n            [value]=\"value()\"\n          />\n          <ui5-icon\n            class=\"toggle-icon\"\n            mode=\"Interactive\"\n            [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n            [attr.data-testid]=\"testId() + '-secret-toggle'\"\n            [name]=\"isVisible() ? 'hide' : 'show'\"\n            (click)=\"toggleVisibility($event)\"\n          />\n        </span>\n      } @else if (displayType === 'boolIcon' && isBoolLike()) {\n        <mfp-boolean-value\n          [boolValue]=\"boolValue()!\"\n          [testId]=\"testId() + '-boolean'\"\n        />\n      } @else if (displayType === 'link' && isUrlValue()) {\n        <mfp-link-value\n          [testId]=\"testId() + '-link'\"\n          [urlValue]=\"stringValue()!\"\n        />\n      } @else if (displayType === 'tooltip') {\n        <ui5-icon\n          [accessibleName]=\"stringValue()!\"\n          [attr.data-testid]=\"testId() + '-tooltip'\"\n          [name]=\"tooltipIcon() ?? 'hint'\"\n          [showTooltip]=\"true\"\n        />\n      } @else if (displayType === 'alert') {\n        @if (!value()) {\n          <ui5-icon\n            design=\"Critical\"\n            name=\"alert\"\n            [accessibleName]=\"resource()?.accessibleName ?? ''\"\n            [attr.data-testid]=\"testId() + '-icon'\"\n            [showTooltip]=\"true\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        }\n      } @else if (displayType === 'img' && value()) {\n        <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n      } @else if (displayType === 'button') {\n        @let buttonSettings = uiSettings()?.buttonSettings;\n        <ui5-button\n          [accessibleName]=\"buttonAccessibleName()\"\n          [attr.data-testid]=\"testId() + '-button'\"\n          [design]=\"buttonSettings?.design\"\n          [disabled]=\"buttonDisabled()\"\n          [endIcon]=\"buttonSettings?.endIcon\"\n          [icon]=\"buttonSettings?.icon\"\n          [tooltip]=\"buttonSettings?.tooltip\"\n          (click)=\"buttonClicked($event)\"\n          >{{ buttonSettings?.text }}</ui5-button\n        >&nbsp;\n      } @else if (displayType === 'tag') {\n        <mfp-tag-list-value\n          [tagSettings]=\"uiSettings()?.tagSettings\"\n          [tags]=\"tags()\"\n          [testId]=\"testId() + '-tags'\"\n        />\n      } @else {\n        {{ displayValue() }}\n      }\n    </span>\n\n    @if (withCopyButton()) {\n      <ui5-icon\n        class=\"toggle-icon\"\n        mode=\"Interactive\"\n        [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n        [attr.data-testid]=\"testId() + '-copy'\"\n        [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n        [name]=\"copySuccess() ? 'accept' : 'copy'\"\n        (click)=\"copyValue($event)\"\n      />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host(.resource-field--collection){display:block;width:100%}.secret-value-container{display:flex;align-items:center;gap:.25rem}.toggle-icon{cursor:pointer;transition:color .2s ease;padding:.25rem}.toggle-icon:hover{color:var(--sapButton_Hover_TextColor, #0854a0)}\n"] }]
+                    }, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (canRenderField()) {\n  @if (isCollection()) {\n    <mfp-resource-collection-field\n      [fieldDefinition]=\"fieldDefinition()\"\n      [resource]=\"resource()\"\n    />\n  } @else {\n    @let displayType = displayAs();\n    <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n      @if (displayType === 'secret') {\n        <span class=\"secret-value-container\">\n          <mfp-secret-value\n            [isVisible]=\"isVisible()\"\n            [testId]=\"testId() + '-secret'\"\n            [value]=\"value()\"\n          />\n          <ui5-icon\n            class=\"toggle-icon\"\n            mode=\"Interactive\"\n            [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n            [attr.data-testid]=\"testId() + '-secret-toggle'\"\n            [name]=\"isVisible() ? 'hide' : 'show'\"\n            (click)=\"toggleVisibility($event)\"\n          />\n        </span>\n      } @else if (displayType === 'boolIcon' && isBoolLike()) {\n        <mfp-boolean-value\n          [boolValue]=\"boolValue()!\"\n          [testId]=\"testId() + '-boolean'\"\n        />\n      } @else if (displayType === 'link' && linkHref()) {\n        <mfp-link-value\n          [displayValue]=\"linkText()\"\n          [testId]=\"testId() + '-link'\"\n          [urlValue]=\"linkHref()!\"\n        />\n      } @else if (displayType === 'tooltip') {\n        <ui5-icon\n          [accessibleName]=\"stringValue()!\"\n          [attr.data-testid]=\"testId() + '-tooltip'\"\n          [name]=\"tooltipIcon() ?? 'hint'\"\n          [showTooltip]=\"true\"\n        />\n      } @else if (displayType === 'alert') {\n        @if (!value()) {\n          <ui5-icon\n            design=\"Critical\"\n            name=\"alert\"\n            [accessibleName]=\"resource()?.accessibleName ?? ''\"\n            [attr.data-testid]=\"testId() + '-icon'\"\n            [showTooltip]=\"true\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        }\n      } @else if (displayType === 'img' && value()) {\n        <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n      } @else if (displayType === 'button') {\n        @let buttonSettings = uiSettings()?.buttonSettings;\n        <ui5-button\n          [accessibleName]=\"buttonAccessibleName()\"\n          [attr.data-testid]=\"testId() + '-button'\"\n          [design]=\"buttonSettings?.design\"\n          [disabled]=\"buttonDisabled()\"\n          [endIcon]=\"buttonSettings?.endIcon\"\n          [icon]=\"buttonSettings?.icon\"\n          [tooltip]=\"buttonSettings?.tooltip\"\n          (click)=\"buttonClicked($event)\"\n          >{{ buttonSettings?.text }}</ui5-button\n        >&nbsp;\n      } @else if (displayType === 'tag') {\n        <mfp-tag-list-value\n          [tagSettings]=\"uiSettings()?.tagSettings\"\n          [tags]=\"tags()\"\n          [testId]=\"testId() + '-tags'\"\n        />\n      } @else {\n        {{ displayValue() }}\n      }\n    </span>\n\n    @if (withCopyButton()) {\n      <ui5-icon\n        class=\"toggle-icon\"\n        mode=\"Interactive\"\n        [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n        [attr.data-testid]=\"testId() + '-copy'\"\n        [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n        [name]=\"copySuccess() ? 'accept' : 'copy'\"\n        (click)=\"copyValue($event)\"\n      />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host(.resource-field--collection){display:block;width:100%}.secret-value-container{display:flex;align-items:center;gap:.25rem}.toggle-icon{cursor:pointer;transition:color .2s ease;padding:.25rem}.toggle-icon:hover{color:var(--sapButton_Hover_TextColor, #0854a0)}\n"] }]
         }], propDecorators: { fieldDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldDefinition", required: true }] }], resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: false }] }], permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
 const processGroupFields = (fields) => {

package/package.json

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

package/types/openmfp-ngx.d.ts

@@ -26,6 +26,20 @@ interface PropertyField {
     /** Ordered list of transforms applied to the resolved string. */
     transform?: TransformType[];
 }
+/** Configuration for a `displayAs: 'link'` cell. */
+interface LinkSettings {
+    /**
+     * href template. Supports `{{path}}` placeholders resolved against the
+     * resource (e.g. `/{{metadata.name}}/accounts`). Absolute or relative.
+     * When omitted, the field value is used as the href.
+     */
+    link?: string;
+    /**
+     * Static visible text for the link. When set, overrides the field value as
+     * the link label. When omitted, the field value is used as the link text.
+     */
+    text?: string;
+}
 /** Appearance settings for tag chip rendering. */
 interface TagSettings {
     design?: 'Neutral' | 'Positive' | 'Critical' | 'Negative' | 'Information' | 'Set1' | 'Set2';
@@ -41,6 +55,8 @@ interface UiSettings {
     buttonSettings?: ButtonSettings;
     /** Tag chip configuration — only used when `displayAs` is `'tag'`. */
     tagSettings?: TagSettings;
+    /** Link configuration — only used when `displayAs` is `'link'`. */
+    linkSettings?: LinkSettings;
     /** SAP UI5 icon name shown as the tooltip trigger icon. */
     tooltipIcon?: string;
     /** When `true`, a copy-to-clipboard button is rendered next to the value. */
@@ -526,6 +542,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 +585,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 +596,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';
@@ -1468,7 +1511,9 @@ declare class ResourceField<T extends GenericResource, F extends FieldDefinition
     }>;
     displayValue: _angular_core.Signal<string>;
     isBoolLike: _angular_core.Signal<boolean>;
-    isUrlValue: _angular_core.Signal<boolean>;
+    linkSettings: _angular_core.Signal<_openmfp_ngx.LinkSettings | undefined>;
+    linkHref: _angular_core.Signal<string | undefined>;
+    linkText: _angular_core.Signal<string | undefined>;
     testId: _angular_core.Signal<string>;
     buttonDisabled: _angular_core.Signal<boolean>;
     buttonAccessibleName: _angular_core.Signal<string>;
@@ -1483,7 +1528,6 @@ declare class ResourceField<T extends GenericResource, F extends FieldDefinition
     private normalizeBoolean;
     private normalizeString;
     private normalizeTagsArray;
-    private checkValidUrl;
     copyValue(event: Event): void;
     protected buttonClicked(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResourceField<any, any>, never>;
@@ -1506,9 +1550,10 @@ declare class BooleanValue {
 declare class LinkValue {
     urlValue: _angular_core.InputSignal<string>;
     testId: _angular_core.InputSignal<string>;
+    displayValue: _angular_core.InputSignal<string | undefined>;
     stopPropagation(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkValue, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkValue, "mfp-link-value", never, { "urlValue": { "alias": "urlValue"; "required": true; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkValue, "mfp-link-value", never, { "urlValue": { "alias": "urlValue"; "required": true; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "displayValue": { "alias": "displayValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SecretValue {
@@ -1588,4 +1633,4 @@ declare class MockCard {
 }
 
 export { BooleanValue, CARD_TYPES, DASHBOARD_I18N_KEYS, Dashboard, DashboardI18nService, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, DeleteConfirmationDialog, EN_DEFAULTS, Favorites, LinkValue, MockCard, ResourceField, ResourceFormDialog, SanitizeHtmlPipe, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew, defineDashboardElementMethods };
-export type { ButtonSettings, CardConfig, CardsType, CssRule, DashboardButtonsSettings, DashboardConfig, DashboardI18nKey, DashboardTranslations, DeleteResourceConfirmationConfig, FieldDefinition, FieldFilterDefinition, FormFieldChangeEvent, FormFieldDefinition, FormFieldErrors, GenericResource, IconDesignType, ModalSettings, MountCfg, PropertyField, ResourceFieldButtonClickEvent, ResourceFormConfig, RuleCondition, SectionConfig, ServiceStatusItem, ServiceStatusValue, TableCardButtonSettings, TableCardConfig, TableCardFormState, TableCardSearchConfig, TableConfig, TableFieldDefinition, TagSettings, TransformType, UiSettings, ValueRule };
+export type { ButtonSettings, CardConfig, CardsType, CssRule, DashboardButtonsSettings, DashboardConfig, DashboardI18nKey, DashboardTranslations, DeleteResourceConfirmationConfig, FieldDefinition, FieldFilterDefinition, FormFieldChangeEvent, FormFieldDefinition, FormFieldErrors, GenericResource, IconDesignType, LinkSettings, ModalSettings, MountCfg, PropertyField, ResourceFieldButtonClickEvent, ResourceFormConfig, RuleCondition, SectionConfig, ServiceStatusItem, ServiceStatusValue, TableCardButtonSettings, TableCardConfig, TableCardFormState, TableCardSearchConfig, TableConfig, TableFieldDefinition, TagSettings, TransformType, UiSettings, ValueRule };