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

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>;
@@ -16,9 +16,11 @@ export declare class LayoutCanvasComponent implements AfterViewInit {
     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;
@@ -34,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;
@@ -41,6 +52,7 @@ export declare class LayoutCanvasComponent implements AfterViewInit {
     deleteSelected(): void;
     setBreakpoint(bp: any): void;
     preview(): void;
+    toggleLayoutGuides(): void;
     toggleLiveSchemaEditor(): void;
     closeLiveSchemaEditor(): void;
     onLiveSchemaEditorTextChange(nextText: string): 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-designer/template-library.d.ts

@@ -1,9 +1,11 @@
 import { FormSchema } from '../form-core/models';
+import type { FormJourneyProject } from '../form-core/form-journey.models';
 export interface DesignerTemplateDefinition {
     id: string;
     name: string;
     description: string;
     tags: readonly string[];
     schema: FormSchema;
+    journey?: FormJourneyProject;
 }
 export declare const DEFAULT_TEMPLATE_LIBRARY: DesignerTemplateDefinition[];

package/lib/form-renderer/form-journey-viewer.component.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter, SimpleChanges } from '@angular/core';
+import { JsonFormRendererComponent, FormValidationResult, FormValueMap, FormSubmitResult } from './json-form-renderer.component';
+import type { DesignerEventApiDefinition, FieldDisplayLabel, UploadedFileRef, WidgetEventApiExecutor } from '../form-core/models';
+import type { FormJourneyProject } from '../form-core/form-journey.models';
+import { type FieldDataAccessMap, type RuntimeFieldDataAccessApi } from '../data/runtime-field-data-access-registry.service';
+import * as i0 from "@angular/core";
+export type JourneyFormDataByPage = Record<string, FormValueMap>;
+export declare class FormJourneyViewerComponent {
+    journey: FormJourneyProject;
+    viewOnly: boolean;
+    eventApis: DesignerEventApiDefinition[];
+    eventApiExecutor?: WidgetEventApiExecutor;
+    initialValues?: Record<string, unknown>;
+    initialFieldLabels?: Record<string, FieldDisplayLabel>;
+    fieldDataAccessMap?: FieldDataAccessMap;
+    fieldDataAccessApi?: RuntimeFieldDataAccessApi;
+    formContentId?: string;
+    formContentVersion?: string;
+    formDataChange: EventEmitter<FormValueMap>;
+    formDataByPageChange: EventEmitter<JourneyFormDataByPage>;
+    formValidationChange: EventEmitter<FormValidationResult>;
+    uploadedFilesChange: EventEmitter<Record<string, UploadedFileRef[]>>;
+    submit: EventEmitter<FormSubmitResult>;
+    activePageIdChange: EventEmitter<string>;
+    renderer?: JsonFormRendererComponent;
+    readonly activePageId: import("@angular/core").WritableSignal<string>;
+    readonly values: import("@angular/core").WritableSignal<Record<string, unknown>>;
+    readonly fieldLabels: import("@angular/core").WritableSignal<Record<string, FieldDisplayLabel>>;
+    readonly activePage: import("@angular/core").Signal<import("@uch-web/ngx-form-designer").FormJourneyPage | null>;
+    readonly activePageIndex: import("@angular/core").Signal<number>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    readonly navigateToPage: (pageId: string) => Promise<{
+        ok: boolean;
+        reason?: string;
+    }>;
+    onValueChange(values: FormValueMap): void;
+    onValidationChange(result: FormValidationResult): void;
+    onUploadedFilesChange(result: Record<string, UploadedFileRef[]>): void;
+    onSubmit(result: FormSubmitResult): void;
+    private normalizeInitialValues;
+    private normalizeInitialFieldLabels;
+    private toValueScope;
+    private toFieldLabelScope;
+    private mergeValueScope;
+    private mergeFieldLabelScope;
+    private toJourneyValueMapByPage;
+    private flattenJourneyValueMapByPage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormJourneyViewerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormJourneyViewerComponent, "app-form-journey-viewer", never, { "journey": { "alias": "journey"; "required": true; }; "viewOnly": { "alias": "viewOnly"; "required": false; }; "eventApis": { "alias": "eventApis"; "required": false; }; "eventApiExecutor": { "alias": "eventApiExecutor"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "initialFieldLabels": { "alias": "initialFieldLabels"; "required": false; }; "fieldDataAccessMap": { "alias": "fieldDataAccessMap"; "required": false; }; "fieldDataAccessApi": { "alias": "fieldDataAccessApi"; "required": false; }; "formContentId": { "alias": "formContentId"; "required": false; }; "formContentVersion": { "alias": "formContentVersion"; "required": false; }; }, { "formDataChange": "formDataChange"; "formDataByPageChange": "formDataByPageChange"; "formValidationChange": "formValidationChange"; "uploadedFilesChange": "uploadedFilesChange"; "submit": "submit"; "activePageIdChange": "activePageIdChange"; }, never, never, true, never>;
+}

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

@@ -1,7 +1,9 @@
 import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { DesignerEventApiDefinition, FormSchema, UploadedFileRef, WidgetEventApiExecutor } from '../../form-core/models';
+import { DesignerEventApiDefinition, FieldDisplayLabel, FormSchema, UploadedFileRef, WidgetEventApiExecutor } from '../../form-core/models';
 import { JsonFormRendererComponent, FormSubmitResult, FormValidationResult, FormValueMap, GroupedFormValues, CombinedFormValues } from '../json-form-renderer.component';
+import { FormJourneyViewerComponent, type JourneyFormDataByPage } from '../form-journey-viewer.component';
 import { type FieldDataAccessMap, type RuntimeFieldDataAccessApi } from '../../data/runtime-field-data-access-registry.service';
+import type { FormJourneyProject } from '../../form-core/form-journey.models';
 import * as i0 from "@angular/core";
 export interface FormViewerOptions {
     showSubmitButton?: boolean;
@@ -10,7 +12,8 @@ export interface FormViewerOptions {
 }
 export type FormViewerDataInput = Record<string, unknown> | FormValueMap | GroupedFormValues | CombinedFormValues | FormSubmitResult;
 export declare class FormViewerComponent implements OnInit, OnDestroy {
-    schema: FormSchema;
+    schema?: FormSchema;
+    journey?: FormJourneyProject | null;
     set data(value: FormViewerDataInput);
     get data(): FormViewerDataInput;
     set dataUsesFieldNameKeys(value: boolean);
@@ -24,10 +27,13 @@ export declare class FormViewerComponent implements OnInit, OnDestroy {
     formContentId?: string;
     formContentVersion?: string;
     formDataChange: EventEmitter<FormValueMap>;
+    formDataByPageChange: EventEmitter<JourneyFormDataByPage>;
     formValidationChange: EventEmitter<FormValidationResult>;
     uploadedFilesChange: EventEmitter<Record<string, UploadedFileRef[]>>;
     submit: EventEmitter<FormSubmitResult>;
+    activePageIdChange: EventEmitter<string>;
     renderer: JsonFormRendererComponent;
+    journeyViewer?: FormJourneyViewerComponent;
     breakpoint: import("@angular/core").WritableSignal<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
     private el;
     private zone;
@@ -36,18 +42,25 @@ export declare class FormViewerComponent implements OnInit, OnDestroy {
     private _data;
     private _dataUsesFieldNameKeys;
     protected normalizedInitialValues: Record<string, unknown>;
+    protected normalizedInitialFieldLabels: Record<string, FieldDisplayLabel>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private setupResizeObserver;
     private updateBreakpoint;
     onValueChange(values: FormValueMap): void;
     onValidationChange(result: FormValidationResult): void;
+    onJourneyValueByPageChange(valuesByPage: JourneyFormDataByPage): void;
     onUploadedFilesChange(result: Record<string, UploadedFileRef[]>): void;
     triggerSubmit(): void;
     onRendererSubmit(result: FormSubmitResult): void;
+    onActivePageIdChange(pageId: string): void;
+    hasJourney(): boolean;
+    resolvedSchema(): FormSchema | null;
     private refreshNormalizedInitialValues;
     private normalizeInitialValues;
+    private normalizeInitialFieldLabels;
     private normalizeFieldNameKeyedValues;
+    private normalizeFieldNameKeyedLabels;
     private collectOutputShapeFields;
     private deserializeFieldValue;
     private deserializeFieldNameKeyedFieldValue;
@@ -61,5 +74,5 @@ export declare class FormViewerComponent implements OnInit, OnDestroy {
     private isFieldIdValue;
     private isRecord;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormViewerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormViewerComponent, "app-form-viewer", never, { "schema": { "alias": "schema"; "required": true; }; "data": { "alias": "data"; "required": false; }; "dataUsesFieldNameKeys": { "alias": "dataUsesFieldNameKeys"; "required": false; }; "options": { "alias": "options"; "required": false; }; "viewOnly": { "alias": "viewOnly"; "required": false; }; "eventApis": { "alias": "eventApis"; "required": false; }; "eventApiExecutor": { "alias": "eventApiExecutor"; "required": false; }; "fieldDataAccessMap": { "alias": "fieldDataAccessMap"; "required": false; }; "fieldDataAccessApi": { "alias": "fieldDataAccessApi"; "required": false; }; "formContentId": { "alias": "formContentId"; "required": false; }; "formContentVersion": { "alias": "formContentVersion"; "required": false; }; }, { "formDataChange": "formDataChange"; "formValidationChange": "formValidationChange"; "uploadedFilesChange": "uploadedFilesChange"; "submit": "submit"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormViewerComponent, "app-form-viewer", never, { "schema": { "alias": "schema"; "required": false; }; "journey": { "alias": "journey"; "required": false; }; "data": { "alias": "data"; "required": false; }; "dataUsesFieldNameKeys": { "alias": "dataUsesFieldNameKeys"; "required": false; }; "options": { "alias": "options"; "required": false; }; "viewOnly": { "alias": "viewOnly"; "required": false; }; "eventApis": { "alias": "eventApis"; "required": false; }; "eventApiExecutor": { "alias": "eventApiExecutor"; "required": false; }; "fieldDataAccessMap": { "alias": "fieldDataAccessMap"; "required": false; }; "fieldDataAccessApi": { "alias": "fieldDataAccessApi"; "required": false; }; "formContentId": { "alias": "formContentId"; "required": false; }; "formContentVersion": { "alias": "formContentVersion"; "required": false; }; }, { "formDataChange": "formDataChange"; "formDataByPageChange": "formDataByPageChange"; "formValidationChange": "formValidationChange"; "uploadedFilesChange": "uploadedFilesChange"; "submit": "submit"; "activePageIdChange": "activePageIdChange"; }, never, never, true, never>;
 }

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, FormSchema, UploadedFileRef, WidgetEventApiExecutor } from '../form-core/models';
+import { DesignerEventApiDefinition, 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;
+    fieldLabel?: FieldDisplayLabel;
     fileType?: string | string[];
     data?: string | string[];
 }
@@ -16,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;
@@ -28,8 +47,10 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private designerState;
     schema: FormSchema;
     initialValues: Record<string, any>;
+    initialFieldLabels: Record<string, FieldDisplayLabel>;
     mode: 'live' | 'preview' | 'design';
     device: 'desktop' | 'mobile';
+    showLayoutGuides: boolean;
     breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     eventLogger?: {
         log: (message: string, data?: unknown) => void;
@@ -37,6 +58,10 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     };
     eventApis: DesignerEventApiDefinition[];
     eventApiExecutor?: WidgetEventApiExecutor;
+    navigateToPage?: (pageId: string) => Promise<{
+        ok: boolean;
+        reason?: string;
+    }>;
     uploadOnSubmit: boolean;
     fieldDataAccessMap?: FieldDataAccessMap;
     fieldDataAccessApi?: RuntimeFieldDataAccessApi;
@@ -72,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;
@@ -87,6 +117,7 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private encodeBytesToBase64;
     private toSingleOrList;
     private getUploadedFileRefs;
+    private buildFieldLabelMetadata;
     private mergeFileMetadata;
     private buildGroupedValues;
     private buildCombinedValues;
@@ -94,5 +125,5 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private isGroupValue;
     private isUploadedFileRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<JsonFormRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<JsonFormRendererComponent, "app-json-form-renderer", never, { "schema": { "alias": "schema"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "device": { "alias": "device"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "eventLogger": { "alias": "eventLogger"; "required": false; }; "eventApis": { "alias": "eventApis"; "required": false; }; "eventApiExecutor": { "alias": "eventApiExecutor"; "required": false; }; "uploadOnSubmit": { "alias": "uploadOnSubmit"; "required": false; }; "fieldDataAccessMap": { "alias": "fieldDataAccessMap"; "required": false; }; "fieldDataAccessApi": { "alias": "fieldDataAccessApi"; "required": false; }; "formContentId": { "alias": "formContentId"; "required": false; }; "formContentVersion": { "alias": "formContentVersion"; "required": false; }; }, { "valueChange": "valueChange"; "groupedValueChange": "groupedValueChange"; "combinedValueChange": "combinedValueChange"; "validationChange": "validationChange"; "uploadedFilesChange": "uploadedFilesChange"; "formSubmit": "formSubmit"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<JsonFormRendererComponent, "app-json-form-renderer", never, { "schema": { "alias": "schema"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "initialFieldLabels": { "alias": "initialFieldLabels"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "device": { "alias": "device"; "required": false; }; "showLayoutGuides": { "alias": "showLayoutGuides"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "eventLogger": { "alias": "eventLogger"; "required": false; }; "eventApis": { "alias": "eventApis"; "required": false; }; "eventApiExecutor": { "alias": "eventApiExecutor"; "required": false; }; "navigateToPage": { "alias": "navigateToPage"; "required": false; }; "uploadOnSubmit": { "alias": "uploadOnSubmit"; "required": false; }; "fieldDataAccessMap": { "alias": "fieldDataAccessMap"; "required": false; }; "fieldDataAccessApi": { "alias": "fieldDataAccessApi"; "required": false; }; "formContentId": { "alias": "formContentId"; "required": false; }; "formContentVersion": { "alias": "formContentVersion"; "required": false; }; }, { "valueChange": "valueChange"; "groupedValueChange": "groupedValueChange"; "combinedValueChange": "combinedValueChange"; "validationChange": "validationChange"; "uploadedFilesChange": "uploadedFilesChange"; "formSubmit": "formSubmit"; }, never, never, true, never>;
 }

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

@@ -15,6 +15,7 @@ export declare class LayoutNodeComponent implements OnInit, OnChanges, OnDestroy
     engine: FormEngine;
     fields: FieldSchema[];
     designMode: boolean;
+    showLayoutGuides: boolean;
     readOnlyMode: boolean;
     scopePath: string[];
     device: 'desktop' | 'mobile';
@@ -49,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;
@@ -64,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;
@@ -93,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;
@@ -107,5 +118,5 @@ export declare class LayoutNodeComponent implements OnInit, OnChanges, OnDestroy
     isRuleControlled(node: LayoutNode): boolean;
     private getFieldForWidgetNode;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutNodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutNodeComponent, "app-layout-node", never, { "node": { "alias": "node"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; "designMode": { "alias": "designMode"; "required": false; }; "readOnlyMode": { "alias": "readOnlyMode"; "required": false; }; "scopePath": { "alias": "scopePath"; "required": false; }; "device": { "alias": "device"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "connectedDropLists": { "alias": "connectedDropLists"; "required": false; }; }, { "nodeDrop": "nodeDrop"; "nodeSelect": "nodeSelect"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutNodeComponent, "app-layout-node", never, { "node": { "alias": "node"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; "designMode": { "alias": "designMode"; "required": false; }; "showLayoutGuides": { "alias": "showLayoutGuides"; "required": false; }; "readOnlyMode": { "alias": "readOnlyMode"; "required": false; }; "scopePath": { "alias": "scopePath"; "required": false; }; "device": { "alias": "device"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "connectedDropLists": { "alias": "connectedDropLists"; "required": false; }; }, { "nodeDrop": "nodeDrop"; "nodeSelect": "nodeSelect"; }, never, never, true, never>;
 }

package/lib/ui/ui-color-swatch.component.d.ts

@@ -7,6 +7,7 @@ export declare class UiColorSwatchComponent {
     value: string;
     valueChange: EventEmitter<string>;
     blur: EventEmitter<void>;
+    onPickerChange(color: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiColorSwatchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiColorSwatchComponent, "ui-color-swatch", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "blur": "blur"; }, never, never, true, never>;
 }

package/lib/widgets/field-widgets/checkbox-group/checkbox-group-widget.component.d.ts

@@ -40,6 +40,11 @@ export declare class CheckboxGroupWidgetComponent implements OnInit, OnChanges,
     onFocus(): void;
     onClick(): void;
     onBlur(): void;
+    private areApiCallsSuppressed;
+    private hasSelectedValue;
+    private withSelectedValueFallbackOptions;
+    private getStoredFieldLabel;
+    private setStoredFieldLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxGroupWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxGroupWidgetComponent, "app-checkbox-group-widget", never, { "config": { "alias": "config"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/widgets/field-widgets/option-field-labels.d.ts

@@ -0,0 +1,3 @@
+import type { FieldDisplayLabel, OptionSchema } from '../../form-core/models';
+export declare function resolveOptionFieldLabel(value: unknown, options: OptionSchema[], existingLabel?: FieldDisplayLabel): FieldDisplayLabel | undefined;
+export declare function buildFallbackOptions(value: unknown, label?: FieldDisplayLabel): OptionSchema[];

package/lib/widgets/field-widgets/radio/radio-widget.component.d.ts

@@ -40,6 +40,11 @@ export declare class RadioWidgetComponent implements OnInit, OnChanges, OnDestro
     onClick(): void;
     onBlur(): void;
     private syncEnabledState;
+    private areApiCallsSuppressed;
+    private hasSelectedValue;
+    private withSelectedValueFallbackOptions;
+    private getStoredFieldLabel;
+    private setStoredFieldLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RadioWidgetComponent, "app-radio-widget", never, { "config": { "alias": "config"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/widgets/field-widgets/search/search-widget.component.d.ts

@@ -26,6 +26,7 @@ export declare class SearchWidgetComponent implements OnInit, OnDestroy {
     private requestId;
     private syncingFromQuery;
     private selectingOption;
+    private pendingSelectedLabel?;
     private focused;
     private hovered;
     private blurCloseTimeout;
@@ -67,6 +68,9 @@ export declare class SearchWidgetComponent implements OnInit, OnDestroy {
     private getResultLimit;
     private toSafeNonNegativeInt;
     private asQueryString;
+    private getDisplayValue;
+    private getStoredFieldLabel;
+    private setStoredFieldLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SearchWidgetComponent, "app-search-widget", never, { "config": { "alias": "config"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/widgets/field-widgets/select/select-widget.component.d.ts

@@ -79,6 +79,15 @@ export declare class SelectWidgetComponent implements OnInit, OnDestroy {
     private getAccessibleLabel;
     private syncTemplateBindingCaches;
     private toSafeNonNegativeInt;
+    private areApiCallsSuppressed;
+    private withSelectedValueFallbackOptions;
+    private getSelectedFallbackOptions;
+    private hasOptionValue;
+    private resolveSelectedValueForFallback;
+    private hasMeaningfulValue;
+    private syncStoredFieldLabel;
+    private getStoredFieldLabel;
+    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/field-widgets/text-field/text-field.component.d.ts

@@ -22,6 +22,7 @@ export declare class TextFieldWidgetComponent implements OnInit, OnDestroy {
     protected readonly fieldRequiredClass = "text-red-500";
     get fieldId(): string;
     protected isTextarea(): boolean;
+    protected isColorField(): boolean;
     protected getControlClass(multiline?: boolean): string;
     protected getAccessibleLabel(): string;
     protected nativeLabel(): string;
@@ -35,6 +36,8 @@ export declare class TextFieldWidgetComponent implements OnInit, OnDestroy {
     onBlur(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
+    protected getColorPickerValue(): string;
+    protected onColorPickerChange(color: string): void;
     ngOnDestroy(): void;
     getWrapperStyles(): Record<string, any>;
     getControlStyles(): Record<string, any>;

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.3",
+  "version": "0.0.5",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@babel/standalone": "^7.25.0",
-    "@json-editor/json-editor": "^2.15.2"
+    "@json-editor/json-editor": "^2.15.2",
+    "ngx-color-picker": "^20.1.1"
   },
   "peerDependenciesMeta": {
     "react": {

package/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/form-core/models';
+export * from './lib/form-core/form-journey.models';
 export * from './lib/form-core/form-engine';
 export * from './lib/form-core/schema-factory';
 export * from './lib/form-core/schema-guard';
@@ -6,8 +7,10 @@ export * from './lib/form-renderer/json-form-renderer.component';
 export * from './lib/form-renderer/layout-node.component';
 export * from './lib/email-renderer/email-renderer.component';
 export * from './lib/form-renderer/form-viewer/form-viewer.component';
+export * from './lib/form-renderer/form-journey-viewer.component';
 export * from './lib/form-designer/json-form-designer.component';
 export * from './lib/form-designer/form-designer-shell.component';
+export * from './lib/form-designer/form-journey-state.service';
 export * from './lib/form-designer/events-workspace.component';
 export * from './lib/form-designer/designer-state.service';
 export * from './lib/form-designer/designer-context.service';
@@ -63,6 +66,7 @@ export * from './lib/widgets/style-helpers';
 export * from './lib/widgets/widget-theme';
 export * from './lib/ai/ai-tool-registry.service';
 export * from './lib/ai/plugins/form-designer-tool-plugin';
+export * from './lib/ai/provide-form-designer-angai-feature';
 export * from './lib/data/data-catalog';
 export * from './lib/data/data-provider';
 export * from './lib/data/in-memory-data-catalog.service';