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

package/lib/data/data-provider.d.ts

@@ -52,15 +52,24 @@ export declare class DefaultDataProvider extends DataProvider {
     resolveValue(field: FieldSchema, value: unknown): Promise<string>;
     private getRawRows;
     private getGlobalRows;
+    private getOptionRowContexts;
+    private resolveCollectionRowContexts;
     private resolveCollectionRows;
+    private extractRowContexts;
     private extractRows;
     private selectScalarRow;
+    private selectOptionContext;
     private applyRowFilters;
+    private applyOptionRowFilters;
+    private matchesRowFilters;
     private resolveFilters;
     private resolveFilterValue;
     private toOptionValue;
     private toRowRecord;
     private mapRowToOption;
+    private mapContextToOption;
+    private resolveOptionLabelPrefix;
+    private formatOptionLabel;
     private getRuntimeOptions;
     private shouldSuppressRemoteAccess;
     private shouldUseLocalResolution;

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[];
@@ -142,8 +139,9 @@ export interface DataSourceConfig {
     contextKey?: string;
     datasourceId?: string;
     rowsPath?: string;
-    labelPath?: string;
-    valuePath?: string;
+    formatNumericOptionLabels?: boolean;
+    optionLabelPrefixPath?: string;
+    optionLabelPrefixFieldId?: string;
     rowSelectionMode?: 'first' | 'selected';
     selectionFieldId?: string;
     selectionMatchPath?: string;
@@ -285,11 +283,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 +358,4 @@ export interface FormSchema {
     fields: FieldSchema[];
     layout: LayoutNode;
     ui?: FormUIConfig;
-    submitButtonText?: string;
-    resetButtonText?: string;
-    showResetButton?: boolean;
 }

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

@@ -32,6 +32,8 @@ export declare class DataPanelComponent implements OnChanges {
     selectionFieldId?: string;
     selectionMatchPath?: string;
     childRowsPath?: string;
+    formatNumericOptionLabels: boolean;
+    optionLabelPrefixPath?: string;
     rootPathOptions: string[];
     rowPathOptions: string[];
     staticValue?: any;
@@ -97,6 +99,7 @@ export declare class DataPanelComponent implements OnChanges {
     showRowsPathControls(): boolean;
     showScalarMappingControls(): boolean;
     showOptionMappingControls(): boolean;
+    showOptionLabelFormattingControls(): boolean;
     showStaticOptionsEditor(): boolean;
     showStaticScalarEditor(): boolean;
     staticScalarLabel(): string;
@@ -107,8 +110,7 @@ export declare class DataPanelComponent implements OnChanges {
     availableRowPaths(): string[];
     availableParentRowPaths(): string[];
     availableChildCollectionPaths(): string[];
-    private shouldPersistStructuredLabelPath;
-    private shouldPersistStructuredValuePath;
+    private shouldPersistOptionLabelFormatting;
     private usesOptionMapping;
     private scalarTargetPath;
     private readScalarTargetValue;

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;
@@ -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/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>;
@@ -20,6 +20,7 @@ export declare class LayoutCanvasComponent implements AfterViewInit {
     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

@@ -1,5 +1,5 @@
 import { OnInit, OnChanges, SimpleChanges, EventEmitter, OnDestroy } from '@angular/core';
-import { DesignerEventApiDefinition, FieldDisplayLabel, FormSchema, UploadedFileRef, WidgetEventApiExecutor } from '../form-core/models';
+import { DesignerEventApiDefinition, FieldSchema, FieldDisplayLabel, FormSchema, UploadedFileRef, WidgetEventApiExecutor } from '../form-core/models';
 import { FormEngine } from '../form-core/form-engine';
 import { DesignerStateService } from '../form-designer/designer-state.service';
 import { type FieldDataAccessMap, type RuntimeFieldDataAccessApi } from '../data/runtime-field-data-access-registry.service';
@@ -7,6 +7,7 @@ import * as i0 from "@angular/core";
 export interface FormFieldValue {
     fieldName: string;
     fieldValue: unknown;
+    fieldType?: FieldSchema['type'];
     fieldLabel?: FieldDisplayLabel;
     fileType?: string | string[];
     data?: string | string[];
@@ -17,6 +18,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 +98,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;
@@ -93,6 +117,7 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private readFileBytes;
     private encodeBytesToBase64;
     private toSingleOrList;
+    private normalizeFileFieldSubmitValue;
     private getUploadedFileRefs;
     private buildFieldLabelMetadata;
     private mergeFileMetadata;

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/widgets/field-widgets/select/select-widget.component.d.ts

@@ -16,12 +16,14 @@ export declare class SelectWidgetComponent implements OnInit, OnDestroy {
     loading: boolean;
     loadError: string | null;
     options: OptionSchema[];
+    private rawOptions;
     protected readonly searchTerms$: Subject<string>;
     private requestId;
     private currentSearchTerm;
     private runtimeManagedField;
     private runtimeOptionsLoaded;
     private readonly dependencyValueSnapshot;
+    private readonly displayDependencyValueSnapshot;
     private cachedStyleSource;
     private cachedWrapperStyles;
     private cachedControlCssVars;
@@ -65,12 +67,14 @@ export declare class SelectWidgetComponent implements OnInit, OnDestroy {
     onPillMouseDown(event: MouseEvent): void;
     onPillClick(): void;
     private getDependencyFieldIds;
+    private getDisplayDependencyFieldIds;
     private toCssVarMap;
     private loadOptions;
     private syncEnabledState;
     private ensureRuntimeOptionsLoaded;
-    private seedDependencySnapshotFromValues;
-    private haveDependencyValuesChanged;
+    private seedValueSnapshotFromValues;
+    private resolveFieldNames;
+    private haveFieldValuesChanged;
     private hasSelectedValue;
     private handleConfigChange;
     private getConfigSignature;
@@ -78,6 +82,11 @@ export declare class SelectWidgetComponent implements OnInit, OnDestroy {
     private stringifyValue;
     private getAccessibleLabel;
     private syncTemplateBindingCaches;
+    private setOptionsFromRaw;
+    private applyDisplayFormatting;
+    private formatOptionLabel;
+    private resolveOptionLabelPrefix;
+    private formatNumericLabel;
     private toSafeNonNegativeInt;
     private areApiCallsSuppressed;
     private withSelectedValueFallbackOptions;
@@ -87,6 +96,7 @@ export declare class SelectWidgetComponent implements OnInit, OnDestroy {
     private hasMeaningfulValue;
     private syncStoredFieldLabel;
     private getStoredFieldLabel;
+    private shouldUseStoredFallbackLabel;
     private setStoredFieldLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectWidgetComponent, "app-select-widget", never, { "config": { "alias": "config"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;

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.6",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",