@yourself.create/ngx-form-designer 0.0.8 → 0.0.10

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

@@ -73,7 +73,6 @@ export declare class DefaultDataProvider extends DataProvider {
     private mapRowToOption;
     private mapContextToOption;
     private resolveOptionLabelPrefix;
-    private formatOptionLabel;
     private getRuntimeOptions;
     private shouldSuppressRemoteAccess;
     private shouldUseLocalResolution;

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

@@ -55,6 +55,8 @@ export declare class FormEngine {
     private validateField;
     private evaluateDependencyRules;
     private evaluateEnterpriseRules;
+    private getEnterpriseRuleOutcomes;
+    private getRuleValidationMessage;
     private applyRuleAction;
 }
 export declare function createFormEngine(schema: FormSchema, initialValues?: Record<string, unknown>, initialFieldLabels?: Record<string, FieldDisplayLabel>): FormEngine;

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

@@ -1,6 +1,8 @@
 export type FieldType = 'text' | 'textarea' | 'number' | 'email' | 'password' | 'tel' | 'date' | 'time' | 'datetime-local' | 'checkbox' | 'radio' | 'select' | 'multiselect' | 'file' | 'repeatable-group' | 'image' | 'heading' | 'paragraph' | 'cta-button' | 'table' | (string & {});
 export interface Html5ValidationProps {
     required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
     min?: number | string;
     max?: number | string;
     step?: number;
@@ -8,14 +10,6 @@ export interface Html5ValidationProps {
     maxLength?: number;
     pattern?: string;
 }
-export interface ValidationRule {
-    id?: string;
-    type: 'builtin' | 'expression';
-    name?: string;
-    expression?: string;
-    message: string;
-    when?: string;
-}
 export type LogicOperator = 'AND' | 'OR';
 export type ConditionOperator = 'eq' | 'neq' | 'gt' | 'lt' | 'gte' | 'lte' | 'contains' | 'startsWith' | 'endsWith' | 'empty' | 'notEmpty' | 'truthy';
 export type ConditionValueSource = 'literal' | 'field';
@@ -105,6 +99,7 @@ export interface FieldSchema {
     placeholder?: string;
     helpText?: string;
     tooltip?: string;
+    useThousandSeparator?: boolean;
     defaultValue?: unknown;
     accept?: string;
     multiple?: boolean;
@@ -112,10 +107,7 @@ export interface FieldSchema {
     uploadFieldName?: string;
     repeatable?: RepeatableGroupConfig;
     appearance?: 'outline' | 'fill' | 'standard';
-    readonly?: boolean;
-    disabled?: boolean;
     html5?: Html5ValidationProps;
-    validation?: ValidationRule[];
     dependencies?: DependencyRule[];
     rules?: FormRule[];
     dataConfig?: DataSourceConfig;
@@ -139,7 +131,6 @@ export interface DataSourceConfig {
     contextKey?: string;
     datasourceId?: string;
     rowsPath?: string;
-    formatNumericOptionLabels?: boolean;
     optionLabelPrefixPath?: string;
     optionLabelPrefixFieldId?: string;
     rowSelectionMode?: 'first' | 'selected';
@@ -171,6 +162,9 @@ export interface DataFilter {
     fieldId?: string;
     valueLiteral?: unknown;
 }
+export declare function usesFieldThousandSeparator(field: Pick<FieldSchema, 'useThousandSeparator'> | null | undefined): boolean;
+export declare function isFieldReadonly(field: Pick<FieldSchema, 'html5'> | null | undefined): boolean;
+export declare function isFieldDisabled(field: Pick<FieldSchema, 'html5'> | null | undefined): boolean;
 export type WidgetEventType = 'focus' | 'blur' | 'change' | 'click' | 'dirty' | 'touched' | 'select';
 export interface WidgetEventActionSetValue {
     type: 'setValue';
@@ -286,6 +280,7 @@ export interface DataDependencyBinding {
 export interface OptionSchema {
     label: string;
     value: string | number;
+    displayPrefix?: string;
 }
 export type FieldDisplayLabel = string | string[];
 export interface DependencyRule {

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

@@ -32,7 +32,6 @@ export declare class DataPanelComponent implements OnChanges {
     selectionFieldId?: string;
     selectionMatchPath?: string;
     childRowsPath?: string;
-    formatNumericOptionLabels: boolean;
     optionLabelPrefixPath?: string;
     rootPathOptions: string[];
     rowPathOptions: string[];
@@ -100,10 +99,8 @@ export declare class DataPanelComponent implements OnChanges {
     showScalarMappingControls(): boolean;
     showOptionMappingControls(): boolean;
     showDisplayFormattingControls(): boolean;
-    supportsNumericDisplayFormatting(): boolean;
     displayFormattingTitle(): string;
     displayFormattingDescription(): string;
-    numericDisplayFormattingLabel(): string;
     showStaticOptionsEditor(): boolean;
     showStaticScalarEditor(): boolean;
     staticScalarLabel(): string;
@@ -114,7 +111,7 @@ export declare class DataPanelComponent implements OnChanges {
     availableRowPaths(): string[];
     availableParentRowPaths(): string[];
     availableChildCollectionPaths(): string[];
-    private shouldPersistOptionLabelFormatting;
+    private shouldPersistOptionLabelPrefix;
     private usesOptionMapping;
     private scalarTargetPath;
     private readScalarTargetValue;

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

@@ -62,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<{

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

@@ -10,8 +10,6 @@ type NativeSelectOption<T = string> = {
 export declare class DynamicPropertiesComponent implements OnChanges {
     onPropertyChange?: () => void;
     private readonly designerCtx;
-    protected readonly validatorTypeOptions: NativeSelectOption<string>[];
-    protected readonly builtinValidatorOptions: NativeSelectOption<string>[];
     get properties(): PropertySection[];
     getFieldReferenceCandidates(field: PropertyField): FieldSchema[];
     fieldReferenceOptions(field: PropertyField): NativeSelectOption<string>[];
@@ -88,11 +86,6 @@ export declare class DynamicPropertiesComponent implements OnChanges {
     addOption(path: string): void;
     removeOption(path: string, index: number): void;
     updateOption(path: string, index: number, field: string, value: any): void;
-    addValidator(path: string): void;
-    removeValidator(path: string, index: number): void;
-    updateValidator(path: string, index: number, 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);
@@ -33,7 +33,7 @@ export declare class FormPreviewComponent {
         ok: boolean;
         reason?: string;
     }>;
-    getContainerWidth(): "375px" | "576px" | "768px" | "992px" | "1200px" | "1400px" | "100%";
+    getContainerWidth(): "100%" | "375px" | "576px" | "768px" | "992px" | "1200px" | "1400px";
     getPageStyle(): Record<string, any>;
     close(): void;
     updateData(data: any): void;

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

@@ -13,7 +13,7 @@ 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>;
@@ -56,7 +56,7 @@ export declare class LayoutCanvasComponent implements AfterViewInit {
     toggleLiveSchemaEditor(): void;
     closeLiveSchemaEditor(): void;
     onLiveSchemaEditorTextChange(nextText: string): void;
-    getCanvasWidth(): "375px" | "576px" | "768px" | "992px" | "1200px" | "1400px" | "100%";
+    getCanvasWidth(): "100%" | "375px" | "576px" | "768px" | "992px" | "1200px" | "1400px";
     getCanvasHeight(): "667px" | "800px";
     getPageStyle(): Record<string, any>;
     pageTransform(): string;

package/lib/form-designer/widget-inspector.component.d.ts

@@ -17,7 +17,7 @@ export declare class WidgetInspectorComponent {
     private readonly readOnlyFieldSnapshot;
     readonly inspectorField: import("@angular/core").Signal<FieldSchema>;
     currentStyle: import("@angular/core").Signal<Partial<StyleTokenSet>>;
-    dataConsumer: import("@angular/core").Signal<"image" | "none" | "value" | "list">;
+    dataConsumer: import("@angular/core").Signal<"value" | "image" | "list" | "none">;
     bindingShape: import("@angular/core").Signal<import("@uch-web/ngx-form-designer").DataShape | null>;
     dataTargetPath: import("@angular/core").Signal<string>;
     getWidgetIcon(): string;

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, FieldSchema, FieldDisplayLabel, FormSchema, UploadedFileRef, WidgetEventApiExecutor } from '../form-core/models';
+import { DesignerEventApiDefinition, FieldSchema, FieldDisplayLabel, FormSchema, RuleSeverity, 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';
@@ -18,6 +18,7 @@ export type CombinedFormValues = Record<string, FormFieldValue | FormValueMap>;
 export interface FormValidationResult {
     errors: Record<string, string[]>;
     isValid: boolean;
+    isSeverityError: boolean;
     fields?: Record<string, FormFieldValidationState>;
 }
 export interface FormFieldValidationState {
@@ -27,15 +28,18 @@ export interface FormFieldValidationState {
     visible: boolean;
     required: boolean;
     valid: boolean;
+    isSeverityError: boolean;
     errors: string[];
     validators: FormFieldValidatorState[];
 }
 export interface FormFieldValidatorState {
     name: string;
-    source: 'required' | 'html5' | 'custom';
+    source: 'required' | 'html5' | 'rule';
     active: boolean;
+    valid: boolean;
     value?: unknown;
     message?: string;
+    severity?: RuleSeverity;
 }
 export interface FormSubmitResult {
     values: FormValueMap;
@@ -79,6 +83,7 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private readonly uploadClient;
     private readonly runtimeFieldDataAccessRegistry;
     private readonly dataCatalog;
+    private readonly ruleEvaluationService;
     constructor(designerState: DesignerStateService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -102,7 +107,9 @@ export declare class JsonFormRendererComponent implements OnInit, OnChanges, OnD
     private buildFieldValidationState;
     private describeFieldValidators;
     private hasRequiredValidation;
-    private isValidationRuleActive;
+    private getRuleOutcomes;
+    private describeRuleName;
+    private getRuleValidationMessage;
     private isValidationEmpty;
     private uploadPendingFiles;
     private uploadPendingFilesInSchema;

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

@@ -63,6 +63,9 @@ export declare class SearchWidgetComponent implements OnInit, OnDestroy {
     private loadOptions;
     private normalizeOptions;
     private shouldQuery;
+    private isSelectedOptionState;
+    private hasOptionValue;
+    private hasMeaningfulValue;
     private getMinChars;
     private getDebounceMs;
     private getResultLimit;

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

@@ -92,6 +92,7 @@ export declare class SelectWidgetComponent implements OnInit, OnDestroy {
     private withSelectedValueFallbackOptions;
     private getSelectedFallbackOptions;
     private hasOptionValue;
+    private toComparableOptionValue;
     private resolveSelectedValueForFallback;
     private hasMeaningfulValue;
     private syncStoredFieldLabel;

package/lib/widgets/field-widgets/text-field/text-field.component.d.ts

@@ -53,6 +53,8 @@ export declare class TextFieldWidgetComponent implements OnInit, OnDestroy {
     get error(): string | null;
     private syncEnabledState;
     private refreshValueFromDataSource;
+    private clearResolvedValue;
+    private hasSelectedRowMatch;
     private getDataConfigSignature;
     private seedDependencySnapshotFromEngine;
     private seedDependencySnapshot;

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' | 'padding' | 'margin' | 'shadow' | 'border' | 'options-editor' | 'validators-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' | '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.8",
+  "version": "0.0.10",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",