commons-shared-web-ui 0.0.60 → 0.0.62

package/src/lib/modules/form-components/form-components.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { InputComponent } from './components/input/input.component';
+import { DropdownComponent } from './components/dropdown/dropdown.component';
+import { CheckboxComponent } from './components/checkbox/checkbox.component';
+import { RadioComponent } from './components/radio/radio.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
+import { DatepickerComponent } from './components/datepicker/datepicker.component';
+import { SearchComponent } from './components/search/search.component';
+import { ClickOutsideDirective } from './directives/click-outside.directive';
+
+@NgModule({
+    declarations: [
+        InputComponent,
+        DropdownComponent,
+        CheckboxComponent,
+        RadioComponent,
+        ToggleComponent,
+        DatepickerComponent,
+        SearchComponent,
+        ClickOutsideDirective
+    ],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        ScrollingModule
+    ],
+    exports: [
+        InputComponent,
+        DropdownComponent,
+        CheckboxComponent,
+        RadioComponent,
+        ToggleComponent,
+        DatepickerComponent,
+        SearchComponent,
+        ClickOutsideDirective
+    ]
+})
+export class FormComponentsModule { }

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

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

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

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

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

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

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

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

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

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