@openmfp/ngx 0.18.10 → 0.18.11
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.
package/fesm2022/openmfp-ngx.mjs
CHANGED
|
@@ -1653,6 +1653,12 @@ function seedNodeOrder(nodes) {
|
|
|
1653
1653
|
return;
|
|
1654
1654
|
syncNodeOrderFromLayout(nodes);
|
|
1655
1655
|
}
|
|
1656
|
+
function normalizeNodeOrder(nodes) {
|
|
1657
|
+
seedNodeOrder(nodes);
|
|
1658
|
+
sortNodesByZFlowOrder(nodes).forEach((node, index) => {
|
|
1659
|
+
node.zFlowOrder = index;
|
|
1660
|
+
});
|
|
1661
|
+
}
|
|
1656
1662
|
function sortNodesByZFlowOrder(nodes) {
|
|
1657
1663
|
return [...nodes].sort((a, b) => {
|
|
1658
1664
|
if (a.zFlowOrder !== undefined && b.zFlowOrder !== undefined) {
|
|
@@ -1775,10 +1781,7 @@ function resolveInsertionSlotFromProjectedRect(orderedNodes, sourceId, columnCou
|
|
|
1775
1781
|
widthPx: projectedSource.w * cellWidthPx,
|
|
1776
1782
|
heightPx: projectedSource.h * cellHeightPx,
|
|
1777
1783
|
});
|
|
1778
|
-
const projectedAreaPx = projectedSource.w *
|
|
1779
|
-
cellWidthPx *
|
|
1780
|
-
projectedSource.h *
|
|
1781
|
-
cellHeightPx;
|
|
1784
|
+
const projectedAreaPx = projectedSource.w * cellWidthPx * projectedSource.h * cellHeightPx;
|
|
1782
1785
|
const overlapRatio = projectedAreaPx > 0 ? overlapAreaPx / projectedAreaPx : 0;
|
|
1783
1786
|
if (overlapRatio > bestOverlapRatio ||
|
|
1784
1787
|
(overlapRatio === bestOverlapRatio &&
|
|
@@ -1862,7 +1865,7 @@ class ZflowGridStackEngine extends GridStackEngine {
|
|
|
1862
1865
|
}
|
|
1863
1866
|
commitZFlowLayout() {
|
|
1864
1867
|
const nodes = this.nodes;
|
|
1865
|
-
|
|
1868
|
+
normalizeNodeOrder(nodes);
|
|
1866
1869
|
const snapshot = this.takeLayoutSnapshot(nodes);
|
|
1867
1870
|
const ordered = sortNodesByZFlowOrder(nodes);
|
|
1868
1871
|
const projected = projectZFlowLayout(ordered, this.column);
|
|
@@ -2310,6 +2313,12 @@ class Dashboard {
|
|
|
2310
2313
|
this.cardDialogOpen.set(false);
|
|
2311
2314
|
}
|
|
2312
2315
|
onCardsEdited(event) {
|
|
2316
|
+
const looseCardIds = new Set(this.looseCards().map((c) => c.id));
|
|
2317
|
+
const hasLooseCardChanges = event.added.some((card) => !card.sectionId) ||
|
|
2318
|
+
event.removed.some((id) => looseCardIds.has(id));
|
|
2319
|
+
if (hasLooseCardChanges) {
|
|
2320
|
+
this.getZFlowEngine()?.syncZFlowOrderFromLayout();
|
|
2321
|
+
}
|
|
2313
2322
|
this.cards.update((list) => {
|
|
2314
2323
|
const withoutRemoved = list.filter((c) => !event.removed.includes(c.id));
|
|
2315
2324
|
return [...withoutRemoved, ...event.added.map((ac) => ({ ...ac }))];
|
|
@@ -2337,6 +2346,7 @@ class Dashboard {
|
|
|
2337
2346
|
this.dragOriginStyle.set(null);
|
|
2338
2347
|
}
|
|
2339
2348
|
onGridChange() {
|
|
2349
|
+
this.getZFlowEngine()?.commitZFlowLayout();
|
|
2340
2350
|
if (this.editMode()) {
|
|
2341
2351
|
this.gridDirty.set(true);
|
|
2342
2352
|
}
|
|
@@ -2397,7 +2407,7 @@ class Dashboard {
|
|
|
2397
2407
|
}
|
|
2398
2408
|
}
|
|
2399
2409
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null", "style.background-size": "backgroundImageHeight() ? \"100% \" + backgroundImageHeight() + \"px\" : \"100% auto\"" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStack", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mfp-dashboard\" data-testid=\"dashboard\" [style]=\"columnVars()\" [class.edit]=\"editMode()\">\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title data-testid=\"dashboard-title\" level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title data-testid=\"dashboard-description\" level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div class=\"mfp-dashboard__drag-origin-placeholder\" [style]=\"dragOriginStyle()\"></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button data-testid=\"dashboard-save-btn\" design=\"Emphasized\" (click)=\"saveEdit()\">{{\n i18n.getTranslation(i18nKeys.SAVE)\n }}</ui5-button>\n <ui5-button data-testid=\"dashboard-cancel-btn\" design=\"Transparent\" (click)=\"cancelEdit()\">{{\n i18n.getTranslation(i18nKeys.CANCEL)\n }}</ui5-button>\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2410
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null", "style.background-size": "backgroundImageHeight() ? \"100% \" + backgroundImageHeight() + \"px\" : \"100% auto\"" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStack", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"mfp-dashboard\"\n data-testid=\"dashboard\"\n [style]=\"columnVars()\"\n [class.edit]=\"editMode()\"\n>\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title\n data-testid=\"dashboard-title\"\n level=\"H3\"\n size=\"H3\"\n wrapping-type=\"Normal\"\n >\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title\n data-testid=\"dashboard-description\"\n level=\"H5\"\n size=\"H5\"\n wrapping-type=\"Normal\"\n >\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div\n class=\"mfp-dashboard__drag-origin-placeholder\"\n [style]=\"dragOriginStyle()\"\n ></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button\n data-testid=\"dashboard-save-btn\"\n design=\"Emphasized\"\n (click)=\"saveEdit()\"\n >{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button\n >\n <ui5-button\n data-testid=\"dashboard-cancel-btn\"\n design=\"Transparent\"\n (click)=\"cancelEdit()\"\n >{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button\n >\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2401
2411
|
}
|
|
2402
2412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
|
|
2403
2413
|
type: Component,
|
|
@@ -2418,9 +2428,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2418
2428
|
], providers: [DashboardI18nService], encapsulation: ViewEncapsulation.None, host: {
|
|
2419
2429
|
'[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
|
|
2420
2430
|
'[style.background-size]': 'backgroundImageHeight() ? "100% " + backgroundImageHeight() + "px" : "100% auto"',
|
|
2421
|
-
}, template: "<div class=\"mfp-dashboard\" data-testid=\"dashboard\" [style]=\"columnVars()\" [class.edit]=\"editMode()\">\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title data-testid=\"dashboard-title\" level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title data-testid=\"dashboard-description\" level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n data-testid=\"dashboard-edit-cards-btn\"\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [class.zflow-dragging]=\"!!dragOriginStyle()\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange()\"\n (changeCB)=\"onGridChange()\"\n (dragStartCB)=\"onDragStart($event)\"\n (dragStopCB)=\"onDragStop()\"\n (removedCB)=\"onGridChange()\"\n >\n @if (dragOriginStyle()) {\n <div class=\"mfp-dashboard__drag-origin-placeholder\" [style]=\"dragOriginStyle()\"></div>\n }\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n\n</div>\n@if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button data-testid=\"dashboard-save-btn\" design=\"Emphasized\" (click)=\"saveEdit()\">{{\n i18n.getTranslation(i18nKeys.SAVE)\n }}</ui5-button>\n <ui5-button data-testid=\"dashboard-cancel-btn\" design=\"Transparent\" (click)=\"cancelEdit()\">{{\n i18n.getTranslation(i18nKeys.CANCEL)\n }}</ui5-button>\n </div>\n}\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center;z-index:101}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}.grid-stack-placeholder{z-index:2;pointer-events:none}.grid-stack-placeholder .placeholder-content{border-radius:16px;height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;background:var(--sapContent_Selected_Hover_Background, #E3F0FF);border:1px solid var(--sapContent_DragAndDropActiveColor, #0064D9);z-index:2!important}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-dashboard.edit{padding-bottom:60px}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(var(--dashboard-cols-xl, 14),1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-sm, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-md, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(var(--dashboard-cols-lg, 12),1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:fixed;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.mfp-dashboard__drag-origin-placeholder{position:absolute;pointer-events:none;z-index:1}.mfp-dashboard__drag-origin-placeholder:before{content:\"\";height:calc(100% - 30px);top:calc(var(--gs-item-margin-top) * 2 - 2px)!important;width:calc(100% - 19px);left:8px!important;position:absolute;background:var(--sapNeutralColor, #6a6d75);border-radius:16px;opacity:.3}gridstack{position:relative}.grid-stack:has(.ui-resizable-resizing),.grid-stack:has(.ui-resizable-resizing) *{cursor:nwse-resize!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
|
|
2431
|
+
}, 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"] }]
|
|
2422
2432
|
}], 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 }] }] } });
|
|
2423
2433
|
|
|
2434
|
+
/**
|
|
2435
|
+
* Public no-argument, `void`-returning handlers on {@link Dashboard} that we
|
|
2436
|
+
* forward onto the custom element so non-Angular consumers can drive the
|
|
2437
|
+
* edit-mode / unsaved-changes flow directly on the DOM node.
|
|
2438
|
+
*/
|
|
2439
|
+
const VOID_METHODS = [
|
|
2440
|
+
'saveEdit',
|
|
2441
|
+
'cancelEdit',
|
|
2442
|
+
'confirmDiscard',
|
|
2443
|
+
'onUnsavedNavSave',
|
|
2444
|
+
'onUnsavedNavDiscard',
|
|
2445
|
+
'onUnsavedNavCancel',
|
|
2446
|
+
];
|
|
2447
|
+
/** Reads the live Angular component instance backing an `@angular/elements` custom element. */
|
|
2448
|
+
function getInstance(element) {
|
|
2449
|
+
return element.ngElementStrategy?.componentRef?.instance;
|
|
2450
|
+
}
|
|
2451
|
+
/**
|
|
2452
|
+
* `createCustomElement` only proxies `@Input()`/`output()` — public methods on
|
|
2453
|
+
* the component class are NOT reachable from the DOM. This forwards the
|
|
2454
|
+
* dashboard's public methods onto the custom-element prototype so that
|
|
2455
|
+
* non-Angular consumers (UI5, plain JS, Luigi, etc.) can call them directly on
|
|
2456
|
+
* the `<mfp-wc-dashboard>` DOM node.
|
|
2457
|
+
*
|
|
2458
|
+
* `requestNavigation` needs a synchronous fallback when the Angular component
|
|
2459
|
+
* isn't created yet: run the navigation immediately (returning `true`) rather
|
|
2460
|
+
* than silently blocking the user — this preserves the original, pre-guard
|
|
2461
|
+
* behaviour. The remaining handlers no-op until the component exists.
|
|
2462
|
+
*/
|
|
2463
|
+
function defineDashboardElementMethods(elementCtor) {
|
|
2464
|
+
const proto = elementCtor.prototype;
|
|
2465
|
+
Object.defineProperty(proto, 'requestNavigation', {
|
|
2466
|
+
value(proceed) {
|
|
2467
|
+
const instance = getInstance(this);
|
|
2468
|
+
if (!instance) {
|
|
2469
|
+
proceed();
|
|
2470
|
+
return true;
|
|
2471
|
+
}
|
|
2472
|
+
return instance.requestNavigation(proceed);
|
|
2473
|
+
},
|
|
2474
|
+
configurable: true,
|
|
2475
|
+
writable: true,
|
|
2476
|
+
});
|
|
2477
|
+
for (const name of VOID_METHODS) {
|
|
2478
|
+
Object.defineProperty(proto, name, {
|
|
2479
|
+
value() {
|
|
2480
|
+
getInstance(this)?.[name]();
|
|
2481
|
+
},
|
|
2482
|
+
configurable: true,
|
|
2483
|
+
writable: true,
|
|
2484
|
+
});
|
|
2485
|
+
}
|
|
2486
|
+
}
|
|
2487
|
+
|
|
2424
2488
|
class VisitedServiceCard {
|
|
2425
2489
|
serviceType = input.required(...(ngDevMode ? [{ debugName: "serviceType" }] : /* istanbul ignore next */ []));
|
|
2426
2490
|
serviceName = input.required(...(ngDevMode ? [{ debugName: "serviceName" }] : /* istanbul ignore next */ []));
|
|
@@ -2528,5 +2592,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2528
2592
|
* Generated bundle index. Do not edit.
|
|
2529
2593
|
*/
|
|
2530
2594
|
|
|
2531
|
-
export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, MockCard, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
|
|
2595
|
+
export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, MockCard, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew, defineDashboardElementMethods };
|
|
2532
2596
|
//# sourceMappingURL=openmfp-ngx.mjs.map
|