@openmfp/ngx 0.18.10 → 0.18.12

package/types/openmfp-ngx.d.ts

@@ -1,11 +1,11 @@
-import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy, Type } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
 import * as _openmfp_ngx from '@openmfp/ngx';
 import * as gridstack from 'gridstack';
 import { Breakpoint, GridStackOptions } from 'gridstack';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, Type, PipeTransform } from '@angular/core';
 import { GridStackEngine } from 'gridstack/dist/gridstack-engine';
 import { SafeHtml } from '@angular/platform-browser';
+import { FormGroup, FormControl } from '@angular/forms';
 
 /** Subset of fields of a generic resource that the table/form components rely on. */
 interface GenericResource extends Record<string, unknown> {
@@ -136,241 +136,574 @@ interface FieldDefinition {
      * column/input of an entry. Mirrors `propertyField` naming for consistency.
      */
     propertyCollection?: FieldDefinition[];
+    /** Verb required to render this field (e.g. 'update', 'delete').
+     *  Evaluated against the row's granted actions. Absent → always render. */
+    requirePermission?: string;
 }
 
-/** Table column definition — extends `FieldDefinition` with optional column grouping. */
-interface TableFieldDefinition extends FieldDefinition {
-    /** Groups this column visually with adjacent columns that share the same `name`. */
-    group?: {
-        /** Logical group identifier. */
-        name: string;
-        /** Group header label shown above the grouped cells. */
-        label?: string;
-        /** Separator placed between values in the same group cell. */
-        delimiter?: string;
-        /** When `true`, each value is rendered on its own line. */
-        multiline?: boolean;
-    };
-}
-
-type GroupBase = NonNullable<TableFieldDefinition['group']>;
-type ProcessedGroup = GroupBase & {
-    fields?: TableFieldDefinition[];
-};
-type ProcessedTableFieldDefinition = Omit<TableFieldDefinition, 'group'> & {
-    group?: ProcessedGroup;
+type DashboardLanguage = 'en' | 'de';
+declare const DASHBOARD_I18N_KEYS: {
+    readonly UNSAVED_CHANGES: "unsavedChanges";
+    readonly EDIT_CARDS: "editCards";
+    readonly EDIT_VIEW: "editView";
+    readonly ACTIONS: "actions";
+    readonly SAVE: "save";
+    readonly CANCEL: "cancel";
+    readonly DISCARD: "discard";
+    readonly DISCARD_CHANGES: "discardChanges";
+    readonly DISCARD_CONFIRM_BODY: "discardConfirmBody";
+    readonly UNSAVED_NAV_BODY: "unsavedNavBody";
+    readonly NO_CARDS_AVAILABLE: "noCardsAvailable";
+    readonly REMOVE_SECTION: "removeSection";
+    readonly REMOVE_CARD: "removeCard";
+    readonly RESIZABLE: "resizable";
 };
+type DashboardI18nKey = (typeof DASHBOARD_I18N_KEYS)[keyof typeof DASHBOARD_I18N_KEYS];
 
-declare class DeclarativeTable<T extends GenericResource> {
-    columns: _angular_core.InputSignal<TableFieldDefinition[]>;
-    resources: _angular_core.InputSignal<T[]>;
-    trackByPath: _angular_core.InputSignal<string>;
-    totalItemsCount: _angular_core.InputSignal<number | undefined>;
-    paginationLimit: _angular_core.InputSignal<number>;
-    hasMore: _angular_core.InputSignal<boolean>;
-    loadMode: _angular_core.InputSignal<"button" | "scroll" | "pager">;
-    loadMoreButtonText: _angular_core.InputSignal<string>;
-    height: _angular_core.InputSignal<number | undefined>;
-    currentPage: _angular_core.InputSignal<number>;
-    readonly buttonClick: _angular_core.OutputEmitterRef<ResourceFieldButtonClickEvent<T>>;
-    readonly tableRowClicked: _angular_core.OutputEmitterRef<T>;
-    readonly loadMoreResources: _angular_core.OutputEmitterRef<void>;
-    readonly paginationLimitChanged: _angular_core.OutputEmitterRef<number>;
-    readonly pageChange: _angular_core.OutputEmitterRef<number>;
-    columnTrackBy: (column: TableFieldDefinition, index: number) => string | number | string[];
-    rowTrackBy: (_index: number, item: T) => unknown;
-    viewColumns: _angular_core.Signal<ProcessedTableFieldDefinition[]>;
-    onRowClick(item: T): void;
-    isPagerMode: _angular_core.Signal<boolean>;
-    knowsTotal: _angular_core.Signal<boolean>;
-    hasResults: _angular_core.Signal<boolean>;
-    totalPages: _angular_core.Signal<number>;
-    canPrev: _angular_core.Signal<boolean>;
-    canNext: _angular_core.Signal<boolean>;
-    goToPage(page: number): void;
-    firstPage: () => void;
-    prevPage: () => void;
-    nextPage: () => void;
-    lastPage: () => void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeclarativeTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeTable<any>, "mfp-declarative-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "resources": { "alias": "resources"; "required": true; "isSignal": true; }; "trackByPath": { "alias": "trackByPath"; "required": false; "isSignal": true; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; "isSignal": true; }; "paginationLimit": { "alias": "paginationLimit"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadMode": { "alias": "loadMode"; "required": false; "isSignal": true; }; "loadMoreButtonText": { "alias": "loadMoreButtonText"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "tableRowClicked": "tableRowClicked"; "loadMoreResources": "loadMoreResources"; "paginationLimitChanged": "paginationLimitChanged"; "pageChange": "pageChange"; }, never, never, true, never>;
+/**
+ * Holds the dashboard's current language and resolves translation keys for
+ * the dashboard chrome (toolbar buttons, dialogs, a11y labels). Provided at
+ * the `Dashboard` component level so every nested dashboard component shares
+ * the same language signal — child components inject the same instance and
+ * react to language changes automatically because `getTranslation` reads the
+ * signal on every call.
+ */
+declare class DashboardI18nService {
+    readonly language: _angular_core.WritableSignal<DashboardLanguage>;
+    getTranslation(key: DashboardI18nKey): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardI18nService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DashboardI18nService>;
 }
 
-/** Definition for a single form field rendered by `mfp-declarative-form`. */
-interface FormFieldDefinition {
-    /** JSON-path key used to read and write the field value (e.g. `metadata.name`). */
-    name: string;
-    /** Display label shown above the input. */
-    label: string;
-    /** When `true`, passes the `required` attribute to the UI5 input — shows a visual required indicator. Validation itself is the host's responsibility via `FormFieldErrors`. */
-    required?: boolean;
-    /** Fixed list of options rendered as a select/dropdown. */
-    values?: string[];
-    /** When `true`, the field is disabled (not interactive). */
-    disabled?: boolean;
-    /** Controls when `fieldChange` is emitted for this field. When omitted, `fieldChange` is never emitted. */
-    validation?: 'onBlur' | 'onChange';
+declare const CARD_TYPES: {
+    readonly WC: "wc";
+    readonly ANGULAR: "angular";
+    readonly SAP_UI: "sap-ui";
+};
+type CardsType = (typeof CARD_TYPES)[keyof typeof CARD_TYPES];
+/** Configuration for a single card placed in the dashboard grid or a section. */
+interface CardConfig {
+    /** Unique identifier for this card. Used as a stable key for position persistence. */
+    id: string;
+    /** Column span (1–12). Defaults to 12 when omitted. */
+    w?: number;
+    /** Row span — number of CSS grid rows occupied (1 row = 10 px by default). Defaults to 100 when omitted. */
+    h?: number;
+    /** Starting column index (0-based). Omit to let the grid auto-place the card. */
+    x?: number;
+    /** Starting row index (0-based). Omit to let the grid auto-place the card. */
+    y?: number;
+    /** Maximum row span in edit mode. */
+    maxH?: number;
+    /** Maximum column span in edit mode. */
+    maxW?: number;
+    /** Minimum row span in edit mode. */
+    minH?: number;
+    /** Minimum column span in edit mode. */
+    minW?: number;
+    /** ID of the parent section. Omit to place the card in the loose-card grid. */
+    sectionId?: string;
     /**
-     * Nested field definitions describing one item of an object collection.
-     *
-     * When set, this field represents an array of objects; the form renders it
-     * as a stack of expandable/collapsible cards. Each card is a nested
-     * `mfp-declarative-form` whose `fields` are the entries in
-     * `propertyCollection`; an inline Add button appends entries and a trash
-     * button removes them. Editing is live — no per-card Save/Cancel.
-     *
-     * The submitted value at this field's path is `Array<Record<string, unknown>>`,
-     * with each entry keyed by the sub-fields' `name`s. When `required` is
-     * `true`, the host is expected to require at least one entry in the array.
+     * Custom-element tag name (for `'wc'`/omitted), Angular component selector (for `'angular'`),
+     * or SAP UI5 component name (for `'sap-ui'`).
      */
-    propertyCollection?: FormFieldDefinition[];
-}
-/** Event payload emitted each time a single form field value changes. */
-interface FormFieldChangeEvent {
-    /** The `name` (JSON-path key) of the field that changed. */
-    fieldProperty: string;
-    /** The new value entered by the user. */
-    value: unknown;
-}
-/** Map of field names to their current validation error messages (`null` = no error). */
-type FormFieldErrors = Record<string, string | null>;
-
-declare class DeclarativeForm<T extends GenericResource> {
-    readonly fields: _angular_core.InputSignal<FormFieldDefinition[]>;
-    readonly initialValues: _angular_core.InputSignal<T>;
-    readonly fieldErrors: _angular_core.InputSignal<FormFieldErrors>;
-    readonly fieldChange: _angular_core.OutputEmitterRef<FormFieldChangeEvent>;
-    readonly formSubmit: _angular_core.OutputEmitterRef<T>;
-    readonly formValueChange: _angular_core.OutputEmitterRef<Record<string, unknown>>;
-    readonly form: FormGroup;
-    protected readonly collectionSeeds: _angular_core.WritableSignal<Record<string, Record<string, unknown>[]>>;
-    private readonly fb;
-    constructor();
-    setFormControlValue($event: Event, field: FormFieldDefinition): void;
-    onCollectionValueChange(field: FormFieldDefinition, entries: Record<string, unknown>[]): void;
-    getError(name: string): string | null;
-    getValueState(name: string): 'None' | 'Negative';
-    onFieldBlur(field: FormFieldDefinition): void;
-    submit(): void;
-    clear(): void;
-    collectionEntries(field: FormFieldDefinition): Record<string, unknown>[];
-    private rebuildControls;
-    private setInitialValues;
-    private buildOutputValue;
-    private buildEntryGroup;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeclarativeForm<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeForm<any>, "mfp-declarative-form", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "initialValues": { "alias": "initialValues"; "required": false; "isSignal": true; }; "fieldErrors": { "alias": "fieldErrors"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; "formSubmit": "formSubmit"; "formValueChange": "formValueChange"; }, never, never, true, never>;
-}
-
-/** Configuration for the create/edit resource form rendered inside the table card dialogs. */
-interface ResourceFormConfig {
+    component: string;
     /**
-     * Ordered list of fields to render in the form. May be a plain array, or a
-     * thunk returning a promise of the fields — the thunk form is resolved lazily
-     * when the dialog opens (e.g. to fetch dynamic select options on demand
-     * rather than prefetching them on render).
+     * Render strategy for the card.
+     * - `'wc'` (default) — creates a custom element and sets `componentInputs` as DOM properties.
+     * - `'angular'` — looks up the Angular registry; warns and renders nothing if not found.
+     * - `'sap-ui'` — mounts via `window.sap.ui.require` + `ComponentContainer`.
      */
-    fields: FormFieldDefinition[] | (() => Promise<FormFieldDefinition[]>);
-    /** Dialog title shown in the header. */
+    type?: CardsType;
+    /** Key/value pairs passed to the rendered card. Behaviour depends on `type`. */
+    componentInputs?: Record<string, unknown>;
+    /** Human-readable label shown in the "Edit Cards" dialog. */
+    label?: string;
+}
+type MountCfg = Pick<CardConfig, 'type' | 'component' | 'componentInputs'>;
+/** Configuration for a named horizontal section that groups cards. */
+interface SectionConfig {
+    /** Unique identifier for this section. */
+    id: string;
+    /** Column span (1–12). Defaults to 12 when omitted. */
+    w?: number;
+    /** Section heading displayed in the UI. */
     title?: string;
-    /** Label for the confirm/submit button. */
-    confirmLabel?: string;
-    /** Label for the cancel button. */
-    cancelLabel?: string;
+    /** When `false`, the section and its cards are excluded from edit mode. Defaults to `true` when omitted. */
+    editable?: boolean;
 }
-/** Runtime validation and submit state passed to the table card from the host. */
-interface TableCardFormState {
-    /** Map of field names to their current error messages. Any truthy error in the map disables the submit button. */
-    fieldErrors?: FormFieldErrors;
+/** Overrides for the two built-in dashboard toolbar buttons. */
+interface DashboardButtonsSettings {
+    /** Partial override merged on top of the Edit View button defaults. */
+    editViewButton?: Partial<ButtonSettings>;
+    /** Partial override merged on top of the Edit Cards button defaults. */
+    editCardsButton?: Partial<ButtonSettings>;
 }
-/** Configuration for the delete-confirmation dialog. */
-interface DeleteResourceConfirmationConfig {
-    /** Dialog title. */
-    title?: string;
-    /** Explanatory message shown below the title. */
-    message?: string;
-    /** Label for the confirm/delete button. */
-    confirmLabel?: string;
-    /** Label for the cancel button. */
-    cancelLabel?: string;
+/** Top-level configuration for the `<mfp-dashboard>` component. */
+interface DashboardConfig {
+    /** Dashboard title rendered in the toolbar. */
+    title: string;
+    /** Optional subtitle shown below the title. */
+    description?: string;
+    /** URL of the background image applied to the dashboard host element. */
+    backgroundImageUrl?: string;
+    /** Overrides for the built-in Edit View and Edit Cards toolbar buttons. */
+    buttonsSettings?: DashboardButtonsSettings;
+    /** Extra action buttons rendered in the toolbar alongside the built-in ones. */
+    customActions?: ButtonSettings[];
+    /** When `true`, shows the Edit View button in the toolbar, allowing the user to enter edit mode. */
+    editable?: boolean;
+    /** When `true`, the Edit View button is rendered before the custom actions instead of after. Defaults to `false`. */
+    editButtonFirst?: boolean;
+    /** When provided, enable z-flow layout. */
+    zFlow?: {
+        /** Sets the height of each card in the z-flow layout. */
+        cardHeight: number;
+    };
 }
+
 /**
- * One entry in the {@link TableCardSearchConfig.filterTabs} strip rendered
- * above the table. Clicking a tab activates that filter; the host receives the
- * selected definition via the `filterTabChanged` output and is responsible for
- * applying the filter to its data set.
- *
- * The strip renders exactly the array of `FieldFilterDefinition` it receives
- * — no extra "All" / no-filter tab is auto-added. If the host wants such an
- * option it must author it as a regular filter entry.
+ * Layout strategy applied at each breakpoint when Gridstack changes column
+ * count. See ColumnOptions in gridstack/dist/types.d.ts:27 for the full set.
  */
-interface FieldFilterDefinition {
-    /** Visible label rendered as the tab text. */
-    label: string;
-    /** Name of the property the value applies to. Passed through to the host. */
-    property: string;
-    /** Value compared against `property` when the host applies the filter. */
-    value: string;
-    /** When `true`, this tab is selected on initial render; otherwise the first tab is. */
-    default?: boolean;
+type LayoutStrategy = 'compact' | 'list' | 'none';
+type DashboardBreakpoint = Readonly<Required<Pick<Breakpoint, 'w' | 'c'>> & {
+    layout: LayoutStrategy;
+}>;
+
+interface EngineProfile {
+    /** GridStack engine class, or undefined to use GridStack's native engine. */
+    engineClass: typeof GridStackEngine | undefined;
+    /** Column breakpoint table fed to GridStack columnOpts. */
+    breakpoints: readonly DashboardBreakpoint[];
+    /** Column counts for [sm, md, lg, xl] page size. Pushed to CSS vars so the section grids match. */
+    sectionColumns: readonly [number, number, number, number];
+    /** When true, all loose cards get a fixed h/maxH from the engine's config. */
+    fixedCardHeight: boolean;
+    /** When true, the XL-page width swap (3↔4) runs. */
+    xlWidthSwap: boolean;
+    /** When true, the origin position is rendered. */
+    renderOriginPosition: boolean;
 }
-/** Configuration for the inner `mfp-declarative-table`. */
-interface TableConfig {
-    /** Column definitions. */
-    fields: TableFieldDefinition[];
-    /** Total number of items on the server (used by pagination). */
-    totalItemsCount?: number;
-    /** Page size in `pager` mode; batch size for the grow modes otherwise. */
-    paginationLimit?: number;
-    /** 1-based current page. Only used when `loadMode` is `'pager'`. */
-    currentPage?: number;
-    /** When `true`, the "Load More" control is shown. Grow modes only. */
-    hasMore?: boolean;
-    height?: number;
+
+declare class Dashboard implements OnInit, OnDestroy {
+    static registerAngularComponents(componentTypes: Type<unknown>[]): void;
+    private readonly hostEl;
+    private readonly injector;
+    private readonly sanitizer;
+    protected readonly i18n: DashboardI18nService;
+    config: _angular_core.InputSignal<DashboardConfig>;
+    sections: _angular_core.ModelSignal<SectionConfig[]>;
+    cards: _angular_core.ModelSignal<CardConfig[]>;
+    availableCards: _angular_core.InputSignal<CardConfig[]>;
+    language: _angular_core.InputSignal<DashboardLanguage>;
+    readonly saved: _angular_core.OutputEmitterRef<{
+        sections: SectionConfig[];
+        cards: CardConfig[];
+    }>;
+    readonly actionButtonClick: _angular_core.OutputEmitterRef<{
+        event: MouseEvent;
+        action: ButtonSettings;
+    }>;
+    readonly unsavedChangesChange: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly i18nKeys: {
+        readonly UNSAVED_CHANGES: "unsavedChanges";
+        readonly EDIT_CARDS: "editCards";
+        readonly EDIT_VIEW: "editView";
+        readonly ACTIONS: "actions";
+        readonly SAVE: "save";
+        readonly CANCEL: "cancel";
+        readonly DISCARD: "discard";
+        readonly DISCARD_CHANGES: "discardChanges";
+        readonly DISCARD_CONFIRM_BODY: "discardConfirmBody";
+        readonly UNSAVED_NAV_BODY: "unsavedNavBody";
+        readonly NO_CARDS_AVAILABLE: "noCardsAvailable";
+        readonly REMOVE_SECTION: "removeSection";
+        readonly REMOVE_CARD: "removeCard";
+        readonly RESIZABLE: "resizable";
+    };
+    /** True once the user has dragged/resized any grid item while in edit mode. */
+    private gridDirty;
+    private isXLPage;
+    editMode: _angular_core.WritableSignal<boolean>;
+    compactToolbar: _angular_core.WritableSignal<boolean>;
+    toolbarMenuOpen: _angular_core.WritableSignal<boolean>;
+    cardDialogOpen: _angular_core.WritableSignal<boolean>;
+    discardDialogOpen: _angular_core.WritableSignal<boolean>;
+    unsavedNavDialogOpen: _angular_core.WritableSignal<boolean>;
+    backgroundImageHeight: _angular_core.WritableSignal<number | null>;
+    dragOriginStyle: _angular_core.WritableSignal<{
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+    } | null>;
+    protected hasUnsavedChanges: _angular_core.Signal<boolean>;
+    protected safeTitle: _angular_core.Signal<SafeHtml>;
+    protected safeDescription: _angular_core.Signal<SafeHtml | null>;
+    protected engineProfile: _angular_core.Signal<EngineProfile>;
+    protected gridStackEngine: _angular_core.Signal<typeof gridstack.GridStackEngine | undefined>;
+    protected gridBreakpoints: _angular_core.Signal<Readonly<Required<Pick<gridstack.Breakpoint, "w" | "c">> & {
+        layout: "compact" | "list" | "none";
+    }>[]>;
+    protected columnVars: _angular_core.Signal<{
+        '--dashboard-cols-sm': number;
+        '--dashboard-cols-md': number;
+        '--dashboard-cols-lg': number;
+        '--dashboard-cols-xl': number;
+    }>;
+    protected customActions: _angular_core.Signal<ButtonSettings[]>;
+    protected addedCardsIds: _angular_core.Signal<Set<string>>;
+    protected editViewButton: _angular_core.Signal<{
+        text: string;
+        icon: string;
+        endIcon?: string;
+        design: "Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention";
+        tooltip: string;
+        action?: (("openInModal" | "navigate" | "edit" | "delete") | (string & {})) | undefined;
+        modalSettings?: _openmfp_ngx.ModalSettings;
+    }>;
+    protected editCardsButton: _angular_core.Signal<{
+        text: string;
+        icon: string;
+        endIcon?: string;
+        design: "Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention";
+        tooltip: string;
+        action?: (("openInModal" | "navigate" | "edit" | "delete") | (string & {})) | undefined;
+        modalSettings?: _openmfp_ngx.ModalSettings;
+    }>;
+    protected sectionCards: _angular_core.Signal<(sectionId: string) => CardConfig[]>;
+    protected looseCards: _angular_core.WritableSignal<CardConfig[]>;
+    protected gridOptions: _angular_core.Signal<GridStackOptions>;
+    /** JSON snapshots of sections/cards taken on entering edit mode, used to detect changes. */
+    private sectionsSnapshotJson;
+    private cardsSnapshotJson;
+    private sectionsSnapshot;
+    private cardsSnapshot;
+    private gridStack;
+    private addCardBtn;
+    private resizeObserver?;
+    private cardsPosition;
+    /** Callback that resumes the intercepted navigation once the user resolves the dialog. */
+    private pendingNavigation;
+    /** beforeunload handler kept on instance so add/removeEventListener pair up. */
+    private readonly beforeUnloadHandler;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onMenuItemClick(actionId: string, event: Event): void;
+    enterEditMode(): void;
+    saveEdit(): void;
+    cancelEdit(): void;
+    confirmDiscard(): void;
+    cancelDiscard(): void;
     /**
-     * How additional rows are presented:
-     * - `'scroll'` / `'button'` — grow the list in place via `ui5-table-growing`.
-     * - `'pager'` — classic arrow pager (first/prev/next/last) emitting `pageChange`.
+     * 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.
      */
-    loadMode?: 'scroll' | 'button' | 'pager';
-    /** Text on the grow "Load More" button. Grow modes only. */
-    loadMoreButtonText?: string;
-}
-/** Overrides for the table card's built-in action buttons. */
-interface TableCardButtonSettings {
-    /** Partial override for the "Create" button. */
-    createButton?: Partial<ButtonSettings>;
-    /** Partial override for the search toggle button. */
-    searchButton?: Partial<ButtonSettings>;
-    /** Partial override for the per-row "Edit" button. */
-    editButton?: Partial<ButtonSettings>;
-    /** Partial override for the per-row "Delete" button. */
-    deleteButton?: Partial<ButtonSettings>;
+    requestNavigation(proceed: () => void): boolean;
+    /** Save → persist changes, close the dialog, then resume navigation. */
+    onUnsavedNavSave(): void;
+    /** Discard → revert to snapshot, close the dialog, then resume navigation. */
+    onUnsavedNavDiscard(): void;
+    /** Cancel → drop the queued navigation and stay in edit mode. */
+    onUnsavedNavCancel(): void;
+    private runPendingNavigation;
+    private discardEdit;
+    removeSection(id: string): void;
+    removeCard(id: string): void;
+    openCardPanel(): void;
+    closeCardPanel(): void;
+    onCardsEdited(event: {
+        added: CardConfig[];
+        removed: string[];
+    }): void;
+    onDragStart(event: {
+        el: Element;
+    }): void;
+    onDragStop(): void;
+    onGridChange(): void;
+    private saveCardsPosition;
+    private updateCardsPositions;
+    private getZFlowEngine;
+    private updateCardsForBreakpoint;
+    private changeCardSettingsForXlPage;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dashboard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dashboard, "mfp-dashboard", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "availableCards": { "alias": "availableCards"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; }, { "sections": "sectionsChange"; "cards": "cardsChange"; "saved": "saved"; "actionButtonClick": "actionButtonClick"; "unsavedChangesChange": "unsavedChangesChange"; }, never, ["[slot=dashboard-subheader]"], true, never>;
 }
+
 /**
- * Groups all search/filter concerns for `<mfp-declarative-table-card>`. Passing
- * this object opts the card into showing the search input and (if `filterTabs`
- * is set) the filter-tab strip. Omit the whole object to hide both.
+ * `createCustomElement` only proxies `@Input()`/`output()` — public methods on
+ * the component class are NOT reachable from the DOM. This forwards the
+ * dashboard's public methods onto the custom-element prototype so that
+ * non-Angular consumers (UI5, plain JS, Luigi, etc.) can call them directly on
+ * the `<mfp-wc-dashboard>` DOM node.
  *
- * `initialSearch` and `initialFilter` are **one-shot seeds** — read once when
- * the card mounts (or when they first appear) and never re-applied afterwards.
- * User-driven updates continue to flow through the `searchChanged` and
- * `filterTabChanged` outputs; the host is expected to keep its own state.
+ * `requestNavigation` needs a synchronous fallback when the Angular component
+ * isn't created yet: run the navigation immediately (returning `true`) rather
+ * than silently blocking the user — this preserves the original, pre-guard
+ * behaviour. The remaining handlers no-op until the component exists.
  */
-interface TableCardSearchConfig {
-    /**
-     * One-shot seed for the search input. Applied to the internal `searchControl`
-     * on first render (or the first time `searchConfig` appears), without
-     * emitting `searchChanged`. Later changes to this value have no effect.
-     */
-    initialSearch?: string;
-    /**
-     * Placeholder text shown in the always-visible search input to prompt
-     * searching. Defaults to `Search` when omitted.
-     */
-    placeholder?: string;
+declare function defineDashboardElementMethods(elementCtor: CustomElementConstructor): void;
+
+/** Definition for a single form field rendered by `mfp-declarative-form`. */
+interface FormFieldDefinition {
+    /** JSON-path key used to read and write the field value (e.g. `metadata.name`). */
+    name: string;
+    /** Display label shown above the input. */
+    label: string;
+    /** When `true`, passes the `required` attribute to the UI5 input — shows a visual required indicator. Validation itself is the host's responsibility via `FormFieldErrors`. */
+    required?: boolean;
+    /** Fixed list of options rendered as a select/dropdown. */
+    values?: string[];
+    /** When `true`, the field is disabled (not interactive). */
+    disabled?: boolean;
+    /** Controls when `fieldChange` is emitted for this field. When omitted, `fieldChange` is never emitted. */
+    validation?: 'onBlur' | 'onChange';
     /**
-     * Predefined filters rendered as a horizontal tab strip above the table.
+     * Nested field definitions describing one item of an object collection.
+     *
+     * When set, this field represents an array of objects; the form renders it
+     * as a stack of expandable/collapsible cards. Each card is a nested
+     * `mfp-declarative-form` whose `fields` are the entries in
+     * `propertyCollection`; an inline Add button appends entries and a trash
+     * button removes them. Editing is live — no per-card Save/Cancel.
+     *
+     * The submitted value at this field's path is `Array<Record<string, unknown>>`,
+     * with each entry keyed by the sub-fields' `name`s. When `required` is
+     * `true`, the host is expected to require at least one entry in the array.
+     */
+    propertyCollection?: FormFieldDefinition[];
+}
+/** Event payload emitted each time a single form field value changes. */
+interface FormFieldChangeEvent {
+    /** The `name` (JSON-path key) of the field that changed. */
+    fieldProperty: string;
+    /** The new value entered by the user. */
+    value: unknown;
+}
+/** Map of field names to their current validation error messages (`null` = no error). */
+type FormFieldErrors = Record<string, string | null>;
+
+declare class DeclarativeForm<T extends GenericResource> {
+    readonly fields: _angular_core.InputSignal<FormFieldDefinition[]>;
+    readonly initialValues: _angular_core.InputSignal<T>;
+    readonly fieldErrors: _angular_core.InputSignal<FormFieldErrors>;
+    readonly fieldChange: _angular_core.OutputEmitterRef<FormFieldChangeEvent>;
+    readonly formSubmit: _angular_core.OutputEmitterRef<T>;
+    readonly formValueChange: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    readonly form: FormGroup;
+    protected readonly collectionSeeds: _angular_core.WritableSignal<Record<string, Record<string, unknown>[]>>;
+    private readonly fb;
+    constructor();
+    setFormControlValue($event: Event, field: FormFieldDefinition): void;
+    onCollectionValueChange(field: FormFieldDefinition, entries: Record<string, unknown>[]): void;
+    getError(name: string): string | null;
+    getValueState(name: string): 'None' | 'Negative';
+    onFieldBlur(field: FormFieldDefinition): void;
+    submit(): void;
+    clear(): void;
+    collectionEntries(field: FormFieldDefinition): Record<string, unknown>[];
+    private rebuildControls;
+    private setInitialValues;
+    private buildOutputValue;
+    private buildEntryGroup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeclarativeForm<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeForm<any>, "mfp-declarative-form", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "initialValues": { "alias": "initialValues"; "required": false; "isSignal": true; }; "fieldErrors": { "alias": "fieldErrors"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; "formSubmit": "formSubmit"; "formValueChange": "formValueChange"; }, never, never, true, never>;
+}
+
+/** Table column definition — extends `FieldDefinition` with optional column grouping. */
+interface TableFieldDefinition extends FieldDefinition {
+    /** Groups this column visually with adjacent columns that share the same `name`. */
+    group?: {
+        /** Logical group identifier. */
+        name: string;
+        /** Group header label shown above the grouped cells. */
+        label?: string;
+        /** Separator placed between values in the same group cell. */
+        delimiter?: string;
+        /** When `true`, each value is rendered on its own line. */
+        multiline?: boolean;
+    };
+}
+
+type GroupBase = NonNullable<TableFieldDefinition['group']>;
+type ProcessedGroup = GroupBase & {
+    fields?: TableFieldDefinition[];
+};
+type ProcessedTableFieldDefinition = Omit<TableFieldDefinition, 'group'> & {
+    group?: ProcessedGroup;
+};
+
+declare class DeclarativeTable<T extends GenericResource> {
+    columns: _angular_core.InputSignal<TableFieldDefinition[]>;
+    resources: _angular_core.InputSignal<T[]>;
+    trackByPath: _angular_core.InputSignal<string>;
+    permissions: _angular_core.InputSignal<Record<string, string[]> | undefined>;
+    totalItemsCount: _angular_core.InputSignal<number | undefined>;
+    paginationLimit: _angular_core.InputSignal<number>;
+    hasMore: _angular_core.InputSignal<boolean>;
+    loadMode: _angular_core.InputSignal<"button" | "scroll" | "pager">;
+    loadMoreButtonText: _angular_core.InputSignal<string>;
+    height: _angular_core.InputSignal<number | undefined>;
+    currentPage: _angular_core.InputSignal<number>;
+    readonly buttonClick: _angular_core.OutputEmitterRef<ResourceFieldButtonClickEvent<T>>;
+    readonly tableRowClicked: _angular_core.OutputEmitterRef<T>;
+    readonly loadMoreResources: _angular_core.OutputEmitterRef<void>;
+    readonly paginationLimitChanged: _angular_core.OutputEmitterRef<number>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    columnTrackBy: (column: TableFieldDefinition, index: number) => string | number | string[];
+    rowTrackBy: (_index: number, item: T) => unknown;
+    viewColumns: _angular_core.Signal<ProcessedTableFieldDefinition[]>;
+    onRowClick(item: T): void;
+    isPagerMode: _angular_core.Signal<boolean>;
+    knowsTotal: _angular_core.Signal<boolean>;
+    hasResults: _angular_core.Signal<boolean>;
+    totalPages: _angular_core.Signal<number>;
+    canPrev: _angular_core.Signal<boolean>;
+    canNext: _angular_core.Signal<boolean>;
+    goToPage(page: number): void;
+    firstPage: () => void;
+    prevPage: () => void;
+    nextPage: () => void;
+    lastPage: () => void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeclarativeTable<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeTable<any>, "mfp-declarative-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "resources": { "alias": "resources"; "required": true; "isSignal": true; }; "trackByPath": { "alias": "trackByPath"; "required": false; "isSignal": true; }; "permissions": { "alias": "permissions"; "required": false; "isSignal": true; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; "isSignal": true; }; "paginationLimit": { "alias": "paginationLimit"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadMode": { "alias": "loadMode"; "required": false; "isSignal": true; }; "loadMoreButtonText": { "alias": "loadMoreButtonText"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "tableRowClicked": "tableRowClicked"; "loadMoreResources": "loadMoreResources"; "paginationLimitChanged": "paginationLimitChanged"; "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+/** Configuration for the create/edit resource form rendered inside the table card dialogs. */
+interface ResourceFormConfig {
+    /**
+     * Ordered list of fields to render in the form. May be a plain array, or a
+     * thunk returning a promise of the fields — the thunk form is resolved lazily
+     * when the dialog opens (e.g. to fetch dynamic select options on demand
+     * rather than prefetching them on render).
+     */
+    fields: FormFieldDefinition[] | (() => Promise<FormFieldDefinition[]>);
+    /** Dialog title shown in the header. May contain HTML, which is sanitized before rendering. */
+    title?: string;
+    /** Label for the confirm/submit button. */
+    confirmLabel?: string;
+    /** Label for the cancel button. */
+    cancelLabel?: string;
+}
+/** Runtime validation and submit state passed to the table card from the host. */
+interface TableCardFormState {
+    /** Map of field names to their current error messages. Any truthy error in the map disables the submit button. */
+    fieldErrors?: FormFieldErrors;
+}
+/** Configuration for the delete-confirmation dialog. */
+interface DeleteResourceConfirmationConfig {
+    /** Dialog title. May contain HTML, which is sanitized before rendering. */
+    title?: string;
+    /** Explanatory message shown below the title. May contain HTML, which is sanitized before rendering. */
+    message?: string;
+    /**
+     * When set, the dialog renders a text input and keeps the confirm button
+     * disabled until the typed value matches this text (case-insensitive,
+     * trimmed). Use it to require the user to type e.g. the resource name before
+     * deleting. Omit to allow immediate confirmation.
+     */
+    confirmationText?: string;
+    /** Placeholder for the confirmation input. Defaults to `Type to confirm`. Only used when {@link confirmationText} is set. */
+    confirmationPlaceholder?: string;
+    /** Label for the confirm/delete button. */
+    confirmLabel?: string;
+    /** Label for the cancel button. */
+    cancelLabel?: string;
+}
+/**
+ * One entry in the {@link TableCardSearchConfig.filterTabs} strip rendered
+ * above the table. Clicking a tab activates that filter; the host receives the
+ * selected definition via the `filterTabChanged` output and is responsible for
+ * applying the filter to its data set.
+ *
+ * The strip renders exactly the array of `FieldFilterDefinition` it receives
+ * — no extra "All" / no-filter tab is auto-added. If the host wants such an
+ * option it must author it as a regular filter entry.
+ */
+interface FieldFilterDefinition {
+    /** Visible label rendered as the tab text. */
+    label: string;
+    /** Name of the property the value applies to. Passed through to the host. */
+    property: string;
+    /** Value compared against `property` when the host applies the filter. */
+    value: string;
+    /** When `true`, this tab is selected on initial render; otherwise the first tab is. */
+    default?: boolean;
+}
+/** Configuration for the inner `mfp-declarative-table`. */
+interface TableConfig {
+    /** Column definitions. */
+    fields: TableFieldDefinition[];
+    /** Total number of items on the server (used by pagination). */
+    totalItemsCount?: number;
+    /** Page size in `pager` mode; batch size for the grow modes otherwise. */
+    paginationLimit?: number;
+    /** 1-based current page. Only used when `loadMode` is `'pager'`. */
+    currentPage?: number;
+    /** When `true`, the "Load More" control is shown. Grow modes only. */
+    hasMore?: boolean;
+    height?: number;
+    /**
+     * How additional rows are presented:
+     * - `'scroll'` / `'button'` — grow the list in place via `ui5-table-growing`.
+     * - `'pager'` — classic arrow pager (first/prev/next/last) emitting `pageChange`.
+     */
+    loadMode?: 'scroll' | 'button' | 'pager';
+    /** Text on the grow "Load More" button. Grow modes only. */
+    loadMoreButtonText?: string;
+}
+/** Overrides for the table card's built-in action buttons. */
+interface TableCardButtonSettings {
+    /** Partial override for the "Create" button. */
+    createButton?: Partial<ButtonSettings>;
+    /** Partial override for the search toggle button. */
+    searchButton?: Partial<ButtonSettings>;
+}
+/**
+ * Groups all search/filter concerns for `<mfp-declarative-table-card>`. Passing
+ * this object opts the card into showing the search input and (if `filterTabs`
+ * is set) the filter-tab strip. Omit the whole object to hide both.
+ *
+ * `initialSearch` and `initialFilter` are **one-shot seeds** — read once when
+ * the card mounts (or when they first appear) and never re-applied afterwards.
+ * User-driven updates continue to flow through the `searchChanged` and
+ * `filterTabChanged` outputs; the host is expected to keep its own state.
+ */
+interface TableCardSearchConfig {
+    /**
+     * One-shot seed for the search input. Applied to the internal `searchControl`
+     * on first render (or the first time `searchConfig` appears), without
+     * emitting `searchChanged`. Later changes to this value have no effect.
+     */
+    initialSearch?: string;
+    /**
+     * Placeholder text shown in the always-visible search input to prompt
+     * searching. Defaults to `Search` when omitted.
+     */
+    placeholder?: string;
+    /**
+     * Predefined filters rendered as a horizontal tab strip above the table.
      * Omit (or pass an empty array) to hide the strip while keeping the search
      * input visible.
      */
@@ -384,7 +717,7 @@ interface TableCardSearchConfig {
     initialFilter?: FieldFilterDefinition;
 }
 /** Top-level configuration for `<mfp-declarative-table-card>`. */
-interface TableCardConfig {
+interface TableCardConfig<T extends GenericResource = GenericResource> {
     /** Card heading. */
     header?: string;
     /** Tooltip shown on hover of the card heading. */
@@ -402,39 +735,61 @@ interface TableCardConfig {
     /** When set, enables the "Create" button and create dialog. */
     createResourceFormConfig?: ResourceFormConfig;
     /** When set, enables per-row "Edit" button and edit dialog. */
-    editResourceFormConfig?: ResourceFormConfig;
+    editResourceFormConfig?: (resource: T) => ResourceFormConfig;
     /** When set, enables per-row "Delete" button and confirmation dialog. */
-    deleteResourceConfirmationConfig?: DeleteResourceConfirmationConfig;
+    deleteResourceConfirmationConfig?: (resource: T) => DeleteResourceConfirmationConfig;
 }
 
-declare class DeclarativeTableCard<T extends GenericResource> {
-    resources: _angular_core.InputSignal<T[]>;
-    config: _angular_core.InputSignal<TableCardConfig>;
+declare class DeleteConfirmationDialog {
+    readonly open: _angular_core.InputSignal<boolean>;
+    readonly config: _angular_core.InputSignal<DeleteResourceConfirmationConfig | undefined>;
+    readonly confirmed: _angular_core.OutputEmitterRef<void>;
+    readonly cancelled: _angular_core.OutputEmitterRef<void>;
+    /** Input used to confirm deletion by typing `confirmationText`. */
+    protected readonly confirmationControl: FormControl<string>;
+    /** True when the config requires typing a confirmation phrase before deleting. */
+    protected readonly requiresConfirmation: _angular_core.Signal<boolean>;
+    /** Recomputes whenever the control's validity changes. */
+    private readonly status;
+    /** Disables the confirm button while the confirmation input is invalid. */
+    protected readonly confirmDisabled: _angular_core.Signal<boolean>;
+    constructor();
+    protected onConfirm(): void;
+    /** Passes only when the trimmed, case-insensitive control value equals `expected`. */
+    private matchValidator;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeleteConfirmationDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeleteConfirmationDialog, "mfp-delete-confirmation-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; }, never, never, true, never>;
+}
+
+declare class DeclarativeTableCard<R extends GenericResource> {
+    resources: _angular_core.InputSignal<R[]>;
+    permissions: _angular_core.InputSignal<Record<string, string[]> | undefined>;
+    config: _angular_core.InputSignal<TableCardConfig<R>>;
     createFormState: _angular_core.InputSignal<TableCardFormState>;
     editFormState: _angular_core.InputSignal<TableCardFormState>;
-    readonly actionButtonClick: _angular_core.OutputEmitterRef<ResourceFieldButtonClickEvent<T>>;
-    readonly tableRowClicked: _angular_core.OutputEmitterRef<T>;
+    readonly actionButtonClick: _angular_core.OutputEmitterRef<ResourceFieldButtonClickEvent<R>>;
+    readonly tableRowClicked: _angular_core.OutputEmitterRef<R>;
     readonly loadMoreResources: _angular_core.OutputEmitterRef<void>;
     readonly paginationLimitChanged: _angular_core.OutputEmitterRef<number>;
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
     readonly searchChanged: _angular_core.OutputEmitterRef<string>;
     readonly createFieldChange: _angular_core.OutputEmitterRef<FormFieldChangeEvent>;
     readonly editFieldChange: _angular_core.OutputEmitterRef<{
-        resource: T;
+        resource: R;
         formChangeEvent: FormFieldChangeEvent;
     }>;
-    readonly createSubmit: _angular_core.OutputEmitterRef<T>;
+    readonly createSubmit: _angular_core.OutputEmitterRef<R>;
     readonly editSubmit: _angular_core.OutputEmitterRef<{
-        resource: T;
+        resource: R;
         value: Record<string, unknown>;
     }>;
-    readonly deleteSubmit: _angular_core.OutputEmitterRef<T>;
+    readonly deleteSubmit: _angular_core.OutputEmitterRef<R>;
     readonly filterTabChanged: _angular_core.OutputEmitterRef<FieldFilterDefinition | undefined>;
     protected searchControl: FormControl<string | null>;
     protected createDialogOpen: _angular_core.WritableSignal<boolean>;
     protected editDialogOpen: _angular_core.WritableSignal<boolean>;
     protected deleteDialogOpen: _angular_core.WritableSignal<boolean>;
-    protected pendingResource: _angular_core.WritableSignal<T | null>;
+    protected pendingResource: _angular_core.WritableSignal<R | null>;
     protected resolvedCreateFields: _angular_core.WritableSignal<FormFieldDefinition[]>;
     protected resolvedEditFields: _angular_core.WritableSignal<FormFieldDefinition[]>;
     protected tableConfig: _angular_core.Signal<_openmfp_ngx.TableConfig>;
@@ -445,7 +800,7 @@ declare class DeclarativeTableCard<T extends GenericResource> {
     protected deleteConfirmationConfig: _angular_core.Signal<_openmfp_ngx.DeleteResourceConfirmationConfig | undefined>;
     protected createButtonConfig: _angular_core.Signal<Partial<_openmfp_ngx.ButtonSettings> | undefined>;
     protected searchButtonConfig: _angular_core.Signal<Partial<_openmfp_ngx.ButtonSettings> | undefined>;
-    protected effectiveColumns: _angular_core.Signal<TableFieldDefinition[]>;
+    protected effectiveColumns: _angular_core.Signal<_openmfp_ngx.TableFieldDefinition[]>;
     protected editInitialValue: _angular_core.Signal<Record<string, unknown>>;
     protected searchConfig: _angular_core.Signal<_openmfp_ngx.TableCardSearchConfig | undefined>;
     protected resourcesSearchable: _angular_core.Signal<boolean>;
@@ -455,7 +810,7 @@ declare class DeclarativeTableCard<T extends GenericResource> {
     constructor();
     protected onFilterTabChanged(tab: FieldFilterDefinition | undefined): void;
     submitSearch(): void;
-    onButtonClick(event: ResourceFieldButtonClickEvent<T>): void;
+    onButtonClick(event: ResourceFieldButtonClickEvent<R>): void;
     openCreateDialog(): Promise<void>;
     private openEditDialog;
     private resolveFormFields;
@@ -464,329 +819,43 @@ declare class DeclarativeTableCard<T extends GenericResource> {
     closeDeleteDialog(): void;
     onCreateFieldChange(event: FormFieldChangeEvent): void;
     onEditFieldChange(event: FormFieldChangeEvent): void;
-    onCreateSubmit(value: T): void;
+    onCreateSubmit(value: Record<string, unknown>): void;
     onEditSubmit(value: Record<string, unknown>): void;
     onDeleteSubmit(): void;
-    protected hasErrors(state: TableCardFormState): boolean;
-    private addActionsColumn;
     private buildInitialValues;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeclarativeTableCard<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeTableCard<any>, "mfp-declarative-table-card", never, { "resources": { "alias": "resources"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "createFormState": { "alias": "createFormState"; "required": false; "isSignal": true; }; "editFormState": { "alias": "editFormState"; "required": false; "isSignal": true; }; }, { "actionButtonClick": "actionButtonClick"; "tableRowClicked": "tableRowClicked"; "loadMoreResources": "loadMoreResources"; "paginationLimitChanged": "paginationLimitChanged"; "pageChange": "pageChange"; "searchChanged": "searchChanged"; "createFieldChange": "createFieldChange"; "editFieldChange": "editFieldChange"; "createSubmit": "createSubmit"; "editSubmit": "editSubmit"; "deleteSubmit": "deleteSubmit"; "filterTabChanged": "filterTabChanged"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeTableCard<any>, "mfp-declarative-table-card", never, { "resources": { "alias": "resources"; "required": true; "isSignal": true; }; "permissions": { "alias": "permissions"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "createFormState": { "alias": "createFormState"; "required": false; "isSignal": true; }; "editFormState": { "alias": "editFormState"; "required": false; "isSignal": true; }; }, { "actionButtonClick": "actionButtonClick"; "tableRowClicked": "tableRowClicked"; "loadMoreResources": "loadMoreResources"; "paginationLimitChanged": "paginationLimitChanged"; "pageChange": "pageChange"; "searchChanged": "searchChanged"; "createFieldChange": "createFieldChange"; "editFieldChange": "editFieldChange"; "createSubmit": "createSubmit"; "editSubmit": "editSubmit"; "deleteSubmit": "deleteSubmit"; "filterTabChanged": "filterTabChanged"; }, never, never, true, never>;
 }
 
-type DashboardLanguage = 'en' | 'de';
-declare const DASHBOARD_I18N_KEYS: {
-    readonly UNSAVED_CHANGES: "unsavedChanges";
-    readonly EDIT_CARDS: "editCards";
-    readonly EDIT_VIEW: "editView";
-    readonly ACTIONS: "actions";
-    readonly SAVE: "save";
-    readonly CANCEL: "cancel";
-    readonly DISCARD: "discard";
-    readonly DISCARD_CHANGES: "discardChanges";
-    readonly DISCARD_CONFIRM_BODY: "discardConfirmBody";
-    readonly UNSAVED_NAV_BODY: "unsavedNavBody";
-    readonly NO_CARDS_AVAILABLE: "noCardsAvailable";
-    readonly REMOVE_SECTION: "removeSection";
-    readonly REMOVE_CARD: "removeCard";
-    readonly RESIZABLE: "resizable";
-};
-type DashboardI18nKey = (typeof DASHBOARD_I18N_KEYS)[keyof typeof DASHBOARD_I18N_KEYS];
-
-/**
- * Holds the dashboard's current language and resolves translation keys for
- * the dashboard chrome (toolbar buttons, dialogs, a11y labels). Provided at
- * the `Dashboard` component level so every nested dashboard component shares
- * the same language signal — child components inject the same instance and
- * react to language changes automatically because `getTranslation` reads the
- * signal on every call.
- */
-declare class DashboardI18nService {
-    readonly language: _angular_core.WritableSignal<DashboardLanguage>;
-    getTranslation(key: DashboardI18nKey): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardI18nService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DashboardI18nService>;
+declare class ResourceFormDialog {
+    readonly open: _angular_core.InputSignal<boolean>;
+    readonly config: _angular_core.InputSignal<ResourceFormConfig | undefined>;
+    readonly fields: _angular_core.InputSignal<FormFieldDefinition[]>;
+    readonly fieldErrors: _angular_core.InputSignal<FormFieldErrors>;
+    readonly initialValues: _angular_core.InputSignal<Record<string, unknown>>;
+    readonly defaultTitle: _angular_core.InputSignal<string>;
+    readonly defaultConfirmLabel: _angular_core.InputSignal<string>;
+    readonly defaultCancelLabel: _angular_core.InputSignal<string>;
+    readonly dataTestidPrefix: _angular_core.InputSignal<string>;
+    readonly fieldChange: _angular_core.OutputEmitterRef<FormFieldChangeEvent>;
+    readonly submitted: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    readonly cancelled: _angular_core.OutputEmitterRef<void>;
+    protected hasErrors: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResourceFormDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ResourceFormDialog, "mfp-resource-form-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "fieldErrors": { "alias": "fieldErrors"; "required": false; "isSignal": true; }; "initialValues": { "alias": "initialValues"; "required": false; "isSignal": true; }; "defaultTitle": { "alias": "defaultTitle"; "required": false; "isSignal": true; }; "defaultConfirmLabel": { "alias": "defaultConfirmLabel"; "required": false; "isSignal": true; }; "defaultCancelLabel": { "alias": "defaultCancelLabel"; "required": false; "isSignal": true; }; "dataTestidPrefix": { "alias": "dataTestidPrefix"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; "submitted": "submitted"; "cancelled": "cancelled"; }, never, never, true, never>;
 }
 
-declare const CARD_TYPES: {
-    readonly WC: "wc";
-    readonly ANGULAR: "angular";
-    readonly SAP_UI: "sap-ui";
-};
-type CardsType = (typeof CARD_TYPES)[keyof typeof CARD_TYPES];
-/** Configuration for a single card placed in the dashboard grid or a section. */
-interface CardConfig {
-    /** Unique identifier for this card. Used as a stable key for position persistence. */
-    id: string;
-    /** Column span (1–12). Defaults to 12 when omitted. */
-    w?: number;
-    /** Row span — number of CSS grid rows occupied (1 row = 10 px by default). Defaults to 100 when omitted. */
-    h?: number;
-    /** Starting column index (0-based). Omit to let the grid auto-place the card. */
-    x?: number;
-    /** Starting row index (0-based). Omit to let the grid auto-place the card. */
-    y?: number;
-    /** Maximum row span in edit mode. */
-    maxH?: number;
-    /** Maximum column span in edit mode. */
-    maxW?: number;
-    /** Minimum row span in edit mode. */
-    minH?: number;
-    /** Minimum column span in edit mode. */
-    minW?: number;
-    /** ID of the parent section. Omit to place the card in the loose-card grid. */
-    sectionId?: string;
-    /**
-     * Custom-element tag name (for `'wc'`/omitted), Angular component selector (for `'angular'`),
-     * or SAP UI5 component name (for `'sap-ui'`).
-     */
-    component: string;
-    /**
-     * Render strategy for the card.
-     * - `'wc'` (default) — creates a custom element and sets `componentInputs` as DOM properties.
-     * - `'angular'` — looks up the Angular registry; warns and renders nothing if not found.
-     * - `'sap-ui'` — mounts via `window.sap.ui.require` + `ComponentContainer`.
-     */
-    type?: CardsType;
-    /** Key/value pairs passed to the rendered card. Behaviour depends on `type`. */
-    componentInputs?: Record<string, unknown>;
-    /** Human-readable label shown in the "Add Card" dialog. */
-    label?: string;
-}
-type MountCfg = Pick<CardConfig, 'type' | 'component' | 'componentInputs'>;
-/** Configuration for a named horizontal section that groups cards. */
-interface SectionConfig {
-    /** Unique identifier for this section. */
-    id: string;
-    /** Column span (1–12). Defaults to 12 when omitted. */
-    w?: number;
-    /** Section heading displayed in the UI. */
-    title?: string;
-    /** When `false`, the section and its cards are excluded from edit mode. Defaults to `true` when omitted. */
-    editable?: boolean;
-}
-/** Overrides for the two built-in dashboard toolbar buttons. */
-interface DashboardButtonsSettings {
-    /** Partial override merged on top of the Edit View button defaults. */
-    editViewButton?: Partial<ButtonSettings>;
-    /** Partial override merged on top of the Edit Cards button defaults. */
-    editCardsButton?: Partial<ButtonSettings>;
-}
-/** Top-level configuration for the `<mfp-dashboard>` component. */
-interface DashboardConfig {
-    /** Dashboard title rendered in the toolbar. */
-    title: string;
-    /** Optional subtitle shown below the title. */
-    description?: string;
-    /** URL of the background image applied to the dashboard host element. */
-    backgroundImageUrl?: string;
-    /** Overrides for the built-in Edit View and Add Card toolbar buttons. */
-    buttonsSettings?: DashboardButtonsSettings;
-    /** Extra action buttons rendered in the toolbar alongside the built-in ones. */
-    customActions?: ButtonSettings[];
-    /** When `true`, shows the Edit View button in the toolbar, allowing the user to enter edit mode. */
-    editable?: boolean;
-    /** When `true`, the Edit View button is rendered before the custom actions instead of after. Defaults to `false`. */
-    editButtonFirst?: boolean;
-    /** When provided, enable z-flow layout. */
-    zFlow?: {
-        /** Sets the height of each card in the z-flow layout. */
-        cardHeight: number;
-    };
-}
-
-/**
- * Layout strategy applied at each breakpoint when Gridstack changes column
- * count. See ColumnOptions in gridstack/dist/types.d.ts:27 for the full set.
- */
-type LayoutStrategy = 'compact' | 'list' | 'none';
-type DashboardBreakpoint = Readonly<Required<Pick<Breakpoint, 'w' | 'c'>> & {
-    layout: LayoutStrategy;
-}>;
-
-interface EngineProfile {
-    /** GridStack engine class, or undefined to use GridStack's native engine. */
-    engineClass: typeof GridStackEngine | undefined;
-    /** Column breakpoint table fed to GridStack columnOpts. */
-    breakpoints: readonly DashboardBreakpoint[];
-    /** Column counts for [sm, md, lg, xl] page size. Pushed to CSS vars so the section grids match. */
-    sectionColumns: readonly [number, number, number, number];
-    /** When true, all loose cards get a fixed h/maxH from the engine's config. */
-    fixedCardHeight: boolean;
-    /** When true, the XL-page width swap (3↔4) runs. */
-    xlWidthSwap: boolean;
-    /** When true, the origin position is rendered. */
-    renderOriginPosition: boolean;
-}
-
-declare class Dashboard implements OnInit, OnDestroy {
-    static registerAngularComponents(componentTypes: Type<unknown>[]): void;
-    private readonly hostEl;
-    private readonly injector;
+declare class SanitizeHtmlPipe implements PipeTransform {
     private readonly sanitizer;
-    protected readonly i18n: DashboardI18nService;
-    config: _angular_core.InputSignal<DashboardConfig>;
-    sections: _angular_core.ModelSignal<SectionConfig[]>;
-    cards: _angular_core.ModelSignal<CardConfig[]>;
-    availableCards: _angular_core.InputSignal<CardConfig[]>;
-    language: _angular_core.InputSignal<DashboardLanguage>;
-    readonly saved: _angular_core.OutputEmitterRef<{
-        sections: SectionConfig[];
-        cards: CardConfig[];
-    }>;
-    readonly actionButtonClick: _angular_core.OutputEmitterRef<{
-        event: MouseEvent;
-        action: ButtonSettings;
-    }>;
-    readonly unsavedChangesChange: _angular_core.OutputEmitterRef<boolean>;
-    protected readonly i18nKeys: {
-        readonly UNSAVED_CHANGES: "unsavedChanges";
-        readonly EDIT_CARDS: "editCards";
-        readonly EDIT_VIEW: "editView";
-        readonly ACTIONS: "actions";
-        readonly SAVE: "save";
-        readonly CANCEL: "cancel";
-        readonly DISCARD: "discard";
-        readonly DISCARD_CHANGES: "discardChanges";
-        readonly DISCARD_CONFIRM_BODY: "discardConfirmBody";
-        readonly UNSAVED_NAV_BODY: "unsavedNavBody";
-        readonly NO_CARDS_AVAILABLE: "noCardsAvailable";
-        readonly REMOVE_SECTION: "removeSection";
-        readonly REMOVE_CARD: "removeCard";
-        readonly RESIZABLE: "resizable";
-    };
-    /** True once the user has dragged/resized any grid item while in edit mode. */
-    private gridDirty;
-    private isXLPage;
-    editMode: _angular_core.WritableSignal<boolean>;
-    compactToolbar: _angular_core.WritableSignal<boolean>;
-    toolbarMenuOpen: _angular_core.WritableSignal<boolean>;
-    cardDialogOpen: _angular_core.WritableSignal<boolean>;
-    discardDialogOpen: _angular_core.WritableSignal<boolean>;
-    unsavedNavDialogOpen: _angular_core.WritableSignal<boolean>;
-    backgroundImageHeight: _angular_core.WritableSignal<number | null>;
-    dragOriginStyle: _angular_core.WritableSignal<{
-        top: string;
-        left: string;
-        width: string;
-        height: string;
-    } | null>;
-    protected hasUnsavedChanges: _angular_core.Signal<boolean>;
-    protected safeTitle: _angular_core.Signal<SafeHtml>;
-    protected safeDescription: _angular_core.Signal<SafeHtml | null>;
-    protected engineProfile: _angular_core.Signal<EngineProfile>;
-    protected gridStackEngine: _angular_core.Signal<typeof gridstack.GridStackEngine | undefined>;
-    protected gridBreakpoints: _angular_core.Signal<Readonly<Required<Pick<gridstack.Breakpoint, "w" | "c">> & {
-        layout: "compact" | "list" | "none";
-    }>[]>;
-    protected columnVars: _angular_core.Signal<{
-        '--dashboard-cols-sm': number;
-        '--dashboard-cols-md': number;
-        '--dashboard-cols-lg': number;
-        '--dashboard-cols-xl': number;
-    }>;
-    protected customActions: _angular_core.Signal<ButtonSettings[]>;
-    protected addedCardsIds: _angular_core.Signal<Set<string>>;
-    protected editViewButton: _angular_core.Signal<{
-        text: string;
-        icon: string;
-        endIcon?: string;
-        design: "Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention";
-        tooltip: string;
-        action?: (("openInModal" | "navigate" | "edit" | "delete") | (string & {})) | undefined;
-        modalSettings?: _openmfp_ngx.ModalSettings;
-    }>;
-    protected editCardsButton: _angular_core.Signal<{
-        text: string;
-        icon: string;
-        endIcon?: string;
-        design: "Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention";
-        tooltip: string;
-        action?: (("openInModal" | "navigate" | "edit" | "delete") | (string & {})) | undefined;
-        modalSettings?: _openmfp_ngx.ModalSettings;
-    }>;
-    protected sectionCards: _angular_core.Signal<(sectionId: string) => CardConfig[]>;
-    protected looseCards: _angular_core.WritableSignal<CardConfig[]>;
-    protected gridOptions: _angular_core.Signal<GridStackOptions>;
-    /** JSON snapshots of sections/cards taken on entering edit mode, used to detect changes. */
-    private sectionsSnapshotJson;
-    private cardsSnapshotJson;
-    private sectionsSnapshot;
-    private cardsSnapshot;
-    private gridStack;
-    private addCardBtn;
-    private resizeObserver?;
-    private cardsPosition;
-    /** Callback that resumes the intercepted navigation once the user resolves the dialog. */
-    private pendingNavigation;
-    /** beforeunload handler kept on instance so add/removeEventListener pair up. */
-    private readonly beforeUnloadHandler;
-    constructor();
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    onMenuItemClick(actionId: string, event: Event): void;
-    enterEditMode(): void;
-    saveEdit(): void;
-    cancelEdit(): void;
-    confirmDiscard(): void;
-    cancelDiscard(): void;
-    /**
-     * 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: () => void): boolean;
-    /** Save → persist changes, close the dialog, then resume navigation. */
-    onUnsavedNavSave(): void;
-    /** Discard → revert to snapshot, close the dialog, then resume navigation. */
-    onUnsavedNavDiscard(): void;
-    /** Cancel → drop the queued navigation and stay in edit mode. */
-    onUnsavedNavCancel(): void;
-    private runPendingNavigation;
-    private discardEdit;
-    removeSection(id: string): void;
-    removeCard(id: string): void;
-    openCardPanel(): void;
-    closeCardPanel(): void;
-    onCardsEdited(event: {
-        added: CardConfig[];
-        removed: string[];
-    }): void;
-    onDragStart(event: {
-        el: Element;
-    }): void;
-    onDragStop(): void;
-    onGridChange(): void;
-    private saveCardsPosition;
-    private updateCardsPositions;
-    private getZFlowEngine;
-    private updateCardsForBreakpoint;
-    private changeCardSettingsForXlPage;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dashboard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dashboard, "mfp-dashboard", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "availableCards": { "alias": "availableCards"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; }, { "sections": "sectionsChange"; "cards": "cardsChange"; "saved": "saved"; "actionButtonClick": "actionButtonClick"; "unsavedChangesChange": "unsavedChangesChange"; }, never, ["[slot=dashboard-subheader]"], true, never>;
+    transform(value: string | null | undefined): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SanitizeHtmlPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<SanitizeHtmlPipe, "sanitizeHtml", true>;
 }
 
 declare class ResourceField<T extends GenericResource, F extends FieldDefinition> {
     fieldDefinition: _angular_core.InputSignal<F>;
     resource: _angular_core.InputSignal<T | undefined>;
+    permissions: _angular_core.InputSignal<Record<string, string[]> | undefined>;
     readonly buttonClick: _angular_core.OutputEmitterRef<ResourceFieldButtonClickEvent<T>>;
     value: _angular_core.Signal<any>;
     uiSettings: _angular_core.Signal<_openmfp_ngx.UiSettings | undefined>;
@@ -1325,6 +1394,7 @@ declare class ResourceField<T extends GenericResource, F extends FieldDefinition
     isVisible: _angular_core.WritableSignal<boolean>;
     copySuccess: _angular_core.WritableSignal<boolean>;
     isCollection: _angular_core.Signal<boolean>;
+    protected canRenderField: _angular_core.Signal<boolean>;
     toggleVisibility(e: Event): void;
     private normalizeBoolean;
     private normalizeString;
@@ -1333,7 +1403,7 @@ declare class ResourceField<T extends GenericResource, F extends FieldDefinition
     copyValue(event: Event): void;
     protected buttonClicked(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResourceField<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ResourceField<any, any>, "mfp-resource-field", never, { "fieldDefinition": { "alias": "fieldDefinition"; "required": true; "isSignal": true; }; "resource": { "alias": "resource"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ResourceField<any, any>, "mfp-resource-field", never, { "fieldDefinition": { "alias": "fieldDefinition"; "required": true; "isSignal": true; }; "resource": { "alias": "resource"; "required": false; "isSignal": true; }; "permissions": { "alias": "permissions"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
 }
 
 declare const ICON_DESIGN_POSITIVE = "Positive";
@@ -1433,5 +1503,5 @@ declare class MockCard {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MockCard, "mfp-mock-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, MockCard, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
+export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, DeleteConfirmationDialog, Favorites, LinkValue, MockCard, ResourceField, ResourceFormDialog, SanitizeHtmlPipe, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew, defineDashboardElementMethods };
 export type { ButtonSettings, CardConfig, CardsType, CssRule, DashboardButtonsSettings, DashboardConfig, DeleteResourceConfirmationConfig, FieldDefinition, FieldFilterDefinition, FormFieldChangeEvent, FormFieldDefinition, FormFieldErrors, GenericResource, IconDesignType, ModalSettings, MountCfg, PropertyField, ResourceFieldButtonClickEvent, ResourceFormConfig, RuleCondition, SectionConfig, ServiceStatusItem, ServiceStatusValue, TableCardButtonSettings, TableCardConfig, TableCardFormState, TableCardSearchConfig, TableConfig, TableFieldDefinition, TagSettings, TransformType, UiSettings, ValueRule };