@yourself.create/ngx-form-designer 0.0.4 → 0.0.5

package/lib/form-core/models.d.ts

@@ -114,12 +114,9 @@ export interface FieldSchema {
     appearance?: 'outline' | 'fill' | 'standard';
     readonly?: boolean;
     disabled?: boolean;
-    prefixIcon?: string;
-    suffixIcon?: string;
     html5?: Html5ValidationProps;
     validation?: ValidationRule[];
     dependencies?: DependencyRule[];
-    conditionalVisibility?: ConditionalVisibility;
     rules?: FormRule[];
     dataConfig?: DataSourceConfig;
     events?: WidgetEventBinding[];
@@ -285,11 +282,6 @@ export interface DataDependencyBinding {
     fieldId: string;
     paramKey: string;
 }
-export interface ConditionalVisibility {
-    fieldName: string;
-    operator: 'equals' | 'notEquals' | 'contains' | 'isEmpty' | 'isNotEmpty' | 'greaterThan' | 'lessThan';
-    value?: unknown;
-}
 export interface OptionSchema {
     label: string;
     value: string | number;
@@ -365,7 +357,4 @@ export interface FormSchema {
     fields: FieldSchema[];
     layout: LayoutNode;
     ui?: FormUIConfig;
-    submitButtonText?: string;
-    resetButtonText?: string;
-    showResetButton?: boolean;
 }

package/lib/form-designer/designer-state.service.d.ts

@@ -30,6 +30,7 @@ export interface DesignerFieldMoveOptions {
     position?: 'before' | 'after';
     index?: number;
 }
+type RelativeInsertPosition = 'before' | 'after';
 interface DragDropEventLike {
     previousContainer: unknown;
     container: unknown;
@@ -61,7 +62,7 @@ export declare class DesignerStateService {
     readonly activeBreakpoint: import("@angular/core").WritableSignal<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
     readonly isPreviewMode: import("@angular/core").WritableSignal<boolean>;
     readonly isLeftPanelCollapsed: import("@angular/core").WritableSignal<boolean>;
-    readonly activeDevice: import("@angular/core").Signal<"desktop" | "mobile">;
+    readonly activeDevice: import("@angular/core").Signal<"mobile" | "desktop">;
     readonly activeThemeId: import("@angular/core").WritableSignal<string>;
     readonly isReadOnly: import("@angular/core").WritableSignal<boolean>;
     readonly clipboard: import("@angular/core").WritableSignal<{
@@ -69,6 +70,10 @@ export declare class DesignerStateService {
         fields: FieldSchema[];
         scopePath: string[];
     } | null>;
+    readonly pendingFieldInsert: import("@angular/core").WritableSignal<{
+        referenceFieldId: string;
+        position: RelativeInsertPosition;
+    } | null>;
     private readonly history;
     private readonly historyIndex;
     private readonly historyLength;
@@ -78,6 +83,16 @@ export declare class DesignerStateService {
     constructor();
     readonly layoutIndex: import("@angular/core").Signal<LayoutIndex>;
     readonly selectedNode: import("@angular/core").Signal<LayoutNode | null>;
+    readonly selectedEntry: import("@angular/core").Signal<LayoutIndexEntry | null>;
+    readonly selectedColumnId: import("@angular/core").Signal<string | null>;
+    readonly selectedRowId: import("@angular/core").Signal<string | null>;
+    readonly canInsertColumnBeforeSelection: import("@angular/core").Signal<boolean>;
+    readonly canInsertColumnAfterSelection: import("@angular/core").Signal<boolean>;
+    readonly canInsertRowInSelectedColumn: import("@angular/core").Signal<boolean>;
+    readonly canInsertRowBeforeSelection: import("@angular/core").Signal<boolean>;
+    readonly canInsertRowAfterSelection: import("@angular/core").Signal<boolean>;
+    readonly canArmFieldInsertBeforeSelection: import("@angular/core").Signal<boolean>;
+    readonly canArmFieldInsertAfterSelection: import("@angular/core").Signal<boolean>;
     readonly selectedField: import("@angular/core").Signal<FieldSchema | null>;
     updateSchema(schema: FormSchema): void;
     setFlavor(flavor: DesignerFlavor): void;
@@ -88,6 +103,8 @@ export declare class DesignerStateService {
     selectNode(id: string | null): void;
     toggleNodeSelection(id: string): void;
     isNodeSelected(nodeId: string): boolean;
+    isSelectionRowAncestor(nodeId: string): boolean;
+    isSelectionColumnAncestor(nodeId: string): boolean;
     composeScopedNodeId(scopePath: string[], nodeId: string): string;
     getSelectedScopeFields(): FieldSchema[];
     isSelectionInScope(scopePath: string[]): boolean;
@@ -117,6 +134,13 @@ export declare class DesignerStateService {
     private insertNodeIntoLayout;
     handleDrop(event: DragDropEventLike, targetColId: string): void;
     pushField(widgetDef: WidgetDefinition): void;
+    insertColumnBeforeSelection(): void;
+    insertColumnAfterSelection(): void;
+    insertRowBeforeSelection(): void;
+    insertRowAfterSelection(): void;
+    insertRowInSelectedColumn(): void;
+    armFieldInsertBeforeSelection(): void;
+    armFieldInsertAfterSelection(): void;
     insertField(options: DesignerFieldInsertOptions): DesignerFieldInsertResult | null;
     deleteFields(fieldIds: string[]): void;
     moveField(fieldId: string, options: DesignerFieldMoveOptions): boolean;
@@ -170,10 +194,19 @@ export declare class DesignerStateService {
      */
     private updateNodeInTree;
     private resolveEntry;
+    private findSelectionColumnEntry;
+    private findSelectionRowEntry;
+    private findAncestorEntryByType;
     private resolveSchemaAtScope;
     private findFieldByIdInScope;
     private resolveInsertionScopePath;
     private resolveTargetColumnForFieldInsert;
+    private resolveColumnInsertTarget;
+    private insertColumnRelativeToSelection;
+    private resolveRelativeRowInsertTarget;
+    private insertRowRelativeToSelection;
+    private armFieldInsertForSelection;
+    private getSelectedFieldReference;
     private resolveFieldWidgetDefinition;
     private normalizeFieldTypeAlias;
     private normalizeLookupValue;
@@ -188,6 +221,7 @@ export declare class DesignerStateService {
     private clampIndex;
     private isLayoutNode;
     private detachNode;
+    private pruneEmptyRows;
     private findWidgetByRefId;
     private findParentCol;
     private removeWidgetByRefId;

package/lib/form-designer/dynamic-properties/dynamic-properties.component.d.ts

@@ -11,7 +11,7 @@ export declare class DynamicPropertiesComponent implements OnChanges {
     onPropertyChange?: () => void;
     private readonly designerCtx;
     protected readonly validatorTypeOptions: NativeSelectOption<string>[];
-    protected readonly conditionalTypeOptions: NativeSelectOption<string>[];
+    protected readonly builtinValidatorOptions: NativeSelectOption<string>[];
     get properties(): PropertySection[];
     getFieldReferenceCandidates(field: PropertyField): FieldSchema[];
     fieldReferenceOptions(field: PropertyField): NativeSelectOption<string>[];
@@ -91,10 +91,8 @@ export declare class DynamicPropertiesComponent implements OnChanges {
     addValidator(path: string): void;
     removeValidator(path: string, index: number): void;
     updateValidator(path: string, index: number, field: string, value: any): void;
-    getValidatorLabel(name: string): string;
-    enableConditional(path: string): void;
-    disableConditional(path: string): void;
-    updateConditional(path: string, field: string, value: any): void;
+    private createDefaultValidationRule;
+    private defaultValidationMessage;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicPropertiesComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DynamicPropertiesComponent, "app-dynamic-properties", never, { "onPropertyChange": { "alias": "onPropertyChange"; "required": false; }; "config": { "alias": "config"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "includeSections": { "alias": "includeSections"; "required": false; }; "excludeSections": { "alias": "excludeSections"; "required": false; }; "allFields": { "alias": "allFields"; "required": false; }; }, { "configChange": "configChange"; }, never, never, true, never>;
 }

package/lib/form-designer/form-preview.component.d.ts

@@ -21,7 +21,7 @@ export declare class FormPreviewComponent {
     pageSelect: EventEmitter<string>;
     breakpoints: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
     breakpoint: import("@angular/core").WritableSignal<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
-    activeDevice: import("@angular/core").Signal<"desktop" | "mobile">;
+    activeDevice: import("@angular/core").Signal<"mobile" | "desktop">;
     formData: any;
     combinedFormData: any;
     constructor(state: DesignerStateService);

package/lib/form-designer/inspector-sections/inspector-transform-section.component.d.ts

@@ -0,0 +1,12 @@
+import { StyleTokenSet } from '../../form-core/models';
+import * as i0 from "@angular/core";
+type TransformKey = 'transformX' | 'transformY' | 'transformZ' | 'rotate' | 'scale';
+export declare class InspectorTransformSectionComponent {
+    readonly style: import("@angular/core").InputSignal<Partial<StyleTokenSet>>;
+    readonly styleChange: import("@angular/core").OutputEmitterRef<Partial<StyleTokenSet>>;
+    protected numberValue(key: TransformKey, fallback: number): number;
+    protected updateTransform(key: TransformKey, value: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InspectorTransformSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InspectorTransformSectionComponent, "inspector-transform-section", never, { "style": { "alias": "style"; "required": false; "isSignal": true; }; }, { "styleChange": "styleChange"; }, never, never, true, never>;
+}
+export {};

package/lib/form-designer/layout-canvas.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
 export declare class LayoutCanvasComponent implements AfterViewInit {
     state: DesignerStateService;
     private readonly destroyRef;
-    readonly previewMode: import("@angular/core").InputSignal<"overlay" | "route">;
+    readonly previewMode: import("@angular/core").InputSignal<"route" | "overlay">;
     readonly previewRequested: import("@angular/core").OutputEmitterRef<void>;
     fileInput: ElementRef<HTMLInputElement>;
     root: ElementRef<HTMLDivElement>;
@@ -13,13 +13,14 @@ export declare class LayoutCanvasComponent implements AfterViewInit {
     breakpoints: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
     constructor(state: DesignerStateService);
     get schema(): import("@angular/core").WritableSignal<import("@uch-web/ngx-form-designer").FormSchema>;
-    get device(): "desktop" | "mobile";
+    get device(): "mobile" | "desktop";
     get breakpoint(): "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     readonly zoom: import("@angular/core").WritableSignal<number>;
     readonly showLayoutGuides: import("@angular/core").WritableSignal<boolean>;
     readonly showLiveSchemaEditor: import("@angular/core").WritableSignal<boolean>;
     readonly liveSchemaEditorText: import("@angular/core").WritableSignal<string>;
     readonly liveSchemaEditorError: import("@angular/core").WritableSignal<string>;
+    readonly openContextSubmenu: import("@angular/core").WritableSignal<"insert" | null>;
     readonly liveSchemaEditorOptions: Record<string, unknown>;
     private readonly pageBaseSize;
     private readonly minZoom;
@@ -35,6 +36,15 @@ export declare class LayoutCanvasComponent implements AfterViewInit {
     closeContextMenu(): void;
     groupSelected(): void;
     ungroupSelected(): void;
+    hasStructuralInsertActions(): boolean;
+    toggleInsertSubmenu(): void;
+    insertColumnBeforeSelection(): void;
+    insertColumnAfterSelection(): void;
+    insertRowInSelectedColumn(): void;
+    insertRowBeforeSelection(): void;
+    insertRowAfterSelection(): void;
+    armFieldInsertBeforeSelection(): void;
+    armFieldInsertAfterSelection(): void;
     onCanvasContextMenu(event: MouseEvent): void;
     cut(): void;
     copy(): void;

package/lib/form-designer/properties-panel.component.d.ts

@@ -3,9 +3,12 @@ import { DesignerStateService } from './designer-state.service';
 import { WidgetDefinition, DataBindingContract } from '../widgets/widget-definition';
 import { WidgetNode, FieldSchema, FormRule, StyleTokenSet } from '../form-core/models';
 import * as i0 from "@angular/core";
+type LayoutInspectorTab = 'Style' | 'Settings';
 export declare class PropertiesPanelComponent {
     state: DesignerStateService;
     private injector;
+    protected readonly layoutInspectorTabs: readonly LayoutInspectorTab[];
+    protected readonly activeLayoutInspectorTab: import("@angular/core").WritableSignal<LayoutInspectorTab>;
     protected readonly spacingOptions: {
         label: string;
         value: string;
@@ -79,3 +82,4 @@ export declare class PropertiesPanelComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<PropertiesPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PropertiesPanelComponent, "app-properties-panel", never, {}, {}, never, never, true, never>;
 }
+export {};

package/lib/form-renderer/json-form-renderer.component.d.ts

@@ -17,6 +17,24 @@ export type CombinedFormValues = Record<string, FormFieldValue | FormValueMap>;
 export interface FormValidationResult {
     errors: Record<string, string[]>;
     isValid: boolean;
+    fields?: Record<string, FormFieldValidationState>;
+}
+export interface FormFieldValidationState {
+    fieldId: string;
+    fieldName: string;
+    label?: string;
+    visible: boolean;
+    required: boolean;
+    valid: boolean;
+    errors: string[];
+    validators: FormFieldValidatorState[];
+}
+export interface FormFieldValidatorState {
+    name: string;
+    source: 'required' | 'html5' | 'custom';
+    active: boolean;
+    value?: unknown;
+    message?: string;
 }
 export interface FormSubmitResult {
     values: FormValueMap;
@@ -79,7 +97,12 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private inferDatasourceValueType;
     onNodeSelect(nodeId: string): void;
     onSubmit(event: Event): Promise<void>;
-    private getValidationResult;
+    getValidationResult(revalidate?: boolean): FormValidationResult;
+    private buildFieldValidationState;
+    private describeFieldValidators;
+    private hasRequiredValidation;
+    private isValidationRuleActive;
+    private isValidationEmpty;
     private uploadPendingFiles;
     private uploadPendingFilesInSchema;
     private getPendingFiles;

package/lib/form-renderer/layout-node.component.d.ts

@@ -50,6 +50,8 @@ export declare class LayoutNodeComponent implements OnInit, OnChanges, OnDestroy
     private static readonly MAX_COLUMN_SPAN;
     constructor(_widgetDefs: WidgetDefinition[][], designerState: DesignerStateService, cdr: ChangeDetectorRef, el: ElementRef);
     get isSelected(): boolean;
+    get isRowSelectionAncestor(): boolean;
+    get isColumnSelectionAncestor(): boolean;
     get isResizing(): boolean;
     protected isNodeSelected(nodeId: string): boolean;
     onWidgetClick(e: Event): void;
@@ -65,6 +67,11 @@ export declare class LayoutNodeComponent implements OnInit, OnChanges, OnDestroy
     duplicateNode(): void;
     insertRowInColumn(): void;
     wrapWidgetInRow(): void;
+    decreaseSelectedColumnSpan(): void;
+    increaseSelectedColumnSpan(): void;
+    canDecreaseSelectedColumnSpan(): boolean;
+    canIncreaseSelectedColumnSpan(): boolean;
+    getSelectedColumnSpanLabel(): string;
     getNodeTypeLabel(): string;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -94,6 +101,9 @@ export declare class LayoutNodeComponent implements OnInit, OnChanges, OnDestroy
     asCol(node: LayoutNode): ColumnNode;
     private applyVerticalResize;
     private applyColumnResize;
+    private adjustSelectedColumnSpan;
+    private getSelectedColumnSpan;
+    private getSelectedColumnEntry;
     getColClasses(node: LayoutNode): string;
     getColContainerClasses(node: LayoutNode): string;
     private getEffectiveSpan;

package/lib/website/website-preview-shell.component.d.ts

@@ -6,7 +6,7 @@ export declare class WebsitePreviewShellComponent {
     readonly pages: import("@angular/core").Signal<import("@uch-web/ngx-form-designer").WebsitePage[]>;
     readonly breakpoints: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
     readonly breakpoint: import("@angular/core").WritableSignal<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
-    readonly activeDevice: import("@angular/core").Signal<"desktop" | "mobile">;
+    readonly activeDevice: import("@angular/core").Signal<"mobile" | "desktop">;
     private readonly url;
     readonly activePage: import("@angular/core").Signal<import("@uch-web/ngx-form-designer").WebsitePage | null>;
     setBreakpoint(bp: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'): void;

package/lib/widgets/widget-definition.d.ts

@@ -8,7 +8,7 @@ export interface WidgetConfig {
     required?: boolean;
     [key: string]: any;
 }
-export type PropertyFieldType = 'text' | 'textarea' | 'number' | 'select' | 'checkbox' | 'slide-toggle' | 'color' | 'color-swatch' | 'icon-picker' | 'padding' | 'margin' | 'shadow' | 'border' | 'options-editor' | 'validators-editor' | 'conditional-editor' | 'custom' | 'field-reference' | 'dimension' | 'edge-box' | 'box-model' | 'range-number' | 'select-icon';
+export type PropertyFieldType = 'text' | 'textarea' | 'number' | 'select' | 'checkbox' | 'slide-toggle' | 'color' | 'color-swatch' | 'padding' | 'margin' | 'shadow' | 'border' | 'options-editor' | 'validators-editor' | 'custom' | 'field-reference' | 'dimension' | 'edge-box' | 'box-model' | 'range-number' | 'select-icon';
 export interface PropertyField {
     key: string;
     type: PropertyFieldType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourself.create/ngx-form-designer",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",