@openmfp/ngx 0.14.2 → 0.14.4

package/fesm2022/openmfp-ngx.mjs

@@ -1,6 +1,6 @@
 import { JSONPath } from 'jsonpath-plus';
 import * as i0 from '@angular/core';
-import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, signal, ViewEncapsulation, inject, effect, viewChild, Injector, afterNextRender, reflectComponentType, isStandalone, isDevMode, Injectable, ViewContainerRef, Renderer2, ElementRef, model, SecurityContext, linkedSignal } from '@angular/core';
+import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, signal, ViewEncapsulation, inject, effect, viewChild, Injector, afterNextRender, Injectable, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, ElementRef, model, SecurityContext, linkedSignal } from '@angular/core';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { Link } from '@fundamental-ngx/ui5-webcomponents/link';
 import { Tag } from '@fundamental-ngx/ui5-webcomponents/tag';
@@ -28,11 +28,6 @@ import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
 import '@ui5/webcomponents-icons/dist/add.js';
 import '@ui5/webcomponents-icons/dist/search.js';
 import { debounceTime } 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 { DomSanitizer } from '@angular/platform-browser';
 import { Menu } from '@fundamental-ngx/ui5-webcomponents/menu';
 import { MenuItem } from '@fundamental-ngx/ui5-webcomponents/menu-item';
@@ -41,6 +36,11 @@ 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';
@@ -858,6 +858,109 @@ 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 (config().resourcesSearchable) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  @if (hasFilterTabs()) {\n    <mfp-filter-tabs\n      [tabs]=\"filterTabs()\"\n      (tabChanged)=\"onFilterTabChanged($event)\"\n    />\n  }\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"] }]
         }], 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"] }], 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"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
+var unsavedChanges$1 = "Nicht gespeicherte Änderungen";
+var editCards$1 = "Karten bearbeiten";
+var editView$1 = "Ansicht bearbeiten";
+var actions$1 = "Aktionen";
+var save$1 = "Speichern";
+var cancel$1 = "Abbrechen";
+var discard$1 = "Verwerfen";
+var discardChanges$1 = "Änderungen verwerfen";
+var discardConfirmBody$1 = "Änderungen verwerfen? Diese Aktion kann nicht rückgängig gemacht werden.";
+var unsavedNavBody$1 = "Sie verlassen diese Seite. Speichern oder verwerfen Sie die Änderungen, um fortzufahren. Diese Aktion kann nicht rückgängig gemacht werden.";
+var noCardsAvailable$1 = "Keine Karten verfügbar.";
+var removeSection$1 = "Bereich entfernen";
+var removeCard$1 = "Karte entfernen";
+var resizable$1 = "Größenveränderbar";
+var de = {
+	unsavedChanges: unsavedChanges$1,
+	editCards: editCards$1,
+	editView: editView$1,
+	actions: actions$1,
+	save: save$1,
+	cancel: cancel$1,
+	discard: discard$1,
+	discardChanges: discardChanges$1,
+	discardConfirmBody: discardConfirmBody$1,
+	unsavedNavBody: unsavedNavBody$1,
+	noCardsAvailable: noCardsAvailable$1,
+	removeSection: removeSection$1,
+	removeCard: removeCard$1,
+	resizable: resizable$1
+};
+
+var unsavedChanges = "Unsaved Changes";
+var editCards = "Edit Cards";
+var editView = "Edit View";
+var actions = "Actions";
+var save = "Save";
+var cancel = "Cancel";
+var discard = "Discard";
+var discardChanges = "Discard Changes";
+var discardConfirmBody = "Discard the changes? This action cannot be undone.";
+var unsavedNavBody = "You are leaving this page. Save or discard the changes to proceed. This action cannot be undone.";
+var noCardsAvailable = "No cards available.";
+var removeSection = "Remove section";
+var removeCard = "Remove card";
+var resizable = "Resizable";
+var en = {
+	unsavedChanges: unsavedChanges,
+	editCards: editCards,
+	editView: editView,
+	actions: actions,
+	save: save,
+	cancel: cancel,
+	discard: discard,
+	discardChanges: discardChanges,
+	discardConfirmBody: discardConfirmBody,
+	unsavedNavBody: unsavedNavBody,
+	noCardsAvailable: noCardsAvailable,
+	removeSection: removeSection,
+	removeCard: removeCard,
+	resizable: resizable
+};
+
+const DASHBOARD_I18N_KEYS = {
+    UNSAVED_CHANGES: 'unsavedChanges',
+    EDIT_CARDS: 'editCards',
+    EDIT_VIEW: 'editView',
+    ACTIONS: 'actions',
+    SAVE: 'save',
+    CANCEL: 'cancel',
+    DISCARD: 'discard',
+    DISCARD_CHANGES: 'discardChanges',
+    DISCARD_CONFIRM_BODY: 'discardConfirmBody',
+    UNSAVED_NAV_BODY: 'unsavedNavBody',
+    NO_CARDS_AVAILABLE: 'noCardsAvailable',
+    REMOVE_SECTION: 'removeSection',
+    REMOVE_CARD: 'removeCard',
+    RESIZABLE: 'resizable',
+};
+const DASHBOARD_TRANSLATIONS = {
+    en,
+    de,
+};
+
+/**
+ * Holds the dashboard's current language and resolves translation keys for
+ * the dashboard chrome (toolbar buttons, dialogs, a11y labels). Provided at
+ * the `Dashboard` component level so every nested dashboard component shares
+ * the same language signal — child components inject the same instance and
+ * react to language changes automatically because `getTranslation` reads the
+ * signal on every call.
+ */
+class DashboardI18nService {
+    language = signal('en', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    getTranslation(key) {
+        return DASHBOARD_TRANSLATIONS[this.language()][key] ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardI18nService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardI18nService, decorators: [{
+            type: Injectable
+        }] });
+
 const CARD_TYPES = {
     WC: 'wc',
     ANGULAR: 'angular',
@@ -979,109 +1082,6 @@ function mountWcCard(cfg, container, onCleanup, renderer) {
     });
 }
 
