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

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[];
 }
@@ -28,8 +29,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 +40,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;
@@ -87,6 +94,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 +102,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';
@@ -107,5 +108,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/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<"mobile" | "desktop">;
+    readonly activeDevice: import("@angular/core").Signal<"desktop" | "mobile">;
     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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourself.create/ngx-form-designer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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';