@openmfp/ngx 0.18.13 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -72,40 +72,12 @@ const CELL_HEIGHT = 10;
72
72
  const DASHBOARD_CARD_DRAG_ORIGIN_CLASS = 'mfp-dashboard-card-drag-origin';
73
73
  const DASHBOARD_CARD_DRAG_ORIGIN_SELECTOR = `.${DASHBOARD_CARD_DRAG_ORIGIN_CLASS}`;
74
74
 
75
- var unsavedChanges$1 = "Nicht gespeicherte Änderungen";
76
- var editCards$1 = "Karten bearbeiten";
77
- var editView$1 = "Ansicht bearbeiten";
78
- var actions$1 = "Aktionen";
79
- var save$1 = "Speichern";
80
- var cancel$1 = "Abbrechen";
81
- var discard$1 = "Verwerfen";
82
- var discardChanges$1 = "Änderungen verwerfen";
83
- var discardConfirmBody$1 = "Änderungen verwerfen? Diese Aktion kann nicht rückgängig gemacht werden.";
84
- var unsavedNavBody$1 = "Sie verlassen diese Seite. Speichern oder verwerfen Sie die Änderungen, um fortzufahren. Diese Aktion kann nicht rückgängig gemacht werden.";
85
- var noCardsAvailable$1 = "Keine Karten verfügbar.";
86
- var removeSection$1 = "Bereich entfernen";
87
- var removeCard$1 = "Karte entfernen";
88
- var resizable$1 = "Größenveränderbar";
89
- var de = {
90
- unsavedChanges: unsavedChanges$1,
91
- editCards: editCards$1,
92
- editView: editView$1,
93
- actions: actions$1,
94
- save: save$1,
95
- cancel: cancel$1,
96
- discard: discard$1,
97
- discardChanges: discardChanges$1,
98
- discardConfirmBody: discardConfirmBody$1,
99
- unsavedNavBody: unsavedNavBody$1,
100
- noCardsAvailable: noCardsAvailable$1,
101
- removeSection: removeSection$1,
102
- removeCard: removeCard$1,
103
- resizable: resizable$1
104
- };
105
-
75
+ var title = "Hi!";
76
+ var description = "You're on the Dashboard";
77
+ var editHomeButton = "Edit Home";
78
+ var editCardsButton = "Edit Cards";
106
79
  var unsavedChanges = "Unsaved Changes";
107
80
  var editCards = "Edit Cards";
108
- var editView = "Edit View";
109
81
  var actions = "Actions";
110
82
  var save = "Save";
111
83
  var cancel = "Cancel";
@@ -118,9 +90,12 @@ var removeSection = "Remove section";
118
90
  var removeCard = "Remove card";
119
91
  var resizable = "Resizable";
