platformcommons-web-lib 1.0.0

package/src/lib/modules/form-builder/components/field-configurator/configurator-tree/configurator-tree.component.scss

@@ -0,0 +1,210 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;  /* Critical: prevent host from growing beyond sidebar bounds */
+}
+
+.fb-cfg-tree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;  /* prevent the wrapper from growing */
+
+  &__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--fb-fc-border, #e5e7eb);
+    background: var(--fb-fc-tree-header-bg, #ffffff);
+    flex-shrink: 0;  /* IMPORTANT: header never grows or shrinks */
+
+    @media (max-width: 768px) {
+      padding: 12px 16px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 10px 12px;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--fb-fc-tree-title-color, #111827);
+
+    @media (max-width: 640px) {
+      font-size: 13px;
+    }
+  }
+
+  &__subtitle {
+    margin: 4px 0 0;
+    font-size: 11px;
+    color: var(--fb-fc-tree-subtitle-color, #6b7280);
+    letter-spacing: 0.02em;
+
+    @media (max-width: 640px) {
+      font-size: 10px;
+    }
+  }
+
+  &__scrollable {
+    flex: 1;           /* takes remaining height after header */
+    min-height: 0;     /* CRITICAL: allows flex child to shrink below content size */
+    overflow-y: auto;  /* enables vertical scrolling */
+    overflow-x: hidden;
+    padding: 16px;
+
+    @media (max-width: 768px) {
+      padding: 12px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 8px;
+    }
+  }
+
+  &__empty {
+    padding: 32px 16px;
+    text-align: center;
+    color: var(--fb-fc-empty-color, #9ca3af);
+    font-size: 13px;
+
+    @media (max-width: 640px) {
+      padding: 24px 12px;
+      font-size: 12px;
+    }
+  }
+
+  /* Remove the old __body and __node selectors — replaced by __scrollable */
+}
+
+.fb-cfg-tree-section {
+  margin-bottom: 16px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 12px;
+  }
+
+  @media (max-width: 640px) {
+    margin-bottom: 8px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px 8px;
+    border-bottom: 1px solid var(--fb-fc-section-divider, #f3f4f6);
+    margin-bottom: 8px;
+    cursor: pointer;
+
+    @media (max-width: 640px) {
+      padding: 3px 6px 6px;
+      margin-bottom: 6px;
+    }
+
+    &:hover {
+      background: var(--fb-fc-section-hover, #f9fafb);
+      border-radius: 6px;
+    }
+  }
+
+  &__title-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    @media (max-width: 640px) {
+      gap: 4px;
+    }
+  }
+
+  &__chevron {
+    display: flex;
+    color: var(--fb-fc-chevron-color, #9ca3af);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &--expanded {
+      transform: rotate(90deg);
+    }
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--fb-fc-section-label-color, #111827);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
+    @media (max-width: 640px) {
+      font-size: 12px;
+      letter-spacing: 0.02em;
+    }
+  }
+
+  &__children {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    @media (max-width: 640px) {
+      gap: 6px;
+    }
+  }
+}
+
+
+.fb-cfg-tree-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: var(--fb-fc-item-bg, #ffffff);
+  border: 1px solid var(--fb-fc-item-border, #e5e7eb);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    border-color: var(--fb-fc-item-hover-border, #3b82f6);
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
+  }
+
+  &--active {
+    border-color: var(--fb-fc-item-active-border, #3b82f6);
+    background: var(--fb-fc-item-active-bg, #f0f7ff);
+    box-shadow: 0 0 0 1px var(--fb-fc-item-active-border, #3b82f6);
+  }
+
+  &__drag {
+    color: var(--fb-fc-drag-color, #d1d5db);
+    cursor: grab;
+    margin-right: 8px;
+    display: flex;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--fb-fc-item-label-color, #111827);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__type {
+    font-size: 10px;
+    color: var(--fb-fc-item-type-color, #6b7280);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+  }
+}

package/src/lib/modules/form-builder/components/field-configurator/configurator-tree/configurator-tree.component.ts

@@ -0,0 +1,55 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConfiguratorTreeNode } from '../../../models/field-configurator.models';
+
+@Component({
+  selector: 'lib-configurator-tree',
+  standalone: false,
+  templateUrl: './configurator-tree.component.html',
+  styleUrls: ['./configurator-tree.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfiguratorTreeComponent {
+  @Input() tree: ConfiguratorTreeNode[] = [];
+  @Input() selectedFieldPath: number[] | null = null;
+
+  @Output() selectField = new EventEmitter<number[]>();
+  @Output() toggleExpanded = new EventEmitter<string>();
+
+  onNodeClick(node: ConfiguratorTreeNode): void {
+    if (node.type === 'field') {
+      this.selectField.emit(node.path);
+    } else {
+      this.toggleExpanded.emit(node.id);
+    }
+  }
+
+  onFieldSelect(node: ConfiguratorTreeNode): void {
+    this.selectField.emit(node.path);
+  }
+
+  onToggleExpand(node: ConfiguratorTreeNode, event: Event): void {
+    event.stopPropagation();
+    this.toggleExpanded.emit(node.id);
+  }
+
+  isSelected(node: ConfiguratorTreeNode): boolean {
+    if (!this.selectedFieldPath || !node.path) return false;
+    return this.pathsEqual(node.path, this.selectedFieldPath);
+  }
+
+  trackByNodeId(_index: number, node: ConfiguratorTreeNode): string {
+    return node.id;
+  }
+
+  private pathsEqual(a: number[], b: number[]): boolean {
+    if (a.length !== b.length) return false;
+    return a.every((v, i) => v === b[i]);
+  }
+}

package/src/lib/modules/form-builder/components/field-configurator/field-configurator.component.html

@@ -0,0 +1,25 @@
+<div class="fb-configurator">
+  <div class="fb-configurator__layout">
+    <div class="fb-configurator__sidebar">
+      <lib-configurator-tree
+        [tree]="store.tree()"
+        [selectedFieldPath]="store.selectedFieldPath()"
+        (selectField)="onFieldSelected($event)"
+        (toggleExpanded)="onNodeToggleExpanded($event)"
+      />
+    </div>
+
+    <div class="fb-configurator__main">
+      <lib-configurator-config-panel
+        [selectedField]="store.selectedField()"
+        [selectedFieldInfo]="store.selectedFieldInfo()"
+        [builderFieldType]="store.selectedFieldBuilderType()"
+        [fieldTypeSchemaMap]="finalFieldTypeSchemaMap"
+        [showOptionConfig]="showOptionConfig"
+        [lockedFieldNames]="lockedFieldNames"
+        (configChange)="onConfigChange($event)"
+        (typeChange)="onTypeChange($event)"
+      />
+    </div>
+  </div>
+</div>

package/src/lib/modules/form-builder/components/field-configurator/field-configurator.component.scss

@@ -0,0 +1,82 @@
+.fb-configurator {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--fb-fc-bg, #ffffff);
+  font-family: var(--fb-font-family, 'Inter', sans-serif);
+
+  &__layout {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+
+    // Stack layout vertically when space is tight
+    @media (max-width: 768px) {
+      flex-direction: column;
+    }
+  }
+
+  &__sidebar {
+    /**
+     * Desktop: Fixed minimum width (280px) to ensure tree readability
+     * Grows/shrinks based on available space, but never below 280px
+     * When combined with side nav collapse, this adapts naturally
+     */
+    flex: 0 0 280px;
+    border-right: 1px solid var(--fb-fc-border, #e5e7eb);
+    background: var(--fb-fc-sidebar-bg, #f9fafb);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 0;
+
+    // Medium screens: Slightly narrower
+    @media (max-width: 1024px) {
+      flex: 0 0 250px;
+    }
+
+    // Larger monitors: More space for tree
+    @media (min-width: 1440px) {
+      flex: 0 0 300px;
+    }
+
+    // Small screens: Stack vertically
+    @media (max-width: 768px) {
+      flex: 0 0 auto;
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--fb-fc-border, #e5e7eb);
+      max-height: 40vh; /* Use viewport-relative sizing */
+    }
+
+    // Mobile: Further optimize
+    @media (max-width: 640px) {
+      max-height: 35vh;
+    }
+  }
+
+  &__main {
+    /**
+     * Takes all remaining horizontal space after sidebar
+     * min-width: 0 is CRITICAL - allows flex container to shrink below content size
+     * This prevents overflow and enables proper scrolling
+     */
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--fb-fc-main-bg, #ffffff);
+    display: flex;
+    flex-direction: column;
+
+    // Mobile: Stack and take full width
+    @media (max-width: 768px) {
+      width: 100%;
+      flex: 1;
+      min-height: 0;
+    }
+  }
+}
+

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

@@ -0,0 +1,95 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormSchema } from '../../../smart-form/models/form-schema.model';
+import { SmartFormModule } from '../../../smart-form/smart-form.module';
+import { FieldConfiguratorService } from '../../services/field-configurator.service';
+import { ConfiguratorTreeComponent } from './configurator-tree/configurator-tree.component';
+import { ConfiguratorConfigPanelComponent } from './configurator-config-panel/configurator-config-panel.component';
+import { BUILDER_FIELD_TYPE_SCHEMA_MAP } from '../../tokens/builder.tokens';
+import { DEFAULT_FIELD_TYPE_SCHEMA_MAP } from '../../configs/field-type-schema.map';
+
+@Component({
+  selector: 'lib-field-configurator',
+  standalone: false,
+  providers: [FieldConfiguratorService],
+  templateUrl: './field-configurator.component.html',
+  styleUrls: ['./field-configurator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldConfiguratorComponent implements OnChanges {
+  @Input({ required: true }) schema!: FormSchema;
+  @Output() schemaChange = new EventEmitter<FormSchema>();
+
+  /**
+   * When false, the optionConfig section (apiUrl, dataPath, etc.) is hidden
+   * from the configurator panel. Useful for business-user-facing configurators
+   * where option URLs are pre-filled by the developer.
+   * Defaults to true (show everything).
+   */
+  @Input() showOptionConfig: boolean = true;
+
+  /**
+   * Field names that must always remain enabled and cannot be toggled off.
+   * When a locked field is selected, the IS ENABLED / READ ONLY / DISABLED
+   * controls are hidden so the user cannot accidentally disable the field.
+   */
+  @Input() lockedFieldNames: string[] = [];
+
+  readonly store = inject(FieldConfiguratorService);
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly schemaMapOverride = inject(BUILDER_FIELD_TYPE_SCHEMA_MAP, { optional: true });
+
+  /**
+   * Merged field-type → config-schema map (defaults + optional overrides).
+   * Memoized to avoid triggering ngOnChanges in children due to new object references.
+   */
+  finalFieldTypeSchemaMap: Record<string, FormSchema> = { ...DEFAULT_FIELD_TYPE_SCHEMA_MAP, ...(this.schemaMapOverride ?? {}) } as any;
+
+  private _isInternalChange = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['schema'] && this.schema) {
+      this.store.loadSchema(this.schema, this._isInternalChange);
+      this._isInternalChange = false;
+    }
+  }
+
+  onFieldSelected(path: number[]): void {
+    this.store.selectField(path);
+    this.cdr.markForCheck();
+  }
+
+  onNodeToggleExpanded(nodeId: string): void {
+    this.store.toggleNodeExpanded(nodeId);
+    this.cdr.markForCheck();
+  }
+
+  onConfigChange(patch: Record<string, unknown>): void {
+    this._isInternalChange = true;
+    this.store.patchSelectedField(patch as any);
+    this._emitChange();
+  }
+
+  onTypeChange(builderType: string): void {
+    this._isInternalChange = true;
+    this.store.changeFieldType(builderType);
+    this._emitChange();
+  }
+
+  private _emitChange(): void {
+    const updated = this.store.getCurrentSchema();
+    if (updated) {
+      this.schemaChange.emit(updated);
+    }
+  }
+}

package/src/lib/modules/form-builder/components/field-selection/field-selection.component.html

@@ -0,0 +1,20 @@
+<div class="fb-field-selection">
+  @for (group of store.groups(); track trackByGroupIndex($index); let gi = $index) {
+    <lib-group-node
+      [group]="group"
+      [groupIndex]="gi"
+      [hideToggleForOptionTypes]="hideToggleForOptionTypes"
+      (toggleEnabled)="onToggleGroup(gi)"
+      (toggleExpanded)="onToggleGroupExpanded(gi)"
+      (sectionToggleEnabled)="onToggleSection(gi, $event)"
+      (sectionToggleExpanded)="onToggleSectionExpanded(gi, $event)"
+      (fieldToggle)="onToggleField(gi, $event.sectionPath, $event.fieldIndex)"
+    />
+  }
+
+  @if (store.groups().length === 0) {
+    <div class="fb-field-selection__empty">
+      <p>No groups or fields found in the schema.</p>
+    </div>
+  }
+</div>

package/src/lib/modules/form-builder/components/field-selection/field-selection.component.scss

@@ -0,0 +1,37 @@
+.fb-field-selection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fb-fs-group-gap, 16px);
+  padding: var(--fb-fs-padding, 16px);
+  font-family: var(--fb-font-family, 'Inter', sans-serif);
+
+  @media (max-width: 768px) {
+    gap: 12px;
+    padding: 12px;
+  }
+
+  @media (max-width: 640px) {
+    gap: 8px;
+    padding: 8px;
+  }
+
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    color: var(--fb-fs-empty-color, #9ca3af);
+    font-size: 14px;
+    text-align: center;
+
+    @media (max-width: 1024px) {
+      padding: 32px 16px;
+      font-size: 13px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 24px 12px;
+      font-size: 12px;
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormSchema } from '../../../smart-form/models/form-schema.model';
+import { FieldSelectionService } from '../../services/field-selection.service';
+import { GroupNodeComponent } from './group-node/group-node.component';
+
+@Component({
+  selector: 'lib-field-selection',
+  standalone: false,
+  providers: [FieldSelectionService],
+  templateUrl: './field-selection.component.html',
+  styleUrls: ['./field-selection.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FieldSelectionComponent implements OnChanges {
+  @Input({ required: true }) schema!: FormSchema;
+  @Output() schemaChange = new EventEmitter<FormSchema>();
+
+  /**
+   * When true, the enable/disable toggle is hidden for option-driven field types
+   * (DROPDOWN, RADIO, MULTI_SELECT, etc.).
+   * Useful for business-user-facing form configurators where developers
+   * pre-fill the option data and these fields should always be included.
+   * Defaults to false (show toggle for all fields).
+   */
+  @Input() hideToggleForOptionTypes: boolean = false;
+
+  protected readonly store = inject(FieldSelectionService);
+
+  /**
+   * Flag to track if the next schema change is from internal toggles.
+   * When true, we'll use loadSchemaPreservingExpanded() to keep user's expansion state.
+   */
+  private _isInternalChange = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['schema'] && this.schema) {
+      // If schema changed from our internal toggles, preserve expansion state
+      // Otherwise, treat it as external schema change and reload fully
+      if (this._isInternalChange) {
+        this.store.loadSchemaPreservingExpanded(this.schema);
+        this._isInternalChange = false;
+      } else {
+        this.store.loadSchema(this.schema);
+      }
+    }
+  }
+
+  onToggleGroup(groupIndex: number): void {
+    this.store.toggleGroup(groupIndex);
+    this._emitChange();
+  }
+
+  onToggleGroupExpanded(groupIndex: number): void {
+    this.store.toggleGroupExpanded(groupIndex);
+  }
+
+  onToggleSection(groupIndex: number, sectionPath: number[]): void {
+    this.store.toggleSection(groupIndex, sectionPath);
+    this._emitChange();
+  }
+
+  onToggleSectionExpanded(groupIndex: number, sectionPath: number[]): void {
+    this.store.toggleSectionExpanded(groupIndex, sectionPath);
+  }
+
+  onToggleField(groupIndex: number, sectionPath: number[], fieldIndex: number): void {
+    this.store.toggleField(groupIndex, sectionPath, fieldIndex);
+    this._emitChange();
+  }
+
+  trackByGroupIndex(index: number): number {
+    return index;
+  }
+
+  private _emitChange(): void {
+    const updated = this.store.buildUpdatedSchema();
+    if (updated) {
+      // Mark that the next schema change is from internal toggles
+      // This prevents expansion state from being reset
+      this._isInternalChange = true;
+      this.schemaChange.emit(updated);
+    }
+  }
+}

package/src/lib/modules/form-builder/components/field-selection/group-node/group-node.component.html

@@ -0,0 +1,46 @@
+<div class="fb-group-node" [class.fb-group-node--disabled]="!group.enabled">
+  <div class="fb-group-node__header">
+    <button
+      class="fb-group-node__expand-btn"
+      (click)="toggleExpanded.emit()"
+      [attr.aria-expanded]="group.expanded"
+      type="button"
+    >
+      <svg
+        class="fb-group-node__chevron"
+        [class.fb-group-node__chevron--open]="group.expanded"
+        width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"
+      >
+        <polyline points="6 9 12 15 18 9" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+
+    <div class="fb-group-node__meta">
+      <span class="fb-group-node__label">{{ group.label }}</span>
+    </div>
+
+    <lib-toggle
+      [checked]="group.enabled"
+      [disabled]="false"
+      [attr.aria-label]="'Enable ' + group.label"
+      (toggleChange)="toggleEnabled.emit()"
+    />
+  </div>
+
+  @if (group.expanded && group.enabled) {
+    <div class="fb-group-node__body">
+      @for (section of group.sections; track trackBySectionIndex($index); let si = $index) {
+        <lib-selection-section-node
+          [section]="section"
+          [sectionIndex]="si"
+          [depth]="0"
+          [hideToggleForOptionTypes]="hideToggleForOptionTypes"
+          (toggleEnabled)="onSectionToggleEnabled(si, $event)"
+          (toggleExpanded)="onSectionToggleExpanded(si, $event)"
+          (fieldToggle)="onFieldToggle(si, $event)"
+        />
+      }
+    </div>
+  }
+</div>