@openmfp/ngx 0.15.0 → 0.16.0

package/fesm2022/openmfp-ngx.mjs

@@ -1,8 +1,10 @@
 import { JSONPath } from 'jsonpath-plus';
 import * as i0 from '@angular/core';
-import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, signal, ViewEncapsulation, linkedSignal, forwardRef, inject, effect, viewChild, Injector, afterNextRender, Injectable, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, ElementRef, model, SecurityContext } from '@angular/core';
+import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, signal, ViewEncapsulation, forwardRef, output, linkedSignal, inject, effect, viewChild, Injector, afterNextRender, Injectable, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, ElementRef, model, SecurityContext } from '@angular/core';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { Link } from '@fundamental-ngx/ui5-webcomponents/link';
+import '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
+import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 import { Tag } from '@fundamental-ngx/ui5-webcomponents/tag';
 import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
@@ -18,8 +20,6 @@ import { TableRow } from '@fundamental-ngx/ui5-webcomponents/table-row';
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 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 * as i1 from '@angular/forms';
 import { FormBuilder, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
@@ -47,68 +47,6 @@ import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
 import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
 
-const parseStringValue = (value) => {
-    if (value === 'true') {
-        return true;
-    }
-    if (value === 'false') {
-        return false;
-    }
-    if (!isNaN(Number(value))) {
-        return Number(value);
-    }
-    return value;
-};
-const ruleResolver = (rule, resourceValue) => {
-    const parsedResouceValue = parseStringValue(resourceValue);
-    const parsedConditionValue = parseStringValue(rule.if.value);
-    switch (rule.if.condition) {
-        case 'equals':
-            return parsedResouceValue === parsedConditionValue;
-        case 'notEquals':
-            return parsedResouceValue !== parsedConditionValue;
-        case 'greaterThan':
-            return parsedResouceValue > parsedConditionValue;
-        case 'greaterThanOrEqual':
-            return parsedResouceValue >= parsedConditionValue;
-        case 'lessThan':
-            return parsedResouceValue < parsedConditionValue;
-        case 'lessThanOrEqual':
-            return parsedResouceValue <= parsedConditionValue;
-        case 'contains':
-            if (Array.isArray(parsedResouceValue)) {
-                return parsedResouceValue.includes(parsedConditionValue);
-            }
-            else if (typeof parsedResouceValue === 'string' &&
-                typeof parsedConditionValue === 'string') {
-                return parsedResouceValue.includes(parsedConditionValue);
-            }
-            return false;
-    }
-    return false;
-};
-const evaluateCssRules = (value, rules) => {
-    if (!rules) {
-        return {};
-    }
-    return rules.reduce((acc, rule) => {
-        const result = ruleResolver(rule, value);
-        if (result) {
-            return { ...acc, ...rule.styles };
-        }
-        return acc;
-    }, {});
-};
-const evaluateValueRules = (value, rules) => {
-    if (!rules)
-        return value;
-    for (const rule of rules) {
-        if (ruleResolver(rule, value))
-            return rule.then;
-    }
-    return value;
-};
-
 const getResourceValueByJsonPath = (resource, field) => {
     const property = field.jsonPathExpression || field.property;
     if (!property) {
@@ -203,6 +141,68 @@ function getFieldValue(field, resource) {
     return field.value;
 }
 
+const parseStringValue = (value) => {
+    if (value === 'true') {
+        return true;
+    }
+    if (value === 'false') {
+        return false;
+    }
+    if (!isNaN(Number(value))) {
+        return Number(value);
+    }
+    return value;
+};
+const ruleResolver = (rule, resourceValue) => {
+    const parsedResouceValue = parseStringValue(resourceValue);
+    const parsedConditionValue = parseStringValue(rule.if.value);
+    switch (rule.if.condition) {
+        case 'equals':
+            return parsedResouceValue === parsedConditionValue;
+        case 'notEquals':
+            return parsedResouceValue !== parsedConditionValue;
+        case 'greaterThan':
+            return parsedResouceValue > parsedConditionValue;
+        case 'greaterThanOrEqual':
+            return parsedResouceValue >= parsedConditionValue;
+        case 'lessThan':
+            return parsedResouceValue < parsedConditionValue;
+        case 'lessThanOrEqual':
+            return parsedResouceValue <= parsedConditionValue;
+        case 'contains':
+            if (Array.isArray(parsedResouceValue)) {
+                return parsedResouceValue.includes(parsedConditionValue);
+            }
+            else if (typeof parsedResouceValue === 'string' &&
+                typeof parsedConditionValue === 'string') {
+                return parsedResouceValue.includes(parsedConditionValue);
+            }
+            return false;
+    }
+    return false;
+};
+const evaluateCssRules = (value, rules) => {
+    if (!rules) {
+        return {};
+    }
+    return rules.reduce((acc, rule) => {
+        const result = ruleResolver(rule, value);
+        if (result) {
+            return { ...acc, ...rule.styles };
+        }
+        return acc;
+    }, {});
+};
+const evaluateValueRules = (value, rules) => {
+    if (!rules)
+        return value;
+    for (const rule of rules) {
+        if (ruleResolver(rule, value))
+            return rule.then;
+    }
+    return value;
+};
+
 const ICON_DESIGN_POSITIVE = 'Positive';
 const ICON_DESIGN_NEGATIVE = 'Negative';
 const ICON_NAME_POSITIVE = 'accept';
@@ -239,6 +239,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             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" }]
         }], propDecorators: { urlValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
 
+/**
+ * Read-only display for a `propertyCollection` field. Renders the resolved
+ * array as a column of collapsed cards; expanding a card lists each sub-field
+ * as a `label: value` row rendered through `mfp-resource-field`, so per-
+ * sub-field `uiSettings` still apply. Mirrors the styling of the editable
+ * `mfp-form-collection-field`.
+ */
+class ResourceCollectionField {
+    fieldDefinition = input.required(...(ngDevMode ? [{ debugName: "fieldDefinition" }] : /* istanbul ignore next */ []));
+    resource = input(...(ngDevMode ? [undefined, { debugName: "resource" }] : /* istanbul ignore next */ []));
+    expandedIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedIndex" }] : /* istanbul ignore next */ []));
+    collectionPath = computed(() => {
+        const property = this.fieldDefinition().property;
+        return typeof property === 'string' ? property : undefined;
+    }, ...(ngDevMode ? [{ debugName: "collectionPath" }] : /* istanbul ignore next */ []));
+    entries = computed(() => {
+        const value = getResourceValueByJsonPath(this.resource() ?? {}, {
+            property: this.collectionPath(),
+        });
+        return Array.isArray(value) ? value : [];
+    }, ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const parent = this.collectionPath();
+        return (this.fieldDefinition().propertyCollection ?? []).map((sub) => {
+            const property = typeof sub.property === 'string'
+                ? this.stripParentPath(sub.property, parent)
+                : sub.property;
+            return {
+                label: sub.label ?? this.leafOf(property),
+                field: { ...sub, property },
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    toggle(index, event) {
+        event?.stopPropagation();
+        this.expandedIndex.set(this.expandedIndex() === index ? null : index);
+    }
+    previewFor(entry, index) {
+        for (const row of this.rows()) {
+            const raw = getResourceValueByJsonPath(entry, {
+                property: row.field.property,
+            });
+            if (raw !== undefined && raw !== null && String(raw).trim() !== '') {
+                return `${row.label}: ${String(raw)}`;
+            }
+        }
+        const prefix = (this.fieldDefinition().label ?? '').trim() || 'Item';
+        return `${prefix} ${index + 1}`;
+    }
+    stripParentPath(name, parent) {
+        if (!parent)
+            return name;
+        if (name.startsWith(parent + '.')) {
+            return name.slice(parent.length + 1);
+        }
+        return name;
+    }
+    leafOf(property) {
+        if (typeof property !== 'string')
+            return '';
+        const segments = property.split('.');
+        return segments[segments.length - 1];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceCollectionField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ResourceCollectionField, isStandalone: true, selector: "mfp-resource-collection-field", inputs: { fieldDefinition: { classPropertyName: "fieldDefinition", publicName: "fieldDefinition", isSignal: true, isRequired: true, transformFunction: null }, resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"collection\" data-testid=\"resource-collection-field\">\n  @for (entry of entries(); track $index; let index = $index) {\n    @let expanded = expandedIndex() === index;\n    <div\n      class=\"card\"\n      [class.card--expanded]=\"expanded\"\n      [attr.data-testid]=\"'resource-collection-item-' + index\"\n    >\n      <button\n        type=\"button\"\n        class=\"card__header\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.data-testid]=\"'resource-collection-item-' + index + '-toggle'\"\n        (click)=\"toggle(index, $event)\"\n      >\n        <ui5-icon\n          class=\"card__chevron\"\n          [name]=\"expanded ? 'navigation-down-arrow' : 'navigation-right-arrow'\"\n        />\n        <span class=\"card__preview\">{{ previewFor(entry, index) }}</span>\n      </button>\n\n      @if (expanded) {\n        <div class=\"card__body\" (click)=\"$event.stopPropagation()\">\n          @for (row of rows(); track row.field.property) {\n            <div class=\"row\">\n              <span class=\"row__label\">{{ row.label }}:</span>\n              <mfp-resource-field\n                [fieldDefinition]=\"row.field\"\n                [resource]=\"entry\"\n              />\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.collection{display:flex;flex-direction:column;gap:.5rem;width:100%;padding-top:.25rem}.card{border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapGroup_TitleBackground, #fff);overflow:hidden}.card--expanded{box-shadow:0 1px 2px #0000000a}.card__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:0 .75rem;background:transparent;border:0;text-align:left;cursor:pointer;font:inherit;min-height:1.5rem;color:var(--sapTextColor, #1d2d3e)}.card__header:hover{background:var(--sapList_Hover_Background, rgba(0, 0, 0, .03))}.card__chevron{flex:0 0 auto;color:var(--sapContent_IconColor, #6a6d70)}.card__preview{font-weight:500;color:var(--sapTextColor, #1d2d3e);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card__body{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem 1rem;border-top:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.row{display:flex;gap:.25rem;align-items:baseline}.row__label{font-weight:500;color:var(--sapContent_LabelColor, #556b82);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => Icon), selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: i0.forwardRef(() => ResourceField), selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceCollectionField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-resource-collection-field', imports: [Icon, forwardRef(() => ResourceField)], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"collection\" data-testid=\"resource-collection-field\">\n  @for (entry of entries(); track $index; let index = $index) {\n    @let expanded = expandedIndex() === index;\n    <div\n      class=\"card\"\n      [class.card--expanded]=\"expanded\"\n      [attr.data-testid]=\"'resource-collection-item-' + index\"\n    >\n      <button\n        type=\"button\"\n        class=\"card__header\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.data-testid]=\"'resource-collection-item-' + index + '-toggle'\"\n        (click)=\"toggle(index, $event)\"\n      >\n        <ui5-icon\n          class=\"card__chevron\"\n          [name]=\"expanded ? 'navigation-down-arrow' : 'navigation-right-arrow'\"\n        />\n        <span class=\"card__preview\">{{ previewFor(entry, index) }}</span>\n      </button>\n\n      @if (expanded) {\n        <div class=\"card__body\" (click)=\"$event.stopPropagation()\">\n          @for (row of rows(); track row.field.property) {\n            <div class=\"row\">\n              <span class=\"row__label\">{{ row.label }}:</span>\n              <mfp-resource-field\n                [fieldDefinition]=\"row.field\"\n                [resource]=\"entry\"\n              />\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.collection{display:flex;flex-direction:column;gap:.5rem;width:100%;padding-top:.25rem}.card{border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapGroup_TitleBackground, #fff);overflow:hidden}.card--expanded{box-shadow:0 1px 2px #0000000a}.card__header{display:flex;align-items:center;gap:.5rem;width:100%;padding:0 .75rem;background:transparent;border:0;text-align:left;cursor:pointer;font:inherit;min-height:1.5rem;color:var(--sapTextColor, #1d2d3e)}.card__header:hover{background:var(--sapList_Hover_Background, rgba(0, 0, 0, .03))}.card__chevron{flex:0 0 auto;color:var(--sapContent_IconColor, #6a6d70)}.card__preview{font-weight:500;color:var(--sapTextColor, #1d2d3e);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card__body{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem 1rem;border-top:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.row{display:flex;gap:.25rem;align-items:baseline}.row__label{font-weight:500;color:var(--sapContent_LabelColor, #556b82);white-space:nowrap}\n"] }]
+        }], propDecorators: { fieldDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldDefinition", required: true }] }], resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: false }] }] } });
+
 class SecretValue {
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isVisible = input(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
@@ -288,6 +359,7 @@ class ResourceField {
     tags = computed(() => this.normalizeTagsArray(this.value()), ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
     isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     copySuccess = signal(false, ...(ngDevMode ? [{ debugName: "copySuccess" }] : /* istanbul ignore next */ []));
+    isCollection = computed(() => !!this.fieldDefinition().propertyCollection?.length, ...(ngDevMode ? [{ debugName: "isCollection" }] : /* istanbul ignore next */ []));
     toggleVisibility(e) {
         e.stopPropagation();
         this.isVisible.set(!this.isVisible());
@@ -310,11 +382,14 @@ class ResourceField {
     }
     normalizeTagsArray(value) {
         if (Array.isArray(value)) {
-            return value.map(v => String(v).trim()).filter(v => v.length > 0);
+            return value.map((v) => String(v).trim()).filter((v) => v.length > 0);
         }
         if (typeof value === 'string') {
             const separator = this.uiSettings()?.tagSettings?.valueSeparator ?? ',';
-            return value.split(separator).map(v => v.trim()).filter(v => v.length > 0);
+            return value
+                .split(separator)
+                .map((v) => v.trim())
+                .filter((v) => v.length > 0);
         }
         return [];
     }
@@ -348,11 +423,25 @@ class ResourceField {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@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 [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\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 [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n  } @else if (displayType === 'link' && isUrlValue()) {\n    <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\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      [attr.data-testid]=\"testId() + '-button'\"\n      [accessibleName]=\"buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''\"\n      [design]=\"buttonSettings?.design\"\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", styles: [":host{display:inline-flex;align-items:center}.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: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: BooleanValue, selector: "mfp-boolean-value", inputs: ["boolValue", "testId"] }, { kind: "component", type: LinkValue, selector: "mfp-link-value", inputs: ["urlValue", "testId"] }, { kind: "component", type: SecretValue, selector: "mfp-secret-value", inputs: ["value", "isVisible", "testId"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: TagListValue, selector: "mfp-tag-list-value", inputs: ["tags", "tagSettings", "testId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class.resource-field--collection": "isCollection()" } }, ngImport: i0, template: "@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 [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\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 [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n    } @else if (displayType === 'link' && isUrlValue()) {\n      <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\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        [attr.data-testid]=\"testId() + '-button'\"\n        [accessibleName]=\"buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''\"\n        [design]=\"buttonSettings?.design\"\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", 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: ["design", "name", "accessibleName", "showTooltip", "mode"], 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: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], 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: "21.2.12", ngImport: i0, type: ResourceField, decorators: [{
             type: Component,
-            args: [{ selector: 'mfp-resource-field', imports: [Icon, BooleanValue, LinkValue, SecretValue, Button, TagListValue], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@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 [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\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 [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n  } @else if (displayType === 'link' && isUrlValue()) {\n    <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\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      [attr.data-testid]=\"testId() + '-button'\"\n      [accessibleName]=\"buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''\"\n      [design]=\"buttonSettings?.design\"\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", styles: [":host{display:inline-flex;align-items:center}.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"] }]
+            args: [{ selector: 'mfp-resource-field', imports: [
+                        Icon,
+                        BooleanValue,
+                        LinkValue,
+                        SecretValue,
+                        Button,
+                        TagListValue,
+                        // `ResourceCollectionField` imports this component back (each expanded
+                        // card renders its sub-fields via `mfp-resource-field`), so the two form
+                        // a module-init cycle. `forwardRef` defers resolution until the template
+                        // is instantiated, by which point both classes are defined.
+                        forwardRef(() => ResourceCollectionField),
+                    ], host: {
+                        '[class.resource-field--collection]': 'isCollection()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@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 [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\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 [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n    } @else if (displayType === 'link' && isUrlValue()) {\n      <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\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        [attr.data-testid]=\"testId() + '-button'\"\n        [accessibleName]=\"buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''\"\n        [design]=\"buttonSettings?.design\"\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", 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 }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
 const processGroupFields = (fields) => {