@openmfp/ngx 0.18.3 → 0.18.5

package/fesm2022/openmfp-ngx.mjs

@@ -32,6 +32,12 @@ import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
 import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
 import '@ui5/webcomponents-icons/dist/search.js';
 import { debounceTime, distinctUntilChanged, map, filter } from 'rxjs';
+import '@ui5/webcomponents-icons/dist/resize-corner.js';
+import '@ui5/webcomponents-icons/dist/alert.js';
+import { List } from '@fundamental-ngx/ui5-webcomponents/list';
+import { ListItemCustom } from '@fundamental-ngx/ui5-webcomponents/list-item-custom';
+import { Switch } from '@fundamental-ngx/ui5-webcomponents/switch';
+import { GridStackEngine } from 'gridstack/dist/gridstack-engine';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Menu } from '@fundamental-ngx/ui5-webcomponents/menu';
 import { MenuItem } from '@fundamental-ngx/ui5-webcomponents/menu-item';
@@ -40,14 +46,10 @@ import '@ui5/webcomponents-icons/dist/action-settings.js';
 import '@ui5/webcomponents-icons/dist/menu2.js';
 import '@ui5/webcomponents-icons/dist/user-edit.js';
 import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
-import '@ui5/webcomponents-icons/dist/resize-corner.js';
-import '@ui5/webcomponents-icons/dist/alert.js';
-import { List } from '@fundamental-ngx/ui5-webcomponents/list';
-import { ListItemCustom } from '@fundamental-ngx/ui5-webcomponents/list-item-custom';
-import { Switch } from '@fundamental-ngx/ui5-webcomponents/switch';
 import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
 import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
 import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
+import '@ui5/webcomponents-icons/dist/overflow.js';
 
 const getResourceValueByJsonPath = (resource, field) => {
     const property = field.jsonPathExpression || field.property;
@@ -1127,6 +1129,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (resourcesSearchable()) {\n        <ui5-input\n          class=\"card__search-input\"\n          data-testid=\"generic-table-card-search-input\"\n          [formControl]=\"searchControl\"\n          [placeholder]=\"searchPlaceholder()\"\n          [showClearIcon]=\"true\"\n        >\n          <ui5-icon\n            class=\"card__search-icon\"\n            data-testid=\"generic-table-card-search-icon\"\n            name=\"search\"\n            slot=\"icon\"\n            [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n            [showTooltip]=\"true\"\n            (click)=\"submitSearch()\"\n          />\n        </ui5-input>\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"\n            createButtonConfig()?.text ||\n            createButtonConfig()?.tooltip ||\n            'Create'\n          \"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"openCreateDialog()\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  @if (hasFilterTabs()) {\n    <mfp-filter-tabs\n      [tabs]=\"filterTabs()\"\n      (tabChanged)=\"onFilterTabChanged($event)\"\n    />\n  }\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [currentPage]=\"config.currentPage ?? 1\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMode]=\"config.loadMode ?? 'button'\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (pageChange)=\"pageChange.emit($event)\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createDialogOpen()) {\n  @let config = createFormConfig();\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config?.title ?? 'Create'\"\n    [open]=\"true\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config?.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"resolvedCreateFields()\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config?.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button\n        data-testid=\"generic-table-card-create-cancel\"\n        design=\"Transparent\"\n        (click)=\"closeCreateDialog()\"\n      >\n        {{ config?.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editDialogOpen()) {\n  @let config = editFormConfig();\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config?.title ?? 'Edit'\"\n    [open]=\"true\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config?.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"resolvedEditFields()\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config?.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button\n        data-testid=\"generic-table-card-edit-cancel\"\n        design=\"Transparent\"\n        (click)=\"closeEditDialog()\"\n      >\n        {{ config?.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-delete-confirm\"\n        design=\"Negative\"\n        (click)=\"onDeleteSubmit()\"\n      >\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button\n        data-testid=\"generic-table-card-delete-cancel\"\n        design=\"Transparent\"\n        (click)=\"closeDeleteDialog()\"\n      >\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-icon{cursor:pointer}.card__create-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "createFormState", required: false }] }], editFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFormState", required: false }] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], createFieldChange: [{ type: i0.Output, args: ["createFieldChange"] }], editFieldChange: [{ type: i0.Output, args: ["editFieldChange"] }], createSubmit: [{ type: i0.Output, args: ["createSubmit"] }], editSubmit: [{ type: i0.Output, args: ["editSubmit"] }], deleteSubmit: [{ type: i0.Output, args: ["deleteSubmit"] }], filterTabChanged: [{ type: i0.Output, args: ["filterTabChanged"] }] } });
 
+/** Default engine breakpoints: 14/12/8/1 columns (matches main). */
+const DASHBOARD_BREAKPOINTS = [
+    { w: 4000, c: 14, layout: 'compact' },
+    { w: 1439, c: 12, layout: 'compact' },
+    { w: 1023, c: 8, layout: 'compact' },
+    { w: 599, c: 1, layout: 'list' },
+];
+/** zFlow engine breakpoints: 4/4/4/1 columns. */
+const ZFLOW_DASHBOARD_BREAKPOINTS = [
+    { w: 4000, c: 4, layout: 'compact' },
+    { w: 1439, c: 4, layout: 'compact' },
+    { w: 1023, c: 4, layout: 'compact' },
+    { w: 599, c: 1, layout: 'list' },
+];
+const XL_PAGE = 1440;
+
+const COMPACT_BREAKPOINT = 726;
+const CELL_HEIGHT = 10;
+const DASHBOARD_CARD_DRAG_ORIGIN_CLASS = 'mfp-dashboard-card-drag-origin';
+const DASHBOARD_CARD_DRAG_ORIGIN_SELECTOR = `.${DASHBOARD_CARD_DRAG_ORIGIN_CLASS}`;
+
 var unsavedChanges$1 = "Nicht gespeicherte Änderungen";
 var editCards$1 = "Karten bearbeiten";
 var editView$1 = "Ansicht bearbeiten";
