commons-shared-web-ui 0.0.53 → 0.0.54

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

@@ -1,102 +0,0 @@
-.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 {
-    // Dim to show "off" state, but keep the body interactive — children must
-    // remain individually toggleable even while the master shows disabled.
-    .fb-group-node__label {
-      opacity: 0.6;
-    }
-  }
-
-  &__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

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

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

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

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

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

@@ -1,113 +0,0 @@
-.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 {
-    // Dim to show "off" state, but keep the body interactive — fields/subsections must
-    // remain individually toggleable even while the parent section shows disabled.
-    .fb-selection-section__label {
-      opacity: 0.55;
-    }
-  }
-
-  &--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

@@ -1,74 +0,0 @@
-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;
-  }
-}