@mosaicoo/form-angular 0.6.0 → 0.8.0

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

@@ -83,6 +83,76 @@ interface CatalogGroup {
 }
 declare const DEFAULT_CATALOG: CatalogGroup[];
 
+/**
+ * Reusable blocks: a named node subtree (an address group, a payment panel,
+ * a compliance section) that can be dropped into any form. Blocks are plain
+ * schema fragments — serializable, portable and free of runtime state.
+ *
+ * The designer keeps them locally by default; hosts that want blocks shared
+ * across users bind `[blocks]` and persist `(blocksChanged)` themselves.
+ */
+interface FormBlock {
+    id: string;
+    label: string;
+    /** Schema subtree; keys are regenerated on insert to stay unique. */
+    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;
+    duplicate: string;
+    delete: string;
+    saveBlock: 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.
  *
@@ -126,6 +196,42 @@ 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;
+        duplicate: string;
+        delete: string;
+        saveBlock: 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>;
@@ -155,8 +261,19 @@ 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). */
+    readonly blocks: _angular_core.InputSignal<FormBlock[] | null>;
+    readonly blocksChanged: _angular_core.OutputEmitterRef<FormBlock[]>;
+    private readonly localBlocks;
+    readonly effectiveBlocks: _angular_core.Signal<FormBlock[]>;
+    /** Palette = built-ins + host extras + saved blocks as a group. */
     readonly catalog: _angular_core.Signal<CatalogGroup[]>;
     readonly diagnostics: _angular_core.Signal<SchemaDiagnostic[]>;
     readonly exportedJson: _angular_core.Signal<string>;
@@ -181,13 +298,30 @@ declare class FormDesignerComponent {
     duplicateSelected(): void;
     moveSelected(delta: -1 | 1): void;
     applyPatch(event: InspectorPatch): void;
+    /** Saves the selected node (with its subtree) as a reusable block. */
+    saveAsBlock(): void;
+    removeBlock(id: string): void;
+    isBlockEntry(entry: CatalogEntry): boolean;
+    blockIdOf(entry: CatalogEntry): string;
+    /** What is being dragged: a palette entry or an existing node. */
+    private readonly dragging;
+    /** 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;
+    endDrag(): void;
+    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;
     openExport(): void;
     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; }; }, { "schemaChanged": "schemaChanged"; }, 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>;
 }
 
 /**
@@ -195,13 +329,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;
@@ -210,9 +355,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, 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 };

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

@@ -72,11 +72,21 @@ declare class FormNodeComponent {
     readonly childScope: _angular_core.Signal<string>;
     rowScope(index: number): string;
     visible(): boolean;
-    containerLayout(): 'columns' | 'tabs' | 'array' | 'block';
+    containerLayout(): 'columns' | 'tabs' | 'accordion' | 'array' | 'block';
+    /** Open accordion sections; the first one starts expanded. */
+    private readonly openSections;
+    isSectionOpen(index: number): boolean;
+    toggleSection(index: number): void;
     columns(): FieldNode[][];
     columnsTemplate(): string;
     value(): unknown;
     stringValue(): string;
+    /** Tracks focus so numeric formatting steps aside during typing. */
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    onFocus(): void;
+    onBlur(): void;
+    /** Numeric inputs stay `text` when formatted (a number input rejects `R$`). */
+    numericFormatted(): boolean;
     mapValue(): Record<string, unknown>;
     rows(): unknown[];
     required(): boolean;
@@ -113,6 +123,15 @@ declare class FormNodeComponent {
     private refTimer;
     /** Label of the chosen option (falls back to the raw value). */
     readonly refLabel: _angular_core.WritableSignal<string | null>;
+    /** Last query typed, replayed when `refreshOn` invalidates the results. */
+    private refQuery;
+    private refRefreshKey;
+    /**
+     * `refreshOn` for autocomplete: when the observed data changes, cached
+     * results are dropped so the next search runs against the new context
+     * (e.g. properties filtered by the selected client).
+     */
+    private watchReferenceRefresh;
     refDisplay(): string;
     refSearch(event: Event): void;
     private refResolve;
@@ -192,7 +211,11 @@ declare class FormRendererComponent {
     readonly errorSummary: _angular_core.WritableSignal<FieldError[]>;
     constructor();
     previousStep(): void;
-    nextStep(): void;
+    /**
+     * Advances only when the step is valid INCLUDING async rules, so a
+     * server-side check can still block the transition.
+     */
+    nextStep(): Promise<void>;
     onSubmit(event: Event): Promise<void>;
     /** Finds the wizard step that owns a (possibly row-indexed) data path. */
     private stepIndexForPath;