@openmfp/ngx 0.18.9 → 0.18.11

package/fesm2022/openmfp-ngx.mjs

@@ -358,6 +358,12 @@ class ResourceField {
     isBoolLike = computed(() => this.boolValue() !== undefined, ...(ngDevMode ? [{ debugName: "isBoolLike" }] : /* istanbul ignore next */ []));
     isUrlValue = computed(() => this.checkValidUrl(this.stringValue()), ...(ngDevMode ? [{ debugName: "isUrlValue" }] : /* istanbul ignore next */ []));
     testId = computed(() => `resource-field-${this.fieldDefinition().property}`, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+    buttonDisabled = computed(() => this.resource()?.isAvailable === false, ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
+    buttonAccessibleName = computed(() => (this.buttonDisabled() ? this.resource()?.accessibleName : undefined) ??
+        this.uiSettings()?.buttonSettings?.text ??
+        this.uiSettings()?.buttonSettings?.tooltip ??
+        this.uiSettings()?.buttonSettings?.icon ??
+        '', ...(ngDevMode ? [{ debugName: "buttonAccessibleName" }] : /* istanbul ignore next */ []));
     boolValue = computed(() => this.normalizeBoolean(this.value()), ...(ngDevMode ? [{ debugName: "boolValue" }] : /* istanbul ignore next */ []));
     stringValue = computed(() => this.normalizeString(this.value()), ...(ngDevMode ? [{ debugName: "stringValue" }] : /* istanbul ignore next */ []));
     tags = computed(() => this.normalizeTagsArray(this.value()), ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
@@ -420,6 +426,9 @@ class ResourceField {
     }
     buttonClicked(event) {
         event.stopPropagation();
+        if (this.buttonDisabled()) {
+            return;
+        }
         this.buttonClick.emit({
             event,
             field: this.fieldDefinition(),
@@ -427,7 +436,7 @@ 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" }, 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 });
+    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        [accessibleName]=\"buttonAccessibleName()\"\n        [attr.data-testid]=\"testId() + '-button'\"\n        [design]=\"buttonSettings?.design\"\n        [disabled]=\"buttonDisabled()\"\n        [endIcon]=\"buttonSettings?.endIcon\"\n        [icon]=\"buttonSettings?.icon\"\n        [tooltip]=\"buttonSettings?.tooltip\"\n        (click)=\"buttonClicked($event)\"\n        >{{ buttonSettings?.text }}</ui5-button\n      >&nbsp;\n    } @else if (displayType === 'tag') {\n      <mfp-tag-list-value\n        [tagSettings]=\"uiSettings()?.tagSettings\"\n        [tags]=\"tags()\"\n        [testId]=\"testId() + '-tags'\"\n      />\n    } @else {\n      {{ displayValue() }}\n    }\n  </span>\n\n  @if (withCopyButton()) {\n    <ui5-icon\n      class=\"toggle-icon\"\n      mode=\"Interactive\"\n      [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n      [attr.data-testid]=\"testId() + '-copy'\"\n      [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n      [name]=\"copySuccess() ? 'accept' : 'copy'\"\n      (click)=\"copyValue($event)\"\n    />\n  }\n}\n", 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,
@@ -443,9 +452,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         // a module-init cycle. `forwardRef` defers resolution until the template
                         // is instantiated, by which point both classes are defined.
                         forwardRef(() => ResourceCollectionField),
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, 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"] }]
+                    }, 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        [accessibleName]=\"buttonAccessibleName()\"\n        [attr.data-testid]=\"testId() + '-button'\"\n        [design]=\"buttonSettings?.design\"\n        [disabled]=\"buttonDisabled()\"\n        [endIcon]=\"buttonSettings?.endIcon\"\n        [icon]=\"buttonSettings?.icon\"\n        [tooltip]=\"buttonSettings?.tooltip\"\n        (click)=\"buttonClicked($event)\"\n        >{{ buttonSettings?.text }}</ui5-button\n      >&nbsp;\n    } @else if (displayType === 'tag') {\n      <mfp-tag-list-value\n        [tagSettings]=\"uiSettings()?.tagSettings\"\n        [tags]=\"tags()\"\n        [testId]=\"testId() + '-tags'\"\n      />\n    } @else {\n      {{ displayValue() }}\n    }\n  </span>\n\n  @if (withCopyButton()) {\n    <ui5-icon\n      class=\"toggle-icon\"\n      mode=\"Interactive\"\n      [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n      [attr.data-testid]=\"testId() + '-copy'\"\n      [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n      [name]=\"copySuccess() ? 'accept' : 'copy'\"\n      (click)=\"copyValue($event)\"\n    />\n  }\n}\n", 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) => {
@@ -512,6 +521,11 @@ class DeclarativeTable {
     rowTrackBy = (_index, item) => getResourceValueByJsonPath(item, { property: this.trackByPath() }) ??
         _index;
     viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
+    onRowClick(item) {
+        if (item.isAvailable !== false) {
+            this.tableRowClicked.emit(item);
+        }
+    }
     isPagerMode = computed(() => this.loadMode() === 'pager', ...(ngDevMode ? [{ debugName: "isPagerMode" }] : /* istanbul ignore next */ []));
     knowsTotal = computed(() => this.totalItemsCount() !== undefined, ...(ngDevMode ? [{ debugName: "knowsTotal" }] : /* istanbul ignore next */ []));
     hasResults = computed(() => (this.totalItemsCount() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasResults" }] : /* istanbul ignore next */ []));
@@ -540,7 +554,7 @@ class DeclarativeTable {
         this.goToPage(this.totalPages());
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadMode: { classPropertyName: "loadMode", publicName: "loadMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", pageChange: "pageChange" }, ngImport: i0, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"loadMode() === 'scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      data-testid=\"generic-table-view-nodata\"\n      name=\"NoData\"\n      slot=\"noData\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (loadMode() !== 'pager' && hasMore()) {\n    <ui5-table-growing\n      data-testid=\"generic-table-growing\"\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n    <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n      {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n    </span>\n    <ui5-select\n      data-testid=\"generic-table-pagination-select\"\n      style=\"width: 5rem\"\n      [value]=\"paginationLimit().toString()\"\n      (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n    >\n      <ui5-option value=\"5\">5</ui5-option>\n      <ui5-option value=\"10\">10</ui5-option>\n      <ui5-option value=\"20\">20</ui5-option>\n      <ui5-option value=\"50\">50</ui5-option>\n      <ui5-option value=\"100\">100</ui5-option>\n    </ui5-select>\n  </div>\n\n  @if (isPagerMode()) {\n    <div class=\"pager\" data-testid=\"generic-table-pager\">\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"First page\"\n          data-testid=\"generic-table-pager-first\"\n          design=\"Transparent\"\n          icon=\"close-command-field\"\n          [disabled]=\"!canPrev()\"\n          (click)=\"firstPage()\"\n        />\n      }\n      <ui5-button\n        accessibleName=\"Previous page\"\n        data-testid=\"generic-table-pager-prev\"\n        design=\"Transparent\"\n        icon=\"navigation-left-arrow\"\n        [disabled]=\"!canPrev()\"\n        (click)=\"prevPage()\"\n      />\n      <span\n        class=\"pager__indicator\"\n        data-testid=\"generic-table-pager-indicator\"\n        >{{\n          knowsTotal()\n            ? (hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013')\n            : currentPage()\n        }}</span\n      >\n      <ui5-button\n        accessibleName=\"Next page\"\n        data-testid=\"generic-table-pager-next\"\n        design=\"Transparent\"\n        icon=\"navigation-right-arrow\"\n        [disabled]=\"!canNext()\"\n        (click)=\"nextPage()\"\n      />\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"Last page\"\n          data-testid=\"generic-table-pager-last\"\n          design=\"Transparent\"\n          icon=\"open-command-field\"\n          [disabled]=\"!canNext()\"\n          (click)=\"lastPage()\"\n        />\n      }\n    </div>\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n        @if (knowsTotal()) {\n          <span\n            data-testid=\"generic-table-item-count\"\n            style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n          >\n            <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() }}</b>\n            Items\n          </span>\n      }\n      </div>\n  } @else {\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n      >\n        Items loaded:\n        <b style=\"font-size: var(--sapFontSize)\">{{\n          totalItemsCount() !== undefined\n            ? resources().length + ' / ' + totalItemsCount()\n            : resources().length\n        }}</b>\n      </span>\n    </div>\n  }\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { 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: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadMode: { classPropertyName: "loadMode", publicName: "loadMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", pageChange: "pageChange" }, ngImport: i0, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"loadMode() === 'scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"onRowClick(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      data-testid=\"generic-table-view-nodata\"\n      name=\"NoData\"\n      slot=\"noData\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (loadMode() !== 'pager' && hasMore()) {\n    <ui5-table-growing\n      data-testid=\"generic-table-growing\"\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n    <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n      {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n    </span>\n    <ui5-select\n      data-testid=\"generic-table-pagination-select\"\n      style=\"width: 5rem\"\n      [value]=\"paginationLimit().toString()\"\n      (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n    >\n      <ui5-option value=\"5\">5</ui5-option>\n      <ui5-option value=\"10\">10</ui5-option>\n      <ui5-option value=\"20\">20</ui5-option>\n      <ui5-option value=\"50\">50</ui5-option>\n      <ui5-option value=\"100\">100</ui5-option>\n    </ui5-select>\n  </div>\n\n  @if (isPagerMode()) {\n    <div class=\"pager\" data-testid=\"generic-table-pager\">\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"First page\"\n          data-testid=\"generic-table-pager-first\"\n          design=\"Transparent\"\n          icon=\"close-command-field\"\n          [disabled]=\"!canPrev()\"\n          (click)=\"firstPage()\"\n        />\n      }\n      <ui5-button\n        accessibleName=\"Previous page\"\n        data-testid=\"generic-table-pager-prev\"\n        design=\"Transparent\"\n        icon=\"navigation-left-arrow\"\n        [disabled]=\"!canPrev()\"\n        (click)=\"prevPage()\"\n      />\n      <span\n        class=\"pager__indicator\"\n        data-testid=\"generic-table-pager-indicator\"\n        >{{\n          knowsTotal()\n            ? (hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013')\n            : currentPage()\n        }}</span\n      >\n      <ui5-button\n        accessibleName=\"Next page\"\n        data-testid=\"generic-table-pager-next\"\n        design=\"Transparent\"\n        icon=\"navigation-right-arrow\"\n        [disabled]=\"!canNext()\"\n        (click)=\"nextPage()\"\n      />\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"Last page\"\n          data-testid=\"generic-table-pager-last\"\n          design=\"Transparent\"\n          icon=\"open-command-field\"\n          [disabled]=\"!canNext()\"\n          (click)=\"lastPage()\"\n        />\n      }\n    </div>\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n        @if (knowsTotal()) {\n          <span\n            data-testid=\"generic-table-item-count\"\n            style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n          >\n            <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() }}</b>\n            Items\n          </span>\n      }\n      </div>\n  } @else {\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n      >\n        Items loaded:\n        <b style=\"font-size: var(--sapFontSize)\">{{\n          totalItemsCount() !== undefined\n            ? resources().length + ' / ' + totalItemsCount()\n            : resources().length\n        }}</b>\n      </span>\n    </div>\n  }\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { 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: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
             type: Component,
@@ -556,7 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         Option,
                         TableGrowing,
                         Button,
-                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"loadMode() === 'scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      data-testid=\"generic-table-view-nodata\"\n      name=\"NoData\"\n      slot=\"noData\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (loadMode() !== 'pager' && hasMore()) {\n    <ui5-table-growing\n      data-testid=\"generic-table-growing\"\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n    <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n      {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n    </span>\n    <ui5-select\n      data-testid=\"generic-table-pagination-select\"\n      style=\"width: 5rem\"\n      [value]=\"paginationLimit().toString()\"\n      (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n    >\n      <ui5-option value=\"5\">5</ui5-option>\n      <ui5-option value=\"10\">10</ui5-option>\n      <ui5-option value=\"20\">20</ui5-option>\n      <ui5-option value=\"50\">50</ui5-option>\n      <ui5-option value=\"100\">100</ui5-option>\n    </ui5-select>\n  </div>\n\n  @if (isPagerMode()) {\n    <div class=\"pager\" data-testid=\"generic-table-pager\">\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"First page\"\n          data-testid=\"generic-table-pager-first\"\n          design=\"Transparent\"\n          icon=\"close-command-field\"\n          [disabled]=\"!canPrev()\"\n          (click)=\"firstPage()\"\n        />\n      }\n      <ui5-button\n        accessibleName=\"Previous page\"\n        data-testid=\"generic-table-pager-prev\"\n        design=\"Transparent\"\n        icon=\"navigation-left-arrow\"\n        [disabled]=\"!canPrev()\"\n        (click)=\"prevPage()\"\n      />\n      <span\n        class=\"pager__indicator\"\n        data-testid=\"generic-table-pager-indicator\"\n        >{{\n          knowsTotal()\n            ? (hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013')\n            : currentPage()\n        }}</span\n      >\n      <ui5-button\n        accessibleName=\"Next page\"\n        data-testid=\"generic-table-pager-next\"\n        design=\"Transparent\"\n        icon=\"navigation-right-arrow\"\n        [disabled]=\"!canNext()\"\n        (click)=\"nextPage()\"\n      />\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"Last page\"\n          data-testid=\"generic-table-pager-last\"\n          design=\"Transparent\"\n          icon=\"open-command-field\"\n          [disabled]=\"!canNext()\"\n          (click)=\"lastPage()\"\n        />\n      }\n    </div>\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n        @if (knowsTotal()) {\n          <span\n            data-testid=\"generic-table-item-count\"\n            style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n          >\n            <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() }}</b>\n            Items\n          </span>\n      }\n      </div>\n  } @else {\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n      >\n        Items loaded:\n        <b style=\"font-size: var(--sapFontSize)\">{{\n          totalItemsCount() !== undefined\n            ? resources().length + ' / ' + totalItemsCount()\n            : resources().length\n        }}</b>\n      </span>\n    </div>\n  }\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\n"] }]
+                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"loadMode() === 'scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"onRowClick(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      data-testid=\"generic-table-view-nodata\"\n      name=\"NoData\"\n      slot=\"noData\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (loadMode() !== 'pager' && hasMore()) {\n    <ui5-table-growing\n      data-testid=\"generic-table-growing\"\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n    <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n      {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n    </span>\n    <ui5-select\n      data-testid=\"generic-table-pagination-select\"\n      style=\"width: 5rem\"\n      [value]=\"paginationLimit().toString()\"\n      (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n    >\n      <ui5-option value=\"5\">5</ui5-option>\n      <ui5-option value=\"10\">10</ui5-option>\n      <ui5-option value=\"20\">20</ui5-option>\n      <ui5-option value=\"50\">50</ui5-option>\n      <ui5-option value=\"100\">100</ui5-option>\n    </ui5-select>\n  </div>\n\n  @if (isPagerMode()) {\n    <div class=\"pager\" data-testid=\"generic-table-pager\">\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"First page\"\n          data-testid=\"generic-table-pager-first\"\n          design=\"Transparent\"\n          icon=\"close-command-field\"\n          [disabled]=\"!canPrev()\"\n          (click)=\"firstPage()\"\n        />\n      }\n      <ui5-button\n        accessibleName=\"Previous page\"\n        data-testid=\"generic-table-pager-prev\"\n        design=\"Transparent\"\n        icon=\"navigation-left-arrow\"\n        [disabled]=\"!canPrev()\"\n        (click)=\"prevPage()\"\n      />\n      <span\n        class=\"pager__indicator\"\n        data-testid=\"generic-table-pager-indicator\"\n        >{{\n          knowsTotal()\n            ? (hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013')\n            : currentPage()\n        }}</span\n      >\n      <ui5-button\n        accessibleName=\"Next page\"\n        data-testid=\"generic-table-pager-next\"\n        design=\"Transparent\"\n        icon=\"navigation-right-arrow\"\n        [disabled]=\"!canNext()\"\n        (click)=\"nextPage()\"\n      />\n      @if (knowsTotal()) {\n        <ui5-button\n          accessibleName=\"Last page\"\n          data-testid=\"generic-table-pager-last\"\n          design=\"Transparent\"\n          icon=\"open-command-field\"\n          [disabled]=\"!canNext()\"\n          (click)=\"lastPage()\"\n        />\n      }\n    </div>\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n        @if (knowsTotal()) {\n          <span\n            data-testid=\"generic-table-item-count\"\n            style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n          >\n            <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() }}</b>\n            Items\n          </span>\n      }\n      </div>\n  } @else {\n    <div class=\"pagination-footer__side pagination-footer__side--end\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n      >\n        Items loaded:\n        <b style=\"font-size: var(--sapFontSize)\">{{\n          totalItemsCount() !== undefined\n            ? resources().length + ' / ' + totalItemsCount()\n            : resources().length\n        }}</b>\n      </span>\n    </div>\n  }\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], trackByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByPath", required: false }] }], totalItemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsCount", required: false }] }], paginationLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLimit", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], loadMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMode", required: false }] }], loadMoreButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreButtonText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 function setPropertyByPath(object, path, value) {
@@ -1639,6 +1653,12 @@ function seedNodeOrder(nodes) {
         return;
     syncNodeOrderFromLayout(nodes);
 }
