platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,1109 @@
+<div class="form-field mb-16px" *ngIf="isVisible" [class.has-error]="errorMessage">
+
+  <!-- ══ ROW Layout ════════════════════════════════════════════════════════ -->
+  <div *ngIf="isRow" class="form-row grid-row">
+    <ng-container *ngFor="let child of config.children">
+      <div class="row-field" [style.gridColumn]="'span ' + getChildColSpan(child)" *ngIf="child.isEnabled !== false">
+        <lib-form-field [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">
+                <lib-form-field [config]="field" [controller]="instance.rowController" [formGroup]="instance.fg"
+                  [allowMulti]="false">
+                </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">
+                <lib-form-field [config]="field" [controller]="instance.rowController" [formGroup]="instance.fg"
+                  [allowMulti]="false">
+                </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">
+          <lib-form-field [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 mb-0-5rem">
+      {{ 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 mb-0-5rem">
+      {{ 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 mb-0-5rem">
+      {{ 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">
+    <label *ngIf="config.label" class="field-label d-block font-poppins c-202124 fs-18px mb-0-5rem">
+      {{ 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>
+
+    <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 mb-0-5rem">
+      {{ 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 mb-0-5rem">
+      {{ config.label }}
+      <span class="required c-DC2626 ml-0-125rem" *ngIf="config.required">*</span>
+    </label>
+
+    <select *ngIf="config.subType === 'SINGLE'" class="field-input" [formControlName]="config.name!"
+      [class.is-invalid]="errorMessage">
+      <option [ngValue]="null" disabled selected>{{ config.placeholder || 'Select' }}</option>
+      <option *ngFor="let option of localOptionList" [value]="option.code">
+        {{ option.label }}
+      </option>
+    </select>
+
+    <!-- MULTIPLE SELECT: custom panel with checkboxes -->
+    <div *ngIf="config.subType === 'MULTIPLE'" class="multi-select-wrapper"
+      [class.is-invalid]="errorMessage">
+
+      <div class="field-input multi-select-trigger d-flex align-items-center justify-content-between cursor-pointer"
+        [class.ms-open]="isMultiDropdownOpen"
+        (click)="toggleMultiDropdown($event)">
+        <span *ngIf="multiSelectedCount > 0" class="multi-select-value fs-0-9rem">
+          {{ multiSelectedCount }} selected
+        </span>
+        <span *ngIf="multiSelectedCount === 0" class="multi-select-placeholder">
+          {{ config.placeholder || selectPlaceholderLabel }}
+        </span>
+        <mat-icon class="multi-select-arrow">
+          {{ isMultiDropdownOpen ? expandLessLabel : expandMoreLabel }}
+        </mat-icon>
+      </div>
+
+      <div class="multi-select-panel" *ngIf="isMultiDropdownOpen"
+        (click)="$event.stopPropagation()">
+        <label *ngFor="let option of localOptionList"
+          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="!localOptionList?.length"
+          class="multi-select-empty fs-0-875rem c-6B7280">
+          {{ noOptionsAvailableLabel }}
+        </div>
+      </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>
+
+  <!-- ══ 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 mb-0-5rem">
+      {{ 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 mb-0-5rem">
+      {{ 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 mb-0-5rem">
+      {{ 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 mb-0-5rem">{{ 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 mb-0-5rem">
+      {{ 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'}">
+      </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 mb-0-5rem">
+      {{ 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 mb-0-5rem">{{ 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 mb-0-5rem">
+      {{ 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 mb-0-5rem">
+      {{ 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>
+
+</div>