platformcommons-web-lib 1.0.0

package/src/lib/modules/form-builder/form-builder.theme.scss

@@ -0,0 +1,212 @@
+@use 'sass:map';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Form Builder Theme
+// ─────────────────────────────────────────────────────────────────────────────
+
+$form-builder-config: (
+  bg: #ffffff,
+  border-color: #E5E7EB,
+  header-bg: #F9FAFB,
+  accent-color: #3B82F6,
+  
+  // Step Indicator
+  step-bubble-size: 32px,
+  step-bubble-active-bg: #3B82F6,
+  step-bubble-active-color: #ffffff,
+  step-bubble-inactive-bg: #E5E7EB,
+  step-bubble-inactive-color: #6B7280,
+  
+  // Sidebar / Tree
+  sidebar-width: 320px,
+  node-hover-bg: #F3F4F6,
+  node-selected-bg: #EFF6FF,
+  node-selected-border: #3B82F6,
+  
+  // Config Panel (Premium Card Style)
+  config-panel-padding: 32px,
+  config-card-bg: #ffffff,
+  config-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
+  config-section-gap: 24px,
+);
+
+@mixin form-builder-theme($user-config: ()) {
+  $config: map.merge($form-builder-config, $user-config);
+
+  // Variables
+  --fb-bg: #{map.get($config, bg)};
+  --fb-border-color: #{map.get($config, border-color)};
+  --fb-accent: #{map.get($config, accent-color)};
+  --fb-font-family: 'Inter', sans-serif;
+
+  background: var(--fb-bg);
+  font-family: var(--fb-font-family);
+
+  // Premium Stepper (Lifecycle)
+  .fb-stepper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+    padding: 1.5rem;
+    border-radius: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    margin-bottom: 2rem;
+
+    .fb-step {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      cursor: pointer;
+      padding: 0.5rem 1rem;
+      border-radius: 0.75rem;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:hover { background: #F3F4F6; }
+
+      &.active {
+        background: #EFF6FF;
+        .fb-step__icon {
+          background: var(--fb-accent);
+          color: #ffffff;
+          border-color: var(--fb-accent);
+          transform: scale(1.1);
+        }
+        .fb-step__label {
+          color: #111827;
+          font-weight: 700;
+        }
+      }
+
+      &.completed .fb-step__icon {
+        background: #10B981;
+        color: #ffffff;
+        border-color: #10B981;
+      }
+
+      &__icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 2px solid #D1D5DB;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 700;
+        color: #6B7280;
+        background: #ffffff;
+        transition: all 0.3s;
+        flex-shrink: 0;
+      }
+
+      &__label {
+        font-size: 14px;
+        font-weight: 600;
+        color: #6B7280;
+        white-space: nowrap;
+      }
+
+      &__line {
+        width: 60px;
+        height: 2px;
+        background: #E5E7EB;
+        margin: 0 1rem;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // ── Field Selection Component ───────────────────────────────────────────────
+  --fb-fs-padding: 16px;
+  --fb-fs-group-gap: 16px;
+  --fb-fs-group-bg: #ffffff;
+  --fb-fs-group-border: #e5e7eb;
+  --fb-fs-group-radius: 12px;
+  --fb-fs-header-padding: 14px 16px;
+  --fb-fs-header-gap: 10px;
+  --fb-fs-header-hover-bg: #f9fafb;
+  --fb-fs-chevron-color: #9ca3af;
+  --fb-fs-group-label-size: 14px;
+  --fb-fs-group-label-color: #111827;
+  --fb-fs-body-padding: 0 16px 16px 28px;
+  --fb-fs-section-gap: 12px;
+  --fb-fs-section-border: #e5e7eb;
+  --fb-fs-section-radius: 10px;
+  --fb-fs-section-bg: #ffffff;
+  --fb-fs-section-nested-border: #f3f4f6;
+  --fb-fs-section-nested-bg: #fafafa;
+  --fb-fs-section-header-padding: 10px 14px;
+  --fb-fs-section-header-hover: #f9fafb;
+  --fb-fs-section-label-size: 13px;
+  --fb-fs-section-label-color: #111827;
+  --fb-fs-section-body-padding: 4px 14px 14px 28px;
+  --fb-fs-field-gap: 6px;
+  --fb-fs-field-padding: 8px 12px;
+  --fb-fs-field-radius: 6px;
+  --fb-fs-field-bg: #ffffff;
+  --fb-fs-field-border: #e5e7eb;
+  --fb-fs-field-hover-border: #3b82f6;
+  --fb-fs-field-hover-bg: #f8fafc;
+  --fb-fs-field-selected-bg: #eff6ff;
+  --fb-fs-field-selected-border: #bfdbfe;
+  --fb-fs-field-locked-bg: #f3f4f6;
+  --fb-fs-field-locked-color: #6b7280;
+  --fb-fs-field-label-size: 13px;
+  --fb-fs-field-label-color: #111827;
+  --fb-fs-toggle-width: 36px;
+  --fb-fs-toggle-height: 20px;
+  --fb-fs-toggle-off-bg: #d1d5db;
+  --fb-fs-toggle-on-bg: #f5a623;
+  --fb-fs-toggle-thumb: #ffffff;
+  --fb-fs-checkbox-border: #d1d5db;
+  --fb-fs-checkbox-checked-bg: #3b82f6;
+  --fb-fs-lock-color: #9ca3af;
+  --fb-fs-empty-color: #9ca3af;
+
+  // ── Field Configurator Component ──────────────────────────────────────────
+  --fb-fc-bg: #ffffff;
+  --fb-fc-sidebar-width: 400px;
+  --fb-fc-sidebar-bg: #f9fafb;
+  --fb-fc-main-bg: #ffffff;
+  --fb-fc-border: #e5e7eb;
+  --fb-fc-tree-header-bg: #ffffff;
+  --fb-fc-tree-title-color: #111827;
+  --fb-fc-tree-subtitle-color: #6b7280;
+  --fb-fc-section-divider: #f3f4f6;
+  --fb-fc-section-hover: #f9fafb;
+  --fb-fc-chevron-color: #9ca3af;
+  --fb-fc-section-label-color: #111827;
+  --fb-fc-item-bg: #ffffff;
+  --fb-fc-item-border: #e5e7eb;
+  --fb-fc-item-hover-border: #3b82f6;
+  --fb-fc-item-active-border: #3b82f6;
+  --fb-fc-item-active-bg: #f0f7ff;
+  --fb-fc-drag-color: #d1d5db;
+  --fb-fc-item-label-color: #111827;
+  --fb-fc-item-type-color: #6b7280;
+  --fb-fc-panel-bg: #f9fafb;
+  --fb-fc-header-bg: #ffffff;
+  --fb-fc-title-color: #111827;
+  --fb-fc-badge-bg: #eff6ff;
+  --fb-fc-badge-color: #3b82f6;
+  --fb-fc-badge-border: #dbeafe;
+  --fb-fc-card-bg: #ffffff;
+  --fb-fc-card-border: #e5e7eb;
+  --fb-fc-accent: #3b82f6;
+  --fb-fc-empty-color: #9ca3af;
+  // ── Type Switcher (Standalone header select) ─────────────────────────────
+  --fb-fc-type-label-color: #6b7280;
+  --fb-fc-type-label-size: 0.75rem;
+  --fb-fc-type-select-height: 36px;
+  --fb-fc-type-select-border: #d1d5db;
+  --fb-fc-type-select-radius: 8px;
+  --fb-fc-type-select-bg: #ffffff;
+  --fb-fc-type-select-color: #111827;
+  --fb-fc-type-select-hover-border: #9ca3af;
+
+  // Shared Components Overrides
+  ::ng-deep lib-button button {
+    font-family: var(--fb-font-family) !important;
+  }
+}

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

@@ -0,0 +1,9 @@
+export * from './form-builder.module';
+export * from './components/field-selection/field-selection.component';
+export * from './components/field-configurator/field-configurator.component';
+export * from './models/builder.models';
+export * from './models/field-selection.models';
+export * from './models/field-configurator.models';
+export * from './services/field-selection.service';
+export * from './services/field-configurator.service';
+export * from './services/form-schema-tree.service';

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

@@ -0,0 +1,7 @@
+import { FormSchema } from '../../../modules/smart-form/models/form-schema.model';
+
+/**
+ * Maps a builder field type key to a FormSchema used to generate
+ * the configuration panel for that field type.
+ */
+export type FieldTypeSchemaMap = Record<string, FormSchema>;

package/src/lib/modules/form-builder/models/field-configurator.models.ts

@@ -0,0 +1,38 @@
+import { FieldConfig } from '../../smart-form/models/form-schema.model';
+
+/**
+ * Metadata about the currently selected field in the configurator.
+ */
+export interface ConfiguratorFieldInfo {
+  /** Reference to the FieldConfig being edited */
+  fieldConfig: FieldConfig;
+  /** Display label of the parent group */
+  groupLabel: string;
+  /** Display label of the parent section */
+  sectionLabel: string;
+  /** Index path used to locate this field inside the FormSchema tree */
+  path: number[];
+}
+
+/**
+ * A node in the configurator left-panel tree.
+ * Represents either a group, section, or field.
+ */
+export type ConfiguratorNodeType = 'group' | 'section' | 'field';
+
+export interface ConfiguratorTreeNode {
+  /** Unique identifier (name or generated index-based key) */
+  id: string;
+  /** Node display label */
+  label: string;
+  /** Node type */
+  type: ConfiguratorNodeType;
+  /** Whether the node is expanded (for groups/sections) */
+  expanded: boolean;
+  /** Reference to the FieldConfig (only for field nodes) */
+  fieldConfig: FieldConfig | null;
+  /** Index path to this node in FormSchema */
+  path: number[];
+  /** Child nodes */
+  children: ConfiguratorTreeNode[];
+}

package/src/lib/modules/form-builder/models/field-selection.models.ts

@@ -0,0 +1,51 @@
+import { FieldConfig, SectionConfig } from '../../smart-form/models/form-schema.model';
+
+/**
+ * Wraps a FieldConfig leaf with selection metadata for the UI tree.
+ */
+export interface SelectionFieldNode {
+  /** Reference back to the original FieldConfig */
+  fieldConfig: FieldConfig;
+  /** Whether this field is selected (checkbox state) */
+  selected: boolean;
+  /** If true, the field cannot be deselected by the user */
+  isLocked: boolean;
+}
+
+/**
+ * Wraps a section (SUBFIELDS / nested sectionConfig) with toggle + tree metadata.
+ * Sections can recursively contain child sections.
+ */
+export interface SelectionSectionNode {
+  /** Section label */
+  label: string;
+  /** The original sectionConfig reference (if applicable) */
+  sectionConfig: SectionConfig | null;
+  /** The parent FieldConfig that owns this sectionConfig (type GROUP/SUBFIELDS) */
+  parentFieldConfig: FieldConfig | null;
+  /** Whether the section toggle is ON */
+  enabled: boolean;
+  /** Whether the section is visually expanded in the tree */
+  expanded: boolean;
+  /** Leaf fields inside this section */
+  fields: SelectionFieldNode[];
+  /** Recursive child sections */
+  subsections: SelectionSectionNode[];
+}
+
+/**
+ * Top-level group node (maps to a GROUP field in stepperConfig.children
+ * or a top-level sectionConfig in a SECTION form).
+ */
+export interface SelectionGroupNode {
+  /** Group label */
+  label: string;
+  /** The original FieldConfig of type GROUP (stepper forms) or null (section form) */
+  groupFieldConfig: FieldConfig | null;
+  /** Whether the entire group toggle is ON */
+  enabled: boolean;
+  /** Whether the group is visually expanded */
+  expanded: boolean;
+  /** Sections inside this group */
+  sections: SelectionSectionNode[];
+}

package/src/lib/modules/form-builder/services/field-configurator.service.ts

@@ -0,0 +1,258 @@
+import { Injectable, computed, signal } from '@angular/core';
+import { FormSchema, FieldConfig } from '../../smart-form/models/form-schema.model';
+import {
+  ConfiguratorTreeNode,
+  ConfiguratorFieldInfo,
+} from '../models/field-configurator.models';
+import { FormSchemaTreeService } from '../services/form-schema-tree.service';
+
+interface FieldConfiguratorState {
+  tree: ConfiguratorTreeNode[];
+  selectedFieldPath: number[] | null;
+  schema: FormSchema | null;
+}
+
+/**
+ * Signal-based service for the field-configurator component.
+ * Manages the tree + selected field + config panel state.
+ */
+@Injectable()
+export class FieldConfiguratorService {
+  private readonly _state = signal<FieldConfiguratorState>({
+    tree: [],
+    selectedFieldPath: null,
+    schema: null,
+  });
+
+  private readonly treeService = new FormSchemaTreeService();
+
+  // ── Computed slices ─────────────────────────────────────────────
+  readonly tree = computed(() => this._state().tree);
+  readonly schema = computed(() => this._state().schema);
+  readonly selectedFieldPath = computed(() => this._state().selectedFieldPath);
+
+  readonly selectedField = computed<FieldConfig | null>(() => {
+    const { schema, selectedFieldPath } = this._state();
+    if (!schema || !selectedFieldPath) return null;
+    return this.treeService.findFieldByPath(schema, selectedFieldPath);
+  });
+
+  readonly selectedFieldInfo = computed<ConfiguratorFieldInfo | null>(() => {
+    const field = this.selectedField();
+    const path = this.selectedFieldPath();
+    if (!field || !path) return null;
+
+    // Walk the tree to find group/section labels
+    const labels = this._getParentLabels(this._state().tree, path);
+
+    return {
+      fieldConfig: field,
+      groupLabel: labels.groupLabel,
+      sectionLabel: labels.sectionLabel,
+      path,
+    };
+  });
+
+  /**
+   * Returns the builder-compatible field type string for the currently selected field.
+   * Used to look up the config schema from field-type-schema.map.ts.
+   */
+  readonly selectedFieldBuilderType = computed<string | null>(() => {
+    const field = this.selectedField();
+    if (!field) return null;
+    return this.treeService.mapFieldTypeToBuilderType(field.type, field.subType);
+  });
+
+  // ── Mutators ────────────────────────────────────────────────────
+
+  /**
+   * Initialize the store from a FormSchema.
+   */
+  loadSchema(schema: FormSchema, preserveSelection = false): void {
+    // If it's the exact same object reference and we are not forcing a reset, skip.
+    if (this._state().schema === schema && preserveSelection) return;
+
+    const tree = this.treeService.parseSchemaToConfiguratorTree(schema);
+    
+    this._state.update(s => {
+      // If preserveSelection is truthy, we definitely keep it.
+      // Otherwise, we still try to keep it IF the path is still valid in the new schema.
+      let newPath = s.selectedFieldPath;
+      if (!preserveSelection && newPath) {
+        const stillExists = !!this.treeService.findFieldByPath(schema, newPath);
+        if (!stillExists) newPath = null;
+      }
+
+      return {
+        ...s,
+        tree,
+        selectedFieldPath: newPath,
+        schema: JSON.parse(JSON.stringify(schema)),
+      };
+    });
+  }
+
+  /**
+   * Select a field by its path. Pass null to deselect.
+   */
+  selectField(path: number[] | null): void {
+    this._state.update(s => ({ ...s, selectedFieldPath: path }));
+  }
+
+  /**
+   * Toggle a tree node's expanded state.
+   */
+  toggleNodeExpanded(nodeId: string): void {
+    this._state.update(s => ({
+      ...s,
+      tree: this._toggleExpanded(s.tree, nodeId),
+    }));
+  }
+
+  /**
+   * Apply a config patch to the currently selected field.
+   * Rebuilds the schema and tree nodes immutably.
+   */
+  patchSelectedField(patch: Partial<FieldConfig>): void {
+    const { schema, selectedFieldPath, tree } = this._state();
+    if (!schema || !selectedFieldPath) return;
+
+    const newSchema = this.treeService.applyFieldPatchToSchema(
+      selectedFieldPath,
+      patch,
+      schema,
+    );
+
+    // Rebuild the tree to reflect label changes etc.
+    const newTree = this.treeService.parseSchemaToConfiguratorTree(newSchema);
+    // Preserve expanded states from the old tree
+    this._restoreExpandedStates(tree, newTree);
+
+    this._state.set({
+      schema: newSchema,
+      selectedFieldPath,
+      tree: newTree,
+    });
+  }
+
+  /**
+   * Change the type (and optionally subType) of the currently selected field.
+   * Mapping goes from builderType keys (e.g. 'richText') → {type, subType?}.
+   * DROPDOWN fields cannot be changed and are guarded here as well.
+   */
+  changeFieldType(builderType: string): void {
+    const currentField = this.selectedField();
+    if (!currentField) return;
+    // Guard: never change a DROPDOWN-based field
+    const t = currentField.type?.toUpperCase();
+    if (t === 'DROPDOWN' || t === 'MULTI_SELECT') return;
+
+    const TYPE_MAP: Record<string, { type: string; subType?: string }> = {
+      shortText:     { type: 'TEXT_INPUT' },
+      longText:      { type: 'TEXT_INPUT', subType: 'LONG' },
+      email:         { type: 'TEXT_INPUT', subType: 'EMAIL' },
+      phone:         { type: 'TEXT_INPUT', subType: 'PHONE' },
+      password:      { type: 'TEXT_INPUT', subType: 'PASSWORD' },
+      number:        { type: 'NUMBER_INPUT', subType: 'INTEGER' },
+      decimal:       { type: 'NUMBER_INPUT', subType: 'DECIMAL' },
+      date:          { type: 'DATE', subType: 'SINGLE' },
+      time:          { type: 'TIME', subType: 'SINGLE' },
+      dateTime:      { type: 'DATE', subType: 'DATETIME' },
+      checkbox:      { type: 'CHECKBOX', subType: 'BOOL' },
+      multiCheckbox: { type: 'CHECKBOX', subType: 'LIST' },
+      radio:         { type: 'RADIO', subType: 'SINGLE' },
+      toggle:        { type: 'SWITCH', subType: 'BOOL' },
+      chip:          { type: 'CHIP', subType: 'MULTIPLE' },
+      richText:      { type: 'RICH_TEXT' },
+      file:          { type: 'FILE_UPLOAD', subType: 'SINGLE' },
+      rating:        { type: 'RATING', subType: 'STAR' },
+      location:      { type: 'LOCATION' },
+      generated:     { type: 'GENERATED', subType: 'FORMULA' },
+      multiSelect:   { type: 'MULTI_SELECT' },
+      autocomplete:  { type: 'AUTOCOMPLETE', subType: 'SINGLE' },
+      dropdown:      { type: 'DROPDOWN', subType: 'SINGLE' },
+      multiDropdown: { type: 'MULTI_SELECT' },
+    };
+
+    const mapping = TYPE_MAP[builderType];
+    if (!mapping) return;
+
+    const patch: Partial<FieldConfig> = { type: mapping.type };
+    if (mapping.subType !== undefined) {
+      patch.subType = mapping.subType;
+    } else {
+      // Clear stale subType from previous field type
+      patch.subType = undefined;
+    }
+    this.patchSelectedField(patch);
+  }
+
+  /**
+   * Get the current schema (with all applied modifications).
+   */
+  getCurrentSchema(): FormSchema | null {
+    return this._state().schema;
+  }
+
+  // ── Private helpers ─────────────────────────────────────────────
+
+  private _toggleExpanded(nodes: ConfiguratorTreeNode[], nodeId: string): ConfiguratorTreeNode[] {
+    return nodes.map(n => {
+      if (n.id === nodeId) {
+        return { ...n, expanded: !n.expanded };
+      }
+      if (n.children.length > 0) {
+        return { ...n, children: this._toggleExpanded(n.children, nodeId) };
+      }
+      return n;
+    });
+  }
+
+  private _restoreExpandedStates(
+    oldNodes: ConfiguratorTreeNode[],
+    newNodes: ConfiguratorTreeNode[],
+  ): void {
+    for (const newNode of newNodes) {
+      const oldNode = oldNodes.find(o => o.id === newNode.id);
+      if (oldNode) {
+        newNode.expanded = oldNode.expanded;
+        if (oldNode.children.length > 0 && newNode.children.length > 0) {
+          this._restoreExpandedStates(oldNode.children, newNode.children);
+        }
+      }
+    }
+  }
+
+  private _getParentLabels(
+    nodes: ConfiguratorTreeNode[],
+    path: number[],
+  ): { groupLabel: string; sectionLabel: string } {
+    let groupLabel = '';
+    let sectionLabel = '';
+
+    const findInNodes = (nodeList: ConfiguratorTreeNode[], targetPath: number[]): boolean => {
+      for (const node of nodeList) {
+        if (this._pathsEqual(node.path, targetPath)) {
+          return true;
+        }
+        if (node.children.length > 0) {
+          const found = findInNodes(node.children, targetPath);
+          if (found) {
+            if (node.type === 'group') groupLabel = node.label;
+            if (node.type === 'section') sectionLabel = node.label;
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    findInNodes(nodes, path);
+    return { groupLabel, sectionLabel };
+  }
+
+  private _pathsEqual(a: number[], b: number[]): boolean {
+    if (a.length !== b.length) return false;
+    return a.every((val, i) => val === b[i]);
+  }
+}