commons-shared-web-ui 0.0.55 → 0.0.57

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

@@ -1,65 +0,0 @@
-<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"
-                [siblingFormArray]="repeaterFormArray" [siblingIndex]="i">
-              </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

@@ -1,209 +0,0 @@
-// ────────────────────────────────────────────────────────────────────────────
-// Form Section — modern card layout with elegant section headers
-// ────────────────────────────────────────────────────────────────────────────
-
-@keyframes section-card-in {
-  from { opacity: 0; margin-top: 10px; }
-  to   { opacity: 1; margin-top: 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

@@ -1,131 +0,0 @@
-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;
-    // Require the last existing instance to be valid before allowing another — otherwise
-    // a user can stack up multiple incomplete entries (e.g. several "Parent Details" rows
-    // all missing the required name) with no indication anything is wrong until final submit.
-    if (newIndex > 0) {
-      const lastGroup = this.repeaterFormArray.at(newIndex - 1) as FormGroup;
-      lastGroup.markAllAsTouched();
-      if (lastGroup.invalid) {
-        this.expandedInstances.clear();
-        this.expandedInstances.add(newIndex - 1);
-        return;
-      }
-    }
-    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

@@ -1,253 +0,0 @@
-<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 — hidden for a single step (nothing to step between) -->
-    <div class="section-stepper-nav" *ngIf="sectionSteps.length > 1">
-      <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>