@openmfp/ngx 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmfp/ngx",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openmfp/webcomponents.git"

package/types/openmfp-ngx.d.ts

@@ -6,71 +6,122 @@ import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
 import { GridStackOptions } from 'gridstack';
 import { nodesCB } from 'gridstack/dist/angular';
 
+/** Subset of fields of a generic resource that the table/form components rely on. */
 interface GenericResource extends Record<string, unknown> {
+    /** Optional unique identifier. */
     id?: string;
+    /** Whether the resource is available/healthy. */
     isAvailable?: boolean;
+    /** Human-readable name used for screen readers and tooltips. */
     accessibleName?: string;
 }
 
+/** Text transformation applied to a field value before display. */
 type TransformType = 'uppercase' | 'lowercase' | 'capitalize' | 'decode' | 'encode';
+/** Resolves a field value via a property path with optional transforms. */
 interface PropertyField {
+    /** Dot-separated JSON path to the value (e.g. `metadata.name`). */
     key: string;
+    /** Ordered list of transforms applied to the resolved string. */
     transform?: TransformType[];
 }
+/** Display and interaction settings for a table cell. */
 interface UiSettings {
+    /** When `true`, renders the cell value as a styled badge (blue pill). */
     labelDisplay?: boolean;
+    /** How the cell value is rendered. Defaults to plain text when omitted. */
     displayAs?: 'secret' | 'boolIcon' | 'link' | 'tooltip' | 'alert' | 'img' | 'button';
+    /** Button appearance and action — only used when `displayAs` is `'button'`. */
     buttonSettings?: ButtonSettings;
+    /** SAP UI5 icon name shown as the tooltip trigger icon. */
     tooltipIcon?: string;
+    /** When `true`, a copy-to-clipboard button is rendered next to the value. */
     withCopyButton?: boolean;
+    /** Inline CSS overrides applied unconditionally to the cell. */
     cssCustomization?: Partial<CSSStyleDeclaration>;
+    /** Conditional CSS rules evaluated against the cell value at render time. */
     cssRules?: CssRule[];
+    /** Fixed column width including unit (e.g. `'200px'`, `'20%'`). */
     columnWidth?: string;
     align?: 'start' | 'center' | 'end';
 }
 type KnownButtonActions = 'openInModal' | 'navigate' | 'edit' | 'delete';
 type ButtonActions = KnownButtonActions | (string & {});
+/** Appearance and action configuration for a button rendered inside a table cell or toolbar. */
 interface ButtonSettings {
+    /** Button label text. */
     text?: string;
+    /** SAP UI5 icon name placed before the label. */
     icon?: string;
+    /** SAP UI5 icon name placed after the label. */
     endIcon?: string;
+    /** SAP UI5 button design variant. */
     design?: 'Default' | 'Positive' | 'Negative' | 'Transparent' | 'Emphasized' | 'Attention';
+    /** Tooltip shown on hover. */
     tooltip?: string;
+    /** Action identifier. `'edit'` and `'delete'` are handled internally; all other values are forwarded to the host via `actionButtonClick`. */
     action: ButtonActions;
+    /** Settings for the modal opened when `action` is `'openInModal'`. */
     modalSettings?: ModalSettings;
 }
+/** Size and dimension overrides for the modal opened by a button with `action: 'openInModal'`. */
 interface ModalSettings {
+    /** Modal title shown in the dialog header. */
     title?: string;
+    /** Named size breakpoint. */
     size?: 'fullscreen' | 'l' | 'm' | 's';
+    /** Explicit width override. */
     width?: string;
+    /** Explicit height override. */
     height?: string;
 }
+/** Comparison operator used in a conditional CSS rule. */
 type CssRuleCondition = 'equals' | 'notEquals' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'contains';
+/** Conditional CSS rule: applies `styles` to the cell when `if` evaluates to `true`. */
 interface CssRule {
+    /** Condition evaluated against the cell's string value. */
     if: {
         condition: CssRuleCondition;
         value: string;
     };
+    /** CSS properties applied when the condition is met. */
     styles: Partial<CSSStyleDeclaration>;
 }
+/** Event payload emitted when a button inside a table cell is clicked. */
 interface ValueCellButtonClickEvent<T extends GenericResource> {
+    /** Original DOM click event. */
     event: MouseEvent;
+    /** The field definition of the button cell that was clicked. */
     field: TableFieldDefinition;
+    /** The data row associated with the clicked button. */
     resource: T | undefined;
 }
+/** Base field definition shared by table columns and form fields. */
 interface FieldDefinition {
+    /** Column header / form label. */
     label?: string;
+    /** Dot-separated path to the resource property (e.g. `metadata.name`). */
     property?: string | string[];
+    /** Alternative path resolver with optional transforms. */
     propertyField?: PropertyField;
+    /** JSONPath expression evaluated against the resource when `property` is not enough. */
     jsonPathExpression?: string;
+    /** Static value — used when the cell shows a constant rather than a resource field. */
     value?: string;
+    /** Display and interaction configuration for this cell. */
     uiSettings?: UiSettings;
 }
+/** 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;
     };
 }
@@ -101,18 +152,29 @@ declare class DeclarativeTable<T extends GenericResource> {
     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; }; }, { "buttonClick": "buttonClick"; "tableRowClicked": "tableRowClicked"; "loadMoreResources": "loadMoreResources"; "paginationLimitChanged": "paginationLimitChanged"; }, never, never, true, never>;
 }
 
+/** 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';
 }
+/** 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 {
@@ -137,41 +199,72 @@ declare class DeclarativeForm {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeclarativeForm, "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"; }, 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. */
     fields: FormFieldDefinition[];
