commons-shared-web-ui 0.0.50 → 0.0.51

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

@@ -1,210 +0,0 @@
-: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

@@ -1,55 +0,0 @@
-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

@@ -1,25 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-.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

@@ -1,95 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-.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

@@ -1,94 +0,0 @@
-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

@@ -1,46 +0,0 @@
-<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) {
-    <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>