form-builder-pro 1.3.7 → 1.3.9

package/dist/index.css

@@ -744,11 +744,6 @@ body {
 /* Slider thumb (Firefox) */
 /* Slider track (Firefox) */
 /* Width value badge animation */
-.width-value-badge {
-    min-width: 40px;
-    text-align: center;
-    transition: transform 0.1s ease, background-color 0.15s ease;
-  }
 /* Preset buttons */
 /* Breakpoint markers */
 /* ===== PHONE ISD SELECTOR STYLES ===== */
@@ -942,6 +937,9 @@ body {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1041,6 +1039,9 @@ body {
 .w-full {
   width: 100%;
 }
+.min-w-0 {
+  min-width: 0px;
+}
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1141,6 +1142,11 @@ body {
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1184,6 +1190,9 @@ body {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
+.rounded-bl-md {
+  border-bottom-left-radius: calc(var(--radius) - 2px);
+}
 .border {
   border-width: 1px;
 }
@@ -1196,6 +1205,9 @@ body {
 .border-l {
   border-left-width: 1px;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1208,6 +1220,9 @@ body {
 .border-dashed {
   border-style: dashed;
 }
+.border-\[\#635bff\]\/35 {
+  border-color: rgb(99 91 255 / 0.35);
+}
 .border-\[\#e7e7ff\] {
   --tw-border-opacity: 1;
   border-color: rgb(231 231 255 / var(--tw-border-opacity, 1));
@@ -1381,12 +1396,24 @@ body {
 .pb-20 {
   padding-bottom: 5rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
+.pl-3 {
+  padding-left: 0.75rem;
+}
 .pl-\[95px\] {
   padding-left: 95px;
 }
+.pt-0 {
+  padding-top: 0px;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
+.pt-3 {
+  padding-top: 0.75rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1516,6 +1543,11 @@ body {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1536,13 +1568,13 @@ body {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-\[\#635bff\] {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 91 255 / var(--tw-ring-opacity, 1));
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1936,6 +1968,10 @@ input[type="radio"]:checked::after {
   opacity: 0.7;
 }
 
+.dark\:border-\[\#635bff\]\/50:is(.dark *) {
+  border-color: rgb(99 91 255 / 0.5);
+}
+
 .dark\:border-gray-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
@@ -1970,6 +2006,10 @@ input[type="radio"]:checked::after {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-gray-800\/40:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.4);
+}
+
 .dark\:bg-gray-800\/50:is(.dark *) {
   background-color: rgb(31 41 55 / 0.5);
 }

package/dist/index.d.mts

@@ -64,6 +64,8 @@ interface AsyncOptionSource {
     labelKey: string;
     valueKey: string;
 }
+/** Lookup (Entity Fields) — source category for optionSource LOOKUP */
+type LookupSourceType = 'MODULE' | 'MASTER_TYPE' | 'SETTINGS';
 interface FormField {
     id: string;
     type: FieldType;
@@ -98,6 +100,8 @@ interface FormField {
     masterTypeName?: string;
     enabled?: boolean;
     visible?: boolean;
+    /** When true, host/backend may enforce uniqueness for this field’s value */
+    isUnique?: boolean;
     order?: number;
     css?: {
         class?: string;
@@ -107,7 +111,7 @@ interface FormField {
     multiselect?: boolean;
     multiSelect?: boolean;
     optionSource?: 'STATIC' | 'MASTER' | 'LOOKUP';
-    lookupSourceType?: 'MODULE' | 'MASTER_TYPE';
+    lookupSourceType?: LookupSourceType;
     lookupSource?: string;
     lookupValueField?: string;
     lookupLabelField?: string;
@@ -152,6 +156,14 @@ interface ISDConfig {
     showCountryName: boolean;
     allowCustomCode: boolean;
 }
+/** Group / section position on the form canvas (payload: groups[].position) */
+interface GroupPosition {
+    row: number;
+    column: number;
+    /** Grid span 1–12 (group width on parent grid) */
+    width: number;
+    order: number;
+}
 interface FormSection {
     id: string;
     title: string;
@@ -168,6 +180,20 @@ interface FormSection {
         class?: string;
         style?: Record<string, string>;
     };
+    /** API group name (payload groups[].name); mirrors title when set */
+    name?: string;
+    description?: string | null;
+    position?: GroupPosition;
+    /** Payload expanded (preferred); isExpanded kept for legacy */
+    expanded?: boolean;
+    visible?: boolean;
+    collapsible?: boolean;
+    parentGroupId?: string | null;
+    repeatable?: boolean;
+    dataKey?: string | null;
+    addButtonLabel?: string | null;
+    minInstances?: number | null;
+    maxInstances?: number | null;
 }
 interface FormSchema {
     id: string;
@@ -217,6 +243,12 @@ declare const FormSchemaValidation: z.ZodObject<{
     }[];
 }>;
 
+/** Labels for Lookup Source Type (Entity Fields) — values are the API `sourceType` strings */
+declare const LOOKUP_SOURCE_TYPE_OPTIONS: {
+    value: LookupSourceType;
+    label: string;
+}[];
+
 interface MasterType {
     id: string;
     name: string;
@@ -228,6 +260,7 @@ interface MasterType {
 interface FormState {
     schema: FormSchema;
     selectedFieldId: string | null;
+    selectedSectionId: string | null;
     history: FormSchema[];
     historyIndex: number;
     isPreviewMode: boolean;
@@ -270,6 +303,7 @@ interface FormActions {
     removeField: (fieldId: string) => void;
     updateField: (fieldId: string, updates: Partial<FormField>) => void;
     selectField: (fieldId: string | null) => void;
+    selectSection: (sectionId: string | null) => void;
     moveField: (fieldId: string, targetSectionId: string | null, newIndex: number) => void;
     undo: () => void;
     redo: () => void;
@@ -304,6 +338,11 @@ interface FormBuilderOptions {
         }[];
     };
     moduleList?: string[];
+    /** Settings entity registry (sourceKey + display label) — same list the host uses for Legal Entities, Operating Units, User Groups, etc. */
+    settingsEntities?: {
+        label: string;
+        value: string;
+    }[];
     lookupFieldOptionsMap?: {
         [lookupSource: string]: string[];
     };
@@ -317,7 +356,7 @@ interface FormBuilderOptions {
     }) => void;
     onLookupSourceChange?: (event: {
         fieldId: string;
-        lookupSourceType: 'MODULE' | 'MASTER_TYPE';
+        lookupSourceType: LookupSourceType;
         lookupSource: string;
     }) => void;
     onProfileClick?: () => void;
@@ -361,6 +400,15 @@ declare class FormBuilder {
     private renderImportList;
     private renderCanvas;
     private createCheckboxField;
+    /**
+     * Shared 1–12 grid span control (Field Settings + Group Settings).
+     */
+    private createGridSpanSelector;
+    /**
+     * Shared Styling block (Padding, Background, Alignment, CSS class, Advanced CSS) — same as Field Settings.
+     */
+    private appendSharedStylingSection;
+    private renderGroupSettingsPanel;
     private renderConfigPanel;
     private initSidebarSortables;
 }
@@ -400,7 +448,7 @@ declare const cleanFormSchema: (schema: any) => FormSchema;
 /**
  * Transforms Form Builder JSON to Platform JSON (standardized payload format)
  * @param builderSchema
- * @returns Standardized payload format
+ * @returns Standardized payload format (root `fields` + `groups` with fieldIds)
  */
 declare const builderToPlatform: (builderSchema: FormSchema) => any;
 /**
@@ -475,4 +523,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type ISDConfig, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };
+export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };

package/dist/index.d.ts

@@ -64,6 +64,8 @@ interface AsyncOptionSource {
     labelKey: string;
     valueKey: string;
 }
+/** Lookup (Entity Fields) — source category for optionSource LOOKUP */
+type LookupSourceType = 'MODULE' | 'MASTER_TYPE' | 'SETTINGS';
 interface FormField {
     id: string;
     type: FieldType;
@@ -98,6 +100,8 @@ interface FormField {
     masterTypeName?: string;
     enabled?: boolean;
     visible?: boolean;
+    /** When true, host/backend may enforce uniqueness for this field’s value */
+    isUnique?: boolean;
     order?: number;
     css?: {
         class?: string;
@@ -107,7 +111,7 @@ interface FormField {
     multiselect?: boolean;
     multiSelect?: boolean;
     optionSource?: 'STATIC' | 'MASTER' | 'LOOKUP';
-    lookupSourceType?: 'MODULE' | 'MASTER_TYPE';
+    lookupSourceType?: LookupSourceType;
     lookupSource?: string;
     lookupValueField?: string;
     lookupLabelField?: string;
@@ -152,6 +156,14 @@ interface ISDConfig {
     showCountryName: boolean;
     allowCustomCode: boolean;
 }
+/** Group / section position on the form canvas (payload: groups[].position) */
+interface GroupPosition {
+    row: number;
+    column: number;
+    /** Grid span 1–12 (group width on parent grid) */
+    width: number;
+    order: number;
+}
 interface FormSection {
     id: string;
     title: string;
@@ -168,6 +180,20 @@ interface FormSection {
         class?: string;
         style?: Record<string, string>;
     };
+    /** API group name (payload groups[].name); mirrors title when set */
+    name?: string;
+    description?: string | null;
+    position?: GroupPosition;
+    /** Payload expanded (preferred); isExpanded kept for legacy */
+    expanded?: boolean;
+    visible?: boolean;
+    collapsible?: boolean;
+    parentGroupId?: string | null;
+    repeatable?: boolean;
+    dataKey?: string | null;
+    addButtonLabel?: string | null;
+    minInstances?: number | null;
+    maxInstances?: number | null;
 }
 interface FormSchema {
     id: string;
@@ -217,6 +243,12 @@ declare const FormSchemaValidation: z.ZodObject<{
     }[];
 }>;
 
+/** Labels for Lookup Source Type (Entity Fields) — values are the API `sourceType` strings */
+declare const LOOKUP_SOURCE_TYPE_OPTIONS: {
+    value: LookupSourceType;
+    label: string;
+}[];
+
 interface MasterType {
     id: string;
     name: string;
@@ -228,6 +260,7 @@ interface MasterType {
 interface FormState {
     schema: FormSchema;
     selectedFieldId: string | null;
+    selectedSectionId: string | null;
     history: FormSchema[];
     historyIndex: number;
     isPreviewMode: boolean;
@@ -270,6 +303,7 @@ interface FormActions {
     removeField: (fieldId: string) => void;
     updateField: (fieldId: string, updates: Partial<FormField>) => void;
     selectField: (fieldId: string | null) => void;
+    selectSection: (sectionId: string | null) => void;
     moveField: (fieldId: string, targetSectionId: string | null, newIndex: number) => void;
     undo: () => void;
     redo: () => void;
@@ -304,6 +338,11 @@ interface FormBuilderOptions {
         }[];
     };
     moduleList?: string[];
+    /** Settings entity registry (sourceKey + display label) — same list the host uses for Legal Entities, Operating Units, User Groups, etc. */
+    settingsEntities?: {
+        label: string;
+        value: string;
+    }[];
     lookupFieldOptionsMap?: {
         [lookupSource: string]: string[];
     };
@@ -317,7 +356,7 @@ interface FormBuilderOptions {
     }) => void;
     onLookupSourceChange?: (event: {
         fieldId: string;
-        lookupSourceType: 'MODULE' | 'MASTER_TYPE';
+        lookupSourceType: LookupSourceType;
         lookupSource: string;
     }) => void;
     onProfileClick?: () => void;
@@ -361,6 +400,15 @@ declare class FormBuilder {
     private renderImportList;
     private renderCanvas;
     private createCheckboxField;
+    /**
+     * Shared 1–12 grid span control (Field Settings + Group Settings).
+     */
+    private createGridSpanSelector;
+    /**
+     * Shared Styling block (Padding, Background, Alignment, CSS class, Advanced CSS) — same as Field Settings.
+     */
+    private appendSharedStylingSection;
+    private renderGroupSettingsPanel;
     private renderConfigPanel;
     private initSidebarSortables;
 }
@@ -400,7 +448,7 @@ declare const cleanFormSchema: (schema: any) => FormSchema;
 /**
  * Transforms Form Builder JSON to Platform JSON (standardized payload format)
  * @param builderSchema
- * @returns Standardized payload format
+ * @returns Standardized payload format (root `fields` + `groups` with fieldIds)
  */
 declare const builderToPlatform: (builderSchema: FormSchema) => any;
 /**
@@ -475,4 +523,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type ISDConfig, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };
+export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, evaluateFormula, formStore, generateName, getColSpanFromWidth, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula };