platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,102 @@
+.fb-group-node {
+  border: 1px solid var(--fb-fs-group-border, #e5e7eb);
+  border-radius: var(--fb-fs-group-radius, 12px);
+  background: var(--fb-fs-group-bg, #ffffff);
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    border-radius: 8px;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+
+    .fb-group-node__body {
+      pointer-events: none;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--fb-fs-header-gap, 10px);
+    padding: var(--fb-fs-header-padding, 14px 16px);
+    cursor: pointer;
+    user-select: none;
+
+    @media (max-width: 640px) {
+      padding: 12px 12px;
+      gap: 8px;
+    }
+
+    &:hover {
+      background: var(--fb-fs-header-hover-bg, #f9fafb);
+    }
+  }
+
+  &__expand-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    display: flex;
+    color: var(--fb-fs-chevron-color, #9ca3af);
+    flex-shrink: 0;
+
+    @media (max-width: 640px) {
+      padding: 0;
+    }
+  }
+
+  &__chevron {
+    transition: transform 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+
+    @media (max-width: 640px) {
+      gap: 6px;
+    }
+  }
+
+  &__label {
+    font-size: var(--fb-fs-group-label-size, 14px);
+    font-weight: 700;
+    color: var(--fb-fs-group-label-color, #111827);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (max-width: 640px) {
+      font-size: 13px;
+    }
+  }
+
+  &__body {
+    padding: var(--fb-fs-body-padding, 0 16px 16px 28px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--fb-fs-section-gap, 12px);
+
+    @media (max-width: 768px) {
+      padding: 0 12px 12px 24px;
+      gap: 10px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 0 12px 12px 20px;
+      gap: 8px;
+    }
+  }
+}
+
+

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

@@ -0,0 +1,50 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormComponentsModule } from '../../../../form-components/form-components.module';
+import { SelectionGroupNode } from '../../../models/field-selection.models';
+import { SelectionSectionNodeComponent } from '../selection-section-node/selection-section-node.component';
+
+@Component({
+  selector: 'lib-group-node',
+  standalone: false,
+  templateUrl: './group-node.component.html',
+  styleUrls: ['./group-node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GroupNodeComponent {
+  @Input({ required: true }) group!: SelectionGroupNode;
+  @Input({ required: true }) groupIndex!: number;
+  /** Propagated from FieldSelectionComponent — see SelectionFieldNodeComponent for details. */
+  @Input() hideToggleForOptionTypes: boolean = false;
+
+  @Output() toggleEnabled = new EventEmitter<void>();
+  @Output() toggleExpanded = new EventEmitter<void>();
+  @Output() sectionToggleEnabled = new EventEmitter<number[]>();
+  @Output() sectionToggleExpanded = new EventEmitter<number[]>();
+  @Output() fieldToggle = new EventEmitter<{ sectionPath: number[]; fieldIndex: number }>();
+
+  onSectionToggleEnabled(sectionIndex: number, subPath: number[]): void {
+    this.sectionToggleEnabled.emit([sectionIndex, ...subPath]);
+  }
+
+  onSectionToggleExpanded(sectionIndex: number, subPath: number[]): void {
+    this.sectionToggleExpanded.emit([sectionIndex, ...subPath]);
+  }
+
+  onFieldToggle(sectionIndex: number, payload: { sectionPath: number[]; fieldIndex: number }): void {
+    this.fieldToggle.emit({
+      sectionPath: [sectionIndex, ...payload.sectionPath],
+      fieldIndex: payload.fieldIndex,
+    });
+  }
+
+  trackBySectionIndex(index: number): number {
+    return index;
+  }
+}

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

@@ -0,0 +1,35 @@
+<div
+  class="fb-selection-field"
+  [class.fb-selection-field--selected]="field.selected"
+  [class.fb-selection-field--locked]="field.isLocked"
+  [class.fb-selection-field--option-type]="hideToggleForOptionTypes && isOptionDrivenType"
+>
+  <span class="fb-selection-field__label">
+    {{ field.fieldConfig.label || field.fieldConfig.name }}
+  </span>
+
+  @if (field.isLocked) {
+    <span class="fb-selection-field__lock" title="This field is locked">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+      </svg>
+    </span>
+  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {
+    <!-- Option-driven type: toggle hidden by config, show a badge instead -->
+    <span class="fb-selection-field__option-badge" title="Options are pre-configured">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="12 8 12 12 14 14"></polyline>
+      </svg>
+    </span>
+  } @else {
+    <lib-checkbox
+      [checked]="field.selected"
+      [disabled]="false"
+      (checkedChange)="toggleSelected.emit()"
+    />
+  }
+</div>

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

@@ -0,0 +1,67 @@
+.fb-selection-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--fb-fs-field-padding, 8px 12px);
+  margin-bottom: var(--fb-fs-field-gap, 2px);
+  border-radius: var(--fb-fs-field-radius, 6px);
+  background: var(--fb-fs-field-bg, #ffffff);
+  border: 1px solid var(--fb-fs-field-border, #e5e7eb);
+  transition: all 0.15s;
+
+  &:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type) {
+    border-color: var(--fb-fs-field-hover-border, #3b82f6);
+    background: var(--fb-fs-field-hover-bg, #f8fafc);
+  }
+
+  &--selected {
+    background: var(--fb-fs-field-selected-bg, #eff6ff);
+    border-color: var(--fb-fs-field-selected-border, #bfdbfe);
+  }
+
+  &--locked {
+    background: var(--fb-fs-field-locked-bg, #f3f4f6);
+    cursor: not-allowed;
+
+    .fb-selection-field__label {
+      color: var(--fb-fs-field-locked-color, #6b7280);
+      font-weight: 500;
+    }
+  }
+
+  &--option-type {
+    background: var(--fb-fs-field-option-type-bg, #f9fafb);
+    border-color: var(--fb-fs-field-option-type-border, #e5e7eb);
+    cursor: default;
+
+    .fb-selection-field__label {
+      color: var(--fb-fs-field-option-type-color, #374151);
+    }
+  }
+
+  &__label {
+    font-size: var(--fb-fs-field-label-size, 13px);
+    color: var(--fb-fs-field-label-color, #111827);
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+
+  &__lock {
+    display: flex;
+    color: var(--fb-fs-lock-color, #9ca3af);
+    padding: 2px;
+  }
+
+  &__option-badge {
+    display: flex;
+    align-items: center;
+    color: var(--fb-fs-option-badge-color, #9ca3af);
+    padding: 2px;
+    flex-shrink: 0;
+  }
+}
+

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

@@ -0,0 +1,34 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormComponentsModule } from '../../../../form-components/form-components.module';
+import { SelectionFieldNode } from '../../../models/field-selection.models';
+import { OPTION_DRIVEN_FIELD_TYPES } from '../../../utils/constants';
+
+@Component({
+  selector: 'lib-selection-field-node',
+  standalone: false,
+  templateUrl: './selection-field-node.component.html',
+  styleUrls: ['./selection-field-node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectionFieldNodeComponent {
+  @Input({ required: true }) field!: SelectionFieldNode;
+  @Output() toggleSelected = new EventEmitter<void>();
+
+  /**
+   * When true, the enable/disable toggle is hidden for option-driven field types
+   * (DROPDOWN, RADIO, MULTI_SELECT, etc.). These types have their options
+   * pre-configured by the developer and shouldn't be toggled by business users.
+   */
+  @Input() hideToggleForOptionTypes: boolean = false;
+
+  get isOptionDrivenType(): boolean {
+    return OPTION_DRIVEN_FIELD_TYPES.has((this.field?.fieldConfig?.type ?? '').toUpperCase());
+  }
+}

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

@@ -0,0 +1,68 @@
+<div
+  class="fb-selection-section"
+  [class.fb-selection-section--disabled]="!section.enabled"
+  [class.fb-selection-section--nested]="depth > 0"
+>
+  <div class="fb-selection-section__header">
+    <button
+      class="fb-selection-section__expand-btn"
+      (click)="onToggleExpanded()"
+      [attr.aria-expanded]="section.expanded"
+      type="button"
+    >
+      <svg
+        class="fb-selection-section__chevron"
+        [class.fb-selection-section__chevron--open]="section.expanded"
+        width="14" height="14" 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-selection-section__meta">
+      <span class="fb-selection-section__label">{{ section.label }}</span>
+    </div>
+
+    @if (isLocked) {
+      <span class="fb-selection-section__lock" title="This section is locked">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+        </svg>
+      </span>
+    } @else {
+      <lib-toggle
+        [checked]="section.enabled"
+        [disabled]="false"
+        [attr.aria-label]="'Enable ' + section.label"
+        (toggleChange)="onToggleEnabled()"
+      />
+    }
+  </div>
+
+  @if (section.expanded && section.enabled) {
+    <div class="fb-selection-section__body">
+      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {
+        <lib-selection-field-node
+          [field]="field"
+          [hideToggleForOptionTypes]="hideToggleForOptionTypes"
+          (toggleSelected)="onFieldToggle(fi)"
+        />
+      }
+
+      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {
+        <lib-selection-section-node
+          [section]="sub"
+          [sectionIndex]="si"
+          [depth]="depth + 1"
+          [hideToggleForOptionTypes]="hideToggleForOptionTypes"
+          (toggleEnabled)="onSubsectionToggleEnabled(si, $event)"
+          (toggleExpanded)="onSubsectionToggleExpanded(si, $event)"
+          (fieldToggle)="onSubsectionFieldToggle(si, $event)"
+        />
+      }
+    </div>
+  }
+</div>

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

@@ -0,0 +1,113 @@
+.fb-selection-section {
+  border: 1px solid var(--fb-fs-section-border, #e5e7eb);
+  border-radius: var(--fb-fs-section-radius, 10px);
+  background: var(--fb-fs-section-bg, #ffffff);
+  overflow: hidden;
+
+  @media (max-width: 640px) {
+    border-radius: 6px;
+  }
+
+  &--disabled {
+    opacity: 0.55;
+
+    .fb-selection-section__body {
+      pointer-events: none;
+    }
+  }
+
+  &--nested {
+    border-color: var(--fb-fs-section-nested-border, #f3f4f6);
+    background: var(--fb-fs-section-nested-bg, #fafafa);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: var(--fb-fs-section-header-padding, 10px 14px);
+    cursor: pointer;
+    user-select: none;
+
+    @media (max-width: 640px) {
+      padding: 8px 10px;
+      gap: 6px;
+    }
+
+    &:hover {
+      background: var(--fb-fs-section-header-hover, #f9fafb);
+    }
+  }
+
+  &__expand-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    display: flex;
+    color: var(--fb-fs-chevron-color, #9ca3af);
+    flex-shrink: 0;
+
+    @media (max-width: 640px) {
+      padding: 0;
+    }
+  }
+
+  &__chevron {
+    transition: transform 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+
+    @media (max-width: 640px) {
+      gap: 6px;
+    }
+  }
+
+  &__label {
+    font-size: var(--fb-fs-section-label-size, 13px);
+    font-weight: 600;
+    color: var(--fb-fs-section-label-color, #111827);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (max-width: 640px) {
+      font-size: 12px;
+    }
+  }
+
+  &__lock {
+    display: flex;
+    color: var(--fb-fs-lock-color, #9ca3af);
+    padding: 2px;
+  }
+
+  &__body {
+    padding: var(--fb-fs-section-body-padding, 4px 14px 14px 28px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--fb-fs-field-gap, 6px);
+
+    @media (max-width: 768px) {
+      padding: 4px 12px 12px 24px;
+      gap: 5px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 4px 10px 10px 20px;
+      gap: 4px;
+    }
+  }
+}
+
+

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

@@ -0,0 +1,74 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormComponentsModule } from '../../../../form-components/form-components.module';
+import { SelectionSectionNode } from '../../../models/field-selection.models';
+import { SelectionFieldNodeComponent } from '../selection-field-node/selection-field-node.component';
+
+@Component({
+  selector: 'lib-selection-section-node',
+  standalone: false,
+  templateUrl: './selection-section-node.component.html',
+  styleUrls: ['./selection-section-node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectionSectionNodeComponent {
+  @Input({ required: true }) section!: SelectionSectionNode;
+  @Input({ required: true }) sectionIndex!: number;
+  @Input() depth: number = 0;
+  /** Propagated from FieldSelectionComponent — see SelectionFieldNodeComponent for details. */
+  @Input() hideToggleForOptionTypes: boolean = false;
+
+  /** Emits the sub-path from this node downward (empty [] for self) */
+  @Output() toggleEnabled = new EventEmitter<number[]>();
+  @Output() toggleExpanded = new EventEmitter<number[]>();
+  @Output() fieldToggle = new EventEmitter<{ sectionPath: number[]; fieldIndex: number }>();
+
+  onToggleEnabled(): void {
+    this.toggleEnabled.emit([]);
+  }
+
+  onToggleExpanded(): void {
+    this.toggleExpanded.emit([]);
+  }
+
+  onSubsectionToggleEnabled(subIndex: number, subPath: number[]): void {
+    this.toggleEnabled.emit([subIndex, ...subPath]);
+  }
+
+  onSubsectionToggleExpanded(subIndex: number, subPath: number[]): void {
+    this.toggleExpanded.emit([subIndex, ...subPath]);
+  }
+
+  onFieldToggle(fieldIndex: number): void {
+    this.fieldToggle.emit({ sectionPath: [], fieldIndex });
+  }
+
+  onSubsectionFieldToggle(subIndex: number, payload: { sectionPath: number[]; fieldIndex: number }): void {
+    this.fieldToggle.emit({
+      sectionPath: [subIndex, ...payload.sectionPath],
+      fieldIndex: payload.fieldIndex,
+    });
+  }
+
+  get selectedCount(): number {
+    return this.section.fields.filter(f => f.selected).length;
+  }
+
+  get isLocked(): boolean {
+    return this.section.parentFieldConfig?.readonly === true;
+  }
+
+  trackByFieldIndex(index: number): number {
+    return index;
+  }
+
+  trackBySubsectionIndex(index: number): number {
+    return index;
+  }
+}