@@ -1357,6 +1380,8 @@ class DashboardCard {
     removeCard = output();
     i18n = inject(DashboardI18nService);
     i18nKeys = DASHBOARD_I18N_KEYS;
+    componentHostClasses = `component-host ${DASHBOARD_CARD_DRAG_ORIGIN_CLASS}`;
+    cardBodyClasses = `card__body ${DASHBOARD_CARD_DRAG_ORIGIN_CLASS}`;
     gridColumn = computed(() => {
         const width = this.card().w ?? 12;
         return this.createGridTrack(this.card().x, width);
@@ -1406,27 +1431,16 @@ class DashboardCard {
         return `${start + 1} / span ${span}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardCard, isStandalone: true, selector: "mfp-dashboard-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeCard: "removeCard" }, host: { properties: { "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["elementHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (card().component) {\n  <div class=\"component-card\" [attr.data-testid]=\"'dashboard-card-' + card().id\" [class.component-card--editing]=\"editMode()\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          [attr.data-testid]=\"'dashboard-card-' + card().id + '-remove'\"\n          [accessibleName]=\"\n            i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n            ': ' +\n            (card().label || card().component)\n          \"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n      <ui5-icon\n        aria-hidden=\"true\"\n        class=\"card__resize-indicator\"\n        name=\"resize-corner\"\n        [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n      />\n    }\n    <div\n      class=\"component-host\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\" [attr.data-testid]=\"'dashboard-card-' + card().id\">\n    <div\n      class=\"card__body\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"], dependencies: [{ 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardCard, isStandalone: true, selector: "mfp-dashboard-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeCard: "removeCard" }, host: { properties: { "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["elementHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (card().component) {\n  <div class=\"component-card\" [attr.data-testid]=\"'dashboard-card-' + card().id\" [class.component-card--editing]=\"editMode()\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          [attr.data-testid]=\"'dashboard-card-' + card().id + '-remove'\"\n          [accessibleName]=\"\n            i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n            ': ' +\n            (card().label || card().component)\n          \"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n      <ui5-icon\n        aria-hidden=\"true\"\n        class=\"card__resize-indicator\"\n        name=\"resize-corner\"\n        [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n      />\n    }\n    <div\n      [class]=\"componentHostClasses\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\" [attr.data-testid]=\"'dashboard-card-' + card().id\">\n    <div\n      [class]=\"cardBodyClasses\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}:host-context(.zflow-dragging) .remove-wrapper{opacity:0;pointer-events:none}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"], dependencies: [{ 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardCard, decorators: [{
             type: Component,
             args: [{ selector: 'mfp-dashboard-card', imports: [Button, Icon], encapsulation: ViewEncapsulation.Emulated, host: {
                         '[style.grid-column]': 'gridColumn()',
                         '[style.grid-row]': 'gridRow()',
-                    }, template: "@if (card().component) {\n  <div class=\"component-card\" [attr.data-testid]=\"'dashboard-card-' + card().id\" [class.component-card--editing]=\"editMode()\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          [attr.data-testid]=\"'dashboard-card-' + card().id + '-remove'\"\n          [accessibleName]=\"\n            i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n            ': ' +\n            (card().label || card().component)\n          \"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n      <ui5-icon\n        aria-hidden=\"true\"\n        class=\"card__resize-indicator\"\n        name=\"resize-corner\"\n        [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n      />\n    }\n    <div\n      class=\"component-host\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\" [attr.data-testid]=\"'dashboard-card-' + card().id\">\n    <div\n      class=\"card__body\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"] }]
+                    }, template: "@if (card().component) {\n  <div class=\"component-card\" [attr.data-testid]=\"'dashboard-card-' + card().id\" [class.component-card--editing]=\"editMode()\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          [attr.data-testid]=\"'dashboard-card-' + card().id + '-remove'\"\n          [accessibleName]=\"\n            i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n            ': ' +\n            (card().label || card().component)\n          \"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n      <ui5-icon\n        aria-hidden=\"true\"\n        class=\"card__resize-indicator\"\n        name=\"resize-corner\"\n        [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n      />\n    }\n    <div\n      [class]=\"componentHostClasses\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\" [attr.data-testid]=\"'dashboard-card-' + card().id\">\n    <div\n      [class]=\"cardBodyClasses\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}:host-context(.zflow-dragging) .remove-wrapper{opacity:0;pointer-events:none}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], removeCard: [{ type: i0.Output, args: ["removeCard"] }], host: [{ type: i0.ViewChild, args: ['elementHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
-/** Single source of truth for grid + section breakpoints (TypeScript half). */
-const DASHBOARD_BREAKPOINTS = [
-    { w: 4000, c: 14, layout: 'compact' },
-    { w: 1439, c: 12, layout: 'compact' },
-    { w: 1023, c: 8, layout: 'compact' },
-    { w: 599, c: 1, layout: 'list' },
-];
-
-const COMPACT_BREAKPOINT = 726;
-const CELL_HEIGHT = 10;
-
 /**
  * Confirmation popup shown when the user tries to abandon edit mode while
  * there are unsaved dashboard changes. Emits `confirm` when the user accepts
@@ -1549,7 +1563,7 @@ class DashboardSection {
     removeSection = output();
     removeCard = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardSection, isStandalone: true, selector: "mfp-dashboard-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeSection: "removeSection", removeCard: "removeCard" }, host: { properties: { "style.grid-column": "section().w === undefined || section().w === 12 ? \"1 / -1\" : \"span \" + section().w" } }, ngImport: i0, template: "<div\n  class=\"section\"\n  [attr.data-testid]=\"'dashboard-section-' + section().id\"\n  [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n  @if (editMode() && section().editable !== false) {\n    <ui5-button\n      class=\"section__remove\"\n      design=\"Default\"\n      icon=\"decline\"\n      [attr.data-testid]=\"'dashboard-section-' + section().id + '-remove'\"\n      [accessibleName]=\"\n        i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n        ': ' +\n        (section().title || section().id)\n      \"\n      (click)=\"removeSection.emit()\"\n    />\n  }\n  @if (section().title) {\n    <div class=\"section__header\">\n      <span class=\"section__title\" [attr.data-testid]=\"'dashboard-section-' + section().id + '-title'\">{{ section().title }}</span>\n    </div>\n  }\n  <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n    @for (card of cards(); track card.id) {\n      <mfp-dashboard-card\n        [card]=\"card\"\n        [editMode]=\"editMode() && section().editable !== false\"\n        (removeCard)=\"removeCard.emit($any(card.id))\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, 14),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, 12),1fr)}}\n"], dependencies: [{ 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardSection, isStandalone: true, selector: "mfp-dashboard-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeSection: "removeSection", removeCard: "removeCard" }, host: { properties: { "style.grid-column": "section().w === undefined || section().w === 12 ? \"1 / -1\" : \"span \" + section().w" } }, ngImport: i0, template: "<div\n  class=\"section\"\n  [attr.data-testid]=\"'dashboard-section-' + section().id\"\n  [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n  @if (editMode() && section().editable !== false) {\n    <ui5-button\n      class=\"section__remove\"\n      design=\"Default\"\n      icon=\"decline\"\n      [attr.data-testid]=\"'dashboard-section-' + section().id + '-remove'\"\n      [accessibleName]=\"\n        i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n        ': ' +\n        (section().title || section().id)\n      \"\n      (click)=\"removeSection.emit()\"\n    />\n  }\n  @if (section().title) {\n    <div class=\"section__header\">\n      <span class=\"section__title\" [attr.data-testid]=\"'dashboard-section-' + section().id + '-title'\">{{ section().title }}</span>\n    </div>\n  }\n  <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n    @for (card of cards(); track card.id) {\n      <mfp-dashboard-card\n        [card]=\"card\"\n        [editMode]=\"editMode() && section().editable !== false\"\n        (removeCard)=\"removeCard.emit($any(card.id))\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, var(--dashboard-cols-xl, 14)),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, var(--dashboard-cols-sm, 1)),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, var(--dashboard-cols-md, 8)),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, var(--dashboard-cols-lg, 12)),1fr)}}\n"], dependencies: [{ 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardSection, decorators: [{
             type: Component,
@@ -1565,7 +1579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         // cover 12 of 14 columns, leaving a dead 2-col gutter on the right and
                         // squeezing the cards inside it relative to the outer grid's units.
                         '[style.grid-column]': 'section().w === undefined || section().w === 12 ? "1 / -1" : "span " + section().w',
-                    }, template: "<div\n  class=\"section\"\n  [attr.data-testid]=\"'dashboard-section-' + section().id\"\n  [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n  @if (editMode() && section().editable !== false) {\n    <ui5-button\n      class=\"section__remove\"\n      design=\"Default\"\n      icon=\"decline\"\n      [attr.data-testid]=\"'dashboard-section-' + section().id + '-remove'\"\n      [accessibleName]=\"\n        i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n        ': ' +\n        (section().title || section().id)\n      \"\n      (click)=\"removeSection.emit()\"\n    />\n  }\n  @if (section().title) {\n    <div class=\"section__header\">\n      <span class=\"section__title\" [attr.data-testid]=\"'dashboard-section-' + section().id + '-title'\">{{ section().title }}</span>\n    </div>\n  }\n  <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n    @for (card of cards(); track card.id) {\n      <mfp-dashboard-card\n        [card]=\"card\"\n        [editMode]=\"editMode() && section().editable !== false\"\n        (removeCard)=\"removeCard.emit($any(card.id))\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, 14),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, 12),1fr)}}\n"] }]
+                    }, template: "<div\n  class=\"section\"\n  [attr.data-testid]=\"'dashboard-section-' + section().id\"\n  [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n  @if (editMode() && section().editable !== false) {\n    <ui5-button\n      class=\"section__remove\"\n      design=\"Default\"\n      icon=\"decline\"\n      [attr.data-testid]=\"'dashboard-section-' + section().id + '-remove'\"\n      [accessibleName]=\"\n        i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n        ': ' +\n        (section().title || section().id)\n      \"\n      (click)=\"removeSection.emit()\"\n    />\n  }\n  @if (section().title) {\n    <div class=\"section__header\">\n      <span class=\"section__title\" [attr.data-testid]=\"'dashboard-section-' + section().id + '-title'\">{{ section().title }}</span>\n    </div>\n  }\n  <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n    @for (card of cards(); track card.id) {\n      <mfp-dashboard-card\n        [card]=\"card\"\n        [editMode]=\"editMode() && section().editable !== false\"\n        (removeCard)=\"removeCard.emit($any(card.id))\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, var(--dashboard-cols-xl, 14)),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, var(--dashboard-cols-sm, 1)),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, var(--dashboard-cols-md, 8)),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, var(--dashboard-cols-lg, 12)),1fr)}}\n"] }]
         }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], removeSection: [{ type: i0.Output, args: ["removeSection"] }], removeCard: [{ type: i0.Output, args: ["removeCard"] }] } });
 
 /**
@@ -1593,11 +1607,398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'mfp-unsaved-changes-dialog', imports: [Button, Dialog, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog data-testid=\"dashboard-unsaved-changes-dialog\" state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.UNSAVED_CHANGES) }}</ui5-title>\n  </div>\n  <div class=\"unsaved-changes-dialog__body\">\n    {{ i18n.getTranslation(i18nKeys.UNSAVED_NAV_BODY) }}\n  </div>\n  <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n    <ui5-button data-testid=\"dashboard-unsaved-changes-save-btn\" design=\"Emphasized\" (click)=\"save.emit()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-unsaved-changes-discard-btn\" design=\"Transparent\" (click)=\"discard.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-unsaved-changes-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], discard: [{ type: i0.Output, args: ["discard"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
+function getAllowedResizeWidths(maxWidth, columnCount, minWidth = 1, effectiveMax = columnCount) {
+    return [1, 2, maxWidth]
+        .map((w) => Math.min(Math.max(w, minWidth), columnCount))
+        .filter((w, i, list) => list.indexOf(w) === i && w <= effectiveMax)
+        .sort((a, b) => a - b);
+}
+function resolveResizeWidthStep(rawWidth, maxWidth, columnCount, minWidth = 1, effectiveMax = columnCount) {
+    const allowed = getAllowedResizeWidths(maxWidth, columnCount, minWidth, effectiveMax);
+    if (!allowed.length) {
+        return effectiveMax;
+    }
+    return allowed.reduce((best, candidate) => {
+        return Math.abs(candidate - rawWidth) <= Math.abs(best - rawWidth)
+            ? candidate
+            : best;
+    }, allowed[0]);
+}
+
+function hasZFlowOrder(nodes) {
+    return nodes.some((n) => n.zFlowOrder !== undefined);
+}
+function syncNodeOrderFromLayout(nodes) {
+    const sorted = [...nodes].sort(compareNodesByLayoutPosition);
+    sorted.forEach((n, i) => {
+        n.zFlowOrder = i;
+    });
+}
+function seedNodeOrder(nodes) {
+    if (hasZFlowOrder(nodes))
+        return;
+    syncNodeOrderFromLayout(nodes);
+}
+function sortNodesByZFlowOrder(nodes) {
+    return [...nodes].sort((a, b) => {
+        if (a.zFlowOrder !== undefined && b.zFlowOrder !== undefined) {
+            return a.zFlowOrder - b.zFlowOrder;
+        }
+        if (a.zFlowOrder !== undefined)
+            return -1;
+        if (b.zFlowOrder !== undefined)
+            return 1;
+        const ay = a.y ?? 0;
+        const by = b.y ?? 0;
+        if (ay !== by)
+            return ay - by;
+        return (a.x ?? 0) - (b.x ?? 0);
+    });
+}
+function compareNodesByLayoutPosition(a, b) {
+    const ay = a.y ?? 0;
+    const by = b.y ?? 0;
+    if (ay !== by)
+        return ay - by;
+    return (a.x ?? 0) - (b.x ?? 0);
+}
+const PROJECTED_SLOT_OVERLAP_THRESHOLD = 0.5;
+function getZFlowRowHeight(nodes) {
+    return Math.max(...nodes.map((n) => n.h ?? 1), 1);
+}
+function projectZFlowLayout(nodes, columnCount) {
+    const result = [];
+    let curX = 0;
+    let curRow = 0;
+    const rowHeight = getZFlowRowHeight(nodes);
+    for (const node of nodes) {
+        if (!node.id)
+            continue;
+        const w = Math.min(node.w ?? 1, columnCount);
+        const h = node.h ?? rowHeight;
+        if (curX > 0 && curX + w > columnCount) {
+            curX = 0;
+            curRow++;
+        }
+        result.push({
+            id: node.id,
+            row: curRow,
+            x: curX,
+            y: curRow * rowHeight,
+            w,
+            h,
+        });
+        curX += w;
+    }
+    return result;
+}
+function resolveDropRowFromRect(dragRectTopPx, dragRectHeightPx, rowHeightPx, rowCount, previousRow) {
+    if (rowHeightPx <= 0 || rowCount <= 0)
+        return previousRow;
+    const clampedPreviousRow = Math.max(0, Math.min(previousRow, rowCount - 1));
+    const dragBottomPx = dragRectTopPx + dragRectHeightPx;
+    let bestRow = clampedPreviousRow;
+    let bestOverlap = 0;
+    for (let row = 0; row < rowCount; row++) {
+        const rowTopPx = row * rowHeightPx;
+        const rowBottomPx = rowTopPx + rowHeightPx;
+        const overlap = Math.max(0, Math.min(dragBottomPx, rowBottomPx) - Math.max(dragRectTopPx, rowTopPx));
+        if (overlap > bestOverlap) {
+            bestOverlap = overlap;
+            bestRow = row;
+        }
+    }
+    return bestOverlap > 0 ? bestRow : clampedPreviousRow;
+}
+function resolveInsertionSlotFromRow(dragRectCenterXPx, rowNodes, sourceId, cellWidthPx) {
+    const candidates = rowNodes.filter((n) => n.id !== sourceId);
+    if (candidates.length === 0)
+        return 0;
+    for (let i = 0; i < candidates.length; i++) {
+        const n = candidates[i];
+        const nodeX = (n.x ?? 0) * cellWidthPx;
+        const nodeW = (n.w ?? 1) * cellWidthPx;
+        const nodeMid = nodeX + nodeW / 2;
+        if (dragRectCenterXPx <= nodeMid)
+            return i;
+    }
+    return candidates.length;
+}
+function reorderByInsertionSlot(orderedIds, sourceId, targetSlot) {
+    const withoutSource = orderedIds.filter((id) => id !== sourceId);
+    const clamped = Math.max(0, Math.min(targetSlot, withoutSource.length));
+    withoutSource.splice(clamped, 0, sourceId);
+    return withoutSource;
+}
+function resolveInsertionSlotFromProjectedRect(orderedNodes, sourceId, columnCount, dragRect, cellWidthPx, cellHeightPx, previousSlot) {
+    if (cellWidthPx <= 0 || cellHeightPx <= 0) {
+        return previousSlot;
+    }
+    const orderedIds = orderedNodes
+        .filter((node) => node.id)
+        .map((node) => node.id);
+    const nodesById = new Map(orderedNodes
+        .filter((node) => !!node.id)
+        .map((node) => [node.id, node]));
+    const idsWithoutSource = orderedIds.filter((id) => id !== sourceId);
+    const sourceNode = nodesById.get(sourceId);
+    if (!sourceNode)
+        return previousSlot;
+    let bestSlot = previousSlot;
+    let bestOverlapRatio = 0;
+    let bestProjectedSource;
+    for (let slot = 0; slot <= idsWithoutSource.length; slot++) {
+        const candidateIds = reorderByInsertionSlot(orderedIds, sourceId, slot);
+        const candidateNodes = candidateIds
+            .map((id) => nodesById.get(id))
+            .filter((node) => !!node);
+        const projectedSource = projectZFlowLayout(candidateNodes, columnCount).find((projected) => projected.id === sourceId);
+        if (!projectedSource)
+            continue;
+        const overlapAreaPx = getRectOverlapAreaPx(dragRect, {
+            leftPx: projectedSource.x * cellWidthPx,
+            topPx: projectedSource.y * cellHeightPx,
+            widthPx: projectedSource.w * cellWidthPx,
+            heightPx: projectedSource.h * cellHeightPx,
+        });
+        const projectedAreaPx = projectedSource.w *
+            cellWidthPx *
+            projectedSource.h *
+            cellHeightPx;
+        const overlapRatio = projectedAreaPx > 0 ? overlapAreaPx / projectedAreaPx : 0;
+        if (overlapRatio > bestOverlapRatio ||
+            (overlapRatio === bestOverlapRatio &&
+                bestProjectedSource &&
+                isSameProjectedPosition(projectedSource, bestProjectedSource) &&
+                slot > bestSlot)) {
+            bestOverlapRatio = overlapRatio;
+            bestProjectedSource = projectedSource;
+            bestSlot = slot;
+        }
+    }
+    if (bestOverlapRatio > PROJECTED_SLOT_OVERLAP_THRESHOLD)
+        return bestSlot;
+    return Math.max(0, Math.min(previousSlot, idsWithoutSource.length));
+}
+function isSameProjectedPosition(a, b) {
+    return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}
+function getRectOverlapAreaPx(a, b) {
+    const overlapWidthPx = Math.max(0, Math.min(a.leftPx + a.widthPx, b.leftPx + b.widthPx) -
+        Math.max(a.leftPx, b.leftPx));
+    const overlapHeightPx = Math.max(0, Math.min(a.topPx + a.heightPx, b.topPx + b.heightPx) -
+        Math.max(a.topPx, b.topPx));
+    return overlapWidthPx * overlapHeightPx;
+}
+function applyProjectedLayout(nodes, projected) {
+    for (const proj of projected) {
+        const node = nodes.find((n) => n.id === proj.id);
+        if (!node)
+            continue;
+        if (node.x !== proj.x ||
+            node.y !== proj.y ||
+            node.w !== proj.w ||
+            node.h !== proj.h) {
+            node.x = proj.x;
+            node.y = proj.y;
+            node.w = proj.w;
+            node.h = proj.h;
+            node._dirty = true;
+        }
+    }
+}
+function notifyEngine(engine) {
+    engine._notify?.();
+}
+
+class ZflowGridStackEngine extends GridStackEngine {
+    moveNodeCheck(node, opts) {
+        if (opts.resizing) {
+            return this.moveNodeCheckWithSteppedResize(node, opts);
+        }
+        if (node._moving && !opts.nested) {
+            return this.moveNodeCheckWithZFlowDrag(node, opts);
+        }
+        return super.moveNodeCheck(node, opts);
+    }
+    moveNodeCheckWithSteppedResize(node, opts) {
+        if (!node.id || opts.w === undefined)
+            return super.moveNodeCheck(node, opts);
+        const nodes = this.nodes;
+        const sourceNode = nodes.find((n) => n.id === node.id);
+        if (!sourceNode)
+            return super.moveNodeCheck(node, opts);
+        syncNodeOrderFromLayout(nodes);
+        const snapshot = this.takeLayoutSnapshot(nodes);
+        const effectiveMax = this.column - (sourceNode.x ?? 0);
+        const nextWidth = resolveResizeWidthStep(opts.w, sourceNode.maxW ?? this.column, this.column, sourceNode.minW ?? 1, effectiveMax);
+        sourceNode.w = nextWidth;
+        opts.w = nextWidth;
+        opts.x = sourceNode.x;
+        opts.y = sourceNode.y;
+        opts.h = sourceNode.h;
+        const ordered = sortNodesByZFlowOrder(nodes);
+        const projected = projectZFlowLayout(ordered, this.column);
+        applyProjectedLayout(nodes, projected);
+        const changed = this.markLayoutChangesDirty(snapshot);
+        if (!changed)
+            return false;
+        notifyEngine(this);
+        return true;
+    }
+    commitZFlowLayout() {
+        const nodes = this.nodes;
+        seedNodeOrder(nodes);
+        const snapshot = this.takeLayoutSnapshot(nodes);
+        const ordered = sortNodesByZFlowOrder(nodes);
+        const projected = projectZFlowLayout(ordered, this.column);
+        applyProjectedLayout(nodes, projected);
+        const changed = this.markLayoutChangesDirty(snapshot);
+        if (!changed)
+            return false;
+        notifyEngine(this);
+        return true;
+    }
+    syncZFlowOrderFromLayout() {
+        syncNodeOrderFromLayout(this.nodes);
+    }
+    takeLayoutSnapshot(nodes) {
+        return nodes.map((n) => ({
+            node: n,
+            x: n.x,
+            y: n.y,
+            w: n.w,
+            h: n.h,
+        }));
+    }
+    markLayoutChangesDirty(snapshot) {
+        let changed = false;
+        for (const { node, x, y, w, h } of snapshot) {
+            if (node.x === x && node.y === y && node.w === w && node.h === h) {
+                continue;
+            }
+            node._dirty = true;
+            changed = true;
+        }
+        return changed;
+    }
+    moveNodeCheckWithZFlowDrag(node, opts) {
+        if (!node.id)
+            return super.moveNodeCheck(node, opts);
+        const nodes = this.nodes;
+        seedNodeOrder(nodes);
+        const ordered = sortNodesByZFlowOrder(nodes);
+        const orderedIds = ordered.filter((n) => n.id).map((n) => n.id);
+        const rect = opts.rect;
+        const cellWidth = opts.cellWidth ?? 1;
+        const cellHeight = opts.cellHeight ?? 60;
+        const rowHeight = getZFlowRowHeight(ordered);
+        const rowHeightPx = rowHeight * cellHeight;
+        const projected = projectZFlowLayout(ordered, this.column);
+        const rowCount = projected.length > 0 ? Math.max(...projected.map((p) => p.row)) + 1 : 1;
+        const sourceNode = nodes.find((n) => n.id === node.id);
+        const sourceProjected = projected.find((p) => p.id === node.id);
+        const previousRow = sourceProjected?.row ?? 0;
+        let targetRow;
+        if (rect) {
+            const rectTop = rect.top ?? rect.y ?? 0;
+            const rectHeight = rect.height ??
+                rect.h ??
+                rowHeightPx;
+            targetRow = resolveDropRowFromRect(rectTop, rectHeight, rowHeightPx, rowCount, previousRow);
+        }
+        else {
+            targetRow = Math.floor((opts.y ?? sourceNode?.y ?? 0) / rowHeight);
+        }
+        targetRow = Math.max(0, Math.min(targetRow, rowCount - 1));
+        const rowNodes = projected
+            .filter((p) => p.row === targetRow)
+            .map((p) => ({ id: p.id, x: p.x, w: p.w }));
+        const idsWithoutSource = orderedIds.filter((id) => id !== node.id);
+        let absoluteSlot;
+        if (rect) {
+            const rectLeft = rect.left ?? rect.x ?? 0;
+            const rectTop = rect.top ?? rect.y ?? 0;
+            const rectWidth = rect.width ?? rect.w ?? cellWidth;
+            const rectHeight = rect.height ??
+                rect.h ??
+                rowHeightPx;
+            absoluteSlot = resolveInsertionSlotFromProjectedRect(ordered, node.id, this.column, {
+                leftPx: rectLeft,
+                topPx: rectTop,
+                widthPx: rectWidth,
+                heightPx: rectHeight,
+            }, cellWidth, cellHeight, orderedIds.indexOf(node.id));
+        }
+        else {
+            const targetX = opts.x ?? sourceNode?.x ?? 0;
+            const insertionSlotInRow = rowNodes.filter((n) => {
+                const proj = projected.find((p) => p.id === n.id);
+                return proj && proj.x <= targetX && n.id !== node.id;
+            }).length;
+            const rowIdsWithoutSource = rowNodes
+                .filter((n) => n.id && n.id !== node.id)
+                .map((n) => n.id);
+            if (rowIdsWithoutSource.length === 0) {
+                absoluteSlot = orderedIds.indexOf(node.id);
+            }
+            else {
+                const firstRowIdxInFull = idsWithoutSource.indexOf(rowIdsWithoutSource[0]);
+                absoluteSlot = firstRowIdxInFull + insertionSlotInRow;
+            }
+        }
+        absoluteSlot = Math.max(0, Math.min(absoluteSlot, idsWithoutSource.length));
+        const newOrderedIds = reorderByInsertionSlot(orderedIds, node.id, absoluteSlot);
+        const orderChanged = newOrderedIds.some((id, i) => id !== orderedIds[i]);
+        if (!orderChanged)
+            return false;
+        newOrderedIds.forEach((id, idx) => {
+            const n = nodes.find((nn) => nn.id === id);
+            if (n)
+                n.zFlowOrder = idx;
+        });
+        const projectedSource = projectZFlowLayout(sortNodesByZFlowOrder(nodes), this.column).find((projected) => projected.id === node.id);
+        if (projectedSource) {
+            node.x = projectedSource.x;
+            node.y = projectedSource.y;
+            node.w = projectedSource.w;
+            node.h = projectedSource.h;
+            node._dirty = true;
+            notifyEngine(this);
+        }
+        return true;
+    }
+}
+
+const getColumns = (breakpoints) => breakpoints.map((bp) => bp.c).reverse();
+const ENGINE_PROFILES = {
+    zFlow: {
+        engineClass: ZflowGridStackEngine,
+        breakpoints: ZFLOW_DASHBOARD_BREAKPOINTS,
+        sectionColumns: [1, 2, 3, 3],
+        fixedCardHeight: true,
+        xlWidthSwap: true,
+        renderOriginPosition: true,
+    },
+    default: {
+        engineClass: undefined,
+        breakpoints: DASHBOARD_BREAKPOINTS,
+        sectionColumns: getColumns(DASHBOARD_BREAKPOINTS),
+        fixedCardHeight: false,
+        xlWidthSwap: false,
+        renderOriginPosition: false,
+    },
+};
+
 document.body.classList.add('ui5-content-density-compact');
 class Dashboard {
     static registerAngularComponents(componentTypes) {
         addComponentToRegistry(componentTypes);
     }
+    hostEl = inject((ElementRef));
+    injector = inject(Injector);
+    sanitizer = inject(DomSanitizer);
+    i18n = inject(DashboardI18nService);
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     sections = model([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     cards = model([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
@@ -1606,20 +2007,18 @@ class Dashboard {
     saved = output();
     actionButtonClick = output();
     unsavedChangesChange = output();
+    i18nKeys = DASHBOARD_I18N_KEYS;
+    /** True once the user has dragged/resized any grid item while in edit mode. */
+    gridDirty = signal(false, ...(ngDevMode ? [{ debugName: "gridDirty" }] : /* istanbul ignore next */ []));
+    isXLPage = signal(true, ...(ngDevMode ? [{ debugName: "isXLPage" }] : /* istanbul ignore next */ []));
     editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
     compactToolbar = signal(false, ...(ngDevMode ? [{ debugName: "compactToolbar" }] : /* istanbul ignore next */ []));
     toolbarMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "toolbarMenuOpen" }] : /* istanbul ignore next */ []));
-    /** True once the user has dragged/resized any grid item while in edit mode. */
-    gridDirty = signal(false, ...(ngDevMode ? [{ debugName: "gridDirty" }] : /* istanbul ignore next */ []));
+    cardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "cardDialogOpen" }] : /* istanbul ignore next */ []));
+    discardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "discardDialogOpen" }] : /* istanbul ignore next */ []));
+    unsavedNavDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "unsavedNavDialogOpen" }] : /* istanbul ignore next */ []));
     backgroundImageHeight = signal(null, ...(ngDevMode ? [{ debugName: "backgroundImageHeight" }] : /* istanbul ignore next */ []));
-    /** JSON snapshots of sections/cards taken on entering edit mode, used to detect changes. */
-    sectionsSnapshotJson = '';
-    cardsSnapshotJson = '';
-    /**
-     * True when the user is in edit mode AND has made any change (sections/cards
-     * mutated, or grid items moved/resized). Resets when entering edit mode and
-     * after save/cancel.
-     */
+    dragOriginStyle = signal(null, ...(ngDevMode ? [{ debugName: "dragOriginStyle" }] : /* istanbul ignore next */ []));
     hasUnsavedChanges = computed(() => {
         if (!this.editMode())
             return false;
@@ -1628,16 +2027,6 @@ class Dashboard {
         return (JSON.stringify(this.sections()) !== this.sectionsSnapshotJson ||
             JSON.stringify(this.cards()) !== this.cardsSnapshotJson);
     }, ...(ngDevMode ? [{ debugName: "hasUnsavedChanges" }] : /* istanbul ignore next */ []));
-    sectionsSnapshot = [];
-    cardsSnapshot = [];
-    gridStackItems = viewChild.required('grid');
-    addCardBtn = viewChild('editCardsBtn', ...(ngDevMode ? [{ debugName: "addCardBtn" }] : /* istanbul ignore next */ []));
-    resizeObserver;
-    hostEl = inject((ElementRef));
-    injector = inject(Injector);
-    sanitizer = inject(DomSanitizer);
-    i18n = inject(DashboardI18nService);
-    i18nKeys = DASHBOARD_I18N_KEYS;
     safeTitle = computed(() => {
         const clean = this.sanitizer.sanitize(SecurityContext.HTML, this.config().title) ?? '';
         return this.sanitizer.bypassSecurityTrustHtml(clean);
@@ -1649,6 +2038,52 @@ class Dashboard {
         const clean = this.sanitizer.sanitize(SecurityContext.HTML, desc) ?? '';
         return this.sanitizer.bypassSecurityTrustHtml(clean);
     }, ...(ngDevMode ? [{ debugName: "safeDescription" }] : /* istanbul ignore next */ []));
+    engineProfile = computed(() => this.config().zFlow ? ENGINE_PROFILES.zFlow : ENGINE_PROFILES.default, ...(ngDevMode ? [{ debugName: "engineProfile" }] : /* istanbul ignore next */ []));
+    gridStackEngine = computed(() => this.engineProfile().engineClass, ...(ngDevMode ? [{ debugName: "gridStackEngine" }] : /* istanbul ignore next */ []));
+    gridBreakpoints = computed(() => [
+        ...this.engineProfile().breakpoints,
+    ], ...(ngDevMode ? [{ debugName: "gridBreakpoints" }] : /* istanbul ignore next */ []));
+    columnVars = computed(() => {
+        const [sm, md, lg, xl] = this.engineProfile().sectionColumns;
+        return {
+            '--dashboard-cols-sm': sm,
+            '--dashboard-cols-md': md,
+            '--dashboard-cols-lg': lg,
+            '--dashboard-cols-xl': xl,
+        };
+    }, ...(ngDevMode ? [{ debugName: "columnVars" }] : /* istanbul ignore next */ []));
+    customActions = computed(() => this.config().customActions ?? [], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
+    addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
+    editViewButton = computed(() => ({
+        icon: 'action-settings',
+        design: 'Transparent',
+        tooltip: this.i18n.getTranslation(DASHBOARD_I18N_KEYS.EDIT_VIEW),
+        text: '',
+        ...this.config().buttonsSettings?.editViewButton,
+    }), ...(ngDevMode ? [{ debugName: "editViewButton" }] : /* istanbul ignore next */ []));
+    editCardsButton = computed(() => ({
+        icon: '',
+        design: 'Default',
+        tooltip: '',
+        text: this.i18n.getTranslation(DASHBOARD_I18N_KEYS.EDIT_CARDS),
+        ...this.config().buttonsSettings?.editCardsButton,
+    }), ...(ngDevMode ? [{ debugName: "editCardsButton" }] : /* istanbul ignore next */ []));
+    sectionCards = computed(() => {
+        const all = this.cards();
+        return (sectionId) => all.filter((c) => c.sectionId === sectionId);
+    }, ...(ngDevMode ? [{ debugName: "sectionCards" }] : /* istanbul ignore next */ []));
+    looseCards = linkedSignal(() => {
+        const loose = this.cards().filter((c) => !c.sectionId);
+        const cardHeight = this.config().zFlow?.cardHeight;
+        if (!this.engineProfile().fixedCardHeight || cardHeight === undefined)
+            return loose;
+        return loose.map((c) => ({
+            ...c,
+            h: cardHeight,
+            maxH: cardHeight,
+            minH: cardHeight,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "looseCards" }] : /* istanbul ignore next */ []));
     gridOptions = computed(() => ({
         cellHeight: CELL_HEIGHT,
         sizeToContent: true,
@@ -1657,15 +2092,23 @@ class Dashboard {
         marginBottom: 0,
         marginLeft: 0,
         marginRight: 0,
+        engineClass: this.gridStackEngine(),
         columnOpts: {
-            // Source of truth: ../models/breakpoints.ts (paired with
-            // ../models/_breakpoints.scss for the section grid's container queries).
-            breakpoints: [...DASHBOARD_BREAKPOINTS],
+            // Source of truth: ../constants/breakpoints.ts — active profile's
+            // breakpoints (paired with ../constants/_breakpoints.scss for the
+            // section grid's container queries via --dashboard-cols-* CSS vars).
+            breakpoints: this.gridBreakpoints(),
         },
     }), ...(ngDevMode ? [{ debugName: "gridOptions" }] : /* istanbul ignore next */ []));
-    cardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "cardDialogOpen" }] : /* istanbul ignore next */ []));
-    discardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "discardDialogOpen" }] : /* istanbul ignore next */ []));
-    unsavedNavDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "unsavedNavDialogOpen" }] : /* istanbul ignore next */ []));
+    /** JSON snapshots of sections/cards taken on entering edit mode, used to detect changes. */
+    sectionsSnapshotJson = '';
+    cardsSnapshotJson = '';
+    sectionsSnapshot = [];
+    cardsSnapshot = [];
+    gridStack = viewChild.required('grid');
+    addCardBtn = viewChild('editCardsBtn', ...(ngDevMode ? [{ debugName: "addCardBtn" }] : /* istanbul ignore next */ []));
+    resizeObserver;
+    cardsPosition = new Map();
     /** Callback that resumes the intercepted navigation once the user resolves the dialog. */
     pendingNavigation = null;
     /** beforeunload handler kept on instance so add/removeEventListener pair up. */
@@ -1677,29 +2120,6 @@ class Dashboard {
             event.returnValue = '';
         }
     };
-    customActions = computed(() => this.config().customActions ?? [], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
-    addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
-    editViewButton = computed(() => ({
-        icon: 'action-settings',
-        design: 'Transparent',
-        tooltip: this.i18n.getTranslation(DASHBOARD_I18N_KEYS.EDIT_VIEW),
-        text: '',
-        ...this.config().buttonsSettings?.editViewButton,
-    }), ...(ngDevMode ? [{ debugName: "editViewButton" }] : /* istanbul ignore next */ []));
-    editCardsButton = computed(() => ({
-        icon: '',
-        design: 'Default',
-        tooltip: '',
-        text: this.i18n.getTranslation(DASHBOARD_I18N_KEYS.EDIT_CARDS),
-        ...this.config().buttonsSettings?.editCardsButton,
-    }), ...(ngDevMode ? [{ debugName: "editCardsButton" }] : /* istanbul ignore next */ []));
-    sectionCards = computed(() => {
-        const all = this.cards();
-        return (sectionId) => all.filter((c) => c.sectionId === sectionId);
-    }, ...(ngDevMode ? [{ debugName: "sectionCards" }] : /* istanbul ignore next */ []));
-    cardsPosition = new Map();
-    looseCards = linkedSignal(() => this.cards().filter((c) => !c.sectionId), ...(ngDevMode ? [{ debugName: "looseCards" }] : /* istanbul ignore next */ []));
-    newGridStackNodes = [];
     constructor() {
         effect(() => {
             this.unsavedChangesChange.emit(this.hasUnsavedChanges());
@@ -1726,6 +2146,7 @@ class Dashboard {
         this.resizeObserver = new ResizeObserver((entries) => {
             const width = entries[0]?.contentRect.width ?? 0;
             this.compactToolbar.set(width < COMPACT_BREAKPOINT);
+            this.changeCardSettingsForXlPage(width);
         });
         this.resizeObserver.observe(this.hostEl.nativeElement);
         window.addEventListener('beforeunload', this.beforeUnloadHandler);
@@ -1864,7 +2285,7 @@ class Dashboard {
         this.cards.update((list) => list.filter((c) => c.id !== id));
         if (wasLooseCard) {
             afterNextRender(() => {
-                this.gridStackItems().grid?.compact('compact', false);
+                this.gridStack().grid?.compact('compact', false);
             }, { injector: this.injector });
         }
     }
@@ -1881,6 +2302,26 @@ class Dashboard {
         });
         this.closeCardPanel();
     }
+    onDragStart(event) {
+        this.getZFlowEngine()?.syncZFlowOrderFromLayout();
+        if (!this.engineProfile().renderOriginPosition) {
+            return;
+        }
+        const el = event.el;
+        const gridEl = this.gridStack().el;
+        const gridRect = gridEl.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        this.dragOriginStyle.set({
+            top: `${elRect.top - gridRect.top}px`,
+            left: `${elRect.left - gridRect.left}px`,
+            width: `${elRect.width}px`,
+            height: `${elRect.height}px`,
+        });
+    }
+    onDragStop() {
+        this.getZFlowEngine()?.commitZFlowLayout();
+        this.dragOriginStyle.set(null);
+    }
     onGridChange() {
         if (this.editMode()) {
             this.gridDirty.set(true);
@@ -1899,15 +2340,50 @@ class Dashboard {
         });
     }
     updateCardsPositions() {
-        const gridStackNodes = this.gridStackItems()
+        const gridStackNodes = this.gridStack()
             .gridstackItems?.toArray()
             .map((node) => node.options);
         if (gridStackNodes) {
             this.saveCardsPosition(gridStackNodes);
         }
     }
+    getZFlowEngine() {
+        const engine = this.gridStack().grid?.engine;
+        return engine instanceof ZflowGridStackEngine ? engine : null;
+    }
+    updateCardsForBreakpoint(updateCard) {
+        this.getZFlowEngine()?.syncZFlowOrderFromLayout();
+        this.cards.set(this.cards().map(updateCard));
+        afterNextRender(() => {
+            this.getZFlowEngine()?.commitZFlowLayout();
+        }, { injector: this.injector });
+    }
+    changeCardSettingsForXlPage(width) {
+        if (!this.engineProfile().xlWidthSwap)
+            return;
+        if (width >= XL_PAGE) {
+            if (!this.isXLPage()) {
+                this.isXLPage.set(true);
+                this.updateCardsForBreakpoint((c) => ({
+                    ...c,
+                    w: c.w === 4 ? 3 : c.w,
+                    maxW: c.maxW === 4 ? 3 : c.maxW,
+                }));
+            }
+        }
+        else {
+            if (this.isXLPage()) {
+                this.isXLPage.set(false);
+                this.updateCardsForBreakpoint((c) => ({
+                    ...c,
+                    w: c.w === 3 ? 4 : c.w,
+                    maxW: c.maxW === 3 ? 4 : c.maxW,
+                }));
+            }
+        }
+    }
     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: "gridStackItems", 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\">\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 level=\"H3\" size=\"H3\" wrapping-type=\"Normal\" data-testid=\"dashboard-title\">\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 level=\"H5\" size=\"H5\" wrapping-type=\"Normal\" data-testid=\"dashboard-description\">\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            id=\"edit-cards-btn\"\n            data-testid=\"dashboard-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              [attr.data-testid]=\"'dashboard-action-' + action.action\"\n              [accessibleName]=\"action.text || action.tooltip || 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    [options]=\"gridOptions()\"\n    (addedCB)=\"onGridChange()\"\n    (changeCB)=\"onGridChange()\"\n    (removedCB)=\"onGridChange()\"\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 .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2)!important;width:calc(100% - 20px);left:10px!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-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(14,1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(1,1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(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}.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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
             type: Component,
@@ -1928,8 +2404,8 @@ 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\">\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 level=\"H3\" size=\"H3\" wrapping-type=\"Normal\" data-testid=\"dashboard-title\">\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 level=\"H5\" size=\"H5\" wrapping-type=\"Normal\" data-testid=\"dashboard-description\">\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            id=\"edit-cards-btn\"\n            data-testid=\"dashboard-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              [attr.data-testid]=\"'dashboard-action-' + action.action\"\n              [accessibleName]=\"action.text || action.tooltip || 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    [options]=\"gridOptions()\"\n    (addedCB)=\"onGridChange()\"\n    (changeCB)=\"onGridChange()\"\n    (removedCB)=\"onGridChange()\"\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 .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2)!important;width:calc(100% - 20px);left:10px!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-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(14,1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(1,1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(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}.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"] }], gridStackItems: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], addCardBtn: [{ type: i0.ViewChild, args: ['editCardsBtn', { isSignal: true }] }] } });
+                    }, 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"] }]
+        }], 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 }] }] } });
 
 class VisitedServiceCard {
     serviceType = input.required(...(ngDevMode ? [{ debugName: "serviceType" }] : /* istanbul ignore next */ []));
@@ -2024,9 +2500,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'mfp-whats-new', imports: [List, ListItemStandard, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"whats-new\">\n  <ui5-title class=\"whats-new__title\" level=\"H5\">What's New</ui5-title>\n  <ui5-list class=\"whats-new__list\" separators=\"Inner\">\n    @for (item of headlines; track item.title) {\n      <ui5-li [description]=\"item.description\" [icon]=\"item.icon\">\n        {{ item.title }}\n      </ui5-li>\n    }\n  </ui5-list>\n</div>\n", styles: [":host{display:block;height:100%}.whats-new{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.whats-new__title{padding:1rem 1rem .5rem;flex-shrink:0}.whats-new__list{flex:1;overflow-y:auto}\n"] }]
         }] });
 
+class MockCard {
+    title = input('Card Name', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MockCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: MockCard, isStandalone: true, selector: "mfp-mock-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mock-card\">\n  <div class=\"mock-card__header\">\n    <ui5-title class=\"mock-card__title\" level=\"H5\">{{ title() }}</ui5-title>\n    <ui5-button\n      accessibleName=\"More actions\"\n      class=\"mock-card__menu\"\n      design=\"Transparent\"\n      icon=\"overflow\"\n    />\n  </div>\n  <div class=\"mock-card__body\"></div>\n</div>\n", styles: [":host{display:block;height:100%}.mock-card{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:12px;border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.mock-card__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem .5rem .75rem 1rem;flex-shrink:0}.mock-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-card__menu{flex-shrink:0}.mock-card__body{flex:1;min-height:20rem}\n"], dependencies: [{ 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: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MockCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-mock-card', imports: [Button, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"mock-card\">\n  <div class=\"mock-card__header\">\n    <ui5-title class=\"mock-card__title\" level=\"H5\">{{ title() }}</ui5-title>\n    <ui5-button\n      accessibleName=\"More actions\"\n      class=\"mock-card__menu\"\n      design=\"Transparent\"\n      icon=\"overflow\"\n    />\n  </div>\n  <div class=\"mock-card__body\"></div>\n</div>\n", styles: [":host{display:block;height:100%}.mock-card{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:12px;border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.mock-card__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem .5rem .75rem 1rem;flex-shrink:0}.mock-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-card__menu{flex-shrink:0}.mock-card__body{flex:1;min-height:20rem}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
+export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, MockCard, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
 //# sourceMappingURL=openmfp-ngx.mjs.map