@mosaicoo/form-angular 0.7.0 → 0.9.0

package/types/mosaicoo-form-angular-designer.d.ts

@@ -98,6 +98,64 @@ interface FormBlock {
     node: FieldNode;
 }
 
+/**
+ * Every visible string of the designer, so hosts can localize the authoring
+ * experience the same way they already localize the runtime. Override
+ * partially — unset entries fall back to English.
+ *
+ * The palette itself is DATA: translate `DEFAULT_CATALOG` (or supply your own
+ * groups) and pass it through the `[catalog]` input.
+ */
+interface DesignerLabels {
+    undo: string;
+    redo: string;
+    moveUp: string;
+    moveDown: string;
+    nest: string;
+    unnest: string;
+    duplicate: string;
+    delete: string;
+    saveBlock: string;
+    viewport: string;
+    workspace: string;
+    panels: string;
+    presets: string;
+    resetLayout: string;
+    moveLeft: string;
+    moveRight: string;
+    hidePanel: string;
+    import: string;
+    export: string;
+    preview: string;
+    design: string;
+    cancel: string;
+    close: string;
+    importTitle: string;
+    importPlaceholder: string;
+    importError: string;
+    exportTitle: string;
+    canvasEmpty: string;
+    selectField: string;
+    testData: string;
+    panelFields: string;
+    panelStructure: string;
+    panelProperties: string;
+    noFields: string;
+}
+declare const DESIGNER_LABELS_EN: DesignerLabels;
+
+/**
+ * Drop-target identity shared by the canvas and the node components.
+ * A target is a position in a parent's children list, optionally bound to a
+ * column of a `columns` container.
+ */
+interface DropTarget {
+    path: NodePath;
+    /** Column index when the parent lays children out in columns. */
+    column?: number;
+}
+declare function dropId(target: DropTarget): string;
+
 /**
  * Designer workspace layout.
  *
@@ -141,6 +199,45 @@ declare class FormDesignerComponent {
     readonly source: _angular_core.InputSignal<unknown>;
     /** Extra palette groups contributed by the host. */
     readonly extraCatalog: _angular_core.InputSignal<CatalogGroup[]>;
+    /** Replaces the built-in palette (e.g. a translated DEFAULT_CATALOG). */
+    readonly catalogOverride: _angular_core.InputSignal<CatalogGroup[] | null>;
+    /** Designer texts; partial overrides fall back to English. */
+    readonly labels: _angular_core.InputSignalWithTransform<{
+        undo: string;
+        redo: string;
+        moveUp: string;
+        moveDown: string;
+        nest: string;
+        unnest: string;
+        duplicate: string;
+        delete: string;
+        saveBlock: string;
+        viewport: string;
+        workspace: string;
+        panels: string;
+        presets: string;
+        resetLayout: string;
+        moveLeft: string;
+        moveRight: string;
+        hidePanel: string;
+        import: string;
+        export: string;
+        preview: string;
+        design: string;
+        cancel: string;
+        close: string;
+        importTitle: string;
+        importPlaceholder: string;
+        importError: string;
+        exportTitle: string;
+        canvasEmpty: string;
+        selectField: string;
+        testData: string;
+        panelFields: string;
+        panelStructure: string;
+        panelProperties: string;
+        noFields: string;
+    }, Partial<DesignerLabels>>;
     /** Emitted after every committed edit (undo/redo included). */
     readonly schemaChanged: _angular_core.OutputEmitterRef<FormSchema>;
     readonly draft: _angular_core.WritableSignal<FormSchema>;