-var unsavedChanges$1 = "Nicht gespeicherte Änderungen";
-var editCards$1 = "Karten bearbeiten";
-var editView$1 = "Ansicht bearbeiten";
-var actions$1 = "Aktionen";
-var save$1 = "Speichern";
-var cancel$1 = "Abbrechen";
-var discard$1 = "Verwerfen";
-var discardChanges$1 = "Änderungen verwerfen";
-var discardConfirmBody$1 = "Änderungen verwerfen? Diese Aktion kann nicht rückgängig gemacht werden.";
-var unsavedNavBody$1 = "Sie verlassen diese Seite. Speichern oder verwerfen Sie die Änderungen, um fortzufahren. Diese Aktion kann nicht rückgängig gemacht werden.";
-var noCardsAvailable$1 = "Keine Karten verfügbar.";
-var removeSection$1 = "Bereich entfernen";
-var removeCard$1 = "Karte entfernen";
-var resizable$1 = "Größenveränderbar";
-var de = {
-	unsavedChanges: unsavedChanges$1,
-	editCards: editCards$1,
-	editView: editView$1,
-	actions: actions$1,
-	save: save$1,
-	cancel: cancel$1,
-	discard: discard$1,
-	discardChanges: discardChanges$1,
-	discardConfirmBody: discardConfirmBody$1,
-	unsavedNavBody: unsavedNavBody$1,
-	noCardsAvailable: noCardsAvailable$1,
-	removeSection: removeSection$1,
-	removeCard: removeCard$1,
-	resizable: resizable$1
-};
-
-var unsavedChanges = "Unsaved Changes";
-var editCards = "Edit Cards";
-var editView = "Edit View";
-var actions = "Actions";
-var save = "Save";
-var cancel = "Cancel";
-var discard = "Discard";
-var discardChanges = "Discard Changes";
-var discardConfirmBody = "Discard the changes? This action cannot be undone.";
-var unsavedNavBody = "You are leaving this page. Save or discard the changes to proceed. This action cannot be undone.";
-var noCardsAvailable = "No cards available.";
-var removeSection = "Remove section";
-var removeCard = "Remove card";
-var resizable = "Resizable";
-var en = {
-	unsavedChanges: unsavedChanges,
-	editCards: editCards,
-	editView: editView,
-	actions: actions,
-	save: save,
-	cancel: cancel,
-	discard: discard,
-	discardChanges: discardChanges,
-	discardConfirmBody: discardConfirmBody,
-	unsavedNavBody: unsavedNavBody,
-	noCardsAvailable: noCardsAvailable,
-	removeSection: removeSection,
-	removeCard: removeCard,
-	resizable: resizable
-};
-
-const DASHBOARD_I18N_KEYS = {
-    UNSAVED_CHANGES: 'unsavedChanges',
-    EDIT_CARDS: 'editCards',
-    EDIT_VIEW: 'editView',
-    ACTIONS: 'actions',
-    SAVE: 'save',
-    CANCEL: 'cancel',
-    DISCARD: 'discard',
-    DISCARD_CHANGES: 'discardChanges',
-    DISCARD_CONFIRM_BODY: 'discardConfirmBody',
-    UNSAVED_NAV_BODY: 'unsavedNavBody',
-    NO_CARDS_AVAILABLE: 'noCardsAvailable',
-    REMOVE_SECTION: 'removeSection',
-    REMOVE_CARD: 'removeCard',
-    RESIZABLE: 'resizable',
-};
-const DASHBOARD_TRANSLATIONS = {
-    en,
-    de,
-};
-
-/**
- * Holds the dashboard's current language and resolves translation keys for
- * the dashboard chrome (toolbar buttons, dialogs, a11y labels). Provided at
- * the `Dashboard` component level so every nested dashboard component shares
- * the same language signal — child components inject the same instance and
- * react to language changes automatically because `getTranslation` reads the
- * signal on every call.
- */
-class DashboardI18nService {
-    language = signal('en', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
-    getTranslation(key) {
-        return DASHBOARD_TRANSLATIONS[this.language()][key] ?? key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardI18nService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardI18nService, decorators: [{
-            type: Injectable
-        }] });
-
 class DashboardCard {
     card = input.required(...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
     editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
@@ -1098,24 +1098,34 @@ class DashboardCard {
     }, ...(ngDevMode ? [{ debugName: "gridRow" }] : /* istanbul ignore next */ []));
     host = viewChild('elementHost', { ...(ngDevMode ? { debugName: "host" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     renderer = inject(Renderer2);
+    mountCfg = computed(() => {
+        const c = this.card();
+        return {
+            type: c.type,
+            component: c.component,
+            componentInputs: c.componentInputs,
+        };
+    }, { ...(ngDevMode ? { debugName: "mountCfg" } : /* istanbul ignore next */ {}), equal: (a, b) => a.type === b.type &&
+            a.component === b.component &&
+            JSON.stringify(a.componentInputs) === JSON.stringify(b.componentInputs) });
     constructor() {
         effect((onCleanup) => {
             const host = this.host();
-            const cfg = this.card();
-            if (!host || !cfg.component)
+            const mountCfg = this.mountCfg();
+            if (!host || !mountCfg.component)
                 return;
             host.clear();
             host.element.nativeElement.innerHTML = '';
-            switch (cfg.type) {
+            switch (mountCfg.type) {
                 case CARD_TYPES.SAP_UI:
-                    mountSapCard(cfg, host, onCleanup);
+                    mountSapCard(mountCfg, host, onCleanup);
                     break;
                 case CARD_TYPES.ANGULAR:
-                    mountAngularCard(cfg, host, onCleanup);
+                    mountAngularCard(mountCfg, host, onCleanup);
                     break;
                 case CARD_TYPES.WC:
                 default:
-                    mountWcCard(cfg, host, onCleanup, this.renderer);
+                    mountWcCard(mountCfg, host, onCleanup, this.renderer);
                     break;
             }
         });
@@ -1245,11 +1255,11 @@ class EditCardsDialog {
         this.confirm.emit({ added, removed });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EditCardsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EditCardsDialog, isStandalone: true, selector: "mfp-edit-cards-dialog", inputs: { availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, addedCardsIds: { classPropertyName: "addedCardsIds", publicName: "addedCardsIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog data-testid=\"dashboard-edit-cards-dialog\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list\n      selectionMode=\"None\"\n      separators=\"Inner\"\n      [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n    >\n      @for (availableCard of availableCards(); track availableCard.id) {\n        <ui5-li-custom\n          [attr.data-testid]=\"'dashboard-edit-cards-row-' + availableCard.id\"\n          [accessibleName]=\"availableCard.label || availableCard.component\"\n        >\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ availableCard.label || availableCard.component }}</span>\n            <ui5-switch\n              [attr.data-testid]=\"'dashboard-edit-cards-switch-' + availableCard.id\"\n              [accessibleName]=\"availableCard.label || availableCard.component\"\n              [checked]=\"selectedIds().has(availableCard.id)\"\n              (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n              (ui5Change)=\"toggle(availableCard.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button data-testid=\"dashboard-edit-cards-save-btn\" design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-edit-cards-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\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: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: List, selector: "ui5-list, [ui5-list]", inputs: ["headerText", "footerText", "indent", "selectionMode", "noDataText", "separators", "growing", "growingButtonText", "loading", "loadingDelay", "stickyHeader", "accessibleName", "accessibilityAttributes", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "accessibleRole"], outputs: ["ui5ItemClick", "ui5ItemClose", "ui5ItemToggle", "ui5ItemDelete", "ui5SelectionChange", "ui5LoadMore", "ui5MoveOver", "ui5Move"], exportAs: ["ui5List"] }, { kind: "component", type: ListItemCustom, selector: "ui5-li-custom, [ui5-li-custom]", inputs: ["movable", "accessibleName", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemCustom"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["design", "checked", "disabled", "textOn", "textOff", "accessibleName", "accessibleNameRef", "tooltip", "required", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EditCardsDialog, isStandalone: true, selector: "mfp-edit-cards-dialog", inputs: { availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, addedCardsIds: { classPropertyName: "addedCardsIds", publicName: "addedCardsIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog data-testid=\"dashboard-edit-cards-dialog\" class=\"edit-cards-dialog-container\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list\n      selectionMode=\"None\"\n      separators=\"Inner\"\n      [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n    >\n      @for (availableCard of availableCards(); track availableCard.id) {\n        <ui5-li-custom\n          [attr.data-testid]=\"'dashboard-edit-cards-row-' + availableCard.id\"\n          class=\"edit-cards-dialog__list-item-container\"\n          [accessibleName]=\"availableCard.label || availableCard.component\"\n        >\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ availableCard.label || availableCard.component }}</span>\n            <ui5-switch\n              [attr.data-testid]=\"'dashboard-edit-cards-switch-' + availableCard.id\"\n              [accessibleName]=\"availableCard.label || availableCard.component\"\n              [checked]=\"selectedIds().has(availableCard.id)\"\n              (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n              (ui5Change)=\"toggle(availableCard.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button data-testid=\"dashboard-edit-cards-save-btn\" design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-edit-cards-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog-container{min-width:460px;min-height:400px}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 0}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;padding-right:.25rem;width:100%}.edit-cards-dialog__list-item-container{border-bottom-color:#e5e5e5}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\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: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: List, selector: "ui5-list, [ui5-list]", inputs: ["headerText", "footerText", "indent", "selectionMode", "noDataText", "separators", "growing", "growingButtonText", "loading", "loadingDelay", "stickyHeader", "accessibleName", "accessibilityAttributes", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "accessibleRole"], outputs: ["ui5ItemClick", "ui5ItemClose", "ui5ItemToggle", "ui5ItemDelete", "ui5SelectionChange", "ui5LoadMore", "ui5MoveOver", "ui5Move"], exportAs: ["ui5List"] }, { kind: "component", type: ListItemCustom, selector: "ui5-li-custom, [ui5-li-custom]", inputs: ["movable", "accessibleName", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemCustom"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["design", "checked", "disabled", "textOn", "textOff", "accessibleName", "accessibleNameRef", "tooltip", "required", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { 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: EditCardsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mfp-edit-cards-dialog', imports: [Button, Dialog, List, ListItemCustom, Switch, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog data-testid=\"dashboard-edit-cards-dialog\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list\n      selectionMode=\"None\"\n      separators=\"Inner\"\n      [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n    >\n      @for (availableCard of availableCards(); track availableCard.id) {\n        <ui5-li-custom\n          [attr.data-testid]=\"'dashboard-edit-cards-row-' + availableCard.id\"\n          [accessibleName]=\"availableCard.label || availableCard.component\"\n        >\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ availableCard.label || availableCard.component }}</span>\n            <ui5-switch\n              [attr.data-testid]=\"'dashboard-edit-cards-switch-' + availableCard.id\"\n              [accessibleName]=\"availableCard.label || availableCard.component\"\n              [checked]=\"selectedIds().has(availableCard.id)\"\n              (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n              (ui5Change)=\"toggle(availableCard.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button data-testid=\"dashboard-edit-cards-save-btn\" design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-edit-cards-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
+            args: [{ selector: 'mfp-edit-cards-dialog', imports: [Button, Dialog, List, ListItemCustom, Switch, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog data-testid=\"dashboard-edit-cards-dialog\" class=\"edit-cards-dialog-container\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list\n      selectionMode=\"None\"\n      separators=\"Inner\"\n      [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n    >\n      @for (availableCard of availableCards(); track availableCard.id) {\n        <ui5-li-custom\n          [attr.data-testid]=\"'dashboard-edit-cards-row-' + availableCard.id\"\n          class=\"edit-cards-dialog__list-item-container\"\n          [accessibleName]=\"availableCard.label || availableCard.component\"\n        >\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ availableCard.label || availableCard.component }}</span>\n            <ui5-switch\n              [attr.data-testid]=\"'dashboard-edit-cards-switch-' + availableCard.id\"\n              [accessibleName]=\"availableCard.label || availableCard.component\"\n              [checked]=\"selectedIds().has(availableCard.id)\"\n              (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n              (ui5Change)=\"toggle(availableCard.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button data-testid=\"dashboard-edit-cards-save-btn\" design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n    <ui5-button data-testid=\"dashboard-edit-cards-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog-container{min-width:460px;min-height:400px}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 0}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;padding-right:.25rem;width:100%}.edit-cards-dialog__list-item-container{border-bottom-color:#e5e5e5}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { availableCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableCards", required: false }] }], addedCardsIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedCardsIds", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
 class DashboardSection {
@@ -1332,6 +1342,7 @@ class Dashboard {
     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 */ []));
+    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 = '';
@@ -1427,6 +1438,20 @@ class Dashboard {
         effect(() => {
             this.i18n.language.set(this.language());
         });
+        effect((onCleanup) => {
+            const url = this.config().backgroundImageUrl;
+            this.backgroundImageHeight.set(null);
+            if (!url)
+                return;
+            const img = new Image();
+            img.onload = () => {
+                this.backgroundImageHeight.set(img.naturalHeight);
+            };
+            img.src = url;
+            onCleanup(() => {
+                img.onload = null;
+            });
+        });
     }
     ngOnInit() {
         this.resizeObserver = new ResizeObserver((entries) => {
@@ -1451,12 +1476,7 @@ class Dashboard {
         }
     }
     enterEditMode() {
-        const gridStackNodes = this.gridStackItems()
-            .gridstackItems?.toArray()
-            .map((node) => node.options);
-        if (gridStackNodes) {
-            this.saveCardsPosition(gridStackNodes);
-        }
+        this.updateCardsPositions();
         this.sectionsSnapshot = [...this.sections()];
         this.cardsSnapshot = [...this.cards()];
         this.sectionsSnapshotJson = JSON.stringify(this.sections());
@@ -1468,22 +1488,24 @@ class Dashboard {
         }, { injector: this.injector });
     }
     saveEdit() {
-        this.saveCardsPosition(this.newGridStackNodes);
-        this.saved.emit({
-            sections: this.sections(),
-            cards: this.cards().map((c) => {
-                const pos = this.cardsPosition.get(c.id);
-                return {
-                    ...c,
-                    x: pos?.x,
-                    y: pos?.y,
-                    w: pos?.w ?? c.w,
-                    h: pos?.h ?? c.h,
-                };
-            }),
+        this.updateCardsPositions();
+        const savedCards = this.cards().map((c) => {
+            const pos = this.cardsPosition.get(c.id);
+            return {
+                ...c,
+                x: pos?.x,
+                y: pos?.y,
+                w: pos?.w ?? c.w,
+                h: pos?.h ?? c.h,
+            };
         });
         this.gridDirty.set(false);
         this.editMode.set(false);
+        this.cards.set(savedCards);
+        this.saved.emit({
+            sections: this.sections(),
+            cards: savedCards,
+        });
     }
     cancelEdit() {
         if (this.hasUnsavedChanges()) {
@@ -1492,18 +1514,10 @@ class Dashboard {
         }
         this.discardEdit();
     }
-    /**
-     * Confirms abandoning unsaved edit-mode changes: closes the discard popup
-     * and reverts sections/cards to the snapshot taken on entering edit mode.
-     */
     confirmDiscard() {
         this.discardDialogOpen.set(false);
         this.discardEdit();
     }
-    /**
-     * Cancels the discard popup and keeps the user in edit mode with their
-     * pending changes intact.
-     */
     cancelDiscard() {
         this.discardDialogOpen.set(false);
     }
@@ -1576,8 +1590,14 @@ class Dashboard {
         this.cards.update((list) => list.filter((c) => c.sectionId !== id));
     }
     removeCard(id) {
+        const wasLooseCard = this.looseCards().some((c) => c.id === id);
         this.cardsPosition.delete(id);
         this.cards.update((list) => list.filter((c) => c.id !== id));
+        if (wasLooseCard) {
+            afterNextRender(() => {
+                this.gridStackItems().grid?.compact('compact', false);
+            }, { injector: this.injector });
+        }
     }
     openCardPanel() {
         this.cardDialogOpen.set(true);
@@ -1592,8 +1612,7 @@ class Dashboard {
         });
         this.closeCardPanel();
     }
-    onGridChange(event) {
-        this.newGridStackNodes = event.nodes;
+    onGridChange() {
         if (this.editMode()) {
             this.gridDirty.set(true);
         }
@@ -1610,8 +1629,16 @@ class Dashboard {
             }
         });
     }
+    updateCardsPositions() {
+        const gridStackNodes = this.gridStackItems()
+            .gridstackItems?.toArray()
+            .map((node) => node.options);
+        if (gridStackNodes) {
+            this.saveCardsPosition(gridStackNodes);
+        }
+    }
     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" } }, 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($event)\"\n    (changeCB)=\"onGridChange($event)\"\n    (removedCB)=\"onGridChange($event)\"\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  @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</div>\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-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.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}.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}.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}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:sticky;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-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: "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-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.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}.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}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
             type: Component,
@@ -1631,7 +1658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         Title,
                     ], providers: [DashboardI18nService], encapsulation: ViewEncapsulation.None, host: {
                         '[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
-                    }, 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($event)\"\n    (changeCB)=\"onGridChange($event)\"\n    (removedCB)=\"onGridChange($event)\"\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  @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</div>\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-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.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}.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}.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}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:sticky;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-item>.ui-resizable-handle{background-image:none!important}\n"] }]
+                        '[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-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.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}.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}.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 }] }] } });
 
 class VisitedServiceCard {