@openmfp/ngx 0.12.6 → 0.12.7

package/fesm2022/openmfp-ngx.mjs

@@ -1,6 +1,6 @@
 import jsonpath from 'jsonpath';
 import * as i0 from '@angular/core';
-import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, signal, ViewEncapsulation, inject, effect, viewChild, Injector, afterNextRender, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, model, ElementRef, SecurityContext, linkedSignal } from '@angular/core';
+import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, signal, ViewEncapsulation, inject, effect, viewChild, Injector, afterNextRender, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, ElementRef, model, SecurityContext, linkedSignal } from '@angular/core';
 import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
 import { Link } from '@fundamental-ngx/ui5-webcomponents/link';
 import { Tag } from '@fundamental-ngx/ui5-webcomponents/tag';
@@ -26,6 +26,7 @@ import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
 import '@ui5/webcomponents-icons/dist/add.js';
 import '@ui5/webcomponents-icons/dist/search.js';
 import { debounceTime } from 'rxjs';
+import '@ui5/webcomponents-icons/dist/alert.js';
 import { List } from '@fundamental-ngx/ui5-webcomponents/list';
 import { ListItemCustom } from '@fundamental-ngx/ui5-webcomponents/list-item-custom';
 import { Switch } from '@fundamental-ngx/ui5-webcomponents/switch';
@@ -35,6 +36,7 @@ import { MenuItem } from '@fundamental-ngx/ui5-webcomponents/menu-item';
 import { MenuSeparator } from '@fundamental-ngx/ui5-webcomponents/menu-separator';
 import '@ui5/webcomponents-icons/dist/action-settings.js';
 import '@ui5/webcomponents-icons/dist/menu2.js';
+import '@ui5/webcomponents-icons/dist/user-edit.js';
 import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
 import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
 import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
