commons-shared-web-ui 0.0.53 → 0.0.54

package/src/lib/modules/form-field-configuration/components/_ffc-controls.scss

@@ -1,89 +0,0 @@
-// Shared, self-contained controls for the form-field-configuration tree.
-// Used (via @use) by both the field-node and section-node components so the
-// pill toggle / checkbox render identically without depending on the quirks of
-// the generic lib-toggle / lib-checkbox in a dense, inline row.
-
-// ── Pill toggle ───────────────────────────────────────────────────────────────
-.ffc-toggle {
-  position: relative;
-  flex-shrink: 0;
-  width: var(--ffc-toggle-width, 38px);
-  height: var(--ffc-toggle-height, 22px);
-  padding: 0;
-  border: none;
-  border-radius: 999px;
-  background: var(--ffc-toggle-off-bg, #cbd2d9);
-  cursor: pointer;
-  transition: background 0.18s ease;
-
-  &__thumb {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: calc(var(--ffc-toggle-height, 22px) - 4px);
-    height: calc(var(--ffc-toggle-height, 22px) - 4px);
-    border-radius: 50%;
-    background: var(--ffc-toggle-thumb, #ffffff);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-    transition: left 0.18s ease;
-  }
-
-  &--on {
-    background: var(--ffc-toggle-on-bg, #2f9e6f);
-
-    .ffc-toggle__thumb {
-      left: calc(100% - (var(--ffc-toggle-height, 22px) - 2px));
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--ffc-focus-ring, #2f9e6f);
-    outline-offset: 2px;
-  }
-
-  // Disabled because the field's dependency parent is hidden.
-  &--disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-}
-
-// ── Checkbox (square) ─────────────────────────────────────────────────────────
-.ffc-check {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--ffc-check-size, 18px);
-  height: var(--ffc-check-size, 18px);
-  border-radius: 4px;
-  border: 2px solid var(--ffc-check-border, #c3c9d0);
-  background: var(--ffc-check-bg, #ffffff);
-  color: transparent;
-  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-
-  svg {
-    opacity: 0;
-    transition: opacity 0.15s ease;
-  }
-
-  &--on {
-    background: var(--ffc-check-on-bg, #d97757);
-    border-color: var(--ffc-check-on-bg, #d97757);
-    color: #ffffff;
-
-    svg {
-      opacity: 1;
-    }
-  }
-}
-
-// ── Lock indicator (occupies the toggle footprint so rows stay aligned) ────────
-.ffc-lock {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--ffc-toggle-width, 38px);
-  color: var(--ffc-lock-color, #9aa2ab);
-}

package/src/lib/modules/form-field-configuration/components/config-field-node/config-field-node.component.html

@@ -1,68 +0,0 @@
-<div
-  class="ffc-field"
-  [class.ffc-field--hidden]="!field.visible"
-  [class.ffc-field--locked]="field.lockVisibility"
->
-  <!-- Visibility indicator (eye / eye-off) -->
-  <span class="ffc-field__eye" [class.ffc-field__eye--off]="!field.visible" aria-hidden="true">
-    @if (field.visible) {
-      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path>
-        <circle cx="12" cy="12" r="3"></circle>
-      </svg>
-    } @else {
-      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
-        <line x1="1" y1="1" x2="23" y2="23"></line>
-      </svg>
-    }
-  </span>
-
-  <span class="ffc-field__label" [title]="displayLabel">{{ displayLabel }}</span>
-
-  <!-- Mandatory control (only meaningful when visible) -->
-  <button
-    type="button"
-    class="ffc-field__mandatory"
-    [class.ffc-field__mandatory--disabled]="!field.visible || field.lockMandatory"
-    [disabled]="!field.visible || field.lockMandatory"
-    [attr.aria-pressed]="field.mandatory"
-    (click)="toggleMandatory.emit()"
-  >
-    <span class="ffc-check" [class.ffc-check--on]="field.mandatory">
-      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <polyline points="20 6 9 17 4 12"></polyline>
-      </svg>
-    </span>
-    <span class="ffc-field__mandatory-text">Mandatory</span>
-  </button>
-
-  <!-- Visibility toggle / lock -->
-  @if (field.lockVisibility) {
-    <span class="ffc-lock" title="This field is always visible">
-      <svg width="15" height="15" 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 {
-    <button
-      type="button"
-      class="ffc-toggle"
-      [class.ffc-toggle--on]="field.visible"
-      [class.ffc-toggle--disabled]="field.visibilityLockedByParent"
-      [disabled]="field.visibilityLockedByParent"
-      role="switch"
-      [attr.aria-checked]="field.visible"
-      [attr.aria-label]="'Show ' + displayLabel"
-      [attr.title]="field.visibilityLockedByParent ? 'Show the field it depends on first' : null"
-      (click)="toggleVisible.emit()"
-    >
-      <span class="ffc-toggle__thumb"></span>
-    </button>
-  }
-</div>

package/src/lib/modules/form-field-configuration/components/config-field-node/config-field-node.component.scss

@@ -1,73 +0,0 @@
-@use '../ffc-controls';
-
-.ffc-field {
-  display: flex;
-  align-items: center;
-  gap: var(--ffc-field-gap, 12px);
-  padding: var(--ffc-field-padding, 10px 14px);
-  border-radius: var(--ffc-field-radius, 8px);
-  background: var(--ffc-field-bg, #ffffff);
-  border: 1px solid var(--ffc-field-border, #eef0f2);
-  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
-
-  &:hover:not(.ffc-field--locked) {
-    background: var(--ffc-field-hover-bg, #f8fafc);
-  }
-
-  // Hidden fields: dim the row and mute the eye/label, but keep the toggle crisp
-  // so it's obvious how to turn the field back on.
-  &--hidden {
-    .ffc-field__eye,
-    .ffc-field__label,
-    .ffc-field__mandatory {
-      opacity: 0.55;
-    }
-  }
-
-  &--locked {
-    background: var(--ffc-field-locked-bg, #f6f7f8);
-  }
-
-  &__eye {
-    display: flex;
-    align-items: center;
-    color: var(--ffc-eye-color, #6b7280);
-    flex-shrink: 0;
-
-    &--off {
-      color: var(--ffc-eye-off-color, #b0b6be);
-    }
-  }
-
-  &__label {
-    flex: 1 1 auto;
-    min-width: 0;
-    font-size: var(--ffc-field-label-size, 14px);
-    color: var(--ffc-field-label-color, #1f2933);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__mandatory {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    flex-shrink: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font: inherit;
-
-    &--disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__mandatory-text {
-    font-size: var(--ffc-mandatory-size, 13px);
-    color: var(--ffc-mandatory-color, #52606d);
-    white-space: nowrap;
-  }
-}

package/src/lib/modules/form-field-configuration/components/config-field-node/config-field-node.component.ts

@@ -1,34 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  Input,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { ConfigFieldNode } from '../../models/field-configuration.models';
-
-/**
- * A single field row inside the form-field-configuration tree.
- * Shows a visibility indicator + label on the left, and a "Mandatory"
- * control + visibility toggle on the right.
- */
-@Component({
-  selector: 'lib-config-field-node',
-  standalone: false,
-  templateUrl: './config-field-node.component.html',
-  styleUrls: ['./config-field-node.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ConfigFieldNodeComponent {
-  @Input({ required: true }) field!: ConfigFieldNode;
-  /** Optional label translator (e.g. an ngx-translate instant fn). */
-  @Input() translate?: (key: string) => string;
-
-  @Output() toggleVisible = new EventEmitter<void>();
-  @Output() toggleMandatory = new EventEmitter<void>();
-
-  get displayLabel(): string {
-    const label = this.field.label;
-    return this.translate ? this.translate(label) : label;
-  }
-}

package/src/lib/modules/form-field-configuration/components/config-section-node/config-section-node.component.html

@@ -1,78 +0,0 @@
-<div
-  class="ffc-section"
-  [class.ffc-section--nested]="depth > 0"
-  [class.ffc-section--hidden]="hasToggle && !section.visible"
->
-  <div class="ffc-section__header">
-    <button
-      class="ffc-section__expand-btn"
-      type="button"
-      [attr.aria-expanded]="section.expanded"
-      (click)="onToggleExpanded()"
-    >
-      <svg
-        class="ffc-section__chevron"
-        [class.ffc-section__chevron--open]="section.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>
-
-    <span class="ffc-section__label" [title]="displayLabel">{{ displayLabel }}</span>
-
-    @if (section.fields.length) {
-      <span class="ffc-section__count">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>
-    }
-
-    @if (hasToggle) {
-      @if (section.lockVisibility) {
-        <span class="ffc-lock" title="This section is always visible">
-          <svg width="15" height="15" 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 {
-        <button
-          type="button"
-          class="ffc-toggle"
-          [class.ffc-toggle--on]="section.visible"
-          role="switch"
-          [attr.aria-checked]="section.visible"
-          [attr.aria-label]="'Show ' + displayLabel"
-          (click)="onToggleVisible()"
-        >
-          <span class="ffc-toggle__thumb"></span>
-        </button>
-      }
-    }
-  </div>
-
-  @if (section.expanded) {
-    <div class="ffc-section__body">
-      @for (field of section.fields; track trackByIndex($index); let fi = $index) {
-        <lib-config-field-node
-          [field]="field"
-          [translate]="translate"
-          (toggleVisible)="onFieldToggleVisible(fi)"
-          (toggleMandatory)="onFieldToggleMandatory(fi)"
-        />
-      }
-
-      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {
-        <lib-config-section-node
-          [section]="sub"
-          [depth]="depth + 1"
-          [translate]="translate"
-          (toggleVisible)="onSubToggleVisible(si, $event)"
-          (toggleExpanded)="onSubToggleExpanded(si, $event)"
-          (fieldToggleVisible)="onSubFieldToggleVisible(si, $event)"
-          (fieldToggleMandatory)="onSubFieldToggleMandatory(si, $event)"
-        />
-      }
-    </div>
-  }
-</div>

package/src/lib/modules/form-field-configuration/components/config-section-node/config-section-node.component.scss

@@ -1,83 +0,0 @@
-@use '../ffc-controls';
-
-.ffc-section {
-  border: 1px solid var(--ffc-section-border, #e5e7eb);
-  border-radius: var(--ffc-section-radius, 10px);
-  background: var(--ffc-section-bg, #ffffff);
-  overflow: hidden;
-
-  &--nested {
-    border-color: var(--ffc-section-nested-border, #eef0f2);
-    background: var(--ffc-section-nested-bg, #fbfcfd);
-  }
-
-  &--hidden {
-    .ffc-section__label,
-    .ffc-section__count {
-      opacity: 0.55;
-    }
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: var(--ffc-section-header-padding, 12px 14px);
-    background: var(--ffc-section-header-bg, #f6f7f8);
-    user-select: none;
-
-    .ffc-section--nested & {
-      background: var(--ffc-section-nested-header-bg, #f1f3f5);
-    }
-  }
-
-  &__expand-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 2px;
-    display: flex;
-    color: var(--ffc-chevron-color, #6b7280);
-    flex-shrink: 0;
-  }
-
-  // Chevron points right when collapsed, down when open.
-  &__chevron {
-    transform: rotate(-90deg);
-    transition: transform 0.2s;
-
-    &--open {
-      transform: rotate(0deg);
-    }
-  }
-
-  &__label {
-    flex: 1 1 auto;
-    min-width: 0;
-    font-size: var(--ffc-section-label-size, 14px);
-    font-weight: 600;
-    color: var(--ffc-section-label-color, #1f2933);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__count {
-    flex-shrink: 0;
-    font-size: var(--ffc-count-size, 12px);
-    color: var(--ffc-count-color, #7b8794);
-    white-space: nowrap;
-  }
-
-  &__body {
-    padding: var(--ffc-section-body-padding, 8px 14px 14px 32px);
-    display: flex;
-    flex-direction: column;
-    gap: var(--ffc-field-row-gap, 8px);
-
-    @media (max-width: 640px) {
-      padding: 8px 10px 10px 18px;
-      gap: 6px;
-    }
-  }
-}

package/src/lib/modules/form-field-configuration/components/config-section-node/config-section-node.component.ts

@@ -1,94 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  Input,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { ConfigSectionNode } from '../../models/field-configuration.models';
-
-/** Payload for field-level events, carrying the sub-path from this section down. */
-export interface FieldEventPayload {
-  sectionPath: number[];
-  fieldIndex: number;
-}
-
-/**
- * A recursive section/group node in the form-field-configuration tree.
- * Emits path-relative events that parents prefix with their own index before
- * bubbling up to the store.
- */
-@Component({
-  selector: 'lib-config-section-node',
-  standalone: false,
-  templateUrl: './config-section-node.component.html',
-  styleUrls: ['./config-section-node.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ConfigSectionNodeComponent {
-  @Input({ required: true }) section!: ConfigSectionNode;
-  @Input() depth = 0;
-  @Input() translate?: (key: string) => string;
-
-  /** Emits the sub-path from this node downward (empty [] for self). */
-  @Output() toggleVisible = new EventEmitter<number[]>();
-  @Output() toggleExpanded = new EventEmitter<number[]>();
-  @Output() fieldToggleVisible = new EventEmitter<FieldEventPayload>();
-  @Output() fieldToggleMandatory = new EventEmitter<FieldEventPayload>();
-
-  get displayLabel(): string {
-    return this.translate ? this.translate(this.section.label) : this.section.label;
-  }
-
-  get visibleFieldCount(): number {
-    return this.section.fields.filter(f => f.visible).length;
-  }
-
-  get hasToggle(): boolean {
-    return !!this.section.fieldConfig;
-  }
-
-  // ── Self events ──────────────────────────────────────────────
-  onToggleVisible(): void {
-    this.toggleVisible.emit([]);
-  }
-
-  onToggleExpanded(): void {
-    this.toggleExpanded.emit([]);
-  }
-
-  onFieldToggleVisible(fieldIndex: number): void {
-    this.fieldToggleVisible.emit({ sectionPath: [], fieldIndex });
-  }
-
-  onFieldToggleMandatory(fieldIndex: number): void {
-    this.fieldToggleMandatory.emit({ sectionPath: [], fieldIndex });
-  }
-
-  // ── Subsection re-emits (prefix with the subsection index) ───
-  onSubToggleVisible(subIndex: number, subPath: number[]): void {
-    this.toggleVisible.emit([subIndex, ...subPath]);
-  }
-
-  onSubToggleExpanded(subIndex: number, subPath: number[]): void {
-    this.toggleExpanded.emit([subIndex, ...subPath]);
-  }
-
-  onSubFieldToggleVisible(subIndex: number, payload: FieldEventPayload): void {
-    this.fieldToggleVisible.emit({
-      sectionPath: [subIndex, ...payload.sectionPath],
-      fieldIndex: payload.fieldIndex,
-    });
-  }
-
-  onSubFieldToggleMandatory(subIndex: number, payload: FieldEventPayload): void {
-    this.fieldToggleMandatory.emit({
-      sectionPath: [subIndex, ...payload.sectionPath],
-      fieldIndex: payload.fieldIndex,
-    });
-  }
-
-  trackByIndex(index: number): number {
-    return index;
-  }
-}

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

@@ -1,38 +0,0 @@
-<div class="ffc-root">
-  @if (showLegend) {
-    <div class="ffc-legend">
-      <span class="ffc-legend__item">
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path>
-          <circle cx="12" cy="12" r="3"></circle>
-        </svg>
-        <span>Visible</span>
-      </span>
-      <span class="ffc-legend__item">
-        <span class="ffc-legend__asterisk" aria-hidden="true">&#10033;</span>
-        <span>Mandatory (only if visible)</span>
-      </span>
-    </div>
-  }
-
-  <div class="ffc-tree">
-    @for (section of store.sections(); track trackByIndex($index); let si = $index) {
-      <lib-config-section-node
-        [section]="section"
-        [depth]="0"
-        [translate]="translate"
-        (toggleVisible)="onToggleVisible(si, $event)"
-        (toggleExpanded)="onToggleExpanded(si, $event)"
-        (fieldToggleVisible)="onFieldToggleVisible(si, $event)"
-        (fieldToggleMandatory)="onFieldToggleMandatory(si, $event)"
-      />
-    }
-
-    @if (store.sections().length === 0) {
-      <div class="ffc-empty">
-        <p>No sections or fields found in the schema.</p>
-      </div>
-    }
-  </div>
-</div>

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

@@ -1,42 +0,0 @@
-.ffc-root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ffc-root-gap, 12px);
-  font-family: var(--ffc-font-family, inherit);
-}
-
-.ffc-legend {
-  display: flex;
-  align-items: center;
-  gap: var(--ffc-legend-gap, 24px);
-  padding: var(--ffc-legend-padding, 4px 2px 8px);
-  border-bottom: 1px solid var(--ffc-legend-border, #eef0f2);
-  flex-wrap: wrap;
-
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: var(--ffc-legend-size, 13px);
-    color: var(--ffc-legend-color, #52606d);
-  }
-
-  &__asterisk {
-    color: var(--ffc-asterisk-color, #d97757);
-    font-size: 14px;
-    line-height: 1;
-  }
-}
-
-.ffc-tree {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ffc-tree-gap, 12px);
-}
-
-.ffc-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--ffc-empty-color, #9aa2ab);
-  font-size: 13px;
-}