@openmfp/ngx 0.18.3 → 0.18.5

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@openmfp/ngx",
-  "version": "0.18.3",
+  "version": "0.18.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openmfp/webcomponents.git"
   },
   "dependencies": {
-    "gridstack": "^13.0.0",
+    "gridstack": "^13.0.1",
     "tslib": "2.8.1"
   },
   "peerDependencies": {

package/types/openmfp-ngx.d.ts

@@ -2,8 +2,10 @@ 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 { GridStackEngine } from 'gridstack/dist/gridstack-engine';
 import { SafeHtml } from '@angular/platform-browser';
-import { GridStackOptions } from 'gridstack';
 
 /** Subset of fields of a generic resource that the table/form components rely on. */
 interface GenericResource extends Record<string, unknown> {
@@ -585,10 +587,43 @@ interface DashboardConfig {
     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;
+    private readonly sanitizer;
+    protected readonly i18n: DashboardI18nService;
     config: _angular_core.InputSignal<DashboardConfig>;
     sections: _angular_core.ModelSignal<SectionConfig[]>;
     cards: _angular_core.ModelSignal<CardConfig[]>;
@@ -603,30 +638,6 @@ declare class Dashboard implements OnInit, OnDestroy {
         action: ButtonSettings;
     }>;
     readonly unsavedChangesChange: _angular_core.OutputEmitterRef<boolean>;
-    editMode: _angular_core.WritableSignal<boolean>;
-    compactToolbar: _angular_core.WritableSignal<boolean>;
-    toolbarMenuOpen: _angular_core.WritableSignal<boolean>;
-    /** True once the user has dragged/resized any grid item while in edit mode. */
-    private gridDirty;
-    protected backgroundImageHeight: _angular_core.WritableSignal<number | null>;
-    /** JSON snapshots of sections/cards taken on entering edit mode, used to detect changes. */
-    private sectionsSnapshotJson;
-    private 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: _angular_core.Signal<boolean>;
-    private sectionsSnapshot;
-    private cardsSnapshot;
-    private gridStackItems;
-    private addCardBtn;
-    private resizeObserver?;
-    private readonly hostEl;
-    private readonly injector;
-    private readonly sanitizer;
-    protected readonly i18n: DashboardI18nService;
     protected readonly i18nKeys: {
         readonly UNSAVED_CHANGES: "unsavedChanges";
         readonly EDIT_CARDS: "editCards";
@@ -643,19 +654,39 @@ declare class Dashboard implements OnInit, OnDestroy {
         readonly REMOVE_CARD: "removeCard";
         readonly RESIZABLE: "resizable";
     };
-    protected safeTitle: _angular_core.Signal<SafeHtml>;
-    protected safeDescription: _angular_core.Signal<SafeHtml | null>;
-    protected gridOptions: _angular_core.Signal<GridStackOptions>;
+    /** 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>;
-    /** 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;
-    customActions: _angular_core.Signal<ButtonSettings[]>;
-    addedCardsIds: _angular_core.Signal<Set<string>>;
-    editViewButton: _angular_core.Signal<{
+    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;
@@ -664,7 +695,7 @@ declare class Dashboard implements OnInit, OnDestroy {
         action?: (("openInModal" | "navigate" | "edit" | "delete") | (string & {})) | undefined;
         modalSettings?: _openmfp_ngx.ModalSettings;
     }>;
-    editCardsButton: _angular_core.Signal<{
+    protected editCardsButton: _angular_core.Signal<{
         text: string;
         icon: string;
         endIcon?: string;
@@ -673,15 +704,22 @@ declare class Dashboard implements OnInit, OnDestroy {
         action?: (("openInModal" | "navigate" | "edit" | "delete") | (string & {})) | undefined;
         modalSettings?: _openmfp_ngx.ModalSettings;
     }>;
-    sectionCards: _angular_core.Signal<(sectionId: string) => CardConfig[]>;
-    cardsPosition: Map<string, {
-        x?: number;
-        y?: number;
-        w?: number;
-        h?: number;
-    }>;
-    looseCards: _angular_core.WritableSignal<CardConfig[]>;
-    private newGridStackNodes;
+    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;
@@ -731,9 +769,16 @@ declare class Dashboard implements OnInit, OnDestroy {
         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>;
 }
@@ -1379,5 +1424,11 @@ declare class WhatsNew {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WhatsNew, "mfp-whats-new", never, {}, {}, never, never, true, never>;
 }
 
-export { BooleanValue, CARD_TYPES, Dashboard, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, LinkValue, ResourceField, SecretValue, ServiceStatusCard, TagListValue, VisitedServiceCard, WhatsNew };
+declare class MockCard {
+    readonly title: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MockCard, never>;
+    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 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 };