+function normalizeNodeOrder(nodes) {
+    seedNodeOrder(nodes);
+    sortNodesByZFlowOrder(nodes).forEach((node, index) => {
+        node.zFlowOrder = index;
+    });
+}
 function sortNodesByZFlowOrder(nodes) {
     return [...nodes].sort((a, b) => {
         if (a.zFlowOrder !== undefined && b.zFlowOrder !== undefined) {
@@ -1761,10 +1781,7 @@ function resolveInsertionSlotFromProjectedRect(orderedNodes, sourceId, columnCou
             widthPx: projectedSource.w * cellWidthPx,
             heightPx: projectedSource.h * cellHeightPx,
         });
-        const projectedAreaPx = projectedSource.w *
-            cellWidthPx *
-            projectedSource.h *
-            cellHeightPx;
+        const projectedAreaPx = projectedSource.w * cellWidthPx * projectedSource.h * cellHeightPx;
         const overlapRatio = projectedAreaPx > 0 ? overlapAreaPx / projectedAreaPx : 0;
         if (overlapRatio > bestOverlapRatio ||
             (overlapRatio === bestOverlapRatio &&
@@ -1848,7 +1865,7 @@ class ZflowGridStackEngine extends GridStackEngine {
     }
     commitZFlowLayout() {
         const nodes = this.nodes;
-        seedNodeOrder(nodes);
+        normalizeNodeOrder(nodes);
         const snapshot = this.takeLayoutSnapshot(nodes);
         const ordered = sortNodesByZFlowOrder(nodes);
         const projected = projectZFlowLayout(ordered, this.column);
@@ -2296,6 +2313,12 @@ class Dashboard {
         this.cardDialogOpen.set(false);
     }
     onCardsEdited(event) {
+        const looseCardIds = new Set(this.looseCards().map((c) => c.id));
+        const hasLooseCardChanges = event.added.some((card) => !card.sectionId) ||
+            event.removed.some((id) => looseCardIds.has(id));
+        if (hasLooseCardChanges) {
+            this.getZFlowEngine()?.syncZFlowOrderFromLayout();
+        }
         this.cards.update((list) => {
             const withoutRemoved = list.filter((c) => !event.removed.includes(c.id));
             return [...withoutRemoved, ...event.added.map((ac) => ({ ...ac }))];
@@ -2323,6 +2346,7 @@ class Dashboard {
         this.dragOriginStyle.set(null);
     }
     onGridChange() {
+        this.getZFlowEngine()?.commitZFlowLayout();
         if (this.editMode()) {
             this.gridDirty.set(true);
         }
@@ -2383,7 +2407,7 @@ class Dashboard {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null", "style.background-size": "backgroundImageHeight() ? \"100% \" + backgroundImageHeight() + \"px\" : \"100% auto\"" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStack", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mfp-dashboard\" data-testid=\"dashboard\" [style]=\"columnVars()\" [class.edit]=\"editMode()\">\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        <div class=\"mfp-dashboard__title-row\">\n          @if (config().title) {\n            <ui5-title data-testid=\"dashboard-title\" level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n              <span [innerHTML]=\"safeTitle()\"></span>\n            </ui5-title>\n          }\n          @if (hasUnsavedChanges()) {\n            <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n              <ui5-icon\n                class=\"mfp-dashboard__unsaved-changes-icon\"\n                name=\"user-edit\"\n                [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n              />\n              <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n                i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n              }}</span>\n            </div>\n          }\n        </div>\n        @if (config().description) {\n          <ui5-title data-testid=\"dashboard-description\" level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n            <span\n              class=\"mfp-dashboard__description\"\n              [innerHTML]=\"safeDescription()\"\n            ></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            data-testid=\"dashboard-edit-cards-btn\"\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"\n              editCardsButton().text ||\n              editCardsButton().tooltip ||\n              i18n.getTranslation(i18nKeys.EDIT_CARDS)\n            \"\n            [design]=\"editCardsButton().design\"\n            [icon]=\"editCardsButton().icon\"\n            [tooltip]=\"editCardsButton().tooltip\"\n            (click)=\"openCardPanel()\"\n            >{{ editCardsButton().text }}</ui5-button\n          >\n        } @else if (compactToolbar()) {\n          <ui5-button\n            #menuBtn\n            data-testid=\"dashboard-toolbar-menu-btn\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-menu\n            data-testid=\"dashboard-toolbar-menu\"\n            [open]=\"toolbarMenuOpen()\"\n            [opener]=\"menuBtn.element\"\n            (ui5Close)=\"toolbarMenuOpen.set(false)\"\n            (ui5ItemClick)=\"\n              onMenuItemClick(\n                $any($event).detail.item.dataset['action'],\n                $event\n              )\n            \"\n            (ui5Open)=\"toolbarMenuOpen.set(true)\"\n          >\n            @if (config().editButtonFirst && config().editable) {\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n              @if (customActions().length) {\n                <ui5-menu-separator />\n              }\n            }\n            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [attr.data-testid]=\"'dashboard-action-' + action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (!config().editButtonFirst && config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @if (config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [attr.data-testid]=\"'dashboard-action-' + action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (!config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n        }\n      </div>\n    </div>\n\n    <div class=\"mfp-dashboard__subheader\">\n      <ng-content select=\"[slot=dashboard-subheader]\" />\n    </div>\n  </div>\n\n  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n\n  <gridstack\n    #grid\n    data-testid=\"dashboard-grid\"\n    [class.zflow-dragging]=\"!!dragOriginStyle()\"\n    [options]=\"gridOptions()\"\n    (addedCB)=\"onGridChange()\"\n    (changeCB)=\"onGridChange()\"\n    (dragStartCB)=\"onDragStart($event)\"\n    (dragStopCB)=\"onDragStop()\"\n    (removedCB)=\"onGridChange()\"\n  >\n    @if (dragOriginStyle()) {\n      <div class=\"mfp-dashboard__drag-origin-placeholder\" [style]=\"dragOriginStyle()\"></div>\n    }\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item [options]=\"card\">\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n\n</div>\n@if (editMode()) {\n  <div class=\"mfp-dashboard__edit-bar\">\n    <ui5-button data-testid=\"dashboard-save-btn\" design=\"Emphasized\" (click)=\"saveEdit()\">{{\n      i18n.getTranslation(i18nKeys.SAVE)\n    }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-cancel-btn\" design=\"Transparent\" (click)=\"cancelEdit()\">{{\n      i18n.getTranslation(i18nKeys.CANCEL)\n    }}</ui5-button>\n  </div>\n}\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n  [open]=\"discardDialogOpen()\"\n  (cancelled)=\"cancelDiscard()\"\n  (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n  [open]=\"unsavedNavDialogOpen()\"\n  (cancelled)=\"onUnsavedNavCancel()\"\n  (discard)=\"onUnsavedNavDiscard()\"\n  (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { 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: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null", "style.background-size": "backgroundImageHeight() ? \"100% \" + backgroundImageHeight() + \"px\" : \"100% auto\"" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStack", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mfp-dashboard\"\n  data-testid=\"dashboard\"\n  [style]=\"columnVars()\"\n  [class.edit]=\"editMode()\"\n>\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        <div class=\"mfp-dashboard__title-row\">\n          @if (config().title) {\n            <ui5-title\n              data-testid=\"dashboard-title\"\n              level=\"H3\"\n              size=\"H3\"\n              wrapping-type=\"Normal\"\n            >\n              <span [innerHTML]=\"safeTitle()\"></span>\n            </ui5-title>\n          }\n          @if (hasUnsavedChanges()) {\n            <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n              <ui5-icon\n                class=\"mfp-dashboard__unsaved-changes-icon\"\n                name=\"user-edit\"\n                [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n              />\n              <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n                i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n              }}</span>\n            </div>\n          }\n        </div>\n        @if (config().description) {\n          <ui5-title\n            data-testid=\"dashboard-description\"\n            level=\"H5\"\n            size=\"H5\"\n            wrapping-type=\"Normal\"\n          >\n            <span\n              class=\"mfp-dashboard__description\"\n              [innerHTML]=\"safeDescription()\"\n            ></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            data-testid=\"dashboard-edit-cards-btn\"\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"\n              editCardsButton().text ||\n              editCardsButton().tooltip ||\n              i18n.getTranslation(i18nKeys.EDIT_CARDS)\n            \"\n            [design]=\"editCardsButton().design\"\n            [icon]=\"editCardsButton().icon\"\n            [tooltip]=\"editCardsButton().tooltip\"\n            (click)=\"openCardPanel()\"\n            >{{ editCardsButton().text }}</ui5-button\n          >\n        } @else if (compactToolbar()) {\n          <ui5-button\n            #menuBtn\n            data-testid=\"dashboard-toolbar-menu-btn\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-menu\n            data-testid=\"dashboard-toolbar-menu\"\n            [open]=\"toolbarMenuOpen()\"\n            [opener]=\"menuBtn.element\"\n            (ui5Close)=\"toolbarMenuOpen.set(false)\"\n            (ui5ItemClick)=\"\n              onMenuItemClick(\n                $any($event).detail.item.dataset['action'],\n                $event\n              )\n            \"\n            (ui5Open)=\"toolbarMenuOpen.set(true)\"\n          >\n            @if (config().editButtonFirst && config().editable) {\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n              @if (customActions().length) {\n                <ui5-menu-separator />\n              }\n            }\n            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [attr.data-testid]=\"'dashboard-action-' + action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (!config().editButtonFirst && config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @if (config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [attr.data-testid]=\"'dashboard-action-' + action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (!config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n        }\n      </div>\n    </div>\n\n    <div class=\"mfp-dashboard__subheader\">\n      <ng-content select=\"[slot=dashboard-subheader]\" />\n    </div>\n  </div>\n\n  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n\n  <gridstack\n    #grid\n    data-testid=\"dashboard-grid\"\n    [class.zflow-dragging]=\"!!dragOriginStyle()\"\n    [options]=\"gridOptions()\"\n    (addedCB)=\"onGridChange()\"\n    (changeCB)=\"onGridChange()\"\n    (dragStartCB)=\"onDragStart($event)\"\n    (dragStopCB)=\"onDragStop()\"\n    (removedCB)=\"onGridChange()\"\n  >\n    @if (dragOriginStyle()) {\n      <div\n        class=\"mfp-dashboard__drag-origin-placeholder\"\n        [style]=\"dragOriginStyle()\"\n      ></div>\n    }\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item [options]=\"card\">\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n</div>\n@if (editMode()) {\n  <div class=\"mfp-dashboard__edit-bar\">\n    <ui5-button\n      data-testid=\"dashboard-save-btn\"\n      design=\"Emphasized\"\n      (click)=\"saveEdit()\"\n      >{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button\n    >\n    <ui5-button\n      data-testid=\"dashboard-cancel-btn\"\n      design=\"Transparent\"\n      (click)=\"cancelEdit()\"\n      >{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n    >\n  </div>\n}\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n  [open]=\"discardDialogOpen()\"\n  (cancelled)=\"cancelDiscard()\"\n  (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n  [open]=\"unsavedNavDialogOpen()\"\n  (cancelled)=\"onUnsavedNavCancel()\"\n  (discard)=\"onUnsavedNavDiscard()\"\n  (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { 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: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
             type: Component,
@@ -2404,9 +2428,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     ], providers: [DashboardI18nService], encapsulation: ViewEncapsulation.None, host: {
                         '[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
                         '[style.background-size]': 'backgroundImageHeight() ? "100% " + backgroundImageHeight() + "px" : "100% auto"',
-                    }, template: "<div class=\"mfp-dashboard\" data-testid=\"dashboard\" [style]=\"columnVars()\" [class.edit]=\"editMode()\">\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        <div class=\"mfp-dashboard__title-row\">\n          @if (config().title) {\n            <ui5-title data-testid=\"dashboard-title\" level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n              <span [innerHTML]=\"safeTitle()\"></span>\n            </ui5-title>\n          }\n          @if (hasUnsavedChanges()) {\n            <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n              <ui5-icon\n                class=\"mfp-dashboard__unsaved-changes-icon\"\n                name=\"user-edit\"\n                [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n              />\n              <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n                i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n              }}</span>\n            </div>\n          }\n        </div>\n        @if (config().description) {\n          <ui5-title data-testid=\"dashboard-description\" level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n            <span\n              class=\"mfp-dashboard__description\"\n              [innerHTML]=\"safeDescription()\"\n            ></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            data-testid=\"dashboard-edit-cards-btn\"\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"\n              editCardsButton().text ||\n              editCardsButton().tooltip ||\n              i18n.getTranslation(i18nKeys.EDIT_CARDS)\n            \"\n            [design]=\"editCardsButton().design\"\n            [icon]=\"editCardsButton().icon\"\n            [tooltip]=\"editCardsButton().tooltip\"\n            (click)=\"openCardPanel()\"\n            >{{ editCardsButton().text }}</ui5-button\n          >\n        } @else if (compactToolbar()) {\n          <ui5-button\n            #menuBtn\n            data-testid=\"dashboard-toolbar-menu-btn\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-menu\n            data-testid=\"dashboard-toolbar-menu\"\n            [open]=\"toolbarMenuOpen()\"\n            [opener]=\"menuBtn.element\"\n            (ui5Close)=\"toolbarMenuOpen.set(false)\"\n            (ui5ItemClick)=\"\n              onMenuItemClick(\n                $any($event).detail.item.dataset['action'],\n                $event\n              )\n            \"\n            (ui5Open)=\"toolbarMenuOpen.set(true)\"\n          >\n            @if (config().editButtonFirst && config().editable) {\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n              @if (customActions().length) {\n                <ui5-menu-separator />\n              }\n            }\n            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [attr.data-testid]=\"'dashboard-action-' + action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (!config().editButtonFirst && config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @if (config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [attr.data-testid]=\"'dashboard-action-' + action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (!config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n        }\n      </div>\n    </div>\n\n    <div class=\"mfp-dashboard__subheader\">\n      <ng-content select=\"[slot=dashboard-subheader]\" />\n    </div>\n  </div>\n\n  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n\n  <gridstack\n    #grid\n    data-testid=\"dashboard-grid\"\n    [class.zflow-dragging]=\"!!dragOriginStyle()\"\n    [options]=\"gridOptions()\"\n    (addedCB)=\"onGridChange()\"\n    (changeCB)=\"onGridChange()\"\n    (dragStartCB)=\"onDragStart($event)\"\n    (dragStopCB)=\"onDragStop()\"\n    (removedCB)=\"onGridChange()\"\n  >\n    @if (dragOriginStyle()) {\n      <div class=\"mfp-dashboard__drag-origin-placeholder\" [style]=\"dragOriginStyle()\"></div>\n    }\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item [options]=\"card\">\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n\n</div>\n@if (editMode()) {\n  <div class=\"mfp-dashboard__edit-bar\">\n    <ui5-button data-testid=\"dashboard-save-btn\" design=\"Emphasized\" (click)=\"saveEdit()\">{{\n      i18n.getTranslation(i18nKeys.SAVE)\n    }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-cancel-btn\" design=\"Transparent\" (click)=\"cancelEdit()\">{{\n      i18n.getTranslation(i18nKeys.CANCEL)\n    }}</ui5-button>\n  </div>\n}\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n  [open]=\"discardDialogOpen()\"\n  (cancelled)=\"cancelDiscard()\"\n  (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n  [open]=\"unsavedNavDialogOpen()\"\n  (cancelled)=\"onUnsavedNavCancel()\"\n  (discard)=\"onUnsavedNavDiscard()\"\n  (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
+                    }, template: "<div\n  class=\"mfp-dashboard\"\n  data-testid=\"dashboard\"\n  [style]=\"columnVars()\"\n  [class.edit]=\"editMode()\"\n>\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        <div class=\"mfp-dashboard__title-row\">\n          @if (config().title) {\n            <ui5-title\n              data-testid=\"dashboard-title\"\n              level=\"H3\"\n              size=\"H3\"\n              wrapping-type=\"Normal\"\n            >\n              <span [innerHTML]=\"safeTitle()\"></span>\n            </ui5-title>\n          }\n          @if (hasUnsavedChanges()) {\n            <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n              <ui5-icon\n                class=\"mfp-dashboard__unsaved-changes-icon\"\n                name=\"user-edit\"\n                [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n              />\n              <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n                i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n              }}</span>\n            </div>\n          }\n        </div>\n        @if (config().description) {\n          <ui5-title\n            data-testid=\"dashboard-description\"\n            level=\"H5\"\n            size=\"H5\"\n            wrapping-type=\"Normal\"\n          >\n            <span\n              class=\"mfp-dashboard__description\"\n              [innerHTML]=\"safeDescription()\"\n            ></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            data-testid=\"dashboard-edit-cards-btn\"\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"\n              editCardsButton().text ||\n              editCardsButton().tooltip ||\n              i18n.getTranslation(i18nKeys.EDIT_CARDS)\n            \"\n            [design]=\"editCardsButton().design\"\n            [icon]=\"editCardsButton().icon\"\n            [tooltip]=\"editCardsButton().tooltip\"\n            (click)=\"openCardPanel()\"\n            >{{ editCardsButton().text }}</ui5-button\n          >\n        } @else if (compactToolbar()) {\n          <ui5-button\n            #menuBtn\n            data-testid=\"dashboard-toolbar-menu-btn\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-menu\n            data-testid=\"dashboard-toolbar-menu\"\n            [open]=\"toolbarMenuOpen()\"\n            [opener]=\"menuBtn.element\"\n            (ui5Close)=\"toolbarMenuOpen.set(false)\"\n            (ui5ItemClick)=\"\n              onMenuItemClick(\n                $any($event).detail.item.dataset['action'],\n                $event\n              )\n            \"\n            (ui5Open)=\"toolbarMenuOpen.set(true)\"\n          >\n            @if (config().editButtonFirst && config().editable) {\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n              @if (customActions().length) {\n                <ui5-menu-separator />\n              }\n            }\n            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [attr.data-testid]=\"'dashboard-action-' + action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (!config().editButtonFirst && config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                data-testid=\"dashboard-action-edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"\n                  editViewButton().text ||\n                  i18n.getTranslation(i18nKeys.EDIT_VIEW)\n                \"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @if (config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [attr.data-testid]=\"'dashboard-action-' + action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (!config().editButtonFirst && config().editable) {\n            <ui5-button\n              data-testid=\"dashboard-edit-view-btn\"\n              [accessibleName]=\"\n                editViewButton().text ||\n                editViewButton().tooltip ||\n                i18n.getTranslation(i18nKeys.EDIT_VIEW)\n              \"\n              [design]=\"editViewButton().design\"\n              [icon]=\"editViewButton().icon\"\n              [tooltip]=\"editViewButton().tooltip\"\n              (click)=\"enterEditMode()\"\n              >{{ editViewButton().text }}</ui5-button\n            >\n          }\n        }\n      </div>\n    </div>\n\n    <div class=\"mfp-dashboard__subheader\">\n      <ng-content select=\"[slot=dashboard-subheader]\" />\n    </div>\n  </div>\n\n  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n\n  <gridstack\n    #grid\n    data-testid=\"dashboard-grid\"\n    [class.zflow-dragging]=\"!!dragOriginStyle()\"\n    [options]=\"gridOptions()\"\n    (addedCB)=\"onGridChange()\"\n    (changeCB)=\"onGridChange()\"\n    (dragStartCB)=\"onDragStart($event)\"\n    (dragStopCB)=\"onDragStop()\"\n    (removedCB)=\"onGridChange()\"\n  >\n    @if (dragOriginStyle()) {\n      <div\n        class=\"mfp-dashboard__drag-origin-placeholder\"\n        [style]=\"dragOriginStyle()\"\n      ></div>\n    }\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item [options]=\"card\">\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n</div>\n@if (editMode()) {\n  <div class=\"mfp-dashboard__edit-bar\">\n    <ui5-button\n      data-testid=\"dashboard-save-btn\"\n      design=\"Emphasized\"\n      (click)=\"saveEdit()\"\n      >{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button\n    >\n    <ui5-button\n      data-testid=\"dashboard-cancel-btn\"\n      design=\"Transparent\"\n      (click)=\"cancelEdit()\"\n      >{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n    >\n  </div>\n}\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n  [open]=\"discardDialogOpen()\"\n  (cancelled)=\"cancelDiscard()\"\n  (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n  [open]=\"unsavedNavDialogOpen()\"\n  (cancelled)=\"onUnsavedNavCancel()\"\n  (discard)=\"onUnsavedNavDiscard()\"\n  (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }, { type: i0.Output, args: ["sectionsChange"] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }, { type: i0.Output, args: ["cardsChange"] }], availableCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableCards", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], unsavedChangesChange: [{ type: i0.Output, args: ["unsavedChangesChange"] }], gridStack: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], addCardBtn: [{ type: i0.ViewChild, args: ['editCardsBtn', { isSignal: true }] }] } });
 
+/**
+ * Public no-argument, `void`-returning handlers on {@link Dashboard} that we
+ * forward onto the custom element so non-Angular consumers can drive the
+ * edit-mode / unsaved-changes flow directly on the DOM node.
+ */
+const VOID_METHODS = [
+    'saveEdit',
+    'cancelEdit',
+    'confirmDiscard',
+    'onUnsavedNavSave',
+    'onUnsavedNavDiscard',
+    'onUnsavedNavCancel',
+];
+/** Reads the live Angular component instance backing an `@angular/elements` custom element. */
+function getInstance(element) {
+    return element.ngElementStrategy?.componentRef?.instance;
+}
+/**
+ * `createCustomElement` only proxies `@Input()`/`output()` — public methods on
+ * the component class are NOT reachable from the DOM. This forwards the
+ * dashboard's public methods onto the custom-element prototype so that
+ * non-Angular consumers (UI5, plain JS, Luigi, etc.) can call them directly on
+ * the `<mfp-wc-dashboard>` DOM node.
+ *
+ * `requestNavigation` needs a synchronous fallback when the Angular component
+ * isn't created yet: run the navigation immediately (returning `true`) rather
+ * than silently blocking the user — this preserves the original, pre-guard
+ * behaviour. The remaining handlers no-op until the component exists.
+ */
+function defineDashboardElementMethods(elementCtor) {
+    const proto = elementCtor.prototype;
+    Object.defineProperty(proto, 'requestNavigation', {
+        value(proceed) {
+            const instance = getInstance(this);
+            if (!instance) {
+                proceed();
+                return true;
+            }
+            return instance.requestNavigation(proceed);
+        },
+        configurable: true,
+        writable: true,
+    });
+    for (const name of VOID_METHODS) {
+        Object.defineProperty(proto, name, {
+            value() {
+                getInstance(this)?.[name]();
+            },
+            configurable: true,
+            writable: true,
+        });
+    }
+}
+
 class VisitedServiceCard {
     serviceType = input.required(...(ngDevMode ? [{ debugName: "serviceType" }] : /* istanbul ignore next */ []));
     serviceName = input.required(...(ngDevMode ? [{ debugName: "serviceName" }] : /* istanbul ignore next */ []));
@@ -2514,5 +2592,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, MockCard, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
+export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, MockCard, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew, defineDashboardElementMethods };
 //# sourceMappingURL=openmfp-ngx.mjs.map