platformcommons-web-lib 1.0.0

package/src/lib/modules/smart-form/components/form-section/form-section.component.html

@@ -0,0 +1,64 @@
+<div class="form-section-container">
+  <h3 class="section-label" *ngIf="config.label && !config.allowMulti">{{ config.label }}</h3>
+
+  <!-- ══ Repeater (allowMulti) ══════════════════════════════════════════════ -->
+  <ng-container *ngIf="config.allowMulti">
+    <h3 class="section-label">{{ config.label }}</h3>
+
+    <div *ngFor="let instanceGroup of instanceGroups; let i = index"
+      class="accordion-instance"
+      [class.is-expanded]="isExpanded(i)">
+
+      <!-- Accordion header (always visible) -->
+      <div class="accordion-header" (click)="toggleInstance(i)" role="button" [attr.aria-expanded]="isExpanded(i)">
+        <div class="accordion-header-left">
+          <span class="instance-badge">{{ i + 1 }}</span>
+          <span class="instance-title">{{ config.label }} #{{ i + 1 }}</span>
+        </div>
+        <div class="accordion-header-right">
+          <button type="button" class="accordion-remove-btn"
+            *ngIf="instanceGroups.length > 1"
+            (click)="$event.stopPropagation(); removeInstance(i)"
+            aria-label="Remove instance">
+            <mat-icon>delete_outline</mat-icon>
+          </button>
+          <mat-icon class="accordion-chevron">
+            {{ isExpanded(i) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
+          </mat-icon>
+        </div>
+      </div>
+
+      <!-- Accordion body (always mounted so form controls survive collapse) -->
+      <div class="accordion-body" [hidden]="!isExpanded(i)">
+        <div class="section-fields sf-grid">
+          <ng-container *ngFor="let field of config.children">
+            <div class="sf-col" [style.gridColumn]="'span ' + (field.colSpan || 12)"
+              *ngIf="field.isEnabled !== false">
+              <lib-form-field [config]="field" [controller]="controller" [formGroup]="instanceGroup">
+              </lib-form-field>
+            </div>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+
+    <!-- Full-width dashed Add button -->
+    <button type="button" class="btn-add-section" (click)="addInstance()">
+      <mat-icon>add</mat-icon> Add {{ config.label }}
+    </button>
+  </ng-container>
+
+  <!-- ══ Non-repeater (single instance) ════════════════════════════════════ -->
+  <ng-container *ngIf="!config.allowMulti">
+    <div class="section-fields sf-grid">
+      <ng-container *ngFor="let field of config.children">
+        <div class="sf-col" [style.gridColumn]="'span ' + (field.colSpan || 12)"
+          *ngIf="field.isEnabled !== false">
+          <lib-form-field [config]="field" [controller]="controller" [formGroup]="flatFormGroup">
+          </lib-form-field>
+        </div>
+      </ng-container>
+    </div>
+  </ng-container>
+
+</div>

package/src/lib/modules/smart-form/components/form-section/form-section.component.scss

@@ -0,0 +1,209 @@
+// ────────────────────────────────────────────────────────────────────────────
+// Form Section — modern card layout with elegant section headers
+// ────────────────────────────────────────────────────────────────────────────
+
+@keyframes section-card-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0);    }
+}
+
+.form-section-container {
+  background: #ffffff;
+  border: 1px solid #EAECF0;
+  border-radius: 14px;
+  padding: 22px 24px 24px;
+  margin-bottom: 14px;
+  box-shadow:
+    0 1px 2px rgba(0,0,0,.04),
+    0 4px 12px rgba(99, 102, 241, .04);
+  animation: section-card-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow:
+      0 1px 2px rgba(0,0,0,.04),
+      0 6px 20px rgba(99, 102, 241, .08);
+  }
+
+  &:last-child { margin-bottom: 0; }
+
+  // ── Section heading ─────────────────────────────────────────────────────────
+  .section-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.9375rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 20px 0;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #F3F4F6;
+    letter-spacing: -.01em;
+
+    // Coloured square accent dot
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 18px;
+      border-radius: 4px;
+      background: linear-gradient(180deg, #6366F1 0%, #8B5CF6 100%);
+      flex-shrink: 0;
+    }
+  }
+
+  // ── 12-column grid ──────────────────────────────────────────────────────────
+  .section-fields {
+    &.sf-grid {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 18px 20px;
+      align-items: start;
+
+      @media (max-width: 640px) {
+        grid-template-columns: 1fr;
+        .sf-col { grid-column: span 12 !important; }
+      }
+    }
+  }
+
+  // ── Accordion repeater instance ─────────────────────────────────────────────
+  .accordion-instance {
+    border: 1px solid #E8EAF0;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    background: #FAFBFF;
+
+    &:last-of-type { margin-bottom: 0; }
+
+    &.is-expanded {
+      border-color: #C7D2FE;
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, .07);
+    }
+
+    .accordion-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 11px 16px;
+      background: #F8F9FF;
+      cursor: pointer;
+      user-select: none;
+      transition: background 0.15s ease;
+
+      &:hover { background: #EEF0FF; }
+
+      .accordion-header-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .instance-badge {
+        width: 24px;
+        height: 24px;
+        border-radius: 6px;
+        background: linear-gradient(135deg, #6366F1, #8B5CF6);
+        color: #ffffff;
+        font-size: 0.75rem;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .instance-title {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: #1F2937;
+      }
+
+      .accordion-header-right {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .accordion-remove-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: #EF4444;
+        padding: 4px 6px;
+        border-radius: 6px;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        transition: background 0.15s ease, color 0.15s ease;
+
+        mat-icon {
+          font-size: 1.1rem;
+          width: 1.1rem;
+          height: 1.1rem;
+          line-height: 1.1rem;
+        }
+
+        &:hover {
+          background: #FEE2E2;
+          color: #DC2626;
+        }
+      }
+
+      .accordion-chevron {
+        font-size: 1.25rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        line-height: 1.25rem;
+        color: #6B7280;
+        transition: transform 0.2s ease;
+      }
+    }
+
+    .accordion-body {
+      padding: 18px 16px;
+      background: #ffffff;
+      border-top: 1px solid #E8EAF0;
+    }
+  }
+
+  // ── Add button ──────────────────────────────────────────────────────────────
+  .btn-add-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    width: 100%;
+    padding: 11px 20px;
+    margin-top: 14px;
+    background: transparent;
+    color: #6366F1;
+    border: 1.5px dashed #C7D2FE;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    letter-spacing: .01em;
+
+    mat-icon {
+      font-size: 1.1rem;
+      width: 1.1rem;
+      height: 1.1rem;
+      line-height: 1.1rem;
+    }
+
+    &:hover {
+      background: #EEF2FF;
+      border-color: #A5B4FC;
+      border-style: solid;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(99, 102, 241, .12);
+    }
+
+    &:active { transform: translateY(0); }
+  }
+}

