@openmfp/ngx 1.3.0 → 1.4.0

package/fesm2022/openmfp-ngx.mjs

@@ -2295,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) {
@@ -2396,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
@@ -2548,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 */
@@ -2617,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(() => {
@@ -2650,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,
@@ -2668,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.3.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. */
@@ -1495,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>;
@@ -1510,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>;
@@ -1533,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 {
@@ -1615,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 };