+    /** Dialog title shown in the header. */
     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. */
     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;
 }
+/** 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;
+    /** Number of rows per page. */
     paginationLimit?: number;
+    /** When `true`, the "Load More" control is shown. */
     hasMore?: boolean;
 }
+/** 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>;
 }
+/** Top-level configuration for `<mfp-declarative-table-card>`. */
 interface TableCardConfig {
+    /** Card heading. */
     header?: string;
+    /** Tooltip shown on hover of the card heading. */
     headerTooltip?: string;
+    /** Required table configuration. */
     tableConfig: TableConfig;
+    /** Overrides for built-in toolbar and row-action buttons. */
     buttonSettings?: TableCardButtonSettings;
+    /** When `true`, shows the search input and button in the card toolbar. */
     resourcesSearchable?: boolean;
+    /** When set, enables the "Create" button and create dialog. */
     createResourceFormConfig?: ResourceFormConfig;
+    /** When set, enables per-row "Edit" button and edit dialog. */
     editResourceFormConfig?: ResourceFormConfig;
+    /** When set, enables per-row "Delete" button and confirmation dialog. */
     deleteResourceConfirmationConfig?: DeleteResourceConfirmationConfig;
 }
 
@@ -244,38 +337,76 @@ declare const CARD_TYPES: {
     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;
 }
+/** 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 Add Card button defaults. */
     addCardButton?: 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;
 }
 
@@ -344,21 +475,21 @@ declare class Dashboard implements OnInit, OnDestroy {
     onOrderChange(event: nodesCB): void;
     private saveCardsPosition;
     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; }; }, { "sections": "sectionsChange"; "cards": "cardsChange"; "saved": "saved"; "actionButtonClick": "actionButtonClick"; }, never, never, true, 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; }; }, { "sections": "sectionsChange"; "cards": "cardsChange"; "saved": "saved"; "actionButtonClick": "actionButtonClick"; }, never, ["[slot=dashboard-subheader]"], true, never>;
 }
 
 declare class AddCardDialog {
     availableCards: _angular_core.InputSignal<CardConfig[]>;
     addedCardsIds: _angular_core.InputSignal<Set<string>>;
     open: _angular_core.InputSignal<boolean>;
-    confirm: _angular_core.OutputEmitterRef<CardConfig[]>;
-    cancel: _angular_core.OutputEmitterRef<void>;
+    readonly confirm: _angular_core.OutputEmitterRef<CardConfig[]>;
+    readonly cancelled: _angular_core.OutputEmitterRef<void>;
     selectedIds: _angular_core.WritableSignal<Set<string>>;
     constructor();
     toggle(id: string): void;
     confirmAdd(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AddCardDialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddCardDialog, "mfp-add-card-dialog", never, { "availableCards": { "alias": "availableCards"; "required": false; "isSignal": true; }; "addedCardsIds": { "alias": "addedCardsIds"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "confirm": "confirm"; "cancel": "cancel"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddCardDialog, "mfp-add-card-dialog", never, { "availableCards": { "alias": "availableCards"; "required": false; "isSignal": true; }; "addedCardsIds": { "alias": "addedCardsIds"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "confirm": "confirm"; "cancelled": "cancelled"; }, never, never, true, never>;
 }
 
 declare class DashboardCard {
@@ -392,9 +523,9 @@ declare class VisitedServiceCard {
     serviceDescription: _angular_core.InputSignal<string>;
     serviceIcon: _angular_core.InputSignal<string>;
     path: _angular_core.InputSignal<string>;
-    click: _angular_core.OutputEmitterRef<string>;
+    readonly cardClick: _angular_core.OutputEmitterRef<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VisitedServiceCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VisitedServiceCard, "mfp-visited-service-card", never, { "serviceType": { "alias": "serviceType"; "required": true; "isSignal": true; }; "serviceName": { "alias": "serviceName"; "required": true; "isSignal": true; }; "serviceDescription": { "alias": "serviceDescription"; "required": true; "isSignal": true; }; "serviceIcon": { "alias": "serviceIcon"; "required": true; "isSignal": true; }; "path": { "alias": "path"; "required": true; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VisitedServiceCard, "mfp-visited-service-card", never, { "serviceType": { "alias": "serviceType"; "required": true; "isSignal": true; }; "serviceName": { "alias": "serviceName"; "required": true; "isSignal": true; }; "serviceDescription": { "alias": "serviceDescription"; "required": true; "isSignal": true; }; "serviceIcon": { "alias": "serviceIcon"; "required": true; "isSignal": true; }; "path": { "alias": "path"; "required": true; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
 }
 
 declare class Favorites {
@@ -407,10 +538,15 @@ declare class Favorites {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Favorites, "mfp-favorites", never, {}, {}, never, never, true, never>;
 }
 
+/** Possible health states for a service. */
 type ServiceStatusValue = 'operational' | 'degraded' | 'outage' | 'maintenance';
+/** A single service entry displayed in the service-status card. */
 interface ServiceStatusItem {
+    /** Display name of the service. */
     name: string;
+    /** SAP UI5 icon name used as the service icon. */
     icon: string;
+    /** Current health status of the service. */
     status: ServiceStatusValue;
 }
 declare class ServiceStatusCard {