package/src/lib/modules/smart-form/components/form-section/form-section.component.ts

@@ -0,0 +1,119 @@
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { SectionConfig, FieldConfig } from '../../models/form-schema.model';
+import { SmartFormController } from '../../services/smart-form-controller.service';
+
+@Component({
+  selector: 'lib-form-section',
+  templateUrl: './form-section.component.html',
+  styleUrls: ['./form-section.component.scss'],
+  standalone: false
+})
+export class FormSectionComponent implements OnInit, OnDestroy {
+  @Input() config!: SectionConfig;
+  @Input() controller!: SmartFormController;
+  @Input() formGroup!: FormGroup;
+
+  /**
+   * For allowMulti sections: the FormArray registered on the root formGroup.
+   * Each element is a FormGroup representing one repeater instance.
+   */
+  repeaterFormArray!: FormArray;
+
+  /** Tracks which accordion panels are open (by index). New instances start expanded. */
+  expandedInstances = new Set<number>();
+
+  /**
+   * The key under which the FormArray is registered in the root formGroup.
+   * Falls back to config.name or a generated key.
+   */
+  get arrayKey(): string {
+    return this.config.name || '__repeater__';
+  }
+
+  constructor(private fb: FormBuilder) { }
+
+  ngOnInit(): void {
+    if (this.config.allowMulti) {
+      this.repeaterFormArray = this.fb.array([]);
+      this.formGroup.addControl(this.arrayKey, this.repeaterFormArray);
+      // Start with one empty instance
+      this.addInstance();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.config.allowMulti && this.formGroup.contains(this.arrayKey)) {
+      this.formGroup.removeControl(this.arrayKey);
+    }
+  }
+
+  // ── Repeater helpers ──────────────────────────────────────────────────────
+
+  /** Creates a fresh FormGroup for one repeater instance */
+  private createInstanceGroup(): FormGroup {
+    return this.fb.group({});
+  }
+
+  addInstance(): void {
+    const newIndex = this.repeaterFormArray.length;
+    this.repeaterFormArray.push(this.createInstanceGroup());
+    // Collapse all existing panels; expand only the new one
+    this.expandedInstances.clear();
+    this.expandedInstances.add(newIndex);
+  }
+
+  removeInstance(index: number): void {
+    if (this.repeaterFormArray.length > 1) {
+      this.repeaterFormArray.removeAt(index);
+      // Rebuild expanded set to account for shifted indices
+      const updated = new Set<number>();
+      this.expandedInstances.forEach(i => {
+        if (i < index) updated.add(i);
+        else if (i > index) updated.add(i - 1);
+      });
+      this.expandedInstances = updated;
+    }
+  }
+
+  toggleInstance(index: number): void {
+    if (this.expandedInstances.has(index)) {
+      this.expandedInstances.delete(index);
+    } else {
+      this.expandedInstances.add(index);
+    }
+  }
+
+  isExpanded(index: number): boolean {
+    return this.expandedInstances.has(index);
+  }
+
+  getInstanceGroup(index: number): FormGroup {
+    return this.repeaterFormArray.at(index) as FormGroup;
+  }
+
+  get instanceGroups(): FormGroup[] {
+    return this.repeaterFormArray.controls as FormGroup[];
+  }
+
+  // ── Non-repeater: flat single FormGroup (root formGroup passed through) ──
+
+  /** For non-allowMulti sections we simply pass the root formGroup down */
+  get flatFormGroup(): FormGroup {
+    return this.formGroup;
+  }
+
+  // ── Collect nested fields for a given child ───────────────────────────────
+  /** Flatten a field tree to get all leaf fields (for ROW children etc.) */
+  getFlatFields(fields: FieldConfig[]): FieldConfig[] {
+    const result: FieldConfig[] = [];
+    fields.forEach(f => {
+      if (f.type === 'ROW' && f.children) {
+        result.push(...this.getFlatFields(f.children));
+      } else {
+        result.push(f);
+      }
+    });
+    return result;
+  }
+}

