commons-shared-web-ui 0.0.62 → 0.0.63

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

@@ -1,1379 +0,0 @@
-<div class="form-field mb-8px" *ngIf="isVisible" [class.has-error]="errorMessage">
-
-  <!-- ══ ROW Layout ════════════════════════════════════════════════════════ -->
-  <div *ngIf="isRow" class="form-row grid-row">
-    <ng-container *ngFor="let child of config.children; trackBy: trackByFieldName">
-      <div class="row-field" [style.gridColumn]="'span ' + getChildColSpan(child)" *ngIf="child.isEnabled !== false"
-        [style.display]="rowFieldRef.isVisible === false ? 'none' : null">
-        <lib-form-field #rowFieldRef [config]="child" [controller]="controller" [formGroup]="formGroup" [allowMulti]="allowMulti">
-        </lib-form-field>
-      </div>
-    </ng-container>
-  </div>
-
-  <!-- ══ GROUP — allowMulti (repeater) ════════════════════════════════════ -->
-  <div *ngIf="isGroup && config.sectionConfig?.allowMulti"
-    class="group-section-wrapper mb-20px"
-    [class.multi-save-active]="config.sectionConfig?.multiSaveConfig?.active">
-
-    <!-- Multi-Save: header row with label + top-right Add button -->
-    <div class="multi-save-header d-flex justify-content-between align-items-center mb-24"
-      *ngIf="config.sectionConfig?.multiSaveConfig?.active">
-      <h3 class="group-label" *ngIf="config.sectionConfig?.label">{{ config.sectionConfig!.label }}</h3>
-      <lib-button [variant]="'outline'" [icon]="{type: 'material', value: 'add'}" (click)="addGroupInstance()"
-        class="btn-add-multi">
-        {{ addMultiLabel }}
-      </lib-button>
-    </div>
-
-    <!-- Standard heading (non-multiSave) -->
-    <h3 class="group-label"
-      *ngIf="config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active">{{
-      config.sectionConfig!.label }}</h3>
-
-    <!-- ── Standard (non-multiSave) repeater: accordion instances ─────────── -->
-    <ng-container *ngIf="!config.sectionConfig?.multiSaveConfig?.active">
-      <div *ngFor="let instance of instanceList; trackBy: trackByInstanceId; let i = index"
-        class="group-accordion-instance"
-        [class.is-expanded]="isGroupExpanded(i)">
-
-        <!-- Accordion header -->
-        <div class="group-accordion-header" (click)="toggleGroupAccordion(i)"
-          role="button" [attr.aria-expanded]="isGroupExpanded(i)">
-          <div class="accordion-header-left d-flex align-items-center gap-10">
-            <span class="instance-badge">{{ i + 1 }}</span>
-            <span class="instance-title">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>
-          </div>
-          <div class="accordion-header-right d-flex align-items-center gap-6">
-            <button type="button" class="accordion-remove-btn"
-              *ngIf="instanceList.length > 1"
-              (click)="$event.stopPropagation(); removeGroupInstance(i)"
-              aria-label="Remove">
-              <mat-icon>delete_outline</mat-icon>
-            </button>
-            <mat-icon class="accordion-chevron">
-              {{ isGroupExpanded(i) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
-            </mat-icon>
-          </div>
-        </div>
-
-        <!-- Accordion body (always mounted so form controls survive collapse) -->
-        <div class="group-accordion-body" [hidden]="!isGroupExpanded(i)">
-          <div class="group-fields sf-grid">
-            <ng-container *ngFor="let field of config.sectionConfig!.children">
-              <div class="sf-col" [style.gridColumn]="'span ' + (field.colSpan || 12)"
-                *ngIf="field.isEnabled !== false"
-                [style.display]="groupFieldRef.isVisible === false ? 'none' : null">
-                <lib-form-field #groupFieldRef [config]="field" [controller]="instance.rowController" [formGroup]="instance.fg"
-                  [allowMulti]="false" [siblingFormArray]="groupFormArray" [siblingIndex]="i">
-                </lib-form-field>
-              </div>
-            </ng-container>
-          </div>
-        </div>
-      </div>
-
-      <!-- Full-width dashed Add button -->
-      <button type="button" class="btn-add-group" (click)="addGroupInstance()">
-        <mat-icon>add</mat-icon> {{ addLabel }} {{ config.sectionConfig!.label }}
-      </button>
-    </ng-container>
-
-    <!-- ── MultiSave: card instances ─────────────────────────────────────── -->
-    <ng-container *ngIf="config.sectionConfig?.multiSaveConfig?.active">
-      <div *ngFor="let instance of instanceList; trackBy: trackByInstanceId; let i = index"
-        class="group-instance position-relative mb-16 overflow-hidden"
-        [class.is-editing]="instance.isEditing"
-        [class.is-card]="!instance.isEditing">
-
-        <!-- Edit / new form view -->
-        <div [hidden]="!instance.isEditing">
-          <div class="group-fields sf-grid">
-            <ng-container *ngFor="let field of config.sectionConfig!.children">
-              <div class="sf-col" [style.gridColumn]="'span ' + (field.colSpan || 12)"
-                *ngIf="field.isEnabled !== false"
-                [style.display]="groupFieldRef.isVisible === false ? 'none' : null">
-                <lib-form-field #groupFieldRef [config]="field" [controller]="instance.rowController" [formGroup]="instance.fg"
-                  [allowMulti]="false" [siblingFormArray]="groupFormArray" [siblingIndex]="i">
-                </lib-form-field>
-              </div>
-            </ng-container>
-          </div>
-
-          <!-- Save / Cancel -->
-          <div class="group-footer d-flex justify-content-end align-items-center gap-16 p-0-24"
-            *ngIf="config.sectionConfig?.multiSaveConfig?.active">
-            <span class="field-error color-error fs-0-75rem" *ngIf="multiSaveError">{{ multiSaveError }}</span>
-            <div class="footer-actions d-flex gap-12">
-              <lib-button [variant]="'outline'" (click)="cancelGroupInstance(i)">Cancel</lib-button>
-              <lib-button [variant]="'primary'" (click)="saveGroupInstance(i)">Save</lib-button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Card view (saved state) -->
-        <ng-container *ngIf="!instance.isEditing">
-          <div class="card-view d-flex justify-content-between align-items-center p-18px-24px"
-            [class.is-expanded]="instance.isExpanded">
-            <div class="card-content flex-1 d-flex flex-column gap-4 overflow-hidden">
-              <span class="card-title font-weight-600 overflow-hidden fs-1rem c-111827">{{
-                instance.fg.get(config.sectionConfig!.multiSaveConfig!.summaryField || '')?.value
-                || '—' }}</span>
-            </div>
-            <div class="card-actions d-flex align-items-center gap-16 ml-20">
-              <mat-icon class="icon-delete" (click)="removeGroupInstance(i, true)">delete_outline</mat-icon>
-              <mat-icon class="icon-edit" (click)="editGroupInstance(i)">edit_outline</mat-icon>
-              <mat-icon class="icon-expand" (click)="toggleExpandGroupInstance(i)">
-                {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
-              </mat-icon>
-            </div>
-          </div>
-        </ng-container>
-      </div>
-    </ng-container>
-  </div>
-
-  <!-- ══ GROUP — single (non-repeater) ════════════════════════════════════ -->
-  <div *ngIf="isGroup && config.sectionConfig && !config.sectionConfig.allowMulti"
-    class="group-section-wrapper mb-20px">
-    <h3 class="group-label" *ngIf="config.sectionConfig.label">{{ config.sectionConfig.label }}</h3>
-    <div class="group-fields sf-grid">
-      <ng-container *ngFor="let field of config.sectionConfig.children">
-        <div class="sf-col" [style.gridColumn]="'span ' + (field.colSpan || 12)" *ngIf="field.isEnabled !== false"
-          [style.display]="singleGroupFieldRef.isVisible === false ? 'none' : null">
-          <lib-form-field #singleGroupFieldRef [config]="field" [controller]="controller" [formGroup]="groupFormGroup" [allowMulti]="false">
-          </lib-form-field>
-        </div>
-      </ng-container>
-    </div>
-  </div>
-
-
-  <!-- ══ Text Input ════════════════════════════════════════════════════════ -->
-  <div *ngIf="isTextField" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <textarea *ngIf="config.subType === 'LONG'" class="field-input textarea" [placeholder]="config.placeholder || ''"
-      [formControlName]="config.name!" [class.is-invalid]="errorMessage" rows="4">
-    </textarea>
-
-    <!-- Password input with show/hide toggle -->
-    <div *ngIf="config.subType === 'PASSWORD'" class="password-wrapper position-relative d-flex align-items-center">
-      <input [type]="showPassword ? 'text' : 'password'" class="field-input password-input"
-        [placeholder]="config.placeholder || ''" [formControlName]="config.name!" [class.is-invalid]="errorMessage">
-      <button type="button"
-        class="password-toggle position-absolute cursor-pointer d-flex align-items-center justify-content-center b-none border-none c-6B7280 p-0-25rem"
-        (click)="showPassword = !showPassword" tabindex="-1"
-        [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
-        <mat-icon class="eye-icon">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>
-      </button>
-    </div>
-
-    <div class="input-group position-relative d-flex w-100" [class.readonly]="config.readonly">
-      <span class="input-prefix br-none" *ngIf="config.prefix">{{ config.prefix }}</span>
-
-      <input *ngIf="config.subType !== 'LONG' && config.subType !== 'PASSWORD'"
-        [type]="config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'" class="field-input"
-        [placeholder]="config.placeholder || ''" [formControlName]="config.name!" [class.is-invalid]="errorMessage"
-        [readonly]="config.readonly">
-
-      <span class="input-suffix d-flex align-items-center font-weight-500" *ngIf="config.suffix">{{ config.suffix
-        }}</span>
-
-      <div class="readonly-icons position-absolute d-flex gap-8 pe-none" *ngIf="config.readonly">
-        <mat-icon class="lock-icon">lock</mat-icon>
-      </div>
-
-      <!-- Suffix Action Icons (clickable) -->
-      <div class="suffix-action-icons position-absolute d-flex gap-8 align-items-center"
-           *ngIf="config.suffixActionIcons?.length && !config.readonly">
-        <mat-icon class="suffix-action-icon"
-                  *ngFor="let action of config.suffixActionIcons"
-                  [style.color]="action.color || null"
-                  [title]="action.tooltip || ''"
-                  (click)="onSuffixActionClick(action.actionId)">
-          {{ action.icon }}
-        </mat-icon>
-      </div>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-    <div class="char-count-hint font-poppins font-weight-400 text-14 text-right c-6B7280" *ngIf="showCharCount">
-      {{ remainingCharacters }} characters remaining
-    </div>
-  </div>
-
-  <!-- ══ Number Input ══════════════════════════════════════════════════════ -->
-  <div *ngIf="isNumberField" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div class="input-group position-relative d-flex w-100" [class.readonly]="config.readonly">
-      <span class="input-prefix br-none" *ngIf="config.prefix">{{ config.prefix }}</span>
-
-      <input type="number" class="field-input" [placeholder]="config.placeholder || ''" [formControlName]="config.name!"
-        [min]="config.numberConfig?.min ?? null" [max]="config.numberConfig?.max ?? null"
-        [step]="config.numberConfig?.step || 1" [class.is-invalid]="errorMessage" [readonly]="config.readonly">
-
-      <span class="input-suffix d-flex align-items-center font-weight-500" *ngIf="config.suffix">{{ config.suffix
-        }}</span>
-
-      <div class="readonly-icons position-absolute d-flex gap-8 pe-none" *ngIf="config.readonly">
-        <mat-icon class="lock-icon">lock</mat-icon>
-      </div>
-
-      <!-- Suffix Action Icons (clickable) -->
-      <div class="suffix-action-icons position-absolute d-flex gap-8 align-items-center"
-           *ngIf="config.suffixActionIcons?.length && !config.readonly">
-        <mat-icon class="suffix-action-icon"
-                  *ngFor="let action of config.suffixActionIcons"
-                  [style.color]="action.color || null"
-                  [title]="action.tooltip || ''"
-                  (click)="onSuffixActionClick(action.actionId)">
-          {{ action.icon }}
-        </mat-icon>
-      </div>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Date Input ════════════════════════════════════════════════════════ -->
-  <div *ngIf="isDateField" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div class="input-group position-relative d-flex w-100" [class.readonly]="config.readonly">
-      <input matInput [matDatepicker]="datePicker" class="field-input date-input has-icon-right"
-        [formControlName]="config.name!" [min]="effectiveMinDate" [max]="config.dateConfig?.maxDate"
-        [class.is-invalid]="errorMessage" [placeholder]="config.placeholder || ''"
-        [readonly]="config.readonly || config.dateConfig?.inputReadonly"
-        (click)="!config.readonly && datePicker.open()">
-      <div class="date-icon-wrapper position-absolute d-flex align-items-center justify-content-center"
-        *ngIf="!config.readonly">
-        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
-      </div>
-      <mat-datepicker #datePicker></mat-datepicker>
-
-      <div class="readonly-icons position-absolute d-flex gap-8 pe-none" *ngIf="config.readonly">
-        <mat-icon class="lock-icon">lock</mat-icon>
-      </div>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Time Input ════════════════════════════════════════════════════════ -->
-  <div *ngIf="isTimeField" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <!-- DEFAULT variant: existing native input — unchanged -->
-    <ng-container *ngIf="!isWheelVariant">
-      <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-        {{ config.label }}
-        <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-      </label>
-
-      <div class="input-group position-relative d-flex w-100" [class.readonly]="config.readonly">
-        <input type="time" class="field-input time-input" [formControlName]="config.name!"
-          [min]="effectiveMinTime" [max]="effectiveMaxTime"
-          [class.is-invalid]="errorMessage" [readonly]="config.readonly || config.timeConfig?.inputReadonly">
-
-        <div class="readonly-icons position-absolute d-flex gap-8 pe-none" *ngIf="config.readonly">
-          <mat-icon class="lock-icon">lock</mat-icon>
-        </div>
-      </div>
-    </ng-container>
-
-    <!-- WHEEL variant: drum-roll picker -->
-    <lib-time-picker
-      *ngIf="isWheelVariant"
-      [formControlName]="config.name!"
-      [label]="config.label || ''"
-      [placeholder]="config.timeConfig?.placeholder || ''"
-      [required]="config.required || false"
-      [disabled]="config.readonly || false"
-      [mode]="config.timeConfig?.mode || '12'"
-      [minuteStep]="config.timeConfig?.minuteStep || 1"
-      [minTime]="effectiveMinTime || undefined"
-      [maxTime]="config.timeConfig?.maxTime"
-      [errorMessage]="errorMessage"
-      [labels]="timePickerLabels">
-    </lib-time-picker>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Autocomplete ═════════════════════════════════════════════════════ -->
-  <div *ngIf="isAutocomplete" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <!-- Hidden real control (stores the code value) -->
-    <input type="hidden" [formControlName]="config.name!">
-
-    <div class="autocomplete-wrapper position-relative d-flex align-items-center w-100"
-      [class.is-invalid]="errorMessage" [class.readonly]="config.readonly">
-      <!-- Search icon -->
-      <mat-icon class="ac-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none">search</mat-icon>
-
-      <input class="field-input ac-input" [formControl]="autocompleteInputCtrl" [matAutocomplete]="auto"
-        [placeholder]="config.placeholder || 'Search…'" [readonly]="!!config.readonly" [class.is-invalid]="errorMessage"
-        (blur)="onAutocompleteClear()" autocomplete="off">
-
-      <!-- Clear button -->
-      <button type="button"
-        class="ac-clear-btn position-absolute d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none c-9CA3AF p-0-2rem"
-        *ngIf="autocompleteInputCtrl.value && !config.readonly"
-        (click)="autocompleteInputCtrl.setValue(''); updateValue(null)" tabindex="-1" aria-label="Clear">
-        <mat-icon>close</mat-icon>
-      </button>
-
-      <mat-autocomplete #auto="matAutocomplete" [panelWidth]="'auto'">
-        <mat-option *ngFor="let option of filteredOptions" [value]="option.label"
-          (onSelectionChange)="onAutocompleteSelected(option)">
-          <span class="ac-option-label">{{ option.label }}</span>
-
-          <!-- Dynamic display fields (image / email / phone / text) -->
-          <div class="ac-display-fields d-flex flex-wrap gap-6 mt-2" *ngIf="option['displayMeta']?.length">
-            <ng-container *ngFor="let field of option['displayMeta']">
-
-              <!-- Image avatar -->
-              <span *ngIf="field.type === 'image' && field.value" class="ac-df-item ac-df-image">
-                <img [src]="field.value" [alt]="field.label || 'image'" class="ac-df-avatar">
-              </span>
-
-              <!-- Email -->
-              <span *ngIf="field.type === 'email' && field.value" class="ac-df-item ac-df-chip">
-                <mat-icon class="ac-df-icon">mail_outline</mat-icon>
-                <span *ngIf="field.label" class="ac-df-label">{{ field.label }}</span>
-                {{ field.value }}
-              </span>
-
-              <!-- Phone -->
-              <span *ngIf="field.type === 'phone' && field.value" class="ac-df-item ac-df-chip" [class]="field.className">
-                <mat-icon class="ac-df-icon">phone</mat-icon>
-                <span *ngIf="field.label" class="ac-df-label">{{ field.label }}</span>
-                {{ field.value }}
-              </span>
-
-              <!-- Custom / Icon-based / Generic Text -->
-              <span *ngIf="field.type !== 'image' && field.type !== 'email' && field.type !== 'phone' && field.value" 
-                class="ac-df-item" [class.ac-df-chip]="!!field.icon" [class]="field.className">
-                <mat-icon class="ac-df-icon" *ngIf="field.icon">{{ field.icon }}</mat-icon>
-                <span *ngIf="field.label" class="ac-df-label">{{ field.label }}</span>
-                {{ field.value }}
-              </span>
-
-            </ng-container>
-          </div>
-        </mat-option>
-        <mat-option *ngIf="filteredOptions.length === 0" disabled class="ac-no-results fs-0-8125rem c-6B7280">
-          No results found
-        </mat-option>
-      </mat-autocomplete>
-
-      <div class="readonly-icons position-absolute d-flex gap-8 pe-none" *ngIf="config.readonly">
-        <mat-icon class="lock-icon">lock</mat-icon>
-      </div>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Dropdown ══════════════════════════════════════════════════════════ -->
-  <div *ngIf="isDropdown" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <!-- SINGLE SELECT: native select (default, non-searchable) -->
-    <div *ngIf="config.subType === 'SINGLE' && !isSearchableDropdown" class="native-select-wrapper">
-      <select class="field-input" [formControlName]="config.name!"
-        [class.is-invalid]="errorMessage" [disabled]="optionsLoading || config.disabled">
-        <option [ngValue]="null" disabled selected>{{ optionsLoading ? (controller.labels['LBL_LOADING'] || 'Loading...') : (config.placeholder || selectPlaceholderLabel) }}</option>
-        <option *ngFor="let option of displayLocalOptionList" [value]="option.code">
-          {{ option.label }}
-        </option>
-      </select>
-      <div *ngIf="optionsLoading" class="native-select-spinner" aria-hidden="true"></div>
-    </div>
-
-    <!-- SINGLE SELECT: custom searchable dropdown -->
-    <div *ngIf="config.subType === 'SINGLE' && isSearchableDropdown" class="single-select-wrapper"
-      [class.is-invalid]="errorMessage">
-
-      <div #singleTrigger cdkOverlayOrigin #singleOrigin="cdkOverlayOrigin"
-        class="field-input single-select-trigger d-flex align-items-center justify-content-between cursor-pointer"
-        [class.ss-open]="isSingleDropdownOpen"
-        (click)="!optionsLoading && toggleSingleDropdown($event)">
-        <span *ngIf="singleSelectedLabel && !optionsLoading" class="single-select-value fs-0-9rem">
-          {{ singleSelectedLabel }}
-        </span>
-        <span *ngIf="!singleSelectedLabel || optionsLoading" class="single-select-placeholder">
-          {{ optionsLoading ? (controller.labels['LBL_LOADING'] || 'Loading...') : (config.placeholder || selectPlaceholderLabel) }}
-        </span>
-        <div class="d-flex align-items-center">
-          <div *ngIf="optionsLoading" class="mini-spinner me-2" role="progressbar" aria-label="Loading options"></div>
-          <mat-icon class="single-select-arrow">
-            {{ isSingleDropdownOpen ? expandLessLabel : expandMoreLabel }}
-          </mat-icon>
-        </div>
-      </div>
-
-      <ng-template cdkConnectedOverlay
-        [cdkConnectedOverlayOrigin]="singleOrigin"
-        [cdkConnectedOverlayOpen]="isSingleDropdownOpen"
-        [cdkConnectedOverlayPositions]="dropdownOverlayPositions"
-        [cdkConnectedOverlayWidth]="singleTrigger.offsetWidth"
-        [cdkConnectedOverlayViewportMargin]="8"
-        [cdkConnectedOverlayPush]="true"
-        (overlayOutsideClick)="onDropdownOverlayOutsideClick($event, singleTrigger)"
-        (detach)="isSingleDropdownOpen = false">
-      <div class="single-select-panel"
-        (click)="$event.stopPropagation()">
-
-        <!-- Search input -->
-        <div class="dropdown-search-wrapper">
-          <mat-icon class="dropdown-search-icon">search</mat-icon>
-          <input type="text" class="dropdown-search-input"
-            [placeholder]="searchPlaceholderLabel"
-            [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}"
-            (input)="dropdownSearch$.next(searchText)"
-            (click)="$event.stopPropagation()">
-          <mat-icon *ngIf="searchText" class="dropdown-search-clear cursor-pointer"
-            (click)="searchText = ''; dropdownSearch$.next(''); $event.stopPropagation()">close</mat-icon>
-        </div>
-
-        <!-- Options list -->
-        <div class="single-select-options-list">
-          <div *ngIf="optionsLoading" class="dropdown-loading-state">
-            <div class="dropdown-spinner"></div>
-            <span class="fs-0-875rem c-6B7280">{{ controller.labels['LBL_LOADING'] || 'Loading...' }}</span>
-          </div>
-
-          <ng-container *ngIf="!optionsLoading">
-            <div *ngFor="let option of displayOptionList"
-              class="single-select-option d-flex align-items-center gap-8 cursor-pointer"
-              [class.selected]="formGroup.get(config.name!)?.value === option.code"
-              (click)="selectSingleOption(option)">
-              <span class="fs-0-875rem c-111827">{{ option.label }}</span>
-              <mat-icon *ngIf="formGroup.get(config.name!)?.value === option.code" class="single-select-check">check</mat-icon>
-            </div>
-            <div *ngIf="!filteredOptionList?.length && localOptionList?.length"
-              class="multi-select-empty fs-0-875rem c-6B7280">
-              {{ noMatchingOptionsLabel }}
-            </div>
-            <div *ngIf="!localOptionList?.length"
-              class="multi-select-empty fs-0-875rem c-6B7280">
-              {{ noOptionsAvailableLabel }}
-            </div>
-          </ng-container>
-        </div>
-      </div>
-      </ng-template>
-    </div>
-
-    <!-- MULTIPLE SELECT: custom panel with checkboxes -->
-    <div *ngIf="config.subType === 'MULTIPLE'" class="multi-select-wrapper"
-      [class.is-invalid]="errorMessage">
-
-      <div #multiTrigger cdkOverlayOrigin #multiOrigin="cdkOverlayOrigin"
-        class="field-input multi-select-trigger d-flex align-items-center justify-content-between cursor-pointer"
-        [class.ms-open]="isMultiDropdownOpen"
-        (click)="!optionsLoading && toggleMultiDropdown($event)">
-        <span *ngIf="multiSelectedCount > 0 && !optionsLoading" class="multi-select-value fs-0-9rem">
-          {{ multiSelectedCount }} selected
-        </span>
-        <span *ngIf="multiSelectedCount === 0 || optionsLoading" class="multi-select-placeholder">
-          {{ optionsLoading ? (controller.labels['LBL_LOADING'] || 'Loading...') : (config.placeholder || selectPlaceholderLabel) }}
-        </span>
-        <div class="d-flex align-items-center">
-          <div *ngIf="optionsLoading" class="mini-spinner me-2" role="progressbar" aria-label="Loading options"></div>
-          <mat-icon class="multi-select-arrow">
-            {{ isMultiDropdownOpen ? expandLessLabel : expandMoreLabel }}
-          </mat-icon>
-        </div>
-      </div>
-
-      <ng-template cdkConnectedOverlay
-        [cdkConnectedOverlayOrigin]="multiOrigin"
-        [cdkConnectedOverlayOpen]="isMultiDropdownOpen"
-        [cdkConnectedOverlayPositions]="dropdownOverlayPositions"
-        [cdkConnectedOverlayWidth]="multiTrigger.offsetWidth"
-        [cdkConnectedOverlayViewportMargin]="8"
-        [cdkConnectedOverlayPush]="true"
-        (overlayOutsideClick)="onDropdownOverlayOutsideClick($event, multiTrigger)"
-        (detach)="isMultiDropdownOpen = false">
-      <div class="multi-select-panel"
-        (click)="$event.stopPropagation()">
-
-        <!-- Search input (shown only when searchConfig.enabled) -->
-        <div class="dropdown-search-wrapper" *ngIf="isSearchableDropdown">
-          <mat-icon class="dropdown-search-icon">search</mat-icon>
-          <input type="text" class="dropdown-search-input"
-            [placeholder]="searchPlaceholderLabel"
-            [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}"
-            (input)="dropdownSearch$.next(searchText)"
-            (click)="$event.stopPropagation()">
-          <mat-icon *ngIf="searchText" class="dropdown-search-clear cursor-pointer"
-            (click)="searchText = ''; dropdownSearch$.next(''); $event.stopPropagation()">close</mat-icon>
-        </div>
-
-        <!-- Select All checkbox (shown only when showSelectAll is true) -->
-        <label *ngIf="config.optionConfig?.showSelectAll && filteredOptionList?.length"
-          class="multi-select-option multi-select-all d-flex align-items-center gap-8 cursor-pointer">
-          <input type="checkbox"
-            [checked]="isAllSelected()"
-            [indeterminate]="isSomeSelected()"
-            [disabled]="!!config.disabled"
-            (change)="toggleSelectAll($any($event.target).checked)">
-          <span class="fs-0-875rem c-111827 fw-600">{{ selectAllLabel }}</span>
-        </label>
-
-        <!-- Options list -->
-        <div class="multi-select-options-list">
-          <div *ngIf="optionsLoading" class="dropdown-loading-state">
-            <div class="dropdown-spinner"></div>
-            <span class="fs-0-875rem c-6B7280">{{ controller.labels['LBL_LOADING'] || 'Loading...' }}</span>
-          </div>
-
-          <ng-container *ngIf="!optionsLoading">
-            <label *ngFor="let option of filteredOptionList"
-              class="multi-select-option d-flex align-items-center gap-8 cursor-pointer">
-              <input type="checkbox"
-                [checked]="isChecked(option.code)"
-                [disabled]="!!config.disabled"
-                (change)="onCheckboxListChange(option.code, $any($event.target).checked)">
-              <span class="fs-0-875rem c-111827">{{ option.label }}</span>
-            </label>
-            <div *ngIf="!filteredOptionList?.length && localOptionList?.length"
-              class="multi-select-empty fs-0-875rem c-6B7280">
-              {{ noMatchingOptionsLabel }}
-            </div>
-            <div *ngIf="!localOptionList?.length"
-              class="multi-select-empty fs-0-875rem c-6B7280">
-              {{ noOptionsAvailableLabel }}
-            </div>
-          </ng-container>
-        </div>
-      </div>
-      </ng-template>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Radio ═════════════════════════════════════════════════════════════ -->
-  <div *ngIf="isRadio" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div class="radio-group" [class.is-invalid]="errorMessage"
-      [class]="config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''">
-      <label *ngFor="let option of localOptionList" class="radio-label"
-        [class.card-item]="config.subType === 'CARD'"
-        [class.selected]="formGroup.get(config.name!)?.value === option.code"
-        [style.gridColumn]="config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null">
-        <input type="radio" [formControlName]="config.name!" [value]="option.code">
-        <div class="option-content d-flex flex-column gap-4 flex-1 text-left">
-          <span class="label-text text-16 c-1F2937">{{ option.label }}</span>
-          <span class="option-hint text-13 color-gray" *ngIf="option.hint">{{ option.hint }}</span>
-        </div>
-      </label>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Checkbox ══════════════════════════════════════════════════════════ -->
-  <div *ngIf="isCheckbox" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label && config.subType === 'LIST'"
-      class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div *ngIf="config.subType === 'BOOL'" class="checkbox-single">
-      <label class="checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827">
-        <input type="checkbox" [formControlName]="config.name!" [class.is-invalid]="errorMessage">
-        <span>{{ config.label }}</span>
-      </label>
-    </div>
-
-    <div *ngIf="config.subType === 'LIST' || config.subType === 'CARD'" class="checkbox-group d-flex flex-column gap-8"
-      [class.is-invalid]="errorMessage"
-      [class]="config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''">
-      <label *ngFor="let option of localOptionList"
-        class="checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827"
-        [class.card-item]="config.subType === 'CARD'" [class.selected]="isChecked(option.code)"
-        [style.gridColumn]="config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null">
-        <input type="checkbox" [checked]="isChecked(option.code)" [disabled]="!!config.disabled"
-          (change)="onCheckboxListChange(option.code, $any($event.target).checked)">
-        <div class="option-content d-flex flex-column gap-4 flex-1 text-left">
-          <span class="label-text text-16 c-1F2937">{{ option.label }}</span>
-          <span class="option-hint text-13 color-gray" *ngIf="option.hint">{{ option.hint }}</span>
-        </div>
-      </label>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Chip ══════════════════════════════════════════════════════════════ -->
-  <div *ngIf="isChip" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div class="chip-group d-flex flex-wrap gap-8" [class.is-invalid]="errorMessage">
-      <label *ngFor="let option of localOptionList"
-        class="chip-label cursor-pointer p-6px-14px b-ffffff c-374151 b-1px-solid-D1D5DB br-20px fs-0-875rem"
-        [class.selected]="isChecked(option.code)">
-        <input type="checkbox" [checked]="isChecked(option.code)" [disabled]="!!config.disabled"
-          (change)="onCheckboxListChange(option.code, $any($event.target).checked)" hidden>
-        <span>{{ option.label }}</span>
-      </label>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Switch ════════════════════════════════════════════════════════════ -->
-  <div *ngIf="isSwitch" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label class="switch-container d-flex justify-content-between align-items-center cursor-pointer">
-      <span class="field-label d-block font-poppins c-202124 fs-18px">{{ config.label }}</span>
-      <div class="switch position-relative">
-        <input type="checkbox" [formControlName]="config.name!" [class.is-invalid]="errorMessage">
-        <span class="slider position-absolute cursor-pointer"></span>
-      </div>
-    </label>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Rich Text ═════════════════════════════════════════════════════════ -->
-  <div *ngIf="isRichText" class="field-wrapper component-rich-text d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div class="rich-text-container" [class.is-invalid]="errorMessage">
-      <quill-editor [formControlName]="config.name!" class="rich-text-editor d-block w-100"
-        [placeholder]="config.richTextConfig?.placeholder || config.placeholder || ''"
-        [styles]="{height: config.richTextConfig?.height || '200px'}"
-        [modules]="richTextModules">
-      </quill-editor>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-    <div class="char-count-hint font-poppins font-weight-400 text-14 text-right c-6B7280" *ngIf="showCharCount">
-      {{ remainingCharacters }} characters remaining
-    </div>
-  </div>
-
-  <!-- ══ Rating ════════════════════════════════════════════════════════════ -->
-  <div *ngIf="isRating" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <div class="rating-group d-flex gap-4" [class.is-invalid]="errorMessage">
-      <span *ngFor="let star of getStarArray()" class="star d-inline-flex align-items-center cursor-pointer"
-        [class.filled]="isStarFilled(star)" [class.half]="isStarHalf(star)" (click)="onRatingChange(star, $event)">
-        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>
-      </span>
-    </div>
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Generated Field (read-only) ══════════════════════════════════════ -->
-  <div *ngIf="isGenerated" class="field-wrapper d-flex flex-column gap-6">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">{{ config.label
-      }}</label>
-    <div class="generated-value fs-0-875rem p-0-625rem-0-875rem b-F3F4F6 b-1px-solid-E5E7EB br-8px c-6B7280">{{ value ||
-      '-' }}</div>
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint">{{ config.hint }}</span>
-  </div>
-
-  <!-- ══ File Upload ═══════════════════════════════════════════════════════ -->
-  <div *ngIf="isFileUpload" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <!-- Drop Zone -->
-    <div
-      class="upload-drop-zone d-flex flex-column align-items-center justify-content-center gap-8 cursor-pointer text-center p-32px-24px us-none"
-      [class.drag-over]="isDragOver" [class.has-files]="value?.length" [class.is-invalid]="errorMessage"
-      (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onFileDrop($event)"
-      (click)="fileInput.click()">
-
-      <!-- Icon with accent-colour pill background -->
-      <div class="upload-icon-wrap mb-4">
-        <div class="dropzone-icon-pill d-flex align-items-center justify-content-center">
-          <mat-icon class="upload-cloud-icon">cloud_upload</mat-icon>
-        </div>
-      </div>
-
-      <p class="upload-main-text font-weight-600 m-0 fs-0-9rem">Drag &amp; drop files here</p>
-      <p class="upload-sub-text m-0 fs-0-8rem c-64748B">or <span class="upload-link">Browse files</span></p>
-      <p class="upload-hint-text m-0 fs-0-78rem c-64748B" *ngIf="config.attachmentConfig?.acceptLabel">
-        Supported: <span class="upload-formats font-weight-500">{{ config.attachmentConfig!.acceptLabel }}</span>
-      </p>
-      <p class="upload-hint-text m-0 fs-0-78rem c-64748B" *ngIf="!config.attachmentConfig?.acceptLabel && config.hint">
-        {{ config.hint }}
-      </p>
-      <span class="upload-size-badge fs-0-72rem" *ngIf="config.attachmentConfig?.maxSizeMB">
-        Max {{ config.attachmentConfig!.maxSizeMB }}MB
-      </span>
-
-      <!-- Hidden native file input -->
-      <input #fileInput type="file" hidden [attr.multiple]="config.attachmentConfig?.multiple ? true : null"
-        [attr.accept]="config.attachmentConfig?.accept || null" (change)="onFileSelected($event)">
-    </div>
-
-    <!-- Uploaded file list -->
-    <div class="uploaded-list d-flex flex-column gap-8 mt-10" *ngIf="value?.length">
-      <div *ngFor="let f of value; let i = index"
-        class="uploaded-item d-flex align-items-center gap-10 p-10px-14px br-8px"
-        [class.uploading]="f.isUploading">
-
-        <!-- Uploading spinner -->
-        <ng-container *ngIf="f.isUploading; else fileReady">
-          <div class="upload-spinner rounded-50 b-2px-solid-E2E8F0"></div>
-          <div class="file-info flex-1 d-flex flex-column">
-            <span class="file-name font-weight-500 overflow-hidden fs-0-85rem" [title]="f.name">{{ f.name }}</span>
-            <span class="file-size uploading-label fs-0-72rem">Uploading...</span>
-          </div>
-        </ng-container>
-
-        <!-- Normal state once upload is done -->
-        <ng-template #fileReady>
-          <mat-icon class="file-type-icon">{{ getFileIcon(f.type) }}</mat-icon>
-          <img *ngIf="f.type?.startsWith('image') && f.dataUrl" [src]="f.dataUrl" class="file-thumb rounded-4"
-            alt="preview">
-          <div class="file-info flex-1 d-flex flex-column">
-            <span class="file-name font-weight-500 overflow-hidden fs-0-85rem" [title]="f.name">{{ f.name }}</span>
-            <span class="file-size fs-0-72rem">{{ formatFileSize(f.size) }}</span>
-          </div>
-        </ng-template>
-
-        <!-- Compact icon-only remove button -->
-        <button type="button" class="file-remove-btn d-flex align-items-center justify-content-center rounded-50"
-          [disabled]="f.isUploading" (click)="!f.isUploading && removeUploadedFile(i)"
-          aria-label="Remove file">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-    </div>
-
-    <!-- Validation / file errors -->
-    <span class="field-error color-error fs-0-75rem" *ngIf="fileUploadError">{{ fileUploadError }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage && !fileUploadError">{{ errorMessage }}</span>
-    <span class="field-hint c-6B7280 fs-0-75rem"
-      *ngIf="config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel">
-      {{ config.hint }}
-    </span>
-  </div>
-
-  <!-- ══ Media Upload (Type 2) ════════════════════════════════════════════ -->
-  <div *ngIf="isMediaUpload" class="field-wrapper media-upload-wrapper d-flex flex-column gap-6 p-0 border-none b-none"
-    [formGroup]="formGroup">
-
-    <!-- Hidden file input lives outside *ngIf — triggered via ViewChild -->
-    <input #mediaDeviceInput type="file" hidden multiple accept="image/*" (change)="onMediaFileSelected($event)">
-
-    <!-- Two-column layout -->
-    <div class="mu-layout d-grid align-items-start">
-
-      <!-- ── LEFT PANEL ──────────────────────────────────────────────── -->
-      <div class="mu-left d-flex flex-column gap-20">
-
-        <!-- Header: title + max-items badge -->
-        <div class="mu-header d-flex align-items-start flex-wrap gap-10">
-          <h3 class="mu-title m-0 c-111827 fs-1-35rem">
-            {{ config.label }}
-            <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-          </h3>
-          <span
-            class="mu-badge d-inline-flex align-items-center rounded-20 color-white font-weight-600 fs-0-72rem p-4px-12px b-111827"
-            *ngIf="config.attachmentConfig?.maxFiles">
-            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}
-            {{ config.attachmentConfig?.maxFiles }}
-            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}
-          </span>
-        </div>
-
-        <!-- Description -->
-        <p class="mu-description m-0 fs-0-875rem c-6B7280" *ngIf="config.attachmentConfig?.description">
-          {{ config.attachmentConfig?.description }}
-        </p>
-        <p class="mu-description m-0 fs-0-875rem c-6B7280"
-          *ngIf="!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']">
-          {{ controller.labels['LBL_MEDIA_DESC'] }}
-        </p>
-
-        <!-- Feature bullet list -->
-        <ul class="mu-features m-0 p-0 d-flex flex-column gap-8 ls-none"
-          *ngIf="config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']">
-          <ng-container *ngIf="config.attachmentConfig?.features?.length">
-            <li *ngFor="let f of config.attachmentConfig?.features"
-              class="mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151">
-              <mat-icon class="mu-check text-16 c-3B82F6">check</mat-icon>{{ f }}
-            </li>
-          </ng-container>
-          <ng-container *ngIf="!config.attachmentConfig?.features?.length">
-            <li *ngIf="controller.labels['LBL_MEDIA_FEATURE_1']"
-              class="mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151">
-              <mat-icon class="mu-check text-16 c-3B82F6">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}
-            </li>
-            <li *ngIf="controller.labels['LBL_MEDIA_FEATURE_2']"
-              class="mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151">
-              <mat-icon class="mu-check text-16 c-3B82F6">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}
-            </li>
-            <li *ngIf="controller.labels['LBL_MEDIA_FEATURE_3']"
-              class="mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151">
-              <mat-icon class="mu-check text-16 c-3B82F6">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}
-            </li>
-          </ng-container>
-        </ul>
-
-        <!-- Backdrop to close dropdown on outside click -->
-        <div class="media-menu-backdrop" *ngIf="showMediaMenu"
-          (click)="$event.stopPropagation(); showMediaMenu = false"></div>
-
-        <!-- Add Media button + dropdown -->
-        <div class="media-add-container position-relative" (click)="showMediaMenu = !showMediaMenu">
-          <lib-button id="btn-add-media-{{ config.name }}" [variant]="'warning'"
-            [icon]="{type: 'material', value: 'add_photo_alternate'}">
-            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}
-            <mat-icon class="menu-chevron fs-18px">add</mat-icon>
-          </lib-button>
-
-          <div class="media-dropdown position-absolute rounded-12 overflow-hidden b-ffffff b-1px-solid-E5E7EB"
-            *ngIf="showMediaMenu" role="menu" (click)="$event.stopPropagation()">
-            <!-- Video -->
-            <button id="btn-media-video-{{ config.name }}" type="button"
-              class="media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6"
-              (click)="onMediaMenuVideo(); showMediaMenu = false" role="menuitem">
-              <span
-                class="media-drop-icon media-drop-icon--video d-flex align-items-center justify-content-center rounded-8"><mat-icon>videocam</mat-icon></span>
-              <span class="media-drop-text d-flex flex-column flex-1">
-                <span class="media-drop-label font-weight-600 fs-0-875rem c-111827">{{
-                  controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>
-                <span class="media-drop-desc c-6B7280 fs-0-75rem">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add
-                  YouTube URL'
-                  }}</span>
-              </span>
-            </button>
-            <!-- Device -->
-            <button id="btn-media-device-{{ config.name }}" type="button"
-              class="media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6"
-              (click)="onMediaMenuDevice(); showMediaMenu = false" role="menuitem">
-              <span
-                class="media-drop-icon media-drop-icon--device d-flex align-items-center justify-content-center rounded-8"><mat-icon>upload</mat-icon></span>
-              <span class="media-drop-text d-flex flex-column flex-1">
-                <span class="media-drop-label font-weight-600 fs-0-875rem c-111827">{{
-                  controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'
-                  }}</span>
-                <span class="media-drop-desc c-6B7280 fs-0-75rem">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] ||
-                  'Select images from your
-                  computer' }}</span>
-              </span>
-            </button>
-            <!-- Library -->
-            <button id="btn-media-library-{{ config.name }}" type="button"
-              class="media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6"
-              (click)="onMediaMenuLibrary(); showMediaMenu = false" role="menuitem">
-              <span
-                class="media-drop-icon media-drop-icon--library d-flex align-items-center justify-content-center rounded-8"><mat-icon>photo_library</mat-icon></span>
-              <span class="media-drop-text d-flex flex-column flex-1">
-                <span class="media-drop-label font-weight-600 fs-0-875rem c-111827">{{
-                  controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'
-                  }}</span>
-                <span class="media-drop-desc c-6B7280 fs-0-75rem">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] ||
-                  'Choose from default
-                  images' }}</span>
-              </span>
-            </button>
-          </div>
-        </div>
-
-        <!-- YouTube URL Input (inline below button) -->
-        <div class="youtube-input-panel d-flex flex-column gap-8 p-16 rounded-10 b-FFFAF1 b-1px-solid-E5E7EB"
-          *ngIf="showYoutubeInput">
-          <label class="youtube-panel-label d-flex align-items-center gap-6 font-weight-600 fs-0-875rem c-111827">
-            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}
-          </label>
-          <div class="youtube-input-row d-flex gap-8">
-            <input id="input-youtube-url-{{ config.name }}" type="url" class="field-input youtube-url-input"
-              [(ngModel)]="youtubeUrlInput" [ngModelOptions]="{standalone: true}"
-              [placeholder]="controller.labels['PH_YOUTUBE_URL'] || 'Video URL'" (keyup.enter)="addYoutubeMedia()">
-            <lib-button id="btn-add-youtube-{{ config.name }}" [variant]="'secondary'" (click)="addYoutubeMedia()">
-              {{ controller.labels['LBL_ADD'] || 'Add' }}
-            </lib-button>
-          </div>
-          <span class="field-error color-error fs-0-75rem" *ngIf="youtubeUrlError">{{ youtubeUrlError }}</span>
-        </div>
-
-        <div
-          class="media-upload-status d-flex align-items-center gap-8 mt-4 color-error rounded-8 font-weight-500 p-10px-14px b-FEF2F2 fs-0-85rem"
-          *ngIf="mediaUploadError">
-          <mat-icon class="status-icon fs-18px">error_outline</mat-icon>
-          <span>{{ mediaUploadError }}</span>
-        </div>
-
-        <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-        <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ config.hint }}</span>
-      </div>
-      <!-- end left panel -->
-
-      <!-- ── RIGHT PANEL (carousel) ──────────────────────────────────── -->
-      <div class="mu-right d-flex flex-column gap-12">
-
-        <!-- Carousel (when items exist) -->
-        <div class="media-carousel-section d-flex flex-column gap-12" *ngIf="mediaItems.length">
-          <div
-            class="media-carousel-main position-relative w-100 overflow-hidden d-flex align-items-center justify-content-center br-12px b-0F172A">
-            <button id="btn-carousel-prev-{{ config.name }}" type="button"
-              class="carousel-nav carousel-nav--prev position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85"
-              (click)="mediaCarouselPrev()" [disabled]="mediaCarouselIndex === 0" aria-label="Previous">
-              <mat-icon>chevron_left</mat-icon>
-            </button>
-
-            <div class="carousel-viewer position-absolute d-flex align-items-center justify-content-center"
-              *ngFor="let item of mediaItems; let i = index" [hidden]="i !== mediaCarouselIndex">
-              <div *ngIf="item.isUploading"
-                class="carousel-uploading d-flex flex-column align-items-center gap-12 c-94A3B8 fs-0-85rem">
-                <div class="carousel-spinner rounded-50 b-3px-solid-rgba-255-255-255-0-15"></div>
-                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading…' }}</span>
-              </div>
-              <ng-container *ngIf="!item.isUploading && item.mediaType === 'youtube'">
-                <iframe class="carousel-iframe w-100 h-100 br-12px" [src]="item.url | trustedUrl" frameborder="0"
-                  allowfullscreen
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
-                </iframe>
-              </ng-container>
-              <ng-container *ngIf="!item.isUploading && item.mediaType === 'image'">
-                <img class="carousel-image w-100 h-100 br-12px" [src]="item.url" alt="Media">
-              </ng-container>
-              <button id="btn-remove-media-{{ config.name }}-{{ i }}" type="button"
-                class="carousel-remove-btn position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-0-0-0-0-55"
-                [disabled]="item.isUploading" (click)="removeMediaItem(i)" aria-label="Remove">
-                <mat-icon>close</mat-icon>
-              </button>
-            </div>
-
-            <button id="btn-carousel-next-{{ config.name }}" type="button"
-              class="carousel-nav carousel-nav--next position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85"
-              (click)="mediaCarouselNext()" [disabled]="mediaCarouselIndex === mediaItems.length - 1" aria-label="Next">
-              <mat-icon>chevron_right</mat-icon>
-            </button>
-
-            <div class="carousel-dots position-absolute d-flex gap-6">
-              <span *ngFor="let item of mediaItems; let i = index"
-                class="carousel-dot rounded-50 cursor-pointer b-rgba-255-255-255-0-45"
-                [class.active]="i === mediaCarouselIndex" (click)="mediaGoTo(i)"></span>
-            </div>
-          </div>
-
-          <!-- Thumbnail strip -->
-          <div class="media-thumbnail-strip d-flex flex-wrap gap-8 pb-4px">
-            <div *ngFor="let item of mediaThumbnails; let i = index"
-              class="media-thumb rounded-8 overflow-hidden cursor-pointer d-flex align-items-center justify-content-center b-2px-solid-transparent b-E2E8F0"
-              [class.active]="i === mediaCarouselIndex" (click)="mediaGoTo(i)">
-              <div *ngIf="item.isUploading"
-                class="thumb-uploading d-flex align-items-center justify-content-center w-100 h-100">
-                <div class="thumb-spinner rounded-50 b-2px-solid-E2E8F0"></div>
-              </div>
-              <img *ngIf="!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl"
-                [src]="item.thumbnailUrl" class="thumb-img w-100 h-100" alt="Video thumbnail">
-              <div *ngIf="!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl"
-                class="thumb-yt-placeholder d-flex align-items-center justify-content-center w-100 h-100 b-1E293B c-EF4444">
-                <mat-icon>play_circle</mat-icon>
-              </div>
-              <img *ngIf="!item.isUploading && item.mediaType === 'image' && item.url" [src]="item.url"
-                class="thumb-img w-100 h-100" alt="Image thumbnail">
-            </div>
-          </div>
-        </div>
-
-        <!-- Empty right-side placeholder -->
-        <div
-          class="mu-right-empty d-flex flex-column align-items-center justify-content-center gap-10 h-100 text-center p-24 br-12px b-FFFAF1 c-94A3B8 b-2px-dashed-CBD5E1"
-          *ngIf="!mediaItems.length" (click)="onMediaMenuDevice()">
-          <mat-icon class="mu-right-empty-icon fs-52px">perm_media</mat-icon>
-          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>
-        </div>
-
-      </div>
-      <!-- end right panel -->
-
-    </div><!-- end mu-layout -->
-  </div>
-
-
-  <!-- ══ Library Image Picker Modal ════════════════════════════════════════ -->
-  <!-- Wrapper is always in DOM (hidden) so @ViewChild can move it to body -->
-  <div #libraryModal class="media-library-portal-host" [class.is-open]="showLibraryModal">
-
-    <!-- Backdrop -->
-    <div class="media-library-overlay" (click)="closeLibraryModal()"></div>
-
-    <!-- Modal card -->
-    <div class="media-library-modal d-flex flex-column overflow-hidden b-ffffff br-16px"
-      role="dialog" aria-modal="true">
-      <div class="library-modal-header d-flex align-items-start justify-content-between p-24px-28px bb-1px-solid-E5E7EB">
-        <div class="header-left d-flex flex-column gap-8">
-          <h3 class="library-modal-title m-0 color-dark fs-1-25rem">
-            {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}
-          </h3>
-          <p class="library-modal-subtitle m-0 color-gray fs-0-85rem">
-            {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Select images from your library.' }}
-          </p>
-        </div>
-        <button id="btn-close-library-{{ config.name }}" type="button"
-          class="library-close-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 border-none b-none c-9CA3AF"
-          (click)="closeLibraryModal()" aria-label="Close">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-
-      <!-- Loading -->
-      <div class="library-loading" *ngIf="libraryLoading">
-        <div class="lib-spinner rounded-50 b-3px-solid-E2E8F0"></div>
-        <span>{{ controller.labels['LBL_LOADING'] || 'Loading…' }}</span>
-      </div>
-
-      <!-- Error -->
-      <div class="library-error d-flex align-items-center gap-8 color-error b-FEF2F2 fs-0-875rem p-16px-24px"
-        *ngIf="libraryError && !libraryLoading">
-        <mat-icon>error_outline</mat-icon>
-        {{ libraryError }}
-      </div>
-
-      <!-- Image grid -->
-      <div class="library-grid d-grid gap-16 flex-1 p-28px b-F9FAFB" *ngIf="!libraryLoading && libraryImages.length">
-        <div *ngFor="let img of libraryImages; let li = index" id="lib-img-{{ config.name }}-{{ li }}"
-          class="library-grid-item position-relative rounded-12 overflow-hidden cursor-pointer bg-white b-3px-solid-transparent"
-          [class.selected]="isLibraryItemSelected(img)" (click)="toggleLibraryItem(img)">
-          <img [src]="getLibraryItemUrl(img)" class="library-grid-img w-100 h-100 d-block" alt="Library image">
-          <div
-            class="library-check position-absolute bg-white rounded-50 d-flex align-items-center justify-content-center c-3B82F6"
-            *ngIf="isLibraryItemSelected(img)">
-            <mat-icon>check_circle</mat-icon>
-          </div>
-          <div class="library-overlay-hover position-absolute b-rgba-59-130-246-0-12"></div>
-        </div>
-      </div>
-
-      <!-- Empty library -->
-      <div
-        class="library-empty d-flex flex-column align-items-center justify-content-center gap-12 flex-1 c-9CA3AF fs-0-875rem p-48px-24px"
-        *ngIf="!libraryLoading && !libraryError && libraryImages.length === 0">
-        <mat-icon>image_not_supported</mat-icon>
-        <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>
-      </div>
-
-      <!-- Footer -->
-      <div class="library-modal-footer d-flex align-items-center justify-content-end bg-white p-20px-28px bt-1px-solid-E5E7EB">
-        <div class="library-footer-actions d-flex gap-12">
-          <lib-button id="btn-library-cancel-{{ config.name }}" [variant]="'outline'" (click)="closeLibraryModal()">
-            {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}
-          </lib-button>
-          <lib-button id="btn-library-confirm-{{ config.name }}" [variant]="'primary'"
-            [disabled]="librarySelectedIds.size === 0" (click)="confirmLibrarySelection()">
-            {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}
-          </lib-button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-
-  <!-- ══ Location Field ═══════════════════════════════════════════════════ -->
-  <div *ngIf="isLocation" class="field-wrapper location-field-wrapper d-flex flex-column gap-6 gap-12"
-    [formGroup]="formGroup">
-
-    <!-- Field label -->
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-    <p class="location-subtitle m-0 c-6B7280 fs-0-8125rem" *ngIf="config.hint">{{ config.hint }}</p>
-
-    <!-- Three-tab bar -->
-    <div class="location-tabs d-flex gap-12 mb-24">
-      <lib-button class="loc-tab-btn flex-1" [variant]="locationActiveTab === 'VENUE' ? 'warning' : 'outline'"
-        (click)="onLocationTabChange('VENUE')">
-        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}
-      </lib-button>
-      <lib-button class="loc-tab-btn flex-1" [variant]="locationActiveTab === 'ONLINE' ? 'warning' : 'outline'"
-        (click)="onLocationTabChange('ONLINE')">
-        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}
-      </lib-button>
-      <lib-button class="loc-tab-btn flex-1" [variant]="locationActiveTab === 'TBA' ? 'warning' : 'outline'"
-        (click)="onLocationTabChange('TBA')">
-        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}
-      </lib-button>
-    </div>
-
-    <!-- VENUE TAB -->
-    <div *ngIf="locationActiveTab === 'VENUE'" class="loc-panel loc-venue-panel d-flex flex-column gap-12">
-
-      <p class="loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem">
-        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}
-      </p>
-
-      <!-- Added venue rows -->
-      <div class="loc-venue-list d-flex flex-column gap-8" *ngIf="locationVenues.length > 0">
-        <div *ngFor="let venue of locationVenues; let i = index"
-          class="loc-venue-item d-flex align-items-center gap-10 p-10px-14px br-7px b-ffffff b-1px-solid-D1D5DB">
-          <mat-icon class="loc-venue-search-icon fs-18px c-9CA3AF">search</mat-icon>
-          <span class="loc-venue-text flex-1 overflow-hidden fs-0-875rem c-111827">{{ venue.address || venue.name ||
-            venue.description }}</span>
-          <button type="button"
-            class="loc-action-btn loc-delete-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none p-4px"
-            (click)="removeLocationVenue(i)">
-            <mat-icon>delete_outline</mat-icon>
-          </button>
-        </div>
-      </div>
-
-      <!-- Location count badge -->
-      <p class="loc-count-text m-0 font-weight-600 fs-0-8125rem c-3B82F6"
-        *ngIf="locationVenues.length > 0 && config.locationConfig?.allowMulti">
-        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}
-      </p>
-
-      <!-- Search input (hide when max reached) -->
-      <div class="loc-search-container position-relative" *ngIf="!locationMaxReached">
-        <div class="loc-search-wrapper position-relative d-flex align-items-center mt-4">
-          <mat-icon class="loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none">search</mat-icon>
-          <input
-            class="field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem"
-            [placeholder]="config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')"
-            [value]="locationSearchText" (input)="handleLocationSearchInput($event)" (blur)="hideLocationSuggestions()"
-            autocomplete="off" [class.is-invalid]="errorMessage">
-        </div>
-        <!-- Suggestions dropdown -->
-        <div class="loc-suggestions-panel position-absolute overflow-hidden br-8px b-ffffff b-1px-solid-D1D5DB"
-          *ngIf="locationShowSuggestions && locationSuggestions.length">
-          <div *ngFor="let sug of locationSuggestions"
-            class="loc-suggestion-item d-flex align-items-center gap-10 cursor-pointer p-10px-14px"
-            (mousedown)="onLocationSuggestionSelect(sug)">
-            <mat-icon class="loc-suggestion-icon fs-18px c-E53E3E">place</mat-icon>
-            <span class="loc-suggestion-text overflow-hidden fs-0-875rem c-374151">{{ sug.description }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Add another button -->
-      <button type="button"
-        class="loc-add-btn d-inline-flex align-items-center gap-6 cursor-pointer font-weight-600 p-0 b-none border-none fs-0-875rem c-1A56DB"
-        *ngIf="locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti">
-        <mat-icon>add_circle_outline</mat-icon>
-        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>
-      </button>
-
-      <!-- Map -->
-      <div class="loc-map-container overflow-hidden br-10px b-1px-solid-E5E7EB"
-        *ngIf="config.locationConfig?.showMap !== false">
-        <ng-container *ngIf="config.locationConfig?.googleMapsApiKey; else simpleEmbed">
-          <div [id]="'loc-map-' + config.name" class="loc-map-frame w-100 d-block border-none"
-            [style.height]="config.locationConfig?.mapHeight || '300px'"></div>
-        </ng-container>
-        <ng-template #simpleEmbed>
-          <iframe class="loc-map-frame w-100 d-block border-none"
-            [style.height]="config.locationConfig?.mapHeight || '300px'" [src]="getLocationMapEmbedUrl() | trustedUrl"
-            frameborder="0" allowfullscreen loading="lazy">
-          </iframe>
-        </ng-template>
-      </div>
-
-      <!-- Map hint -->
-      <p class="loc-map-hint m-0 text-center fs-0-78rem c-6B7280">
-        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}
-      </p>
-    </div>
-
-    <!-- ONLINE TAB -->
-    <div *ngIf="locationActiveTab === 'ONLINE'" class="loc-panel loc-online-panel d-flex flex-column gap-12">
-      <p class="loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem">
-        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}
-      </p>
-      <div class="loc-search-wrapper position-relative d-flex align-items-center mt-4">
-        <mat-icon class="loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none">link</mat-icon>
-        <input
-          class="field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem"
-          type="url"
-          [placeholder]="config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')"
-          [value]="locationOnlineUrl" (input)="onLocationUrlChange($any($event.target).value)"
-          [class.is-invalid]="errorMessage">
-      </div>
-    </div>
-
-    <!-- TBA TAB -->
-    <div *ngIf="locationActiveTab === 'TBA'"
-      class="loc-panel loc-tba-panel d-flex flex-column gap-12 justify-content-center">
-      <div
-        class="loc-tba-content d-flex flex-column align-items-center justify-content-center text-center gap-12 p-32px-24px b-F9FAFB b-1px-dashed-D1D5DB br-10px">
-        <mat-icon class="loc-tba-icon fs-40px c-9CA3AF">schedule</mat-icon>
-        <p class="loc-tba-text m-0 c-6B7280 fs-0-9rem">
-          {{ controller.labels['LBL_LOC_TBA_DESC'] || "This event's location is yet to be announced. Check back later
-          for updates." }}
-        </p>
-      </div>
-    </div>
-
-    <!-- Hidden real form control -->
-    <input type="hidden" [formControlName]="config.name!">
-
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-  <!-- ══ Link List Input ════════════════════════════════════════════════════ -->
-  <div *ngIf="isLinkList" class="field-wrapper d-flex flex-column gap-6" [formGroup]="formGroup">
-    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px">
-      {{ controller.labels[config.label] || config.label }}
-      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
-    </label>
-
-    <!-- Top Links list (if listPosition === 'top') -->
-    <div *ngIf="linkListConfig?.listPosition === 'top' && linkListItems.length > 0" class="link-list-container mb-8px">
-      <ul class="link-items-list p-0 m-0" 
-          [style.display]="'grid'"
-          [style.gridTemplateColumns]="'repeat(12, 1fr)'"
-          [style.gap]="'12px 16px'">
-        <li *ngFor="let item of linkListItems; let idx = index" 
-            class="link-list-item"
-            [style.gridColumn]="'span ' + (linkListConfig?.colSpan || 12)">
-          <!-- Normal display mode -->
-          <ng-container *ngIf="editingLinkIndex !== idx">
-            <span class="link-url-text text-truncate font-weight-500 color-333">{{ getLinkDisplayUrl(item) }}</span>
-            <div class="link-item-actions d-flex align-items-center gap-12px">
-              <button type="button" class="action-btn edit-btn" 
-                      *ngIf="linkListConfig?.editable !== false" (click)="startEditLink(idx)" [title]="controller.labels['COMMON.ACTIONS.EDIT'] || 'Edit'">
-                <mat-icon>edit</mat-icon>
-              </button>
-              <button type="button" class="action-btn delete-btn" 
-                      *ngIf="linkListConfig?.deleteable !== false" (click)="deleteLinkItem(idx)" [title]="controller.labels['COMMON.ACTIONS.DELETE'] || 'Delete'">
-                <mat-icon>delete_outline</mat-icon>
-              </button>
-            </div>
-          </ng-container>
-
-          <!-- Inline Edit mode -->
-          <ng-container *ngIf="editingLinkIndex === idx">
-            <div class="edit-input-wrapper d-flex align-items-center gap-8px w-100">
-              <input type="text" class="field-input flex-1 py-4px" [(ngModel)]="editingLinkValue" 
-                     [ngModelOptions]="{standalone: true}" (keydown.enter)="saveEditLink(idx)" (keydown.escape)="cancelEditLink()"
-                     (input)="linkValidationError = ''">
-              <button type="button" class="action-btn save-btn" (click)="saveEditLink(idx)" [title]="controller.labels['COMMON.ACTIONS.SAVE'] || 'Save'">
-                <mat-icon>check</mat-icon>
-              </button>
-              <button type="button" class="action-btn cancel-btn" (click)="cancelEditLink()" [title]="controller.labels['COMMON.ACTIONS.CANCEL'] || 'Cancel'">
-                <mat-icon>close</mat-icon>
-              </button>
-            </div>
-          </ng-container>
-        </li>
-      </ul>
-    </div>
-
-    <!-- Input text + plus icon -->
-    <div class="input-group position-relative d-flex w-100">
-      <input type="text" class="field-input pe-40px" [placeholder]="controller.labels[config.placeholder!] || config.placeholder || controller.labels['COMMON.ENTER_LINK'] || 'Enter link...'"
-             [(ngModel)]="newLinkInputValue" [ngModelOptions]="{standalone: true}" (keydown.enter)="addLinkItem($event)"
-             [disabled]="config.readonly || config.disabled"
-             (input)="linkValidationError = ''">
-      
-      <button type="button" class="position-absolute right-8px top-50-percent translate-y-minus-50 d-flex align-items-center justify-content-center b-none bg-none p-0 cursor-pointer color-primary"
-              [disabled]="config.readonly || config.disabled || !newLinkInputValue?.trim()"
-              (click)="addLinkItem()" style="right: 8px; top: 50%; transform: translateY(-50%); z-index: 10;">
-        <mat-icon>add</mat-icon>
-      </button>
-    </div>
-
-    <!-- Validation error message -->
-    <span class="field-error color-error fs-0-75rem mt-4px d-block" *ngIf="linkValidationError">{{ linkValidationError }}</span>
-
-    <!-- Bottom Links list (if listPosition !== 'top') -->
-    <div *ngIf="linkListConfig?.listPosition !== 'top' && linkListItems.length > 0" class="link-list-container mt-8px">
-      <ul class="link-items-list p-0 m-0" 
-          [style.display]="'grid'"
-          [style.gridTemplateColumns]="'repeat(12, 1fr)'"
-          [style.gap]="'12px 16px'">
-        <li *ngFor="let item of linkListItems; let idx = index" 
-            class="link-list-item"
-            [style.gridColumn]="'span ' + (linkListConfig?.colSpan || 12)">
-          <!-- Normal display mode -->
-          <ng-container *ngIf="editingLinkIndex !== idx">
-            <span class="link-url-text text-truncate font-weight-500 color-333">{{ getLinkDisplayUrl(item) }}</span>
-            <div class="link-item-actions d-flex align-items-center gap-12px">
-              <button type="button" class="action-btn edit-btn" 
-                      *ngIf="linkListConfig?.editable !== false" (click)="startEditLink(idx)" [title]="controller.labels['COMMON.ACTIONS.EDIT'] || 'Edit'">
-                <mat-icon>edit</mat-icon>
-              </button>
-              <button type="button" class="action-btn delete-btn" 
-                      *ngIf="linkListConfig?.deleteable !== false" (click)="deleteLinkItem(idx)" [title]="controller.labels['COMMON.ACTIONS.DELETE'] || 'Delete'">
-                <mat-icon>delete_outline</mat-icon>
-              </button>
-            </div>
-          </ng-container>
-
-          <!-- Inline Edit mode -->
-          <ng-container *ngIf="editingLinkIndex === idx">
-            <div class="edit-input-wrapper d-flex align-items-center gap-8px w-100">
-              <input type="text" class="field-input flex-1 py-4px" [(ngModel)]="editingLinkValue" 
-                     [ngModelOptions]="{standalone: true}" (keydown.enter)="saveEditLink(idx)" (keydown.escape)="cancelEditLink()"
-                     (input)="linkValidationError = ''">
-              <button type="button" class="action-btn save-btn" (click)="saveEditLink(idx)" [title]="controller.labels['COMMON.ACTIONS.SAVE'] || 'Save'">
-                <mat-icon>check</mat-icon>
-              </button>
-              <button type="button" class="action-btn cancel-btn" (click)="cancelEditLink()" [title]="controller.labels['COMMON.ACTIONS.CANCEL'] || 'Cancel'">
-                <mat-icon>close</mat-icon>
-              </button>
-            </div>
-          </ng-container>
-        </li>
-      </ul>
-    </div>
-
-    <!-- Hidden real form control -->
-    <input type="hidden" [formControlName]="config.name!">
-
-    <span class="field-hint c-6B7280 fs-0-75rem" *ngIf="config.hint && !errorMessage">{{ controller.labels[config.hint] || config.hint }}</span>
-    <span class="field-error color-error fs-0-75rem" *ngIf="errorMessage">{{ errorMessage }}</span>
-  </div>
-
-</div>