120
92
  var en = {
93
+ title: title,
94
+ description: description,
95
+ editHomeButton: editHomeButton,
96
+ editCardsButton: editCardsButton,
121
97
  unsavedChanges: unsavedChanges,
122
98
  editCards: editCards,
123
- editView: editView,
124
99
  actions: actions,
125
100
  save: save,
126
101
  cancel: cancel,
@@ -135,9 +110,12 @@ var en = {
135
110
  };
136
111
 
137
112
  const DASHBOARD_I18N_KEYS = {
113
+ TITLE: 'title',
114
+ DESCRIPTION: 'description',
115
+ EDIT_HOME_BUTTON: 'editHomeButton',
116
+ EDIT_CARDS_BUTTON: 'editCardsButton',
138
117
  UNSAVED_CHANGES: 'unsavedChanges',
139
118
  EDIT_CARDS: 'editCards',
140
- EDIT_VIEW: 'editView',
141
119
  ACTIONS: 'actions',
142
120
  SAVE: 'save',
143
121
  CANCEL: 'cancel',
@@ -150,23 +128,30 @@ const DASHBOARD_I18N_KEYS = {
150
128
  REMOVE_CARD: 'removeCard',
151
129
  RESIZABLE: 'resizable',
152
130
  };
153
- const DASHBOARD_TRANSLATIONS = {
154
- en,
155
- de,
156
- };
131
+ /**
132
+ * Built-in English strings. This is the only translation the library ships and
133
+ * the fallback used whenever a key is not supplied by the client through
134
+ * `DashboardConfig.i18n`.
135
+ */
136
+ const EN_DEFAULTS = en;
157
137
 
158
138
  /**
159
- * Holds the dashboard's current language and resolves translation keys for
160
- * the dashboard chrome (toolbar buttons, dialogs, a11y labels). Provided at
161
- * the `Dashboard` component level so every nested dashboard component shares
162
- * the same language signal child components inject the same instance and
163
- * react to language changes automatically because `getTranslation` reads the
164
- * signal on every call.
139
+ * Resolves translation keys for the dashboard chrome (toolbar buttons,
140
+ * dialogs, a11y labels). Provided at the `Dashboard` component level so every
141
+ * nested dashboard component shares the same instance child components
142
+ * inject it and react to translation changes automatically because
143
+ * `getTranslation` reads the `overrides` signal on every call.
144
+ *
145
+ * The library ships English only (`EN_DEFAULTS`). Client applications supply
146
+ * translated strings through `DashboardConfig.i18n`, which the `Dashboard`
147
+ * component pushes into `overrides`; switching language is just the client
148
+ * swapping that object. Any key not present in the overrides falls back to the
149
+ * English default, and finally to the key itself.
165
150
  */
166
151
  class DashboardI18nService {
167
- language = signal('en', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
152
+ overrides = signal({}, ...(ngDevMode ? [{ debugName: "overrides" }] : /* istanbul ignore next */ []));
168
153
  getTranslation(key) {
169
- return DASHBOARD_TRANSLATIONS[this.language()][key] ?? key;
154
+ return this.overrides()[key] ?? EN_DEFAULTS[key] ?? key;
170
155
  }
171
156
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
172
157
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardI18nService });
@@ -923,12 +908,22 @@ class Dashboard {
923
908
  hostEl = inject((ElementRef));
924
909
  injector = inject(Injector);
925
910
  sanitizer = inject(DomSanitizer);
926
- i18n = inject(DashboardI18nService);
911
+ i18nService = inject(DashboardI18nService);
927
912
  config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
928
913
  sections = model([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
929
914
  cards = model([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
930
915
  availableCards = input([], ...(ngDevMode ? [{ debugName: "availableCards" }] : /* istanbul ignore next */ []));
931
- language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
916
+ /** Extra action buttons rendered in the toolbar alongside the built-in ones. */
917
+ customActions = input([], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
918
+ /**
919
+ * Full set of dashboard-chrome translations (title, description, toolbar
920
+ * buttons, dialogs, a11y labels). The library ships English only. Provide a
921
+ * complete `DashboardTranslations` to render the dashboard in another
922
+ * language, and swap it to switch language. When `null`, `undefined`, or an
923
+ * empty object, the built-in English defaults (`EN_DEFAULTS`) are used. See
924
+ * `DashboardTranslations` / `DashboardI18nKey` for the full key contract.
925
+ */
926
+ i18n = input(EN_DEFAULTS, ...(ngDevMode ? [{ debugName: "i18n" }] : /* istanbul ignore next */ []));
932
927
  saved = output();
933
928
  actionButtonClick = output();
934
929
  unsavedChangesChange = output();
@@ -953,11 +948,11 @@ class Dashboard {
953
948
  JSON.stringify(this.cards()) !== this.cardsSnapshotJson);
954
949
  }, ...(ngDevMode ? [{ debugName: "hasUnsavedChanges" }] : /* istanbul ignore next */ []));
955
950
  safeTitle = computed(() => {
956
- const clean = this.sanitizer.sanitize(SecurityContext.HTML, this.config().title) ?? '';
951
+ const clean = this.sanitizer.sanitize(SecurityContext.HTML, this.i18nService.getTranslation(DASHBOARD_I18N_KEYS.TITLE)) ?? '';
957
952
  return this.sanitizer.bypassSecurityTrustHtml(clean);
958
953
  }, ...(ngDevMode ? [{ debugName: "safeTitle" }] : /* istanbul ignore next */ []));
959
954
  safeDescription = computed(() => {
960
- const desc = this.config().description;
955
+ const desc = this.i18nService.getTranslation(DASHBOARD_I18N_KEYS.DESCRIPTION);
961
956
  if (!desc)
962
957
  return null;
963
958
  const clean = this.sanitizer.sanitize(SecurityContext.HTML, desc) ?? '';
@@ -977,21 +972,20 @@ class Dashboard {
977
972
  '--dashboard-cols-xl': xl,
978
973
  };
979
974
  }, ...(ngDevMode ? [{ debugName: "columnVars" }] : /* istanbul ignore next */ []));
980
- customActions = computed(() => this.config().customActions ?? [], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
981
975
  addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
982
976
  editViewButton = computed(() => ({
983
977
  icon: 'action-settings',
984
978
  design: 'Transparent',
985
- tooltip: this.i18n.getTranslation(DASHBOARD_I18N_KEYS.EDIT_VIEW),
986
- text: '',
979
+ tooltip: this.i18nService.getTranslation(DASHBOARD_I18N_KEYS.EDIT_HOME_BUTTON),
987
980
  ...this.config().buttonsSettings?.editViewButton,
981
+ text: this.i18nService.getTranslation(DASHBOARD_I18N_KEYS.EDIT_HOME_BUTTON),
988
982
  }), ...(ngDevMode ? [{ debugName: "editViewButton" }] : /* istanbul ignore next */ []));
989
983
  editCardsButton = computed(() => ({
990
984
  icon: '',
991
985
  design: 'Default',
992
986
  tooltip: '',
993
- text: this.i18n.getTranslation(DASHBOARD_I18N_KEYS.EDIT_CARDS),
994
987
  ...this.config().buttonsSettings?.editCardsButton,
988
+ text: this.i18nService.getTranslation(DASHBOARD_I18N_KEYS.EDIT_CARDS_BUTTON),
995
989
  }), ...(ngDevMode ? [{ debugName: "editCardsButton" }] : /* istanbul ignore next */ []));
996
990
  sectionCards = computed(() => {
997
991
  const all = this.cards();
@@ -1050,7 +1044,9 @@ class Dashboard {
1050
1044
  this.unsavedChangesChange.emit(this.hasUnsavedChanges());
1051
1045
  });
1052
1046
  effect(() => {
1053
- this.i18n.language.set(this.language());
1047
+ const supplied = this.i18n();
1048
+ const resolved = supplied && Object.keys(supplied).length > 0 ? supplied : EN_DEFAULTS;
1049
+ this.i18nService.overrides.set(resolved);
1054
1050
  });
1055
1051
  effect((onCleanup) => {
1056
1052
  const url = this.config().backgroundImageUrl;
@@ -1315,7 +1311,7 @@ class Dashboard {
1315
1311
  }
1316
1312
  }
1317
1313
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: Dashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
1318
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null", "style.background-size": "backgroundImageHeight() ? \"100% \" + backgroundImageHeight() + \"px\" : \"100% auto\"" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStack", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"mfp-dashboard\"\n data-testid=\"dashboard\"\n [style]=\"columnVars()\"\n [class.edit]=\"editMode()\"\n>\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title\n data-testid=\"dashboard-title\"\n level=\"H3\"\n size=\"H3\"\n wrapping-type=\"Normal\"\n >\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title\n data-testid=\"dashboard-description\"\n level=\"H5\"\n size=\"H5\"\n wrapping-type=\"Normal\"\n >\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div\n class=\"mfp-dashboard__drag-origin-placeholder\"\n [style]=\"dragOriginStyle()\"\n ></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button\n data-testid=\"dashboard-save-btn\"\n design=\"Emphasized\"\n (click)=\"saveEdit()\"\n >{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button\n >\n <ui5-button\n data-testid=\"dashboard-cancel-btn\"\n design=\"Transparent\"\n (click)=\"cancelEdit()\"\n >{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n >\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
1314
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null", "style.background-size": "backgroundImageHeight() ? \"100% \" + backgroundImageHeight() + \"px\" : \"100% auto\"" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStack", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"mfp-dashboard\"\n data-testid=\"dashboard\"\n [style]=\"columnVars()\"\n [class.edit]=\"editMode()\"\n>\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (i18nService.getTranslation(i18nKeys.TITLE)) {\n <ui5-title\n data-testid=\"dashboard-title\"\n level=\"H3\"\n size=\"H3\"\n wrapping-type=\"Normal\"\n >\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"\n i18nService.getTranslation(i18nKeys.UNSAVED_CHANGES)\n \"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18nService.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (i18nService.getTranslation(i18nKeys.DESCRIPTION)) {\n <ui5-title\n data-testid=\"dashboard-description\"\n level=\"H5\"\n size=\"H5\"\n wrapping-type=\"Normal\"\n >\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18nService.getTranslation(i18nKeys.EDIT_CARDS_BUTTON)\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]=\"i18nService.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18nService.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 i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\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 i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\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 i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div\n class=\"mfp-dashboard__drag-origin-placeholder\"\n [style]=\"dragOriginStyle()\"\n ></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button\n data-testid=\"dashboard-save-btn\"\n design=\"Emphasized\"\n (click)=\"saveEdit()\"\n >{{ i18nService.getTranslation(i18nKeys.SAVE) }}</ui5-button\n >\n <ui5-button\n data-testid=\"dashboard-cancel-btn\"\n design=\"Transparent\"\n (click)=\"cancelEdit()\"\n >{{ i18nService.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n >\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
1319
1315
  }
1320
1316
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: Dashboard, decorators: [{
1321
1317
  type: Component,
@@ -1336,8 +1332,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
1336
1332
  ], providers: [DashboardI18nService], encapsulation: ViewEncapsulation.None, host: {
1337
1333
  '[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
1338
1334
  '[style.background-size]': 'backgroundImageHeight() ? "100% " + backgroundImageHeight() + "px" : "100% auto"',
1339
- }, template: "<div\n class=\"mfp-dashboard\"\n data-testid=\"dashboard\"\n [style]=\"columnVars()\"\n [class.edit]=\"editMode()\"\n>\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title\n data-testid=\"dashboard-title\"\n level=\"H3\"\n size=\"H3\"\n wrapping-type=\"Normal\"\n >\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title\n data-testid=\"dashboard-description\"\n level=\"H5\"\n size=\"H5\"\n wrapping-type=\"Normal\"\n >\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div\n class=\"mfp-dashboard__drag-origin-placeholder\"\n [style]=\"dragOriginStyle()\"\n ></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button\n data-testid=\"dashboard-save-btn\"\n design=\"Emphasized\"\n (click)=\"saveEdit()\"\n >{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button\n >\n <ui5-button\n data-testid=\"dashboard-cancel-btn\"\n design=\"Transparent\"\n (click)=\"cancelEdit()\"\n >{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n >\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
1340
- }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }, { type: i0.Output, args: ["sectionsChange"] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }, { type: i0.Output, args: ["cardsChange"] }], availableCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableCards", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], unsavedChangesChange: [{ type: i0.Output, args: ["unsavedChangesChange"] }], gridStack: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], addCardBtn: [{ type: i0.ViewChild, args: ['editCardsBtn', { isSignal: true }] }] } });
1335
+ }, template: "<div\n class=\"mfp-dashboard\"\n data-testid=\"dashboard\"\n [style]=\"columnVars()\"\n [class.edit]=\"editMode()\"\n>\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (i18nService.getTranslation(i18nKeys.TITLE)) {\n <ui5-title\n data-testid=\"dashboard-title\"\n level=\"H3\"\n size=\"H3\"\n wrapping-type=\"Normal\"\n >\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"\n i18nService.getTranslation(i18nKeys.UNSAVED_CHANGES)\n \"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18nService.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (i18nService.getTranslation(i18nKeys.DESCRIPTION)) {\n <ui5-title\n data-testid=\"dashboard-description\"\n level=\"H5\"\n size=\"H5\"\n wrapping-type=\"Normal\"\n >\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18nService.getTranslation(i18nKeys.EDIT_CARDS_BUTTON)\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]=\"i18nService.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18nService.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 i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\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 i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\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 i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18nService.getTranslation(i18nKeys.EDIT_HOME_BUTTON)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div\n class=\"mfp-dashboard__drag-origin-placeholder\"\n [style]=\"dragOriginStyle()\"\n ></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button\n data-testid=\"dashboard-save-btn\"\n design=\"Emphasized\"\n (click)=\"saveEdit()\"\n >{{ i18nService.getTranslation(i18nKeys.SAVE) }}</ui5-button\n >\n <ui5-button\n data-testid=\"dashboard-cancel-btn\"\n design=\"Transparent\"\n (click)=\"cancelEdit()\"\n >{{ i18nService.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n >\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
1336
+ }], 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 }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], unsavedChangesChange: [{ type: i0.Output, args: ["unsavedChangesChange"] }], gridStack: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], addCardBtn: [{ type: i0.ViewChild, args: ['editCardsBtn', { isSignal: true }] }] } });
1341
1337
 
1342
1338
  /**
1343
1339
  * Public no-argument, `void`-returning handlers on {@link Dashboard} that we
@@ -2694,5 +2690,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
2694
2690
  * Generated bundle index. Do not edit.
2695
2691
  */
2696
2692
 
2697
- export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, DeleteConfirmationDialog, Favorites, LinkValue, MockCard, ResourceField, ResourceFormDialog, SanitizeHtmlPipe, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew, defineDashboardElementMethods };
2693
+ export { BooleanValue, CARD_TYPES, DASHBOARD_I18N_KEYS, Dashboard, DashboardI18nService, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, DeleteConfirmationDialog, EN_DEFAULTS, Favorites, LinkValue, MockCard, ResourceField, ResourceFormDialog, SanitizeHtmlPipe, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew, defineDashboardElementMethods };
2698
2694
  //# sourceMappingURL=openmfp-ngx.mjs.map