platformcommons-web-lib 1.0.0

package/src/lib/modules/form-builder/configs/field-type-schema.map.ts

@@ -0,0 +1,533 @@
+import { FormSchema } from '../../smart-form/models/form-schema.model';
+import { SWITCHABLE_FIELD_TYPES } from '../utils/constants';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SHARED BASE FIELDS (common to ALL field types)
+// These fields come from the core FieldConfig interface.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const F = {
+  label: { name: 'label', type: 'TEXT_INPUT', label: 'Field Label', required: true, placeholder: 'Enter field label...', colSpan: 12 },
+  name:  { name: 'name', type: 'TEXT_INPUT', label: 'System Name (name)', placeholder: 'e.g. firstName', colSpan: 6, hint: 'Unique key for the field in payload' },
+  colSpan: { name: 'colSpan', type: 'NUMBER_INPUT', label: 'Col Span (1–12)', defaultValue: 12, colSpan: 6, hint: '6 = half width, 12 = full width' },
+  placeholder: { name: 'placeholder', type: 'TEXT_INPUT', label: 'Placeholder Text', placeholder: 'e.g. Enter value here...', colSpan: 6 },
+  hint: { name: 'hint', type: 'TEXT_INPUT', label: 'Hint (below field)', placeholder: 'Helpful instruction...', colSpan: 6 },
+  prefix: { name: 'prefix', type: 'TEXT_INPUT', label: 'Prefix', placeholder: 'e.g. $', colSpan: 6 },
+  suffix: { name: 'suffix', type: 'TEXT_INPUT', label: 'Suffix', placeholder: 'e.g. USD', colSpan: 6 },
+  defaultValue: { name: 'defaultValue', type: 'TEXT_INPUT', label: 'Default Value', placeholder: 'Pre-filled value', colSpan: 6 },
+  payloadPath: { name: 'payloadPath', type: 'TEXT_INPUT', label: 'Payload Path', placeholder: 'e.g. metadata.status.code', colSpan: 6, hint: 'Dot-notation path in API payload' },
+  className: { name: 'className', type: 'TEXT_INPUT', label: 'CSS Class', placeholder: 'e.g. custom-class', colSpan: 6 },
+  errorMessage: { name: 'errorMessage', type: 'TEXT_INPUT', label: 'Custom Error Message', placeholder: 'e.g. This field is required', colSpan: 12 },
+  visibilityExpression: { name: 'visibilityExpression', type: 'TEXT_INPUT', label: 'Visibility Expression', placeholder: 'e.g. data.age > 18', colSpan: 12, hint: 'Show/hide this field conditionally based on other field values' },
+  isEnabled: { name: 'isEnabled', type: 'SWITCH', label: 'Is Enabled', colSpan: 6, defaultValue: true },
+  required:  { name: 'required',  type: 'SWITCH', label: 'Required', colSpan: 6 },
+  readonly:  { name: 'readonly',  type: 'SWITCH', label: 'Read Only', colSpan: 6 },
+  disabled:  { name: 'disabled',  type: 'SWITCH', label: 'Disabled', colSpan: 6 },
+  type: {
+    name: 'type',
+    type: 'DROPDOWN',
+    label: 'Field Type',
+    colSpan: 6,
+    subType: 'SINGLE',
+    placeholder: 'Select field type',
+    optionConfig: { optionList: SWITCHABLE_FIELD_TYPES }
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SECTIONS
+// Each section groups related fields for better UX
+// ─────────────────────────────────────────────────────────────────────────────
+
+function section(label: string, children: any[]): any {
+  return {
+    type: 'GROUP',
+    label,
+    sectionConfig: { label, children }
+  };
+}
+
+function row(...children: any[]): any {
+  return { type: 'ROW', name: 'row-' + children.map(c => c.name).join('-'), children };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// COMMON SECTIONS (shared across multiple types)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const BASE_SECTION_NO_TYPE = section('Basic Settings', [
+  row(F.label, F.name, F.colSpan, F.defaultValue, F.placeholder, F.hint),
+]);
+
+const BASE_SECTION = section('Basic Settings', [
+  // row(F.name, F.type),
+  row(F.label, F.name, F.colSpan, F.defaultValue, F.placeholder, F.hint),
+]);
+
+const FLAGS_SECTION = section('Field State', [
+  row(F.isEnabled, F.required),
+  row(F.readonly, F.disabled),
+]);
+
+const ADVANCED_SECTION = section('Advanced', [
+  F.visibilityExpression,
+  row(F.payloadPath, F.className),
+  row(F.prefix, F.suffix),
+  F.errorMessage,
+]);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// APPLY BUTTON
+// ─────────────────────────────────────────────────────────────────────────────
+
+const APPLY_BUTTON: any = {
+  actionBarConfig: {
+    buttons: [{
+      id: 'apply', label: 'Apply Changes', variant: 'primary',
+      alignment: 'right', action: { kind: 'emit' }
+    }]
+  }
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SCHEMA BUILDER HELPER
+// ─────────────────────────────────────────────────────────────────────────────
+
+function buildSchema(...sections: any[]): FormSchema {
+  return {
+    entityType: 'FIELD_CONFIG',
+    label: 'Field Configuration',
+    formType: 'SECTION',
+    sectionConfig: { children: sections },
+    ...APPLY_BUTTON
+  } as FormSchema;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// TYPE-SPECIFIC CONFIG SCHEMAS
+// Based on: FieldConfig interface in form-schema.model.ts
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const DEFAULT_FIELD_TYPE_SCHEMA_MAP: Record<string, FormSchema> = {
+
+  // ── SHORT TEXT (TEXT_INPUT → textConfig: TextConfig) ─────────────────────
+  shortText: buildSchema(
+    BASE_SECTION,
+    section('Text Constraints (textConfig)', [
+      row(
+        { name: 'textConfig.length.min', type: 'NUMBER_INPUT', label: 'Min Length', colSpan: 6, hint: 'Minimum number of characters' },
+        { name: 'textConfig.length.max', type: 'NUMBER_INPUT', label: 'Max Length', colSpan: 6, hint: 'Maximum number of characters' },
+      ),
+      { name: 'textConfig.pattern', type: 'TEXT_INPUT', label: 'Regex Pattern', placeholder: '^[A-Za-z]+$', colSpan: 9 },
+      { name: 'textConfig.patternMessage', type: 'TEXT_INPUT', label: 'Pattern Error Message', placeholder: 'Only letters allowed', colSpan: 9 },
+      row(
+        { name: 'textConfig.showCharCount', type: 'SWITCH', label: 'Show Char Count', colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── PASSWORD (TEXT_INPUT + subType=PASSWORD → textConfig) ────────────────
+  password: buildSchema(
+    BASE_SECTION,
+    section('Password Settings (textConfig)', [
+      row(
+        { name: 'textConfig.length.min', type: 'NUMBER_INPUT', label: 'Min Length', colSpan: 6 },
+        { name: 'textConfig.length.max', type: 'NUMBER_INPUT', label: 'Max Length', colSpan: 6 },
+      ),
+      { name: 'textConfig.matchField', type: 'TEXT_INPUT', label: 'Match with Field', placeholder: 'password', colSpan: 12, hint: 'e.g. for "Confirm Password" field' },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── LONG TEXT (TEXT_INPUT + subType=LONG → textConfig) ───────────────────
+  longText: buildSchema(
+    BASE_SECTION,
+    section('Textarea Settings (textConfig)', [
+      row(
+        { name: 'textConfig.length.min', type: 'NUMBER_INPUT', label: 'Min Length', colSpan: 6 },
+        { name: 'textConfig.length.max', type: 'NUMBER_INPUT', label: 'Max Length', colSpan: 6 },
+      ),
+      row(
+        { name: 'rows', type: 'NUMBER_INPUT', label: 'Visible Rows', defaultValue: 4, colSpan: 6, hint: 'Height of the textarea' },
+        { name: 'textConfig.showCharCount', type: 'SWITCH', label: 'Show Char Count', colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── EMAIL (TEXT_INPUT + subType=EMAIL → emailConfig: EmailConfig) ─────────
+  email: buildSchema(
+    BASE_SECTION,
+    section('Email Settings (emailConfig)', [
+      { name: 'emailConfig.defaultDomain', type: 'TEXT_INPUT', label: 'Default Domain', placeholder: 'example.com', colSpan: 6 },
+      { name: 'emailConfig.allowedDomains', type: 'TEXT_INPUT', label: 'Allowed Domains (comma-separated)', placeholder: 'example.com, org.com', colSpan: 12, hint: 'Leave blank to allow all domains' },
+      { name: 'emailConfig.blockedDomains', type: 'TEXT_INPUT', label: 'Blocked Domains (comma-separated)', placeholder: 'spam.com', colSpan: 12 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── PHONE (TEXT_INPUT + subType=PHONE → phoneConfig: PhoneConfig) ─────────
+  phone: buildSchema(
+    BASE_SECTION,
+    section('Phone Settings (phoneConfig)', [
+      row(
+        { name: 'phoneConfig.defaultCountryCode', type: 'TEXT_INPUT', label: 'Default Country Code', placeholder: '+91', colSpan: 6 },
+        { name: 'phoneConfig.prefixCountryCode', type: 'SWITCH', label: 'Prefix Country Code', colSpan: 6 },
+      ),
+      {
+        name: 'phoneConfig.supportedCountryCodeLocale',
+        type: 'TEXT_INPUT', label: 'Supported Country Codes (comma-separated)',
+        placeholder: 'IN, US, GB',
+        colSpan: 12,
+        hint: 'Leave blank to allow all country codes'
+      },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── NUMBER (NUMBER_INPUT → numberConfig: NumberConfig) ────────────────────
+  number: buildSchema(
+    BASE_SECTION,
+    section('Number Settings (numberConfig)', [
+      row(
+        { name: 'numberConfig.min', type: 'NUMBER_INPUT', label: 'Min Value', colSpan: 6 },
+        { name: 'numberConfig.max', type: 'NUMBER_INPUT', label: 'Max Value', colSpan: 6 },
+      ),
+      row(
+        { name: 'numberConfig.step', type: 'NUMBER_INPUT', label: 'Step', colSpan: 6, hint: 'Increment by this amount' },
+        { name: 'numberConfig.precision', type: 'NUMBER_INPUT', label: 'Decimal Precision', colSpan: 6, defaultValue: 0 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── DECIMAL (NUMBER_INPUT + precision → numberConfig) ─────────────────────
+  decimal: buildSchema(
+    BASE_SECTION,
+    section('Decimal Number Settings (numberConfig)', [
+      row(
+        { name: 'numberConfig.min', type: 'NUMBER_INPUT', label: 'Min Value', colSpan: 6 },
+        { name: 'numberConfig.max', type: 'NUMBER_INPUT', label: 'Max Value', colSpan: 6 },
+      ),
+      row(
+        { name: 'numberConfig.precision', type: 'NUMBER_INPUT', label: 'Decimal Places', defaultValue: 2, colSpan: 6 },
+        { name: 'numberConfig.step', type: 'NUMBER_INPUT', label: 'Step', defaultValue: 0.01, colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── DATE (DATE → dateConfig: DateConfig) ─────────────────────────────────
+  date: buildSchema(
+    BASE_SECTION,
+    section('Date Settings (dateConfig)', [
+      row(
+        { name: 'dateConfig.minDate', type: 'TEXT_INPUT', label: 'Min Date', placeholder: 'YYYY-MM-DD', colSpan: 6 },
+        { name: 'dateConfig.maxDate', type: 'TEXT_INPUT', label: 'Max Date', placeholder: 'YYYY-MM-DD', colSpan: 6 },
+      ),
+      row(
+        { name: 'dateConfig.allowFuture', type: 'SWITCH', label: 'Allow Future Dates', colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── TIME  ────────────────────────────────────────────────────────────────
+  time: buildSchema(
+    BASE_SECTION,
+    section('Time Settings', [
+      row(F.placeholder, F.hint),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── DATE & TIME  ──────────────────────────────────────────────────────────
+  dateTime: buildSchema(
+    BASE_SECTION,
+    section('Date & Time Settings (dateConfig)', [
+      row(
+        { name: 'dateConfig.minDate', type: 'TEXT_INPUT', label: 'Min Date', placeholder: 'YYYY-MM-DD', colSpan: 6 },
+        { name: 'dateConfig.maxDate', type: 'TEXT_INPUT', label: 'Max Date', placeholder: 'YYYY-MM-DD', colSpan: 6 },
+      ),
+      row(
+        { name: 'dateConfig.allowFuture', type: 'SWITCH', label: 'Allow Future', colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── DROPDOWN (DROPDOWN → optionConfig: OptionConfig) ─────────────────────
+  dropdown: buildSchema(
+    BASE_SECTION_NO_TYPE,
+    section('Dropdown Options (optionConfig)', [
+      {
+        name: 'optionConfig.optionList',
+        type: 'TEXT_INPUT',
+        subType: 'LONG',
+        label: 'Static Options (JSON)',
+        placeholder: '[{"label": "Yes", "code": "Y"}, {"label": "No", "code": "N"}]',
+        colSpan: 12,
+        hint: 'Paste an array of objects with "label" and "code" keys',
+      },
+      { name: 'optionConfig.apiUrl', type: 'TEXT_INPUT', label: 'Options API URL', placeholder: '/api/options', colSpan: 12 },
+      row(
+        { name: 'optionConfig.dataPath', type: 'TEXT_INPUT', label: 'Data Path', placeholder: 'data.items', colSpan: 6 },
+        { name: 'optionConfig.labelPath', type: 'TEXT_INPUT', label: 'Label Path', placeholder: 'name', colSpan: 6 },
+      ),
+      row(
+        { name: 'optionConfig.valuePath', type: 'TEXT_INPUT', label: 'Value Path (code)', placeholder: 'code', colSpan: 6 },
+        { name: 'optionConfig.sortBy', type: 'TEXT_INPUT', label: 'Sort By', placeholder: 'name.text', colSpan: 6 },
+      ),
+      row(
+        { name: 'optionConfig.responsePath', type: 'TEXT_INPUT', label: 'Response Path', placeholder: 'e.g. elements', colSpan: 6 },
+        {
+          name: 'optionConfig.layout',
+          type: 'DROPDOWN', subType: 'SINGLE',
+          label: 'Options Layout',
+          colSpan: 6,
+          optionConfig: { optionList: [{ label: 'Row', code: 'row' }, { label: 'Column', code: 'column' }] },
+        },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── AUTOCOMPLETE (AUTOCOMPLETE → optionConfig) ───────────────────────────
+  autocomplete: buildSchema(
+    BASE_SECTION,
+    section('Autocomplete Settings (optionConfig)', [
+      { name: 'optionConfig.apiUrl', type: 'TEXT_INPUT', label: 'Search API URL', placeholder: '/api/search', colSpan: 12 },
+      { name: 'optionConfig.dataPath', type: 'TEXT_INPUT', label: 'Data Path', placeholder: 'data.items', colSpan: 6 },
+      { name: 'optionConfig.labelPath', type: 'TEXT_INPUT', label: 'Label Path', placeholder: 'name', colSpan: 6 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── MULTI-SELECT (same structure as dropdown) ────────────────────────────
+  multiSelect: buildSchema(
+    BASE_SECTION_NO_TYPE,
+    section('Multi-Select Options (optionConfig)', [
+      {
+        name: 'optionConfig.optionList',
+        type: 'TEXT_INPUT',
+        subType: 'LONG',
+        label: 'Static Options (JSON)',
+        placeholder: '[{"label": "Option A", "code": "A"}]',
+        colSpan: 12,
+        hint: 'Array of objects with "label" and "code" keys',
+      },
+      { name: 'optionConfig.apiUrl', type: 'TEXT_INPUT', label: 'Options API URL', placeholder: '/api/options', colSpan: 12 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── CHECKBOX (CHECKBOX → optionConfig for list, no optionConfig for single)
+  checkbox: buildSchema(
+    BASE_SECTION,
+    section('Checkbox List Options (optionConfig)', [
+      {
+        name: 'optionConfig.optionList',
+        type: 'TEXT_INPUT',
+        subType: 'LONG',
+        label: 'Checkbox Options (JSON) — leave blank for single checkbox',
+        placeholder: '[{"label": "Yes", "code": "Y"}]',
+        colSpan: 12,
+      },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── MUTLI-CHECKBOX ───────────────────────────────────────────────────────
+  multiCheckbox: buildSchema(
+    BASE_SECTION,
+    section('Checkbox List Options (optionConfig)', [
+      {
+        name: 'optionConfig.optionList',
+        type: 'TEXT_INPUT',
+        subType: 'LONG',
+        label: 'Checkbox Options (JSON)',
+        placeholder: '[{"label": "Opt A", "code": "A"}]',
+        colSpan: 12,
+      },
+      { name: 'optionConfig.apiUrl', type: 'TEXT_INPUT', label: 'Options API URL', placeholder: '/api/options', colSpan: 12 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── TOGGLE / SWITCH (SWITCH → no extra config except basics) ─────────────
+  toggle: buildSchema(
+    section('Basic Settings', [
+      row(F.label, F.name),
+      row(F.colSpan, F.defaultValue),
+      F.hint,
+    ]),
+    FLAGS_SECTION,
+    section('Advanced', [
+      F.visibilityExpression,
+      row(F.payloadPath, F.className),
+      F.errorMessage,
+    ]),
+  ),
+
+  // ── CHIPS ────────────────────────────────────────────────────────────────
+  chip: buildSchema(
+    BASE_SECTION,
+    section('Chip Options (optionConfig)', [
+      {
+        name: 'optionConfig.optionList',
+        type: 'TEXT_INPUT',
+        subType: 'LONG',
+        label: 'Chip Options (JSON)',
+        placeholder: '[{"label": "Tag 1", "code": "T1"}]',
+        colSpan: 12,
+      },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── RICH TEXT (RICH_TEXT → richTextConfig: RichTextConfig) ───────────────
+  richText: buildSchema(
+    BASE_SECTION,
+    section('Rich Text Editor Settings (richTextConfig)', [
+      row(
+        { name: 'richTextConfig.height', type: 'TEXT_INPUT', label: 'Editor Height', placeholder: '300px', colSpan: 6 },
+        { name: 'richTextConfig.maxLength', type: 'NUMBER_INPUT', label: 'Max Length (chars)', colSpan: 6 },
+      ),
+      row(
+        { name: 'richTextConfig.placeholder', type: 'TEXT_INPUT', label: 'Editor Placeholder', placeholder: 'Enter content here...', colSpan: 6 },
+        { name: 'richTextConfig.showCharCount', type: 'SWITCH', label: 'Show Char Count', colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── FILE UPLOAD (FILE_UPLOAD → attachmentConfig: AttachmentConfig) ────────
+  file: buildSchema(
+    BASE_SECTION,
+    section('File Upload Settings (attachmentConfig)', [
+      row(
+        { name: 'attachmentConfig.multiple', type: 'SWITCH', label: 'Allow Multiple Files', colSpan: 6 },
+        { name: 'attachmentConfig.maxFiles', type: 'NUMBER_INPUT', label: 'Max Files', colSpan: 6, hint: 'Only applies when multiple=true' },
+      ),
+      row(
+        { name: 'attachmentConfig.maxSizeMB', type: 'NUMBER_INPUT', label: 'Max File Size (MB)', colSpan: 6 },
+        { name: 'attachmentConfig.accept', type: 'TEXT_INPUT', label: 'Accepted Types', placeholder: '.pdf,.jpg,image/*', colSpan: 6 },
+      ),
+      { name: 'attachmentConfig.acceptLabel', type: 'TEXT_INPUT', label: 'Hint in Drop Zone', placeholder: 'JPG, PNG, PDF (max 5 MB)', colSpan: 12 },
+      { name: 'attachmentConfig.uploadUrl', type: 'TEXT_INPUT', label: 'Upload API URL', placeholder: '/api/upload', colSpan: 12 },
+      { name: 'attachmentConfig.deleteUrl', type: 'TEXT_INPUT', label: 'Delete API URL', placeholder: '/api/file/{id}', colSpan: 12 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── RATING (RATING → ratingConfig: RatingConfig) ─────────────────────────
+  rating: buildSchema(
+    BASE_SECTION,
+    section('Rating Settings (ratingConfig)', [
+      row(
+        { name: 'ratingConfig.maxRating', type: 'NUMBER_INPUT', label: 'Max Stars', defaultValue: 5, colSpan: 6 },
+        { name: 'ratingConfig.allowHalf', type: 'SWITCH', label: 'Allow Half Stars', colSpan: 6 },
+      ),
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── RADIO (RADIO → optionConfig for list) ────────────────────────────────
+  radio: buildSchema(
+    BASE_SECTION,
+    section('Radio Options (optionConfig)', [
+      {
+        name: 'optionConfig.optionList',
+        type: 'TEXT_INPUT',
+        subType: 'LONG',
+        label: 'Radio Options (JSON)',
+        placeholder: '[{"label": "Male", "code": "M"}, {"label": "Female", "code": "F"}]',
+        colSpan: 12,
+      },
+      { name: 'optionConfig.apiUrl', type: 'TEXT_INPUT', label: 'Options API URL', placeholder: '/api/options', colSpan: 12 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── LOCATION (LOCATION → locationConfig: LocationConfig) ─────────────────
+  location: buildSchema(
+    BASE_SECTION,
+    section('Location Settings (locationConfig)', [
+      row(
+        {
+          name: 'locationConfig.defaultTab',
+          type: 'DROPDOWN', subType: 'SINGLE',
+          label: 'Default Tab',
+          colSpan: 6,
+          optionConfig: { optionList: [{ label: 'Venue', code: 'VENUE' }, { label: 'Online', code: 'ONLINE' }, { label: 'TBA', code: 'TBA' }] },
+        },
+        { name: 'locationConfig.maxLocations', type: 'NUMBER_INPUT', label: 'Max Locations', colSpan: 6, defaultValue: 5 },
+      ),
+      row(
+        { name: 'locationConfig.allowMulti', type: 'SWITCH', label: 'Allow Multiple Locations', colSpan: 6 },
+        { name: 'locationConfig.showMap', type: 'SWITCH', label: 'Show Map Preview', colSpan: 6 },
+      ),
+      { name: 'locationConfig.googleMapsApiKey', type: 'TEXT_INPUT', label: 'Google Maps API Key', colSpan: 12 },
+      { name: 'locationConfig.venuePlaceholder', type: 'TEXT_INPUT', label: 'Venue Search Placeholder', colSpan: 6 },
+      { name: 'locationConfig.onlinePlaceholder', type: 'TEXT_INPUT', label: 'Online URL Placeholder', colSpan: 6 },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+
+  // ── GENERATED / FORMULA ──────────────────────────────────────────────────
+  generated: buildSchema(
+    BASE_SECTION,
+    section('Formula Settings (generatedConfig)', [
+      { 
+        name: 'generatedConfig.formula', 
+        type: 'TEXT_INPUT', 
+        label: 'Formula Expression', 
+        placeholder: 'data.price * data.quantity', 
+        colSpan: 12,
+        hint: 'Use data.field_name to reference other fields'
+      },
+    ]),
+    FLAGS_SECTION,
+    ADVANCED_SECTION,
+  ),
+  
+  // ── GROUP & SECTION ───────────────────────────────────────────────────────
+  group: buildSchema(
+    section('Group Settings', [
+      row(F.label, F.name),
+      row(F.colSpan),
+      F.isEnabled,
+    ]),
+    ADVANCED_SECTION,
+  ),
+
+  section: buildSchema(
+    section('Section Settings', [
+      row(F.label, F.name),
+      F.isEnabled,
+    ]),
+    ADVANCED_SECTION,
+  ),
+};

package/src/lib/modules/form-builder/form-builder.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SmartFormModule } from '../smart-form/smart-form.module';
+import { FormComponentsModule } from '../form-components/form-components.module';
+
+import { FieldSelectionComponent } from './components/field-selection/field-selection.component';
+import { FieldConfiguratorComponent } from './components/field-configurator/field-configurator.component';
+import { GroupNodeComponent } from './components/field-selection/group-node/group-node.component';
+import { SelectionSectionNodeComponent } from './components/field-selection/selection-section-node/selection-section-node.component';
+import { SelectionFieldNodeComponent } from './components/field-selection/selection-field-node/selection-field-node.component';
+import { ConfiguratorTreeComponent } from './components/field-configurator/configurator-tree/configurator-tree.component';
+import { ConfiguratorConfigPanelComponent } from './components/field-configurator/configurator-config-panel/configurator-config-panel.component';
+
+const COMPONENTS = [
+  FieldSelectionComponent,
+  FieldConfiguratorComponent,
+  GroupNodeComponent,
+  SelectionSectionNodeComponent,
+  SelectionFieldNodeComponent,
+  ConfiguratorTreeComponent,
+  ConfiguratorConfigPanelComponent,
+];
+
+@NgModule({
+  declarations: [...COMPONENTS],
+  imports: [
+    CommonModule,
+    SmartFormModule,
+    FormComponentsModule,
+  ],
+  exports: [
+    FieldSelectionComponent,
+    FieldConfiguratorComponent,
+  ],
+})
+export class FormBuilderModule {}