package/src/lib/modules/smart-form/components/smart-form/smart-form.component.html

@@ -0,0 +1,253 @@
+<div class="smart-form-container">
+
+  <!-- ══ Skeleton loader ════════════════════════════════════════════════════ -->
+  <div class="smart-form-skeleton" *ngIf="!isFormReady" aria-hidden="true">
+
+    <!-- Title + description -->
+    <div class="skel-header">
+      <div class="skel-block skel-title" style="--sd: 0s"></div>
+      <div class="skel-block skel-desc" style="--sd: 0.07s"></div>
+    </div>
+
+    <!-- Section 1 — two full-width fields -->
+    <div class="skel-section">
+      <div class="skel-block skel-section-label" style="--sd: 0.1s; width: 32%"></div>
+      <div class="skel-fields skel-fields--two">
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.13s; width: 55%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.15s"></div>
+        </div>
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.16s; width: 45%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.18s"></div>
+        </div>
+        <div class="skel-field skel-field--full">
+          <div class="skel-block skel-label" style="--sd: 0.2s; width: 38%"></div>
+          <div class="skel-block skel-input skel-input--textarea" style="--sd: 0.22s"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 2 — three columns -->
+    <div class="skel-section">
+      <div class="skel-block skel-section-label" style="--sd: 0.25s; width: 24%"></div>
+      <div class="skel-fields skel-fields--three">
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.28s; width: 60%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.30s"></div>
+        </div>
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.31s; width: 50%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.33s"></div>
+        </div>
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.34s; width: 65%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.36s"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 3 — two columns + chip row -->
+    <div class="skel-section">
+      <div class="skel-block skel-section-label" style="--sd: 0.38s; width: 28%"></div>
+      <div class="skel-fields skel-fields--two">
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.40s; width: 48%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.42s"></div>
+        </div>
+        <div class="skel-field">
+          <div class="skel-block skel-label" style="--sd: 0.43s; width: 55%"></div>
+          <div class="skel-block skel-input" style="--sd: 0.45s"></div>
+        </div>
+      </div>
+      <div class="skel-chips">
+        <div class="skel-block skel-chip" style="--sd: 0.47s; width: 72px"></div>
+        <div class="skel-block skel-chip" style="--sd: 0.49s; width: 96px"></div>
+        <div class="skel-block skel-chip" style="--sd: 0.51s; width: 80px"></div>
+        <div class="skel-block skel-chip" style="--sd: 0.53s; width: 64px"></div>
+      </div>
+    </div>
+
+    <!-- Action bar -->
+    <div class="skel-actions">
+      <div class="skel-block skel-btn" style="--sd: 0.55s; width: 88px"></div>
+      <div class="skel-block skel-btn skel-btn--primary" style="--sd: 0.58s; width: 120px"></div>
+    </div>
+  </div>
+
+  <!-- ══════════════════════════════════════════════════════════════════════
+       SECTION STEPPER layout — stepper nav card + per-step form panels.
+       Rendered when formSchema.sectionStepper === true.
+       The nav and each step section are separate cards (no outer wrapper card).
+       ══════════════════════════════════════════════════════════════════════ -->
+  <ng-container *ngIf="formSchema && isFormReady && isSectionStepper">
+
+    <!-- Horizontal stepper nav card -->
+    <div class="section-stepper-nav" *ngIf="sectionSteps.length > 0">
+      <div class="section-stepper-track">
+        <div
+          *ngFor="let step of sectionSteps; let i = index"
+          class="section-stepper-step"
+          [class.ss-active]="i === currentSectionStep"
+          [class.ss-completed]="i < currentSectionStep && stepValidationStates[i] !== 'warning'"
+          [class.ss-warning]="i < currentSectionStep && stepValidationStates[i] === 'warning'"
+          [attr.data-tooltip]="step.sectionConfig?.label || 'Step ' + (i + 1)"
+          (click)="goToSectionStep(i)">
+
+          <!-- Connector line — left side (hidden for first step) -->
+          <div class="ss-connector ss-connector--left" *ngIf="i > 0"></div>
+
+          <!-- Step badge -->
+          <div class="ss-badge">
+            <!-- Green checkmark: visited and valid -->
+            <svg *ngIf="i < currentSectionStep && stepValidationStates[i] !== 'warning'"
+                 width="13" height="13" viewBox="0 0 24 24"
+                 fill="none" stroke="currentColor" stroke-width="3"
+                 stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+            <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->
+            <span *ngIf="i < currentSectionStep && stepValidationStates[i] === 'warning'"
+                  class="ss-warning-mark">!</span>
+            <!-- Number: current or future step -->
+            <span *ngIf="i >= currentSectionStep">{{ i + 1 }}</span>
+          </div>
+
+          <!-- Step label (truncated; full text revealed by CSS tooltip) -->
+          <div class="ss-label" [title]="step.sectionConfig?.label || 'Step ' + (i + 1)">
+            {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}
+          </div>
+
+          <!-- Connector line — right side (hidden for last step) -->
+          <div class="ss-connector ss-connector--right" *ngIf="i < sectionSteps.length - 1"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step panels — all mounted, only active one is visible (preserves form data) -->
+    <form [formGroup]="formGroup" class="smart-form ss-form">
+      <div
+        *ngFor="let step of sectionSteps; let i = index"
+        class="ss-step-panel"
+        [style.display]="i === currentSectionStep ? 'block' : 'none'">
+        <lib-form-section
+          [config]="getSectionStepConfig(step)"
+          [controller]="controller"
+          [formGroup]="formGroup">
+        </lib-form-section>
+      </div>
+    </form>
+
+    <!-- ── Action bar: Prev / custom action buttons / Next ──────────────────── -->
+    <div class="form-actions"
+         *ngIf="!readOnly && formSchema.showActions !== false && actionBarConfig?.buttons?.length">
+
+      <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->
+      <div class="action-group action-group--left">
+        <lib-button
+          *ngIf="!isSectionStepFirst"
+          variant="outline"
+          (click)="navigateToPrevious()">
+          {{ previousLabel }}
+        </lib-button>
+        <ng-container *ngFor="let btn of getButtonsForAlignment('left')">
+          <lib-button
+            *ngIf="!btn.showOnLastStepOnly || isSectionStepLast"
+            [variant]="$any(btn.variant) || 'outline'"
+            [disabled]="isButtonDisabled(btn)"
+            (click)="handleButtonClick(btn)">
+            {{ getButtonLabel(btn) }}
+          </lib-button>
+        </ng-container>
+      </div>
+
+      <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->
+      <div class="action-group action-group--right">
+        <ng-container *ngFor="let btn of getButtonsForAlignment('right')">
+          <lib-button
+            *ngIf="!btn.showOnLastStepOnly || isSectionStepLast"
+            [variant]="$any(btn.variant) || 'primary'"
+            [disabled]="isButtonDisabled(btn)"
+            (click)="handleButtonClick(btn)">
+            {{ getButtonLabel(btn) }}
+          </lib-button>
+        </ng-container>
+        <lib-button
+          *ngIf="!isSectionStepLast"
+          variant="primary"
+          (click)="navigateToNext()">
+          {{ nextLabel }}
+        </lib-button>
+      </div>
+
+    </div>
+
+  </ng-container>
+
+  <!-- ══════════════════════════════════════════════════════════════════════
+       Regular card wrapper — used for SECTION and STEPPER form types.
+       ══════════════════════════════════════════════════════════════════════ -->
+  <div class="smart-form-wrapper" *ngIf="formSchema && isFormReady && !isSectionStepper"
+       [class.smart-form-wrapper--readonly]="readOnly">
+
+    <!-- Form Header -->
+    <div class="form-header" *ngIf="formSchema.showTitle !== false">
+      <h2 class="form-title">{{ formSchema.label }}</h2>
+      <p class="form-description" *ngIf="formSchema.description">{{ formSchema.description }}</p>
+    </div>
+
+    <!-- STEPPER type nav -->
+    <div class="stepper-nav" *ngIf="isStepper && formSchema.stepperConfig?.showStep !== false">
+      <div class="stepper-steps" [class.horizontal]="formSchema.stepperConfig?.isHorizontal !== false">
+        <div *ngFor="let step of fieldList; let i = index" class="stepper-step" [class.active]="i === currentStep"
+          [class.completed]="i < currentStep">
+          <div class="step-number">{{ i + 1 }}</div>
+          <div class="step-label">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Form Content -->
+    <form [formGroup]="formGroup" class="smart-form">
+      <!-- Regular SECTION form -->
+      <div *ngIf="!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false" class="form-section">
+        <lib-form-section [config]="formSchema.sectionConfig" [controller]="controller" [formGroup]="formGroup">
+        </lib-form-section>
+      </div>
+
+      <!-- STEPPER type form -->
+      <div *ngIf="isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false" class="form-stepper">
+        <lib-form-section [config]="currentStepConfig.sectionConfig!" [controller]="controller" [formGroup]="formGroup">
+        </lib-form-section>
+      </div>
+    </form>
+
+    <!-- ── Form Actions ──────────────────────────────────────────────────── -->
+    <div class="form-actions" *ngIf="formSchema.showActions !== false && !readOnly && actionBarConfig?.buttons?.length">
+
+      <!-- LEFT GROUP -->
+      <div class="action-group action-group--left">
+        <lib-button
+          *ngFor="let btn of getButtonsForAlignment('left')"
+          [variant]="$any(btn.variant) || 'outline'"
+          [disabled]="isButtonDisabled(btn)"
+          (click)="handleButtonClick(btn)">
+          {{ getButtonLabel(btn) }}
+        </lib-button>
+      </div>
+
+      <!-- RIGHT GROUP -->
+      <div class="action-group action-group--right">
+        <lib-button
+          *ngFor="let btn of getButtonsForAlignment('right')"
+          [variant]="$any(btn.variant) || 'primary'"
+          [disabled]="isButtonDisabled(btn)"
+          (click)="handleButtonClick(btn)">
+          {{ getButtonLabel(btn) }}
+        </lib-button>
+      </div>
+
+    </div>
+  </div>
+
+</div>