@@ -390,7 +392,7 @@ class DeclarativeTable {
         _index;
     viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, growMode: { classPropertyName: "growMode", publicName: "growMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table\n  test-id=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\">\n  <ui5-table-header-row slot=\"headerRow\" [sticky]=\"growMode() === 'Scroll' && !!height()\">\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.test-id]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n          @let isMultiline = column.group.multiline ?? true;\n          <div\n            class=\"flex\"\n            [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n            [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n            [style.justifyContent]=\"isMultiline ? null : column.uiSettings?.align\">\n            @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.test-id]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n            >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      test-id=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { kind: "component", type: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, growMode: { classPropertyName: "growMode", publicName: "growMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table\n  test-id=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"growMode() === 'Scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.test-id]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.test-id]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      test-id=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"10\">20</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { kind: "component", type: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
             type: Component,
@@ -405,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         Select,
                         Option,
                         TableGrowing,
-                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n  test-id=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\">\n  <ui5-table-header-row slot=\"headerRow\" [sticky]=\"growMode() === 'Scroll' && !!height()\">\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.test-id]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n          @let isMultiline = column.group.multiline ?? true;\n          <div\n            class=\"flex\"\n            [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n            [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n            [style.justifyContent]=\"isMultiline ? null : column.uiSettings?.align\">\n            @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.test-id]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n            >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      test-id=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n  test-id=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"growMode() === 'Scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.test-id]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.test-id]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      test-id=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"10\">20</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], trackByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByPath", required: false }] }], totalItemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsCount", required: false }] }], paginationLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLimit", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], growMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "growMode", required: false }] }], loadMoreButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreButtonText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }] } });
 
 function setPropertyByPath(object, path, value) {
@@ -905,7 +907,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     }, template: "@if (card().component) {\n  <div class=\"component-card\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          [accessibleName]=\"'Remove card: ' + (card().label || card().component)\"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n    }\n    <div\n      class=\"component-host\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\">\n    <div\n      class=\"card__body\"\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-host{height:100%}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], removeCard: [{ type: i0.Output, args: ["removeCard"] }], host: [{ type: i0.ViewChild, args: ['elementHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
+/**
+ * Confirmation popup shown when the user tries to abandon edit mode while
+ * there are unsaved dashboard changes. Emits `confirm` when the user accepts
+ * the discard, `cancelled` when they back out.
+ */
+class DiscardChangesDialog {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    confirm = output();
+    cancelled = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiscardChangesDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: DiscardChangesDialog, isStandalone: true, selector: "mfp-discard-changes-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog [open]=\"open()\" state=\"Critical\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"discard-changes-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Discard Changes</ui5-title>\n  </div>\n  <div class=\"discard-changes-dialog__body\">\n    Discard the changes? This action cannot be undone.\n  </div>\n  <div class=\"discard-changes-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirm.emit()\">Discard</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.discard-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.discard-changes-dialog__body{padding:0 0 1rem;min-width:320px}.discard-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiscardChangesDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-discard-changes-dialog', imports: [Button, Dialog, Icon, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog [open]=\"open()\" state=\"Critical\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"discard-changes-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Discard Changes</ui5-title>\n  </div>\n  <div class=\"discard-changes-dialog__body\">\n    Discard the changes? This action cannot be undone.\n  </div>\n  <div class=\"discard-changes-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirm.emit()\">Discard</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.discard-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.discard-changes-dialog__body{padding:0 0 1rem;min-width:320px}.discard-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
 class EditCardsDialog {
+    host = inject((ElementRef));
     availableCards = input([], ...(ngDevMode ? [{ debugName: "availableCards" }] : /* istanbul ignore next */ []));
     addedCardsIds = input(new Set(), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -934,6 +954,45 @@ class EditCardsDialog {
             return next;
         });
     }
+    /**
+     * Tab moves focus across the switches directly, skipping the wrapping
+     * ui5-li-custom rows. Past the last switch Tab goes to the first footer
+     * button; before the first switch Shift+Tab goes to the last footer button.
+     * The dialog's native focus trap takes care of cycling from the buttons
+     * back into the list.
+     */
+    onSwitchKeydown(event, _id) {
+        if (event.key !== 'Tab') {
+            return;
+        }
+        const root = this.host.nativeElement.shadowRoot ?? this.host.nativeElement;
+        const switches = Array.from(root.querySelectorAll('ui5-switch'));
+        const buttons = Array.from(root.querySelectorAll('ui5-button'));
+        const currentIndex = switches.indexOf(event.currentTarget);
+        if (currentIndex === -1) {
+            return;
+        }
+        if (event.shiftKey) {
+            const prev = switches[currentIndex - 1];
+            if (prev) {
+                event.preventDefault();
+                event.stopPropagation();
+                prev.focus();
+            }
+            // First switch: let Shift+Tab fall through so the dialog's focus trap
+            // wraps to the last footer button.
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const next = switches[currentIndex + 1];
+        if (next) {
+            next.focus();
+            return;
+        }
+        // Last switch: hand off to the first footer button.
+        buttons[0]?.focus();
+    }
     confirmSave() {
         const availableIds = new Set(this.availableCards().map((ac) => ac.id));
         const added = this.availableCards().filter((ac) => this.selectedIds().has(ac.id) && !this.addedCardsIds().has(ac.id));
@@ -941,13 +1000,36 @@ class EditCardsDialog {
         this.confirm.emit({ added, removed });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EditCardsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EditCardsDialog, isStandalone: true, selector: "mfp-edit-cards-dialog", inputs: { availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, addedCardsIds: { classPropertyName: "addedCardsIds", publicName: "addedCardsIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Edit Cards</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list noDataText=\"No cards available.\" selectionMode=\"None\" separators=\"Inner\">\n      @for (ac of availableCards(); track ac.id) {\n        <ui5-li-custom [accessibleName]=\"ac.label || ac.component\">\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ ac.label || ac.component }}</span>\n            <ui5-switch\n              [accessibleName]=\"ac.label || ac.component\"\n              [checked]=\"selectedIds().has(ac.id)\"\n              (ui5Change)=\"toggle(ac.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirmSave()\">Save</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: List, selector: "ui5-list, [ui5-list]", inputs: ["headerText", "footerText", "indent", "selectionMode", "noDataText", "separators", "growing", "growingButtonText", "loading", "loadingDelay", "stickyHeader", "accessibleName", "accessibilityAttributes", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "accessibleRole"], outputs: ["ui5ItemClick", "ui5ItemClose", "ui5ItemToggle", "ui5ItemDelete", "ui5SelectionChange", "ui5LoadMore", "ui5MoveOver", "ui5Move"], exportAs: ["ui5List"] }, { kind: "component", type: ListItemCustom, selector: "ui5-li-custom, [ui5-li-custom]", inputs: ["movable", "accessibleName", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemCustom"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["design", "checked", "disabled", "textOn", "textOff", "accessibleName", "accessibleNameRef", "tooltip", "required", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EditCardsDialog, isStandalone: true, selector: "mfp-edit-cards-dialog", inputs: { availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, addedCardsIds: { classPropertyName: "addedCardsIds", publicName: "addedCardsIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Edit Cards</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list noDataText=\"No cards available.\" selectionMode=\"None\" separators=\"Inner\">\n      @for (availableCard of availableCards(); track availableCard.id) {\n        <ui5-li-custom\n          [accessibleName]=\"availableCard.label || availableCard.component\"\n        >\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ availableCard.label || availableCard.component }}</span>\n            <ui5-switch\n              [accessibleName]=\"availableCard.label || availableCard.component\"\n              [checked]=\"selectedIds().has(availableCard.id)\"\n              (ui5Change)=\"toggle(availableCard.id)\"\n              (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirmSave()\">Save</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: List, selector: "ui5-list, [ui5-list]", inputs: ["headerText", "footerText", "indent", "selectionMode", "noDataText", "separators", "growing", "growingButtonText", "loading", "loadingDelay", "stickyHeader", "accessibleName", "accessibilityAttributes", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "accessibleRole"], outputs: ["ui5ItemClick", "ui5ItemClose", "ui5ItemToggle", "ui5ItemDelete", "ui5SelectionChange", "ui5LoadMore", "ui5MoveOver", "ui5Move"], exportAs: ["ui5List"] }, { kind: "component", type: ListItemCustom, selector: "ui5-li-custom, [ui5-li-custom]", inputs: ["movable", "accessibleName", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemCustom"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["design", "checked", "disabled", "textOn", "textOff", "accessibleName", "accessibleNameRef", "tooltip", "required", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EditCardsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mfp-edit-cards-dialog', imports: [Button, Dialog, List, ListItemCustom, Switch, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Edit Cards</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list noDataText=\"No cards available.\" selectionMode=\"None\" separators=\"Inner\">\n      @for (ac of availableCards(); track ac.id) {\n        <ui5-li-custom [accessibleName]=\"ac.label || ac.component\">\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ ac.label || ac.component }}</span>\n            <ui5-switch\n              [accessibleName]=\"ac.label || ac.component\"\n              [checked]=\"selectedIds().has(ac.id)\"\n              (ui5Change)=\"toggle(ac.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirmSave()\">Save</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
+            args: [{ selector: 'mfp-edit-cards-dialog', imports: [Button, Dialog, List, ListItemCustom, Switch, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"edit-cards-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Edit Cards</ui5-title>\n  </div>\n  <div class=\"edit-cards-dialog\">\n    <ui5-list noDataText=\"No cards available.\" selectionMode=\"None\" separators=\"Inner\">\n      @for (availableCard of availableCards(); track availableCard.id) {\n        <ui5-li-custom\n          [accessibleName]=\"availableCard.label || availableCard.component\"\n        >\n          <div class=\"edit-cards-dialog__list-item\">\n            <span>{{ availableCard.label || availableCard.component }}</span>\n            <ui5-switch\n              [accessibleName]=\"availableCard.label || availableCard.component\"\n              [checked]=\"selectedIds().has(availableCard.id)\"\n              (ui5Change)=\"toggle(availableCard.id)\"\n              (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n            />\n          </div>\n        </ui5-li-custom>\n      }\n    </ui5-list>\n  </div>\n  <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirmSave()\">Save</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { availableCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableCards", required: false }] }], addedCardsIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedCardsIds", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
+/**
+ * Confirmation popup shown when the user attempts to navigate away from the
+ * dashboard while there are unsaved edit-mode changes. The host (the
+ * dashboard, an Angular CanDeactivate guard, a Luigi navigation listener,
+ * etc.) is responsible for routing its intercepted navigation through this
+ * dialog and acting on the emitted decision:
+ *  - `save`      → persist changes, then proceed with navigation
+ *  - `discard`   → revert changes, then proceed with navigation
+ *  - `cancelled` → abort navigation, stay on the page
+ */
+class UnsavedChangesDialog {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    save = output();
+    discard = output();
+    cancelled = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UnsavedChangesDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UnsavedChangesDialog, isStandalone: true, selector: "mfp-unsaved-changes-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", discard: "discard", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog [open]=\"open()\" state=\"Critical\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Unsaved Changes</ui5-title>\n  </div>\n  <div class=\"unsaved-changes-dialog__body\">\n    You are leaving this page. Save or discard the changes to proceed. This\n    action cannot be undone.\n  </div>\n  <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"save.emit()\">Save</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"discard.emit()\">Discard</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UnsavedChangesDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-unsaved-changes-dialog', imports: [Button, Dialog, Icon, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog [open]=\"open()\" state=\"Critical\" (ui5BeforeClose)=\"cancelled.emit()\">\n  <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n    <ui5-title level=\"H5\">Unsaved Changes</ui5-title>\n  </div>\n  <div class=\"unsaved-changes-dialog__body\">\n    You are leaving this page. Save or discard the changes to proceed. This\n    action cannot be undone.\n  </div>\n  <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"save.emit()\">Save</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"discard.emit()\">Discard</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], discard: [{ type: i0.Output, args: ["discard"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
 const COMPACT_BREAKPOINT = 726;
 const CELL_HEIGHT = 10;
 
@@ -982,6 +1064,24 @@ class Dashboard {
     editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
     compactToolbar = signal(false, ...(ngDevMode ? [{ debugName: "compactToolbar" }] : /* istanbul ignore next */ []));
     toolbarMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "toolbarMenuOpen" }] : /* istanbul ignore next */ []));
+    /** True once the user has dragged/resized any grid item while in edit mode. */
+    gridDirty = signal(false, ...(ngDevMode ? [{ debugName: "gridDirty" }] : /* istanbul ignore next */ []));
+    /** JSON snapshots of sections/cards taken on entering edit mode, used to detect changes. */
+    sectionsSnapshotJson = '';
+    cardsSnapshotJson = '';
+    /**
+     * True when the user is in edit mode AND has made any change (sections/cards
+     * mutated, or grid items moved/resized). Resets when entering edit mode and
+     * after save/cancel.
+     */
+    hasUnsavedChanges = computed(() => {
+        if (!this.editMode())
+            return false;
+        if (this.gridDirty())
+            return true;
+        return (JSON.stringify(this.sections()) !== this.sectionsSnapshotJson ||
+            JSON.stringify(this.cards()) !== this.cardsSnapshotJson);
+    }, ...(ngDevMode ? [{ debugName: "hasUnsavedChanges" }] : /* istanbul ignore next */ []));
     sectionsSnapshot = [];
     cardsSnapshot = [];
     gridStackItems = viewChild.required('grid');
@@ -1018,6 +1118,19 @@ class Dashboard {
         },
     }), ...(ngDevMode ? [{ debugName: "gridOptions" }] : /* istanbul ignore next */ []));
     cardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "cardDialogOpen" }] : /* istanbul ignore next */ []));
+    discardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "discardDialogOpen" }] : /* istanbul ignore next */ []));
+    unsavedNavDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "unsavedNavDialogOpen" }] : /* istanbul ignore next */ []));
+    /** Callback that resumes the intercepted navigation once the user resolves the dialog. */
+    pendingNavigation = null;
+    /** beforeunload handler kept on instance so add/removeEventListener pair up. */
+    beforeUnloadHandler = (event) => {
+        if (this.hasUnsavedChanges()) {
+            event.preventDefault();
+            // Required by older browsers; the string itself is ignored — modern
+            // browsers always render their own generic prompt.
+            event.returnValue = '';
+        }
+    };
     customActions = computed(() => this.config().customActions ?? [], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
     addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
     editViewButton = computed(() => ({
@@ -1047,9 +1160,11 @@ class Dashboard {
             this.compactToolbar.set(width < COMPACT_BREAKPOINT);
         });
         this.resizeObserver.observe(this.hostEl.nativeElement);
+        window.addEventListener('beforeunload', this.beforeUnloadHandler);
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
+        window.removeEventListener('beforeunload', this.beforeUnloadHandler);
     }
     onMenuItemClick(actionId, event) {
         if (actionId === 'edit-view') {
@@ -1070,6 +1185,9 @@ class Dashboard {
         }
         this.sectionsSnapshot = [...this.sections()];
         this.cardsSnapshot = [...this.cards()];
+        this.sectionsSnapshotJson = JSON.stringify(this.sections());
+        this.cardsSnapshotJson = JSON.stringify(this.cards());
+        this.gridDirty.set(false);
         this.editMode.set(true);
         afterNextRender(() => {
             this.addCardBtn()?.element.focus();
@@ -1090,15 +1208,93 @@ class Dashboard {
                 };
             }),
         });
+        this.gridDirty.set(false);
         this.editMode.set(false);
     }
     cancelEdit() {
+        if (this.hasUnsavedChanges()) {
+            this.discardDialogOpen.set(true);
+            return;
+        }
+        this.discardEdit();
+    }
+    /**
+     * Confirms abandoning unsaved edit-mode changes: closes the discard popup
+     * and reverts sections/cards to the snapshot taken on entering edit mode.
+     */
+    confirmDiscard() {
+        this.discardDialogOpen.set(false);
+        this.discardEdit();
+    }
+    /**
+     * Cancels the discard popup and keeps the user in edit mode with their
+     * pending changes intact.
+     */
+    cancelDiscard() {
+        this.discardDialogOpen.set(false);
+    }
+    /**
+     * Public framework-agnostic navigation guard. Consumer apps (Angular Router
+     * CanDeactivate guard, Luigi navigation listener, plain `<a>` click handler,
+     * window history listener — anything) call this before performing their
+     * navigation:
+     *
+     *   if (dashboard.requestNavigation(() => router.navigateByUrl(target))) {
+     *     // already navigated synchronously — clean state
+     *   } else {
+     *     // dashboard popped the unsaved-changes dialog; the navigation will
+     *     // resume from the user's choice (Save → proceed, Discard → proceed,
+     *     // Cancel → drop the request entirely).
+     *   }
+     *
+     * Returns `true` when navigation may proceed immediately (no unsaved
+     * changes — `proceed` was invoked synchronously). Returns `false` when the
+     * dialog has been opened and the caller must NOT navigate; the dashboard
+     * will run the callback later if the user picks Save or Discard.
+     *
+     * If a previous navigation is already pending, that one is dropped in
+     * favour of the new request — Cancel always means "stay here", so losing
+     * the older queued navigation is the correct outcome.
+     */
+    requestNavigation(proceed) {
+        if (!this.hasUnsavedChanges()) {
+            proceed();
+            return true;
+        }
+        this.pendingNavigation = proceed;
+        this.unsavedNavDialogOpen.set(true);
+        return false;
+    }
+    /** Save → persist changes, close the dialog, then resume navigation. */
+    onUnsavedNavSave() {
+        this.unsavedNavDialogOpen.set(false);
+        this.saveEdit();
+        this.runPendingNavigation();
+    }
+    /** Discard → revert to snapshot, close the dialog, then resume navigation. */
+    onUnsavedNavDiscard() {
+        this.unsavedNavDialogOpen.set(false);
+        this.discardEdit();
+        this.runPendingNavigation();
+    }
+    /** Cancel → drop the queued navigation and stay in edit mode. */
+    onUnsavedNavCancel() {
+        this.unsavedNavDialogOpen.set(false);
+        this.pendingNavigation = null;
+    }
+    runPendingNavigation() {
+        const pending = this.pendingNavigation;
+        this.pendingNavigation = null;
+        pending?.();
+    }
+    discardEdit() {
         this.sections.set(this.sectionsSnapshot);
         this.cards.set(this.cardsSnapshot.map((c) => {
             const pos = this.cardsPosition.get(c.id);
             return { ...c, x: pos?.x, y: pos?.y };
         }));
         this.cardDialogOpen.set(false);
+        this.gridDirty.set(false);
         this.editMode.set(false);
     }
     removeSection(id) {
@@ -1124,6 +1320,9 @@ class Dashboard {
     }
     onGridChange(event) {
         this.newGridStackNodes = event.nodes;
+        if (this.editMode()) {
+            this.gridDirty.set(true);
+        }
     }
     saveCardsPosition(items) {
         items.forEach((node) => {
@@ -1138,24 +1337,27 @@ class Dashboard {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null" } }, viewQueries: [{ propertyName: "gridStackItems", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mfp-dashboard\">\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        @if (config().title) {\n          <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n            <span [innerHTML]=\"safeTitle()\"></span>\n          </ui5-title>\n        }\n        @if (config().description) {\n          <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n            <span class=\"mfp-dashboard__description\" [innerHTML]=\"safeDescription()\"></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"editCardsButton().text || editCardsButton().tooltip || 'Edit Cards'\"\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            accessibleName=\"Actions\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            tooltip=\"Actions\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-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            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"editViewButton().text || 'Edit View'\"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (config().editable) {\n            <ui5-button\n              [accessibleName]=\"editViewButton().text || editViewButton().tooltip || 'Edit View'\"\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  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [columns]=\"12\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n  <gridstack #grid [options]=\"gridOptions()\" (addedCB)=\"onGridChange($event)\" (changeCB)=\"onGridChange($event)\" (removedCB)=\"onGridChange($event)\">\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item\n        [options]=\"card\"\n        [style.cursor]=\"editMode() ? 'pointer' : 'auto'\"\n      >\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n\n  @if (editMode()) {\n    <div class=\"mfp-dashboard__edit-bar\">\n      <ui5-button design=\"Emphasized\" (click)=\"saveEdit()\">Save</ui5-button>\n      <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\"\n        >Cancel</ui5-button\n      >\n    </div>\n  }\n</div>\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px)}.mfp-sections-container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;align-content:start;gap:1rem}@media(max-width:726px){.mfp-sections-container{grid-template-columns:1fr}}@media(min-width:727px)and (max-width:1200px){.mfp-sections-container{grid-template-columns:repeat(8,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__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}\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: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "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: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null" } }, viewQueries: [{ propertyName: "gridStackItems", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mfp-dashboard\">\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        <div class=\"mfp-dashboard__title-row\">\n          @if (config().title) {\n            <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\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                accessible-name=\"Unsaved Changes\"\n              />\n              <span class=\"mfp-dashboard__unsaved-changes-text\"\n                >Unsaved Changes</span\n              >\n            </div>\n          }\n        </div>\n        @if (config().description) {\n          <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n            <span class=\"mfp-dashboard__description\" [innerHTML]=\"safeDescription()\"></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"editCardsButton().text || editCardsButton().tooltip || 'Edit Cards'\"\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            accessibleName=\"Actions\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            tooltip=\"Actions\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-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            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"editViewButton().text || 'Edit View'\"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (config().editable) {\n            <ui5-button\n              [accessibleName]=\"editViewButton().text || editViewButton().tooltip || 'Edit View'\"\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  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [columns]=\"12\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n  <gridstack #grid [options]=\"gridOptions()\" (addedCB)=\"onGridChange($event)\" (changeCB)=\"onGridChange($event)\" (removedCB)=\"onGridChange($event)\">\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item\n        [options]=\"card\"\n        [style.cursor]=\"editMode() ? 'pointer' : 'auto'\"\n      >\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n\n  @if (editMode()) {\n    <div class=\"mfp-dashboard__edit-bar\">\n      <ui5-button design=\"Emphasized\" (click)=\"saveEdit()\">Save</ui5-button>\n      <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\"\n        >Cancel</ui5-button\n      >\n    </div>\n  }\n</div>\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n  [open]=\"discardDialogOpen()\"\n  (cancelled)=\"cancelDiscard()\"\n  (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n  [open]=\"unsavedNavDialogOpen()\"\n  (cancelled)=\"onUnsavedNavCancel()\"\n  (discard)=\"onUnsavedNavDiscard()\"\n  (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px)}.mfp-sections-container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;align-content:start;gap:1rem}@media(max-width:726px){.mfp-sections-container{grid-template-columns:1fr}}@media(min-width:727px)and (max-width:1200px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
             type: Component,
             args: [{ selector: 'mfp-dashboard', imports: [
                         GridstackComponent,
                         GridstackItemComponent,
+                        DiscardChangesDialog,
                         EditCardsDialog,
+                        UnsavedChangesDialog,
                         DashboardSection,
                         DashboardCard,
                         Button,
+                        Icon,
                         Menu,
                         MenuItem,
                         MenuSeparator,
                         Title,
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
-                    }, template: "<div class=\"mfp-dashboard\">\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        @if (config().title) {\n          <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n            <span [innerHTML]=\"safeTitle()\"></span>\n          </ui5-title>\n        }\n        @if (config().description) {\n          <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n            <span class=\"mfp-dashboard__description\" [innerHTML]=\"safeDescription()\"></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"editCardsButton().text || editCardsButton().tooltip || 'Edit Cards'\"\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            accessibleName=\"Actions\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            tooltip=\"Actions\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-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            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"editViewButton().text || 'Edit View'\"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (config().editable) {\n            <ui5-button\n              [accessibleName]=\"editViewButton().text || editViewButton().tooltip || 'Edit View'\"\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  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [columns]=\"12\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n  <gridstack #grid [options]=\"gridOptions()\" (addedCB)=\"onGridChange($event)\" (changeCB)=\"onGridChange($event)\" (removedCB)=\"onGridChange($event)\">\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item\n        [options]=\"card\"\n        [style.cursor]=\"editMode() ? 'pointer' : 'auto'\"\n      >\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n\n  @if (editMode()) {\n    <div class=\"mfp-dashboard__edit-bar\">\n      <ui5-button design=\"Emphasized\" (click)=\"saveEdit()\">Save</ui5-button>\n      <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\"\n        >Cancel</ui5-button\n      >\n    </div>\n  }\n</div>\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px)}.mfp-sections-container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;align-content:start;gap:1rem}@media(max-width:726px){.mfp-sections-container{grid-template-columns:1fr}}@media(min-width:727px)and (max-width:1200px){.mfp-sections-container{grid-template-columns:repeat(8,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__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}\n"] }]
+                    }, template: "<div class=\"mfp-dashboard\">\n  <div class=\"mfp-dashboard__topbar\">\n    <div class=\"mfp-dashboard__topbar-row\">\n      <div class=\"mfp-dashboard__header\">\n        <div class=\"mfp-dashboard__title-row\">\n          @if (config().title) {\n            <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\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                accessible-name=\"Unsaved Changes\"\n              />\n              <span class=\"mfp-dashboard__unsaved-changes-text\"\n                >Unsaved Changes</span\n              >\n            </div>\n          }\n        </div>\n        @if (config().description) {\n          <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n            <span class=\"mfp-dashboard__description\" [innerHTML]=\"safeDescription()\"></span>\n          </ui5-title>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            #editCardsBtn\n            id=\"edit-cards-btn\"\n            [accessibleName]=\"editCardsButton().text || editCardsButton().tooltip || 'Edit Cards'\"\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            accessibleName=\"Actions\"\n            design=\"Transparent\"\n            icon=\"menu2\"\n            tooltip=\"Actions\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          />\n          <ui5-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            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [attr.data-action]=\"action.action\"\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n              />\n            }\n            @if (config().editable) {\n              <ui5-menu-separator />\n              <ui5-menu-item\n                data-action=\"edit-view\"\n                [icon]=\"editViewButton().icon\"\n                [text]=\"editViewButton().text || 'Edit View'\"\n              />\n            }\n          </ui5-menu>\n        } @else {\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [accessibleName]=\"action.text || action.tooltip || action.action\"\n              [design]=\"action.design ?? 'Default'\"\n              [endIcon]=\"action?.endIcon\"\n              [icon]=\"action.icon ?? ''\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (config().editable) {\n            <ui5-button\n              [accessibleName]=\"editViewButton().text || editViewButton().tooltip || 'Edit View'\"\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  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [cards]=\"sectionCards()(section.id)\"\n        [columns]=\"12\"\n        [editMode]=\"editMode()\"\n        [section]=\"section\"\n        (removeCard)=\"removeCard($event)\"\n        (removeSection)=\"removeSection(section.id)\"\n      />\n    }\n  </div>\n  <gridstack #grid [options]=\"gridOptions()\" (addedCB)=\"onGridChange($event)\" (changeCB)=\"onGridChange($event)\" (removedCB)=\"onGridChange($event)\">\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item\n        [options]=\"card\"\n        [style.cursor]=\"editMode() ? 'pointer' : 'auto'\"\n      >\n        <mfp-dashboard-card\n          [card]=\"card\"\n          [editMode]=\"editMode()\"\n          (removeCard)=\"removeCard($any(card.id))\"\n        />\n      </gridstack-item>\n    }\n  </gridstack>\n\n  @if (editMode()) {\n    <div class=\"mfp-dashboard__edit-bar\">\n      <ui5-button design=\"Emphasized\" (click)=\"saveEdit()\">Save</ui5-button>\n      <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\"\n        >Cancel</ui5-button\n      >\n    </div>\n  }\n</div>\n\n<mfp-edit-cards-dialog\n  [addedCardsIds]=\"addedCardsIds()\"\n  [availableCards]=\"availableCards()\"\n  [open]=\"cardDialogOpen()\"\n  (cancelled)=\"closeCardPanel()\"\n  (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n  [open]=\"discardDialogOpen()\"\n  (cancelled)=\"cancelDiscard()\"\n  (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n  [open]=\"unsavedNavDialogOpen()\"\n  (cancelled)=\"onUnsavedNavCancel()\"\n  (discard)=\"onUnsavedNavDiscard()\"\n  (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px)}.mfp-sections-container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;align-content:start;gap:1rem}@media(max-width:726px){.mfp-sections-container{grid-template-columns:1fr}}@media(min-width:727px)and (max-width:1200px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}\n"] }]
         }], 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 }] }], saved: [{ type: i0.Output, args: ["saved"] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], gridStackItems: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], addCardBtn: [{ type: i0.ViewChild, args: ['editCardsBtn', { isSignal: true }] }] } });
 
 class VisitedServiceCard {
@@ -1255,5 +1457,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanValue, CARD_TYPES, Dashboard, DashboardCard, DashboardSection, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, EditCardsDialog, Favorites, LinkValue, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
+export { BooleanValue, CARD_TYPES, Dashboard, DashboardCard, DashboardSection, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, DiscardChangesDialog, EditCardsDialog, Favorites, LinkValue, ResourceField, SecretValue, ServiceStatusCard, TagListValue, UnsavedChangesDialog, VisitedServiceCard, WhatsNew };
 //# sourceMappingURL=openmfp-ngx.mjs.map