form-builder-pro 1.2.8 → 1.3.0

package/dist/index.css

@@ -866,6 +866,9 @@ body {
 .right-1 {
   right: 0.25rem;
 }
+.right-2 {
+  right: 0.5rem;
+}
 .right-6 {
   right: 1.5rem;
 }
@@ -948,6 +951,9 @@ body {
 .block {
   display: block;
 }
+.inline {
+  display: inline;
+}
 .flex {
   display: flex;
 }
@@ -987,18 +993,30 @@ body {
 .h-screen {
   height: 100vh;
 }
+.max-h-32 {
+  max-height: 8rem;
+}
+.max-h-48 {
+  max-height: 12rem;
+}
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
 .min-h-\[100px\] {
   min-height: 100px;
 }
+.min-h-\[120px\] {
+  min-height: 120px;
+}
 .min-h-\[200px\] {
   min-height: 200px;
 }
 .min-h-\[30px\] {
   min-height: 30px;
 }
+.min-h-\[80px\] {
+  min-height: 80px;
+}
 .min-h-touch {
   min-height: 44px;
 }
@@ -1029,6 +1047,9 @@ body {
 .max-w-\[180px\] {
   max-width: 180px;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1217,6 +1238,10 @@ body {
 .border-primary {
   border-color: hsl(var(--primary));
 }
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
@@ -1273,6 +1298,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -1280,6 +1309,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1758,6 +1791,11 @@ input[type="radio"]:checked::after {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity, 1));
@@ -1995,6 +2033,10 @@ input[type="radio"]:checked::after {
   background-color: rgb(31 41 55 / 0.5);
 }
 
+.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.2);
+}
+
 @media (min-width: 640px) {
 
   .sm\:inline-block {

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as zustand_vanilla from 'zustand/vanilla';
 
-type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'file' | 'email' | 'phone';
+type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'file' | 'image' | 'email' | 'phone';
 type FieldWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%' | number;
 declare function parseWidth(width: FieldWidth): number;
 declare function getColSpanFromWidth(width: FieldWidth): string;
@@ -17,6 +17,36 @@ interface ValidationObject {
     regexMessage?: string;
     minLength?: number;
     maxLength?: number;
+    min?: number;
+    max?: number;
+    minSelected?: number;
+    maxSelected?: number;
+    minDate?: string;
+    maxDate?: string;
+}
+/**
+ * Comprehensive validation configuration for form fields.
+ * Supports number fields (min, max, decimal) and text-based numeric fields (phone, postal, OTP).
+ */
+interface FieldValidations {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    allowDecimal?: boolean;
+    decimalPlaces?: number;
+    allowNegative?: boolean;
+    pattern?: string;
+    validationType?: 'postalCode' | 'phoneNumber' | 'otp' | 'amount' | 'custom';
+    customErrorMessages?: {
+        required?: string;
+        minLength?: string;
+        maxLength?: string;
+        min?: string;
+        max?: string;
+        pattern?: string;
+    };
     minSelected?: number;
     maxSelected?: number;
     minDate?: string;
@@ -43,6 +73,7 @@ interface FormField {
     }[];
     optionsSource?: AsyncOptionSource;
     validation?: ValidationRule[] | ValidationObject;
+    validations?: FieldValidations;
     width?: FieldWidth;
     hidden?: boolean;
     position?: {
@@ -75,6 +106,10 @@ interface FormField {
     lookupValueField?: string;
     lookupLabelField?: string;
     isd?: ISDConfig;
+    imageUrl?: string;
+    valueSource?: 'manual' | 'formula';
+    formula?: string;
+    dependencies?: string[];
 }
 /**
  * ISD (International Subscriber Dialing) configuration for phone fields
@@ -343,9 +378,61 @@ declare const builderToPlatform: (builderSchema: FormSchema) => any;
  * @returns
  */
 declare const platformToBuilder: (platformSchema: any) => FormSchema;
+/**
+ * Returns validation config for Angular Reactive Forms compatibility.
+ * Use with Validators.required, Validators.minLength(n), Validators.maxLength(n),
+ * Validators.min(n), Validators.max(n), Validators.pattern(regex).
+ * @param validations Field validations from form schema
+ * @returns Object with validator params and custom error messages for Angular
+ */
+declare function getValidationConfigForAngular(validations: FieldValidations | undefined): {
+    required: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    pattern?: string;
+    customErrorMessages: FieldValidations['customErrorMessages'];
+};
+
+/**
+ * Extracts field references (identifiers) from a formula expression.
+ * Supports identifiers: alphanumeric, underscores (e.g. quantity, field_a, price2)
+ */
+declare function parseFormulaDependencies(formula: string): string[];
+/**
+ * Validates formula syntax and field references.
+ * Returns { valid: true } or { valid: false, error: string }
+ */
+declare function validateFormula(formula: string, availableFieldIds: string[], availableFieldNames: string[], _currentFieldId?: string): {
+    valid: true;
+} | {
+    valid: false;
+    error: string;
+};
+/**
+ * Detects circular dependency: if formulaField depends on fields that (transitively) depend on formulaField.
+ */
+declare function detectCircularDependency(schema: FormSchema, formulaFieldId: string, _formula: string, dependencies: string[]): boolean;
+/**
+ * Evaluates a formula with given values.
+ * Handles: +, -, *, /, parentheses.
+ * Empty/missing values are treated as 0.
+ * Divide-by-zero returns NaN (caller should handle).
+ */
+declare function evaluateFormula(formula: string, values: Record<string, number | string | undefined>): number;
+/**
+ * Get all numeric fields from schema (excluding the given field) for formula selection.
+ * Returns fields that can be used in formulas.
+ */
+declare function getNumericFieldsForFormula(schema: FormSchema, excludeFieldId?: string): {
+    id: string;
+    fieldName: string;
+    label: string;
+}[];
 
 declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { AsyncOptionSource, FieldType, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, ISDConfig, MasterType, ValidationObject, ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, formStore, getColSpanFromWidth, initFormBuilder, parseWidth, platformToBuilder };
+export { AsyncOptionSource, FieldType, FieldValidations, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, ISDConfig, MasterType, ValidationObject, ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, validateFormula };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as zustand_vanilla from 'zustand/vanilla';
 
-type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'file' | 'email' | 'phone';
+type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'file' | 'image' | 'email' | 'phone';
 type FieldWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%' | number;
 declare function parseWidth(width: FieldWidth): number;
 declare function getColSpanFromWidth(width: FieldWidth): string;
@@ -17,6 +17,36 @@ interface ValidationObject {
     regexMessage?: string;
     minLength?: number;
     maxLength?: number;
+    min?: number;
+    max?: number;
+    minSelected?: number;
+    maxSelected?: number;
+    minDate?: string;
+    maxDate?: string;
+}
+/**
+ * Comprehensive validation configuration for form fields.
+ * Supports number fields (min, max, decimal) and text-based numeric fields (phone, postal, OTP).
+ */
+interface FieldValidations {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    allowDecimal?: boolean;
+    decimalPlaces?: number;
+    allowNegative?: boolean;
+    pattern?: string;
+    validationType?: 'postalCode' | 'phoneNumber' | 'otp' | 'amount' | 'custom';
+    customErrorMessages?: {
+        required?: string;
+        minLength?: string;
+        maxLength?: string;
+        min?: string;
+        max?: string;
+        pattern?: string;
+    };
     minSelected?: number;
     maxSelected?: number;
     minDate?: string;
@@ -43,6 +73,7 @@ interface FormField {
     }[];
     optionsSource?: AsyncOptionSource;
     validation?: ValidationRule[] | ValidationObject;
+    validations?: FieldValidations;
     width?: FieldWidth;
     hidden?: boolean;
     position?: {
@@ -75,6 +106,10 @@ interface FormField {
     lookupValueField?: string;
     lookupLabelField?: string;
     isd?: ISDConfig;
+    imageUrl?: string;
+    valueSource?: 'manual' | 'formula';
+    formula?: string;
+    dependencies?: string[];
 }
 /**
  * ISD (International Subscriber Dialing) configuration for phone fields
@@ -343,9 +378,61 @@ declare const builderToPlatform: (builderSchema: FormSchema) => any;
  * @returns
  */
 declare const platformToBuilder: (platformSchema: any) => FormSchema;
+/**
+ * Returns validation config for Angular Reactive Forms compatibility.
+ * Use with Validators.required, Validators.minLength(n), Validators.maxLength(n),
+ * Validators.min(n), Validators.max(n), Validators.pattern(regex).
+ * @param validations Field validations from form schema
+ * @returns Object with validator params and custom error messages for Angular
+ */
+declare function getValidationConfigForAngular(validations: FieldValidations | undefined): {
+    required: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    pattern?: string;
+    customErrorMessages: FieldValidations['customErrorMessages'];
+};
+
+/**
+ * Extracts field references (identifiers) from a formula expression.
+ * Supports identifiers: alphanumeric, underscores (e.g. quantity, field_a, price2)
+ */
+declare function parseFormulaDependencies(formula: string): string[];
+/**
+ * Validates formula syntax and field references.
+ * Returns { valid: true } or { valid: false, error: string }
+ */
+declare function validateFormula(formula: string, availableFieldIds: string[], availableFieldNames: string[], _currentFieldId?: string): {
+    valid: true;
+} | {
+    valid: false;
+    error: string;
+};
+/**
+ * Detects circular dependency: if formulaField depends on fields that (transitively) depend on formulaField.
+ */
+declare function detectCircularDependency(schema: FormSchema, formulaFieldId: string, _formula: string, dependencies: string[]): boolean;
+/**
+ * Evaluates a formula with given values.
+ * Handles: +, -, *, /, parentheses.
+ * Empty/missing values are treated as 0.
+ * Divide-by-zero returns NaN (caller should handle).
+ */
+declare function evaluateFormula(formula: string, values: Record<string, number | string | undefined>): number;
+/**
+ * Get all numeric fields from schema (excluding the given field) for formula selection.
+ * Returns fields that can be used in formulas.
+ */
+declare function getNumericFieldsForFormula(schema: FormSchema, excludeFieldId?: string): {
+    id: string;
+    fieldName: string;
+    label: string;
+}[];
 
 declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { AsyncOptionSource, FieldType, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, ISDConfig, MasterType, ValidationObject, ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, formStore, getColSpanFromWidth, initFormBuilder, parseWidth, platformToBuilder };
+export { AsyncOptionSource, FieldType, FieldValidations, FieldWidth, FormBuilder, FormBuilderOptions, FormField, FormRenderer, FormSchema, FormSchemaValidation, FormSection, ISDConfig, MasterType, ValidationObject, ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, validateFormula };