@openmfp/ngx 0.14.11 → 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, inject, effect, viewChild, Injector, afterNextRender, Injectable, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, ElementRef, model, SecurityContext, linkedSignal } 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';
@@ -16,16 +18,16 @@ import { TableHeaderCell } from '@fundamental-ngx/ui5-webcomponents/table-header
 import { TableHeaderRow } from '@fundamental-ngx/ui5-webcomponents/table-header-row';
 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 * as i1 from '@angular/forms';
-import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
 import '@ui5/webcomponents-icons/dist/navigation-left-arrow.js';
-import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
 import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
-import '@ui5/webcomponents-icons/dist/add.js';
 import '@ui5/webcomponents-icons/dist/search.js';
 import { debounceTime, map, filter } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -45,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) {
@@ -201,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';
@@ -237,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 */ []));
@@ -286,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());
@@ -308,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 [];
     }
@@ -346,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) => {
@@ -455,13 +546,80 @@ function setPropertyByPath(object, path, value) {
     return object;
 }
 
+/**
+ * Internal collection editor rendered by `mfp-declarative-form` when a field
+ * carries `propertyCollection` sub-fields.
+ *
+ * Each entry renders as a collapsible card whose expanded body is a nested
+ * `<mfp-declarative-form>` bound to that entry. Live changes flow up
+ * through the nested form's `(formValueChange)` output — no `viewChildren`
+ * on the class, so this component can safely participate in the mutual
+ * import cycle with `DeclarativeForm`.
+ */
+class FormCollectionField {
+    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    initialEntries = input([], ...(ngDevMode ? [{ debugName: "initialEntries" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    entries = linkedSignal(() => [
+        ...(this.initialEntries() ?? []),
+    ], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    expandedIndex = linkedSignal({ ...(ngDevMode ? { debugName: "expandedIndex" } : /* istanbul ignore next */ {}), source: this.initialEntries,
+        computation: () => null });
+    previewFor(entry, index) {
+        for (const field of this.fields()) {
+            const raw = entry[field.name];
+            if (raw !== undefined && raw !== null && String(raw).trim() !== '') {
+                return `${field.label ?? field.name}: ${String(raw)}`;
+            }
+        }
+        const prefix = this.label().trim() || 'Item';
+        return `${prefix} ${index + 1}`;
+    }
+    toggle(index) {
+        this.expandedIndex.set(this.expandedIndex() === index ? null : index);
+    }
+    add() {
+        const next = [...this.entries(), {}];
+        this.entries.set(next);
+        this.expandedIndex.set(next.length - 1);
+        this.valueChange.emit(next);
+    }
+    remove(index) {
+        const next = this.entries().filter((_, i) => i !== index);
+        this.entries.set(next);
+        const expandedIndex = this.expandedIndex();
+        if (expandedIndex === index) {
+            this.expandedIndex.set(null);
+        }
+        else if (expandedIndex !== null && expandedIndex > index) {
+            // Preserve the same expanded row after removing an earlier one.
+            this.expandedIndex.set(expandedIndex - 1);
+        }
+        this.valueChange.emit(next);
+    }
+    onEntryValueChange(index, value) {
+        const next = this.entries().map((entry, i) => i === index ? { ...value } : entry);
+        this.entries.set(next);
+        this.valueChange.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FormCollectionField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FormCollectionField, isStandalone: true, selector: "mfp-form-collection-field", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, initialEntries: { classPropertyName: "initialEntries", publicName: "initialEntries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"collection\" data-testid=\"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]=\"'collection-item-' + index\"\n    >\n      <button\n        type=\"button\"\n        class=\"card__header\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.data-testid]=\"'collection-item-' + index + '-toggle'\"\n        (click)=\"toggle(index)\"\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        <span class=\"card__spacer\"></span>\n        <ui5-button\n          class=\"card__action\"\n          design=\"Transparent\"\n          icon=\"delete\"\n          accessibleName=\"Remove\"\n          tooltip=\"Remove\"\n          [attr.data-testid]=\"'collection-item-' + index + '-remove'\"\n          (click)=\"remove(index); $event.stopPropagation()\"\n        />\n      </button>\n\n      @if (expanded) {\n        <div class=\"card__body\">\n          <mfp-declarative-form\n            [attr.data-testid]=\"'collection-item-' + index + '-form'\"\n            [fields]=\"fields()\"\n            [initialValues]=\"entry\"\n            (formValueChange)=\"onEntryValueChange(index, $event)\"\n          />\n        </div>\n      }\n    </div>\n  }\n\n  <ui5-button\n    class=\"collection__add\"\n    design=\"Transparent\"\n    icon=\"add\"\n    accessibleName=\"Add\"\n    data-testid=\"collection-add\"\n    (click)=\"add()\"\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__spacer{flex:1}.card__action{flex:0 0 auto}.card__body{padding:.75rem 1rem 1rem;border-top:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.collection__add{align-self:flex-start;color:var(--sapButton_IconColor, #0070f2)}\n"], dependencies: [{ 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(() => Icon), selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: i0.forwardRef(() => DeclarativeForm), selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit", "formValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FormCollectionField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-form-collection-field', standalone: true, imports: [Button, Icon, forwardRef(() => DeclarativeForm)], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"collection\" data-testid=\"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]=\"'collection-item-' + index\"\n    >\n      <button\n        type=\"button\"\n        class=\"card__header\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.data-testid]=\"'collection-item-' + index + '-toggle'\"\n        (click)=\"toggle(index)\"\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        <span class=\"card__spacer\"></span>\n        <ui5-button\n          class=\"card__action\"\n          design=\"Transparent\"\n          icon=\"delete\"\n          accessibleName=\"Remove\"\n          tooltip=\"Remove\"\n          [attr.data-testid]=\"'collection-item-' + index + '-remove'\"\n          (click)=\"remove(index); $event.stopPropagation()\"\n        />\n      </button>\n\n      @if (expanded) {\n        <div class=\"card__body\">\n          <mfp-declarative-form\n            [attr.data-testid]=\"'collection-item-' + index + '-form'\"\n            [fields]=\"fields()\"\n            [initialValues]=\"entry\"\n            (formValueChange)=\"onEntryValueChange(index, $event)\"\n          />\n        </div>\n      }\n    </div>\n  }\n\n  <ui5-button\n    class=\"collection__add\"\n    design=\"Transparent\"\n    icon=\"add\"\n    accessibleName=\"Add\"\n    data-testid=\"collection-add\"\n    (click)=\"add()\"\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__spacer{flex:1}.card__action{flex:0 0 auto}.card__body{padding:.75rem 1rem 1rem;border-top:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.collection__add{align-self:flex-start;color:var(--sapButton_IconColor, #0070f2)}\n"] }]
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], initialEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialEntries", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
 class DeclarativeForm {
     fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     initialValues = input({}, ...(ngDevMode ? [{ debugName: "initialValues" }] : /* istanbul ignore next */ []));
     fieldErrors = input({}, ...(ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []));
     fieldChange = output();
     formSubmit = output();
+    formValueChange = output();
     form;
+    collectionSeeds = signal({}, ...(ngDevMode ? [{ debugName: "collectionSeeds" }] : /* istanbul ignore next */ []));
     fb = inject(FormBuilder);
     constructor() {
         this.form = this.fb.group({});
@@ -490,6 +648,7 @@ class DeclarativeForm {
         control.setValue(target.value);
         control.markAsTouched();
         control.markAsDirty();
+        this.formValueChange.emit(this.form.value);
         if (field.validation === 'onChange') {
             this.fieldChange.emit({
                 fieldProperty: field.name,
@@ -497,6 +656,24 @@ class DeclarativeForm {
             });
         }
     }
+    onCollectionValueChange(field, entries) {
+        const array = this.form.controls[field.name];
+        if (!array)
+            return;
+        while (array.length)
+            array.removeAt(0);
+        for (const entry of entries) {
+            array.push(this.buildEntryGroup(entry));
+        }
+        array.markAsDirty();
+        array.markAsTouched();
+        if (field.validation === 'onChange' || field.validation === 'onBlur') {
+            this.fieldChange.emit({
+                fieldProperty: field.name,
+                value: entries,
+            });
+        }
+    }
     getError(name) {
         const control = this.form.controls[name];
         const error = this.fieldErrors()[name];
@@ -520,17 +697,30 @@ class DeclarativeForm {
     clear() {
         this.form.reset();
     }
+    collectionEntries(field) {
+        return this.collectionSeeds()[field.name] ?? [];
+    }
     rebuildControls(fields) {
         const existingControls = this.form.controls;
         const nextFieldNames = new Set(fields.map((field) => field.name));
         for (const field of fields) {
             const existingControl = existingControls[field.name];
-            if (existingControl) {
+            const wantsCollection = !!field.propertyCollection?.length;
+            const existingIsCollection = existingControl instanceof FormArray;
+            if (existingControl && wantsCollection !== existingIsCollection) {
+                this.form.removeControl(field.name);
+            }
+            else if (existingControl) {
                 existingControl.clearValidators();
                 existingControl.updateValueAndValidity({ emitEvent: false });
                 continue;
             }
-            this.form.addControl(field.name, new FormControl(''));
+            if (wantsCollection) {
+                this.form.addControl(field.name, this.fb.array([]));
+            }
+            else {
+                this.form.addControl(field.name, new FormControl(''));
+            }
         }
         for (const controlName of Object.keys(existingControls)) {
             if (!nextFieldNames.has(controlName)) {
@@ -543,6 +733,25 @@ class DeclarativeForm {
         if (!initialValues) {
             return;
         }
+        const seeds = {};
+        for (const field of this.fields()) {
+            if (!field.propertyCollection?.length)
+                continue;
+            const raw = initialValues[field.name];
+            const entries = Array.isArray(raw)
+                ? raw
+                : [];
+            const array = this.form.controls[field.name];
+            if (array) {
+                while (array.length)
+                    array.removeAt(0);
+                for (const entry of entries) {
+                    array.push(this.buildEntryGroup(entry));
+                }
+            }
+            seeds[field.name] = entries;
+        }
+        this.collectionSeeds.set(seeds);
         this.form.patchValue(initialValues, { emitEvent: false });
         this.form.markAsPristine({ emitEvent: false });
         this.form.updateValueAndValidity({ emitEvent: false });
@@ -550,17 +759,34 @@ class DeclarativeForm {
     buildOutputValue() {
         const result = {};
         for (const key of Object.keys(this.form.controls)) {
-            setPropertyByPath(result, key, this.form.controls[key].value);
+            const control = this.form.controls[key];
+            let value = control.value;
+            if (control instanceof FormArray) {
+                value = control.controls.map((group) => group.controls['entry']?.value ?? {});
+            }
+            setPropertyByPath(result, key, value);
         }
         return result;
     }
+    buildEntryGroup(entry) {
+        return this.fb.group({
+            entry: new FormControl(entry),
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeForm, isStandalone: true, selector: "mfp-declarative-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, 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" }, 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        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\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          [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%}\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: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }, { kind: "component", type: Label, selector: "ui5-label, [ui5-label]", inputs: ["for", "showColon", "required", "wrappingType"], exportAs: ["ui5Label"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeForm, isStandalone: true, selector: "mfp-declarative-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, 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        [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          [label]=\"field.label\"\n          [initialEntries]=\"collectionEntries(field)\"\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          [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          [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: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }, { kind: "component", type: Label, selector: "ui5-label, [ui5-label]", inputs: ["for", "showColon", "required", "wrappingType"], exportAs: ["ui5Label"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { 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: "21.2.12", ngImport: i0, type: DeclarativeForm, decorators: [{
             type: Component,
-            args: [{ selector: 'mfp-declarative-form', imports: [ReactiveFormsModule, Input, Label, Select, Option], 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        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\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          [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%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], 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"] }] } });
+            args: [{ selector: 'mfp-declarative-form', imports: [
+                        ReactiveFormsModule,
+                        Input,
+                        Label,
+                        Select,
+                        Option,
+                        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        [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          [label]=\"field.label\"\n          [initialEntries]=\"collectionEntries(field)\"\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          [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          [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"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], 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"] }] } });
 
 /**
  * Horizontal filter-tab strip rendered above the table by
@@ -863,7 +1089,7 @@ class DeclarativeTableCard {
         }, {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit", filterTabChanged: "filterTabChanged" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (resourcesSearchable()) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  @if (hasFilterTabs()) {\n    <mfp-filter-tabs\n      [tabs]=\"filterTabs()\"\n      (tabChanged)=\"onFilterTabChanged($event)\"\n    />\n  }\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;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"], dependencies: [{ kind: "component", type: DeclarativeTable, selector: "mfp-declarative-table", inputs: ["columns", "resources", "trackByPath", "totalItemsCount", "paginationLimit", "hasMore", "growMode", "loadMoreButtonText", "height"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit"] }, { kind: "component", type: FilterTabs, selector: "mfp-filter-tabs", inputs: ["tabs"], outputs: ["tabChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }, { 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: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit", filterTabChanged: "filterTabChanged" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (resourcesSearchable()) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  @if (hasFilterTabs()) {\n    <mfp-filter-tabs\n      [tabs]=\"filterTabs()\"\n      (tabChanged)=\"onFilterTabChanged($event)\"\n    />\n  }\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;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"], dependencies: [{ kind: "component", type: DeclarativeTable, selector: "mfp-declarative-table", inputs: ["columns", "resources", "trackByPath", "totalItemsCount", "paginationLimit", "hasMore", "growMode", "loadMoreButtonText", "height"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit", "formValueChange"] }, { kind: "component", type: FilterTabs, selector: "mfp-filter-tabs", inputs: ["tabs"], outputs: ["tabChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }, { 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: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, decorators: [{
             type: Component,