@@ -149,6 +246,15 @@ declare class FormDesignerComponent {
     readonly selected: _angular_core.WritableSignal<NodePath | null>;
     readonly preview: _angular_core.WritableSignal<boolean>;
     readonly previewData: _angular_core.WritableSignal<Record<string, unknown>>;
+    /** Preview viewport: the frame drives the form's container queries. */
+    readonly viewport: _angular_core.WritableSignal<"desktop" | "tablet" | "mobile">;
+    readonly viewports: Array<{
+        id: 'desktop' | 'tablet' | 'mobile';
+        label: string;
+        icon: string;
+        width: number | null;
+    }>;
+    viewportWidth(): number | null;
     readonly dialog: _angular_core.WritableSignal<"import" | "export" | null>;
     readonly importError: _angular_core.WritableSignal<string>;
     readonly showDiagnostics: _angular_core.WritableSignal<boolean>;
@@ -170,6 +276,11 @@ declare class FormDesignerComponent {
     dock(panel: PanelId, side: DockSide): void;
     applyPreset(id: string): void;
     resetLayout(): void;
+    /** Live drag state of a dock splitter. */
+    private resizing;
+    startResize(side: 'left' | 'right', event: PointerEvent): void;
+    onResizeMove(event: PointerEvent): void;
+    endResize(): void;
     isGroupOpen(label: string): boolean;
     toggleGroup(label: string): void;
     /** Saved blocks (host-controlled when `[blocks]` is bound). */
@@ -202,6 +313,16 @@ declare class FormDesignerComponent {
     duplicateSelected(): void;
     moveSelected(delta: -1 | 1): void;
     applyPatch(event: InspectorPatch): void;
+    /** Whether the selection can be nested into the container above it. */
+    canNest(): boolean;
+    canUnnest(): boolean;
+    /**
+     * Nests the selection into the container right above it (Alt+→) — the
+     * keyboard equivalent of dragging a field into a panel.
+     */
+    nestSelected(): void;
+    /** Moves the selection out of its container, right after it (Alt+←). */
+    unnestSelected(): void;
     /** Saves the selected node (with its subtree) as a reusable block. */
     saveAsBlock(): void;
     removeBlock(id: string): void;
@@ -209,15 +330,15 @@ declare class FormDesignerComponent {
     blockIdOf(entry: CatalogEntry): string;
     /** What is being dragged: a palette entry or an existing node. */
     private readonly dragging;
-    /** Drop target highlighted while hovering. */
+    /** Drop zone highlighted while hovering (see `dropId`). */
     readonly dropTarget: _angular_core.WritableSignal<string | null>;
     startEntryDrag(entry: CatalogEntry, event: DragEvent): void;
-    startNodeDrag(path: NodePath, event: DragEvent): void;
+    startNodeDrag(path: NodePath, event?: DragEvent): void;
     endDrag(): void;
-    allowDrop(target: NodePath, event: DragEvent): void;
-    /** Drops onto `target`, the position the node should occupy. */
-    drop(target: NodePath, event: DragEvent): void;
-    isDropTarget(path: NodePath): boolean;
+    allowDrop(target: DropTarget, event?: DragEvent): void;
+    /** Drops onto `target` — the position (and column) the node should occupy. */
+    drop(target: DropTarget, event?: DragEvent): void;
+    isDropTarget(target: DropTarget): boolean;
     isDragging(): boolean;
     select(path: NodePath | null): void;
     isSelectedPath(path: NodePath): boolean;
@@ -225,7 +346,7 @@ declare class FormDesignerComponent {
     doImport(raw: string): void;
     onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormDesignerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormDesignerComponent, "mform-designer", never, { "schema": { "alias": "schema"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "extraCatalog": { "alias": "extraCatalog"; "required": false; "isSignal": true; }; "blocks": { "alias": "blocks"; "required": false; "isSignal": true; }; }, { "schemaChanged": "schemaChanged"; "blocksChanged": "blocksChanged"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormDesignerComponent, "mform-designer", never, { "schema": { "alias": "schema"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "extraCatalog": { "alias": "extraCatalog"; "required": false; "isSignal": true; }; "catalogOverride": { "alias": "catalog"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "blocks": { "alias": "blocks"; "required": false; "isSignal": true; }; }, { "schemaChanged": "schemaChanged"; "blocksChanged": "blocksChanged"; }, never, never, true, never>;
 }
 
 /**
@@ -233,13 +354,24 @@ declare class FormDesignerComponent {
  * leaf rendering to the RUNTIME `<mform-node>` so what you see is what the
  * renderer will produce. Canvas controls are non-interactive — testing
  * happens in Preview mode.
+ *
+ * Drop zones sit between children (and inside each column), so fields can be
+ * dragged INTO containers, not just reordered at the root.
  */
 declare class DesignerNodeComponent {
     readonly node: _angular_core.InputSignal<FieldNode>;
     readonly path: _angular_core.InputSignal<NodePath>;
     readonly engine: _angular_core.InputSignal<FormEngine>;
     readonly selected: _angular_core.InputSignal<NodePath | null>;
+    /** True while something is being dragged (reveals the drop zones). */
+    readonly dragging: _angular_core.InputSignal<boolean>;
+    /** Id of the drop zone currently hovered. */
+    readonly activeDrop: _angular_core.InputSignal<string | null>;
     readonly selectNode: _angular_core.OutputEmitterRef<NodePath>;
+    readonly nodeDragStart: _angular_core.OutputEmitterRef<NodePath>;
+    readonly dragOverTarget: _angular_core.OutputEmitterRef<DropTarget>;
+    readonly dropOnTarget: _angular_core.OutputEmitterRef<DropTarget>;
+    readonly dragFinished: _angular_core.OutputEmitterRef<void>;
     readonly activeTab: _angular_core.WritableSignal<number>;
     container(): ContainerField;
     chip(): string;
@@ -248,9 +380,13 @@ declare class DesignerNodeComponent {
     columnsTemplate(): string;
     onSelect(event: Event): void;
     setTab(index: number, event: Event): void;
+    isOver(path: NodePath, column?: number): boolean;
+    onDragStart(path: NodePath, event: Event): void;
+    onDragOver(path: NodePath, column: number | undefined, event: DragEvent): void;
+    onDrop(path: NodePath, column: number | undefined, event: DragEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DesignerNodeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DesignerNodeComponent, "mform-designer-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "path": { "alias": "path"; "required": true; "isSignal": true; }; "engine": { "alias": "engine"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selectNode": "selectNode"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DesignerNodeComponent, "mform-designer-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "path": { "alias": "path"; "required": true; "isSignal": true; }; "engine": { "alias": "engine"; "required": true; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dragging": { "alias": "dragging"; "required": false; "isSignal": true; }; "activeDrop": { "alias": "activeDrop"; "required": false; "isSignal": true; }; }, { "selectNode": "selectNode"; "nodeDragStart": "nodeDragStart"; "dragOverTarget": "dragOverTarget"; "dropOnTarget": "dropOnTarget"; "dragFinished": "dragFinished"; }, never, never, true, never>;
 }
 
-export { DEFAULT_CATALOG, DEFAULT_LAYOUT, DesignerNodeComponent, FormDesignerComponent, InspectorComponent, PANEL_LABELS, WORKSPACE_PRESETS };
-export type { CatalogEntry, CatalogGroup, DockSide, FormBlock, InspectorPatch, PanelId, WorkspaceLayout, WorkspacePreset };
+export { DEFAULT_CATALOG, DEFAULT_LAYOUT, DESIGNER_LABELS_EN, DesignerNodeComponent, FormDesignerComponent, InspectorComponent, PANEL_LABELS, WORKSPACE_PRESETS, dropId };
+export type { CatalogEntry, CatalogGroup, DesignerLabels, DockSide, DropTarget, FormBlock, InspectorPatch, PanelId, WorkspaceLayout, WorkspacePreset };