@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/index.d.ts

@@ -0,0 +1,727 @@
+import * as _dragonworks_ngx_dashboard from '@dragonworks/ngx-dashboard';
+import * as _ngrx_signals from '@ngrx/signals';
+import * as _angular_core from '@angular/core';
+import { Type, ViewContainerRef, ComponentRef, OnChanges, SimpleChanges, ElementRef, InjectionToken } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Branded type for cell identifiers to ensure type safety when working with grid coordinates.
+ * This prevents accidentally mixing up row/column numbers with cell IDs.
+ */
+type CellId = number & {
+    __brand: 'CellId';
+};
+/**
+ * Utility functions for working with CellId branded type.
+ */
+declare const CellIdUtils: {
+    /**
+     * Creates a CellId from row and column coordinates.
+     * @param row - The row number (1-based)
+     * @param col - The column number (1-based)
+     * @returns A branded CellId that encodes both coordinates
+     * @throws Error if row or col is less than 1, or if col exceeds MAX_COLUMNS
+     */
+    create(row: number, col: number): CellId;
+    /**
+     * Decodes a CellId back into row and column coordinates.
+     * @param cellId - The CellId to decode
+     * @returns A tuple of [row, col] coordinates (1-based)
+     */
+    decode(cellId: CellId): [number, number];
+    /**
+     * Gets the row coordinate from a CellId.
+     * @param cellId - The CellId to extract row from
+     * @returns The row number (1-based)
+     */
+    getRow(cellId: CellId): number;
+    /**
+     * Gets the column coordinate from a CellId.
+     * @param cellId - The CellId to extract column from
+     * @returns The column number (1-based)
+     */
+    getCol(cellId: CellId): number;
+    /**
+     * Creates a string representation of a CellId for debugging/display purposes.
+     * @param cellId - The CellId to convert to string
+     * @returns A string in the format "row-col"
+     */
+    toString(cellId: CellId): string;
+    /**
+     * Checks if two CellIds are equal.
+     * @param a - First CellId
+     * @param b - Second CellId
+     * @returns True if the CellIds represent the same cell
+     */
+    equals(a: CellId, b: CellId): boolean;
+};
+
+/**
+ * Branded type for widget identifiers to ensure type safety when working with widget instances.
+ * This prevents accidentally mixing up widget IDs with other string values.
+ */
+type WidgetId = string & {
+    __brand: 'WidgetId';
+};
+/**
+ * Utility functions for working with WidgetId branded type.
+ * WidgetIds are UUIDs that uniquely identify widget instances throughout their lifecycle,
+ * independent of their position on the dashboard grid.
+ */
+declare const WidgetIdUtils: {
+    /**
+     * Generates a new unique WidgetId.
+     * Uses crypto.randomUUID() when available, falls back to timestamp-based ID for older browsers.
+     * @returns A new unique WidgetId
+     */
+    generate(): WidgetId;
+    /**
+     * Validates if a string is a valid WidgetId format.
+     * @param id - The string to validate
+     * @returns True if the string is a valid WidgetId format
+     */
+    validate(id: string): id is WidgetId;
+    /**
+     * Converts a WidgetId to a string for use as map keys or serialization.
+     * @param id - The WidgetId to convert
+     * @returns The string representation of the WidgetId
+     */
+    toString(id: WidgetId): string;
+    /**
+     * Creates a WidgetId from a string, validating the format.
+     * @param str - The string to convert to WidgetId
+     * @returns A WidgetId
+     * @throws Error if the string is not a valid WidgetId format
+     */
+    fromString(str: string): WidgetId;
+    /**
+     * Checks if two WidgetIds are equal.
+     * @param a - First WidgetId
+     * @param b - Second WidgetId
+     * @returns True if the WidgetIds are the same
+     */
+    equals(a: WidgetId, b: WidgetId): boolean;
+};
+
+interface Widget {
+    dashboardGetState?(): unknown;
+    dashboardSetState?(state?: unknown): void;
+    dashboardEditState?(): void;
+}
+interface WidgetMetadata {
+    widgetTypeid: string;
+    name: string;
+    description: string;
+    svgIcon: string;
+}
+interface WidgetComponentClass<T extends Widget = Widget> extends Type<T> {
+    metadata: WidgetMetadata;
+}
+
+interface WidgetFactory<T extends Widget = Widget> {
+    widgetTypeid: string;
+    name: string;
+    description: string;
+    svgIcon: string;
+    createInstance(container: ViewContainerRef, state?: unknown): ComponentRef<T>;
+}
+declare function createFactoryFromComponent<T extends Widget>(component: WidgetComponentClass<T>): WidgetFactory;
+
+interface CellPosition {
+    row: number;
+    col: number;
+    rowSpan: number;
+    colSpan: number;
+}
+interface CellComponentPosition extends CellPosition {
+    cellId: CellId;
+    widgetId: WidgetId;
+}
+
+interface CellData extends CellPosition {
+    widgetId: WidgetId;
+    cellId: CellId;
+    flat?: boolean;
+    widgetFactory: WidgetFactory;
+    widgetState: unknown;
+}
+
+/**
+ * Data structure for cell display settings
+ */
+interface CellDisplayData {
+    id: string;
+    flat: boolean | undefined;
+}
+
+/**
+ * Serializable data format for dashboard export/import functionality.
+ * This format can be safely converted to/from JSON for persistence.
+ * Corresponds to the persistent state from the dashboard store features.
+ */
+interface DashboardDataDto {
+    /** Version for future compatibility and migration support */
+    version: string;
+    /** Unique dashboard identifier managed by the client */
+    dashboardId: string;
+    /** Grid dimensions */
+    rows: number;
+    columns: number;
+    gutterSize: string;
+    /** Array of serializable cell data */
+    cells: CellDataDto[];
+}
+/**
+ * Serializable version of CellData that can be safely JSON stringified.
+ * Converts non-serializable types (CellId, WidgetFactory) to serializable equivalents.
+ */
+interface CellDataDto {
+    /** Grid position */
+    row: number;
+    col: number;
+    /** Cell span */
+    rowSpan: number;
+    colSpan: number;
+    /** Display settings */
+    flat?: boolean;
+    /** Widget type identifier for factory lookup during import */
+    widgetTypeid: string;
+    /** Raw widget state (must be JSON serializable) */
+    widgetState: unknown;
+}
+
+/**
+ * Creates an empty dashboard configuration with the specified dimensions.
+ * This is a convenience function for creating a basic dashboard without any cells.
+ *
+ * @param dashboardId - Unique identifier for the dashboard (managed by client)
+ * @param rows - Number of rows in the dashboard grid
+ * @param columns - Number of columns in the dashboard grid
+ * @param gutterSize - CSS size for the gutter between cells (default: '0.5em')
+ * @returns A DashboardDataDto configured with the specified dimensions and no cells
+ *
+ * @example
+ * // Create an 8x16 dashboard with default gutter
+ * const dashboard = createEmptyDashboard('my-dashboard-1', 8, 16);
+ *
+ * @example
+ * // Create a 5x10 dashboard with custom gutter
+ * const dashboard = createEmptyDashboard('my-dashboard-2', 5, 10, '0.5rem');
+ */
+declare function createEmptyDashboard(dashboardId: string, rows: number, columns: number, gutterSize?: string): DashboardDataDto;
+/**
+ * Creates a default dashboard configuration with standard dimensions.
+ * This provides a reasonable starting point for most use cases.
+ *
+ * @param dashboardId - Unique identifier for the dashboard (managed by client)
+ * @returns A DashboardDataDto with 8 rows, 16 columns, and 0.5em gutter
+ *
+ * @example
+ * const dashboard = createDefaultDashboard('my-dashboard-id');
+ */
+declare function createDefaultDashboard(dashboardId: string): DashboardDataDto;
+
+type DragData = {
+    kind: 'cell';
+    content: CellComponentPosition;
+} | {
+    kind: 'widget';
+    content: WidgetMetadata;
+};
+
+/**
+ * Defines space that should be reserved around the dashboard component
+ * when calculating viewport constraints.
+ */
+interface ReservedSpace {
+    /** Space reserved at the top (e.g., toolbar height) */
+    top: number;
+    /** Space reserved on the right (e.g., padding, widget list) */
+    right: number;
+    /** Space reserved at the bottom (e.g., padding) */
+    bottom: number;
+    /** Space reserved on the left (e.g., padding) */
+    left: number;
+}
+/**
+ * Default reserved space when none is specified
+ */
+declare const DEFAULT_RESERVED_SPACE: ReservedSpace;
+
+interface ResizeData {
+    cellId: CellId;
+    originalRowSpan: number;
+    originalColSpan: number;
+    previewRowSpan: number;
+    previewColSpan: number;
+}
+
+interface ViewportSize {
+    width: number;
+    height: number;
+}
+interface DashboardConstraints {
+    maxWidth: number;
+    maxHeight: number;
+    constrainedBy: 'width' | 'height' | 'none';
+}
+/**
+ * Internal component-scoped service that provides viewport-aware constraints for a single dashboard.
+ * Each dashboard component gets its own instance of this service.
+ *
+ * This service is NOT part of the public API and should remain internal to the library.
+ */
+declare class DashboardViewportService {
+    private readonly platformId;
+    private readonly destroyRef;
+    private readonly store;
+    private readonly viewportSize;
+    private readonly reservedSpace;
+    private resizeObserver;
+    constructor();
+    /**
+     * Initialize viewport size tracking using ResizeObserver on the window
+     */
+    private initializeViewportTracking;
+    /**
+     * Set reserved space that should be excluded from dashboard calculations
+     * (e.g., toolbar height, widget list width, padding)
+     */
+    setReservedSpace(space: ReservedSpace): void;
+    /**
+     * Get current viewport size
+     */
+    readonly currentViewportSize: _angular_core.Signal<ViewportSize>;
+    /**
+     * Get current reserved space
+     */
+    readonly currentReservedSpace: _angular_core.Signal<ReservedSpace>;
+    /**
+     * Calculate available space for dashboard after accounting for reserved areas
+     */
+    readonly availableSpace: _angular_core.Signal<ViewportSize>;
+    /**
+     * Calculate dashboard constraints for this dashboard instance
+     */
+    readonly constraints: _angular_core.Signal<DashboardConstraints>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardViewportService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DashboardViewportService>;
+}
+
+declare class DashboardComponent implements OnChanges {
+    #private;
+    protected readonly store: {
+        dashboardId: _angular_core.Signal<string>;
+        rows: _angular_core.Signal<number>;
+        columns: _angular_core.Signal<number>;
+        gutterSize: _angular_core.Signal<string>;
+        isEditMode: _angular_core.Signal<boolean>;
+        gridCellDimensions: _ngrx_signals.DeepSignal<{
+            width: number;
+            height: number;
+        }>;
+        widgetsById: _angular_core.Signal<Record<string, _dragonworks_ngx_dashboard.CellData>>;
+        resizeData: _angular_core.Signal<ResizeData | null>;
+        dragData: _angular_core.Signal<_dragonworks_ngx_dashboard.DragData | null>;
+        hoveredDropZone: _angular_core.Signal<{
+            row: number;
+            col: number;
+        } | null>;
+        dashboardService: _dragonworks_ngx_dashboard.DashboardService;
+        cells: _angular_core.Signal<_dragonworks_ngx_dashboard.CellData[]>;
+        highlightedZones: _angular_core.Signal<{
+            row: number;
+            col: number;
+        }[]>;
+        highlightMap: _angular_core.Signal<Set<_dragonworks_ngx_dashboard.CellId>>;
+        invalidHighlightMap: _angular_core.Signal<Set<_dragonworks_ngx_dashboard.CellId>>;
+        isValidPlacement: _angular_core.Signal<boolean>;
+        resizePreviewCells: _angular_core.Signal<{
+            row: number;
+            col: number;
+        }[]>;
+        resizePreviewMap: _angular_core.Signal<Set<_dragonworks_ngx_dashboard.CellId>>;
+        setGridConfig: (config: {
+            rows?: number;
+            columns?: number;
+            gutterSize?: string;
+        }) => void;
+        setGridCellDimensions: (width: number, height: number) => void;
+        toggleEditMode: () => void;
+        setEditMode: (isEditMode: boolean) => void;
+        addWidget: (cell: _dragonworks_ngx_dashboard.CellData) => void;
+        removeWidget: (widgetId: _dragonworks_ngx_dashboard.WidgetId) => void;
+        updateWidgetPosition: (widgetId: _dragonworks_ngx_dashboard.WidgetId, row: number, col: number) => void;
+        createWidget: (row: number, col: number, widgetFactory: _dragonworks_ngx_dashboard.WidgetFactory, widgetState?: string) => void;
+        updateCellSettings: (widgetId: _dragonworks_ngx_dashboard.WidgetId, flat: boolean) => void;
+        updateWidgetSpan: (widgetId: _dragonworks_ngx_dashboard.WidgetId, rowSpan: number, colSpan: number) => void;
+        updateWidgetState: (widgetId: _dragonworks_ngx_dashboard.WidgetId, widgetState: unknown) => void;
+        updateAllWidgetStates: (cellStates: Map<string, unknown>) => void;
+        clearDashboard: () => void;
+        startDrag: (dragData: _dragonworks_ngx_dashboard.DragData) => void;
+        endDrag: () => void;
+        setHoveredDropZone: (zone: {
+            row: number;
+            col: number;
+        } | null) => void;
+        handleDrop: (dragData: _dragonworks_ngx_dashboard.DragData, targetPosition: {
+            row: number;
+            col: number;
+        }) => boolean;
+        startResize: (cellId: _dragonworks_ngx_dashboard.CellId) => void;
+        updateResizePreview: (direction: "horizontal" | "vertical", delta: number) => void;
+        endResize: (apply: boolean) => void;
+        exportDashboard: (getCurrentWidgetStates?: () => Map<string, unknown>) => DashboardDataDto;
+        loadDashboard: (data: DashboardDataDto) => void;
+        initializeFromDto: (dashboardData: DashboardDataDto) => void;
+    } & _ngrx_signals.StateSource<{
+        dashboardId: string;
+        rows: number;
+        columns: number;
+        gutterSize: string;
+        isEditMode: boolean;
+        gridCellDimensions: {
+            width: number;
+            height: number;
+        };
+        widgetsById: Record<string, _dragonworks_ngx_dashboard.CellData>;
+        resizeData: ResizeData | null;
+        dragData: _dragonworks_ngx_dashboard.DragData | null;
+        hoveredDropZone: {
+            row: number;
+            col: number;
+        } | null;
+    }>;
+    protected readonly viewport: DashboardViewportService;
+    dashboardData: _angular_core.InputSignal<DashboardDataDto>;
+    editMode: _angular_core.InputSignal<boolean>;
+    reservedSpace: _angular_core.InputSignal<ReservedSpace | undefined>;
+    cells: _angular_core.Signal<_dragonworks_ngx_dashboard.CellData[]>;
+    private dashboardEditor;
+    private dashboardViewer;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    exportDashboard(): DashboardDataDto;
+    loadDashboard(data: DashboardDataDto): void;
+    getCurrentDashboardData(): DashboardDataDto;
+    clearDashboard(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardComponent, "ngx-dashboard", never, { "dashboardData": { "alias": "dashboardData"; "required": true; "isSignal": true; }; "editMode": { "alias": "editMode"; "required": false; "isSignal": true; }; "reservedSpace": { "alias": "reservedSpace"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class CellComponent {
+    #private;
+    widgetId: _angular_core.InputSignal<WidgetId>;
+    cellId: _angular_core.InputSignal<CellId>;
+    widgetFactory: _angular_core.InputSignal<WidgetFactory<Widget> | undefined>;
+    widgetState: _angular_core.InputSignal<unknown>;
+    isEditMode: _angular_core.InputSignal<boolean>;
+    flat: _angular_core.InputSignal<boolean | undefined>;
+    row: _angular_core.ModelSignal<number>;
+    column: _angular_core.ModelSignal<number>;
+    rowSpan: _angular_core.InputSignal<number>;
+    colSpan: _angular_core.InputSignal<number>;
+    draggable: _angular_core.InputSignal<boolean>;
+    dragStart: _angular_core.OutputEmitterRef<DragData>;
+    dragEnd: _angular_core.OutputEmitterRef<void>;
+    edit: _angular_core.OutputEmitterRef<WidgetId>;
+    delete: _angular_core.OutputEmitterRef<WidgetId>;
+    settings: _angular_core.OutputEmitterRef<{
+        id: WidgetId;
+        flat: boolean;
+    }>;
+    resizeStart: _angular_core.OutputEmitterRef<{
+        cellId: CellId;
+        direction: "horizontal" | "vertical";
+    }>;
+    resizeMove: _angular_core.OutputEmitterRef<{
+        cellId: CellId;
+        direction: "horizontal" | "vertical";
+        delta: number;
+    }>;
+    resizeEnd: _angular_core.OutputEmitterRef<{
+        cellId: CellId;
+        apply: boolean;
+    }>;
+    private container;
+    isDragging: _angular_core.WritableSignal<boolean>;
+    readonly gridRowStyle: _angular_core.Signal<string>;
+    readonly gridColumnStyle: _angular_core.Signal<string>;
+    isResizing: _angular_core.Signal<boolean>;
+    isDragActive: _angular_core.Signal<boolean>;
+    resizeData: _angular_core.Signal<ResizeData | null>;
+    gridCellDimensions: _ngrx_signals.DeepSignal<{
+        width: number;
+        height: number;
+    }>;
+    private resizeDirection;
+    private resizeStartPos;
+    constructor();
+    /**
+     * Setup document-level event listeners for resize operations
+     * Performance: Only creates listeners when actively resizing (not for every cell)
+     * Angular-idiomatic: Uses Renderer2 for dynamic listener management
+     */
+    private setupDocumentListeners;
+    setPosition(row: number, column: number): void;
+    onDragStart(event: DragEvent): void;
+    onDragEnd(): void;
+    /**
+     * Handle context menu events (called from template)
+     * Performance: Element-specific event binding, not document-level
+     * Angular-idiomatic: Template event binding instead of fromEvent
+     */
+    onContextMenu(event: MouseEvent): void;
+    canEdit(): boolean;
+    onEdit(): void;
+    onDelete(): void;
+    onSettings(): Promise<void>;
+    /**
+     * Start resize operation and setup document listeners
+     * Performance: Only THIS cell creates document listeners when actively resizing
+     * RxJS-free: Uses Renderer2 for dynamic listener management
+     */
+    onResizeStart(event: MouseEvent, direction: 'horizontal' | 'vertical'): void;
+    /**
+     * Handle resize move events (called from document listener)
+     * Performance: Only called for the actively resizing cell
+     * Bound method: Maintains component context without arrow functions
+     */
+    private handleResizeMove;
+    /**
+     * Handle resize end events (called from document listener)
+     * Performance: Cleans up document listeners immediately after resize
+     * State cleanup: Resets resize direction to stop further event processing
+     */
+    private handleResizeEnd;
+    /**
+     * Get the current widget state by calling dashboardGetState() on the widget instance.
+     * Used during dashboard export to get live widget state instead of stale stored state.
+     */
+    getCurrentWidgetState(): unknown | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CellComponent, "lib-cell", never, { "widgetId": { "alias": "widgetId"; "required": true; "isSignal": true; }; "cellId": { "alias": "cellId"; "required": true; "isSignal": true; }; "widgetFactory": { "alias": "widgetFactory"; "required": false; "isSignal": true; }; "widgetState": { "alias": "widgetState"; "required": false; "isSignal": true; }; "isEditMode": { "alias": "isEditMode"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; "row": { "alias": "row"; "required": true; "isSignal": true; }; "column": { "alias": "column"; "required": true; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; }, { "row": "rowChange"; "column": "columnChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; "edit": "edit"; "delete": "delete"; "settings": "settings"; "resizeStart": "resizeStart"; "resizeMove": "resizeMove"; "resizeEnd": "resizeEnd"; }, never, never, true, never>;
+}
+
+declare class DropZoneComponent {
+    #private;
+    row: _angular_core.InputSignal<number>;
+    col: _angular_core.InputSignal<number>;
+    index: _angular_core.InputSignal<number>;
+    highlight: _angular_core.InputSignal<boolean>;
+    highlightInvalid: _angular_core.InputSignal<boolean>;
+    highlightResize: _angular_core.InputSignal<boolean>;
+    editMode: _angular_core.InputSignal<boolean>;
+    dragEnter: _angular_core.OutputEmitterRef<{
+        row: number;
+        col: number;
+    }>;
+    dragExit: _angular_core.OutputEmitterRef<void>;
+    dragOver: _angular_core.OutputEmitterRef<{
+        row: number;
+        col: number;
+    }>;
+    dragDrop: _angular_core.OutputEmitterRef<{
+        data: DragData;
+        target: {
+            row: number;
+            col: number;
+        };
+    }>;
+    dropZoneId: _angular_core.Signal<string>;
+    dropData: _angular_core.Signal<{
+        row: number;
+        col: number;
+    }>;
+    dragData: _angular_core.Signal<DragData | null>;
+    dropEffect: _angular_core.Signal<"none" | "copy" | "move">;
+    get nativeElement(): HTMLElement;
+    onDragEnter(event: DragEvent): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropZoneComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropZoneComponent, "lib-drop-zone", never, { "row": { "alias": "row"; "required": true; "isSignal": true; }; "col": { "alias": "col"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; "highlight": { "alias": "highlight"; "required": false; "isSignal": true; }; "highlightInvalid": { "alias": "highlightInvalid"; "required": false; "isSignal": true; }; "highlightResize": { "alias": "highlightResize"; "required": false; "isSignal": true; }; "editMode": { "alias": "editMode"; "required": false; "isSignal": true; }; }, { "dragEnter": "dragEnter"; "dragExit": "dragExit"; "dragOver": "dragOver"; "dragDrop": "dragDrop"; }, never, never, true, never>;
+}
+
+declare class DashboardEditorComponent {
+    #private;
+    bottomGridRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
+    dropZones: _angular_core.Signal<readonly DropZoneComponent[]>;
+    cellComponents: _angular_core.Signal<readonly CellComponent[]>;
+    rows: _angular_core.InputSignal<number>;
+    columns: _angular_core.InputSignal<number>;
+    gutterSize: _angular_core.InputSignal<string>;
+    gutters: _angular_core.Signal<number>;
+    cells: _angular_core.Signal<CellData[]>;
+    highlightedZones: _angular_core.Signal<{
+        row: number;
+        col: number;
+    }[]>;
+    highlightMap: _angular_core.Signal<Set<CellId>>;
+    invalidHighlightMap: _angular_core.Signal<Set<CellId>>;
+    hoveredDropZone: _angular_core.Signal<{
+        row: number;
+        col: number;
+    } | null>;
+    resizePreviewMap: _angular_core.Signal<Set<CellId>>;
+    dropzonePositions: _angular_core.Signal<{
+        row: number;
+        col: number;
+        id: string;
+        index: number;
+    }[]>;
+    createCellId(row: number, col: number): CellId;
+    constructor();
+    addWidget: (cellData: CellData) => void;
+    updateCellPosition: (id: WidgetId, row: number, column: number) => void;
+    updateCellSpan: (id: WidgetId, colSpan: number, rowSpan: number) => void;
+    updateCellSettings: (id: WidgetId, flat: boolean) => void;
+    onDragOver: (event: {
+        row: number;
+        col: number;
+    }) => void;
+    onDragEnter: (event: {
+        row: number;
+        col: number;
+    }) => void;
+    onDragExit: () => void;
+    dragEnd: () => void;
+    onCellDelete: (id: WidgetId) => void;
+    onCellSettings: (event: {
+        id: WidgetId;
+        flat: boolean;
+    }) => void;
+    onCellResize: (event: {
+        id: WidgetId;
+        rowSpan: number;
+        colSpan: number;
+    }) => void;
+    onCellDragStart: (dragData: DragData) => void;
+    onCellResizeStart: (event: {
+        cellId: CellId;
+        direction: "horizontal" | "vertical";
+    }) => void;
+    onCellResizeMove: (event: {
+        cellId: CellId;
+        direction: "horizontal" | "vertical";
+        delta: number;
+    }) => void;
+    onCellResizeEnd: (event: {
+        cellId: CellId;
+        apply: boolean;
+    }) => void;
+    onDragDrop(event: {
+        data: DragData;
+        target: {
+            row: number;
+            col: number;
+        };
+    }): void;
+    /**
+     * Get current widget states from all cell components.
+     * Used during dashboard export to get live widget states.
+     */
+    getCurrentWidgetStates(): Map<string, unknown>;
+    /**
+     * Export dashboard with live widget states from current component instances.
+     * This ensures the most up-to-date widget states are captured.
+     */
+    exportDashboard(): _dragonworks_ngx_dashboard.DashboardDataDto;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardEditorComponent, "ngx-dashboard-editor", never, { "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class DashboardViewerComponent {
+    #private;
+    cellComponents: _angular_core.Signal<readonly CellComponent[]>;
+    rows: _angular_core.InputSignal<number>;
+    columns: _angular_core.InputSignal<number>;
+    gutterSize: _angular_core.InputSignal<string>;
+    gutters: _angular_core.Signal<number>;
+    cells: _angular_core.Signal<_dragonworks_ngx_dashboard.CellData[]>;
+    constructor();
+    /**
+     * Get current widget states from all cell components.
+     * Used during dashboard export to get live widget states.
+     */
+    getCurrentWidgetStates(): Map<string, unknown>;
+    /**
+     * Export dashboard with live widget states from current component instances.
+     * This ensures the most up-to-date widget states are captured.
+     */
+    exportDashboard(): _dragonworks_ngx_dashboard.DashboardDataDto;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardViewerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DashboardViewerComponent, "ngx-dashboard-viewer", never, { "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface WidgetDisplayItem extends WidgetMetadata {
+    safeSvgIcon?: SafeHtml;
+}
+declare class WidgetListComponent {
+    #private;
+    activeWidget: _angular_core.WritableSignal<string | null>;
+    gridCellDimensions: _angular_core.Signal<{
+        width: number;
+        height: number;
+    }>;
+    widgets: _angular_core.Signal<{
+        safeSvgIcon: SafeHtml;
+        widgetTypeid: string;
+        name: string;
+        description: string;
+        svgIcon: string;
+    }[]>;
+    onDragStart(event: DragEvent, widget: WidgetDisplayItem): void;
+    onDragEnd(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WidgetListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WidgetListComponent, "ngx-dashboard-widget-list", never, {}, {}, never, never, true, never>;
+}
+
+declare class DashboardService {
+    #private;
+    readonly widgetTypes: _angular_core.Signal<WidgetComponentClass<_dragonworks_ngx_dashboard.Widget>[]>;
+    registerWidgetType(widget: WidgetComponentClass): void;
+    getFactory(widgetTypeid: string): WidgetFactory;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DashboardService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DashboardService>;
+}
+
+/**
+ * Abstract provider for cell settings dialogs.
+ * Implement this to provide custom dialog solutions.
+ */
+declare abstract class CellSettingsDialogProvider {
+    /**
+     * Open a settings dialog for the given cell.
+     * Returns a promise that resolves to the new settings, or undefined if cancelled.
+     */
+    abstract openCellSettings(data: CellDisplayData): Promise<CellDisplayData | undefined>;
+}
+
+/**
+ * Default cell dialog provider that uses Material Design dialogs.
+ * Provides a modern, accessible dialog experience for cell settings.
+ */
+declare class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
+    private dialog;
+    openCellSettings(data: CellDisplayData): Promise<CellDisplayData | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DefaultCellSettingsDialogProvider, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DefaultCellSettingsDialogProvider>;
+}
+
+/**
+ * Injection token for the cell dialog provider.
+ * Use this to provide your custom dialog implementation.
+ *
+ * @example
+ * ```typescript
+ * providers: [
+ *   { provide: CELL_SETTINGS_DIALOG_PROVIDER, useClass: MyCellSettingsDialogProvider }
+ * ]
+ * ```
+ */
+declare const CELL_SETTINGS_DIALOG_PROVIDER: InjectionToken<CellSettingsDialogProvider>;
+
+export { CELL_SETTINGS_DIALOG_PROVIDER, CellIdUtils, CellSettingsDialogProvider, DEFAULT_RESERVED_SPACE, DashboardComponent, DashboardEditorComponent, DashboardService, DashboardViewerComponent, DefaultCellSettingsDialogProvider, WidgetIdUtils, WidgetListComponent, createDefaultDashboard, createEmptyDashboard, createFactoryFromComponent };
+export type { CellComponentPosition, CellData, CellDataDto, CellDisplayData, CellId, CellPosition, DashboardDataDto, DragData, ReservedSpace, Widget, WidgetComponentClass, WidgetFactory, WidgetId, WidgetMetadata };