commons-shared-web-ui 0.0.53 → 0.0.55

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

@@ -271,20 +271,39 @@
 
   <!-- ══ 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>
+    <!-- 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 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="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 class="readonly-icons position-absolute d-flex gap-8 pe-none" *ngIf="config.readonly">
+          <mat-icon class="lock-icon">lock</mat-icon>
+        </div>
       </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>
@@ -1193,4 +1212,119 @@
     <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 mb-0-5rem">
+      {{ 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>

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

@@ -2011,4 +2011,102 @@ select.field-input {
   .option-content {
     padding-left: 10px;
   }
+}
+
+/* ==========================================================================
+   LINK_LIST Field Styling
+   ========================================================================== */
+.link-list-container {
+  border: none !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+}
+
+.link-items-list {
+  list-style: none;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr !important;
+    
+    .link-list-item {
+      grid-column: span 12 !important;
+    }
+  }
+}
+
+.link-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background-color: var(--cc-sf-link-item-bg, #f9fafb) !important;
+  border: 1px solid var(--cc-sf-link-item-border, #E5E7EB) !important;
+  border-radius: var(--cc-sf-input-radius, 9px) !important;
+  gap: 12px;
+  min-height: 48px;
+  
+  .link-url-text {
+    font-size: 0.875rem;
+    color: var(--cc-sf-link-item-text, #111827);
+    word-break: break-all;
+  }
+}
+
+.link-list-item .action-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border-radius: 6px;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  mat-icon {
+    font-size: 22px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.edit-btn {
+    color: var(--cc-sf-link-edit-color, #4b5563);
+    &:hover {
+      color: var(--cc-sf-accent-color, #6366F1);
+      background-color: #F3F4F6;
+    }
+  }
+
+  &.delete-btn {
+    color: var(--cc-sf-link-delete-color, #ef4444);
+    &:hover {
+      background-color: var(--cc-sf-error-bg, #FFF5F5);
+    }
+  }
+  
+  &.save-btn {
+    color: var(--cc-sf-link-save-color, #16a34a) !important;
+    &:hover {
+      background-color: #ECFDF5;
+    }
+  }
+
+  &.cancel-btn {
+    color: #ef4444 !important; // Red cancel icon color
+    &:hover {
+      background-color: var(--cc-sf-error-bg, #FFF5F5);
+    }
+  }
+}
+
+.pe-40px {
+  padding-right: 40px !important;
 }

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

@@ -8,7 +8,7 @@ import {
   ValidatorFn,
   Validators
 } from '@angular/forms';
-import { SectionConfig, FieldConfig, FormLabels, UploadedFile, MediaItem, LocationItem, LocationFieldValue, AttachmentConfig, LibraryUploadConfig, AutocompleteConfig, AutocompleteDisplayField, DropdownSearchConfig } from '../../models/form-schema.model';
+import { SectionConfig, FieldConfig, FormLabels, UploadedFile, MediaItem, LocationItem, LocationFieldValue, AttachmentConfig, LibraryUploadConfig, AutocompleteConfig, AutocompleteDisplayField, DropdownSearchConfig, LinkListConfig } from '../../models/form-schema.model';
 import { SmartFormController } from '../../services/smart-form-controller.service';
 import { ExpressionService } from '../../services/expression.service';
 import { ValidationUtils } from '../../utils/validation.utils';
@@ -16,6 +16,7 @@ import { StringUtils } from '../../../../utils/string.utils';
 import { Subject, combineLatest, forkJoin, BehaviorSubject, merge } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { ConfirmationModalConfig } from '../../../confirmation-modal/confirmation-modal.models';
+import { TimePickerLabels } from '../../../time-picker/models/time-picker.models';
 
 @Component({
   selector: 'lib-form-field',
@@ -174,6 +175,12 @@ export class FormFieldComponent implements OnInit, OnDestroy {
   /** Tracks open accordion panels for standard (non-multiSave) GROUP repeaters. */
   expandedGroupInstances = new Set<number>();
 
+  // ── LINK_LIST support ──────────────────────────────────────────────────
+  newLinkInputValue = '';
+  editingLinkIndex: number | null = null;
+  editingLinkValue = '';
+  linkValidationError = '';
+
   /**
    * Key used to register the GROUP control on the parent formGroup.
    * Priority: sectionConfig.name > field.name > camelCase(label) > '__group__'
@@ -1671,6 +1678,23 @@ export class FormFieldComponent implements OnInit, OnDestroy {
   get isNumberField(): boolean { return this.config.type === 'NUMBER_INPUT'; }
   get isDateField(): boolean { return this.config.type === 'DATE'; }
   get isTimeField(): boolean { return this.config.type === 'TIME'; }
+  get isWheelVariant(): boolean {
+    return this.config.type === 'TIME' && this.config.timeConfig?.variant === 'wheel';
+  }
+
+  get timePickerLabels(): TimePickerLabels {
+    const labels = this.controller.labels || {};
+    return {
+      selectTimeTitle: labels['TIME_PICKER.SELECT_TIME'],
+      hourLabel:       labels['TIME_PICKER.HOUR'],
+      minuteLabel:     labels['TIME_PICKER.MINUTE'],
+      periodLabel:     labels['TIME_PICKER.PERIOD'],
+      amLabel:         labels['TIME_PICKER.AM'],
+      pmLabel:         labels['TIME_PICKER.PM'],
+      confirmLabel:    labels['COMMON.ACTIONS.CONFIRM'],
+      cancelLabel:     labels['COMMON.ACTIONS.CANCEL'],
+    };
+  }
   get isDropdown(): boolean { return this.config.type === 'DROPDOWN'; }
   get isAutocomplete(): boolean { return this.config.type === 'AUTOCOMPLETE'; }
   get isFileUpload(): boolean { return this.config.type === 'FILE_UPLOAD'; }
@@ -1685,6 +1709,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
   get isRow(): boolean { return this.config.type === 'ROW'; }
   get isGroup(): boolean { return this.config.type === 'GROUP'; }
   get isLocation(): boolean { return this.config.type === 'LOCATION'; }
+  get isLinkList(): boolean { return this.config.type === 'LINK_LIST'; }
 
   // ── AUTOCOMPLETE helpers ────────────────────────────────────────────────
 
@@ -2778,5 +2803,204 @@ export class FormFieldComponent implements OnInit, OnDestroy {
       this._googleMap.fitBounds(bounds);
     }
   }
+
+  // ── LINK_LIST helpers ──────────────────────────────────────────────────
+  get linkListConfig(): LinkListConfig | undefined {
+    return this.config.linkListConfig;
+  }
+
+  get linkListItems(): any[] {
+    const format = this.linkListConfig?.valueFormat || 'string';
+    const val = this.value;
+    if (!val) return [];
+
+    if (format === 'string') {
+      if (typeof val === 'string') {
+        const sep = this.linkListConfig?.separator || ',';
+        return val.split(sep).map(s => s.trim()).filter(Boolean);
+      }
+      return [];
+    } else if (format === 'array') {
+      return Array.isArray(val) ? val : [];
+    } else if (format === 'object') {
+      return Array.isArray(val) ? val : [];
+    }
+    return [];
+  }
+
+  getLinkDisplayUrl(item: any): string {
+    if (!item) return '';
+    const format = this.linkListConfig?.valueFormat || 'string';
+    if (format === 'object') {
+      const urlKey = this.linkListConfig?.urlKey || 'linkUrl';
+      return item[urlKey] || '';
+    }
+    return String(item);
+  }
+
+  addLinkItem(event?: Event): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const val = this.newLinkInputValue?.trim();
+    if (!val) return;
+
+    // Normalize URL
+    const formattedUrl = /^https?:\/\//i.test(val) ? val : 'https://' + val;
+
+    // Validate URL pattern
+    const patternStr = this.linkListConfig?.pattern || '^https?://([a-zA-Z0-9\\-]+\\.)+[a-zA-Z]{2,}(/\\S*)?$';
+    try {
+      const regex = new RegExp(patternStr, 'i');
+      if (!regex.test(formattedUrl)) {
+        this.linkValidationError = this.linkListConfig?.patternMessage || this.controller.labels['COMMON.INVALID_URL'] || 'Invalid URL format';
+        return;
+      }
+    } catch (e) {
+      console.error('Invalid pattern regex in LinkListConfig', e);
+    }
+
+    this.linkValidationError = '';
+
+    const format = this.linkListConfig?.valueFormat || 'string';
+    const currentItems = [...this.linkListItems];
+
+    if (format === 'string') {
+      currentItems.push(formattedUrl);
+      const sep = this.linkListConfig?.separator || ',';
+      this.updateValue(currentItems.join(sep));
+    } else if (format === 'array') {
+      currentItems.push(formattedUrl);
+      this.updateValue(currentItems);
+    } else if (format === 'object') {
+      const urlKey = this.linkListConfig?.urlKey || 'linkUrl';
+      currentItems.push({ [urlKey]: formattedUrl, id: 0 });
+      this.updateValue(currentItems);
+    }
+
+    this.newLinkInputValue = '';
+  }
+
+  deleteLinkItem(index: number): void {
+    const format = this.linkListConfig?.valueFormat || 'string';
+    const currentItems = [...this.linkListItems];
+    const itemToRemove = currentItems[index];
+
+    const deleteLinkLocal = () => {
+      currentItems.splice(index, 1);
+      if (format === 'string') {
+        const sep = this.linkListConfig?.separator || ',';
+        this.updateValue(currentItems.length > 0 ? currentItems.join(sep) : null);
+      } else if (format === 'array') {
+        this.updateValue(currentItems.length > 0 ? currentItems : null);
+      } else if (format === 'object') {
+        this.updateValue(currentItems.length > 0 ? currentItems : null);
+      }
+    };
+
+    const deleteApiUrl = this.linkListConfig?.deleteApiUrl;
+    if (format === 'object' && itemToRemove && itemToRemove.id && deleteApiUrl) {
+      let resolvedUrl = deleteApiUrl;
+      const idField = this.linkListConfig?.idField || 'id';
+      const itemId = itemToRemove[idField] || '';
+
+      if (resolvedUrl.includes(':id')) {
+        resolvedUrl = resolvedUrl.replace(':id', String(itemId));
+      } else if (resolvedUrl.includes('{id}')) {
+        resolvedUrl = resolvedUrl.replace('{id}', String(itemId));
+      }
+
+      this.http.delete<any>(resolvedUrl, { headers: this.getHeaders() }).subscribe({
+        next: () => {
+          deleteLinkLocal();
+        },
+        error: (err) => {
+          console.error('Failed to delete link via API', err);
+        }
+      });
+    } else {
+      deleteLinkLocal();
+    }
+  }
+
+  startEditLink(index: number): void {
+    this.editingLinkIndex = index;
+    const item = this.linkListItems[index];
+    this.editingLinkValue = this.getLinkDisplayUrl(item);
+  }
+
+  cancelEditLink(): void {
+    this.editingLinkIndex = null;
+    this.editingLinkValue = '';
+  }
+
+  saveEditLink(index: number): void {
+    const val = this.editingLinkValue?.trim();
+    if (!val) return;
+
+    const formattedUrl = /^https?:\/\//i.test(val) ? val : 'https://' + val;
+
+    // Validate URL pattern
+    const patternStr = this.linkListConfig?.pattern || '^https?://([a-zA-Z0-9\\-]+\\.)+[a-zA-Z]{2,}(/\\S*)?$';
+    try {
+      const regex = new RegExp(patternStr, 'i');
+      if (!regex.test(formattedUrl)) {
+        this.linkValidationError = this.linkListConfig?.patternMessage || this.controller.labels['COMMON.INVALID_URL'] || 'Invalid URL format';
+        return;
+      }
+    } catch (e) {
+      console.error('Invalid pattern regex in LinkListConfig', e);
+    }
+
+    this.linkValidationError = '';
+
+    const format = this.linkListConfig?.valueFormat || 'string';
+    const currentItems = [...this.linkListItems];
+    const itemToEdit = currentItems[index];
+
+    const updateLinkLocal = () => {
+      if (format === 'string') {
+        currentItems[index] = formattedUrl;
+        const sep = this.linkListConfig?.separator || ',';
+        this.updateValue(currentItems.join(sep));
+      } else if (format === 'array') {
+        currentItems[index] = formattedUrl;
+        this.updateValue(currentItems);
+      } else if (format === 'object') {
+        const urlKey = this.linkListConfig?.urlKey || 'linkUrl';
+        currentItems[index] = { ...itemToEdit, [urlKey]: formattedUrl };
+        this.updateValue(currentItems);
+      }
+      this.cancelEditLink();
+    };
+
+    const editApiUrl = this.linkListConfig?.editApiUrl;
+    if (format === 'object' && itemToEdit && itemToEdit.id && editApiUrl) {
+      let resolvedUrl = editApiUrl;
+      const idField = this.linkListConfig?.idField || 'id';
+      const itemId = itemToEdit[idField] || '';
+
+      if (resolvedUrl.includes(':id')) {
+        resolvedUrl = resolvedUrl.replace(':id', String(itemId));
+      } else if (resolvedUrl.includes('{id}')) {
+        resolvedUrl = resolvedUrl.replace('{id}', String(itemId));
+      }
+
+      const urlKey = this.linkListConfig?.urlKey || 'linkUrl';
+      const body = { ...itemToEdit, [urlKey]: formattedUrl };
+
+      this.http.put<any>(resolvedUrl, body, { headers: this.getHeaders() }).subscribe({
+        next: () => {
+          updateLinkLocal();
+        },
+        error: (err) => {
+          console.error('Failed to edit link via API', err);
+        }
+      });
+    } else {
+      updateLinkLocal();
+    }
+  }
 }
 

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

@@ -3,8 +3,8 @@
 // ────────────────────────────────────────────────────────────────────────────
 
 @keyframes section-card-in {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0);    }
+  from { opacity: 0; margin-top: 10px; }
+  to   { opacity: 1; margin-top: 0;    }
 }
 
 .form-section-container {

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

@@ -24,12 +24,12 @@
 @keyframes form-reveal {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    margin-top: 8px;
   }
 
   to {
     opacity: 1;
-    transform: translateY(0);
+    margin-top: 0;
   }
 }
 

package/src/lib/modules/smart-form/models/form-schema.model.ts

@@ -283,6 +283,7 @@ export interface FieldConfig {
   locationConfig?: LocationConfig;
   ratingConfig?: RatingConfig;
   richTextConfig?: RichTextConfig;
+  linkListConfig?: LinkListConfig;
   children?: FieldConfig[];
 }
 
@@ -338,6 +339,32 @@ export interface TimeConfig {
    * value (earlier than the new minimum) is cleared. Mirrors DateConfig.minDateField.
    */
   minTimeField?: string;
+
+  /**
+   * Rendering variant.
+   * 'default' -> keeps the existing native <input type="time"> (no UI change).
+   * 'wheel'   -> activates the drum-roll wheel picker (lib-time-picker).
+   * Default: 'default' — existing behaviour preserved unless explicitly set to 'wheel'.
+   */
+  variant?: 'default' | 'wheel';
+
+  /**
+   * Hour display mode for the wheel variant only.
+   * '12' -> 01–12 columns + AM/PM column, outputs "hh:mm AM/PM".
+   * '24' -> 00–23 columns, outputs "HH:mm".
+   * Default: '12'.
+   */
+  mode?: '12' | '24';
+
+  /**
+   * Minute increment step for the wheel variant.
+   * Accepted values: 1, 5, 10, 15, 30.
+   * Default: 1.
+   */
+  minuteStep?: number;
+
+  /** Placeholder text override for the wheel picker trigger field. */
+  placeholder?: string;
 }
 
 // ── Dropdown Search Config ────────────────────────────────────────────────────
@@ -747,3 +774,20 @@ export interface MediaItem {
   isUploading?: boolean;
 }
 
+export interface LinkListConfig {
+  listPosition?: 'top' | 'bottom';
+  editable?: boolean;
+  deleteable?: boolean;
+  deletable?: boolean;
+  valueFormat?: 'string' | 'array' | 'object';
+  separator?: string;
+  urlKey?: string;
+  idField?: string;
+  deleteApiUrl?: string;
+  editApiUrl?: string;
+  pattern?: string;
+  patternMessage?: string;
+  colSpan?: number;
+}
+
+

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

@@ -10,6 +10,7 @@ import { ButtonModule } from '../button/button.module';
 import { AlertModule } from '../alert/alert.module';
 import { QuillModule } from 'ngx-quill';
 import { TrustedUrlPipe } from './utils/trusted-url.pipe';
+import { TimePickerModule } from '../time-picker/time-picker.module';
 @NgModule({
   declarations: [
     SmartFormComponent,
@@ -24,7 +25,8 @@ import { TrustedUrlPipe } from './utils/trusted-url.pipe';
     MaterialModule,
     ButtonModule,
     AlertModule,
-    QuillModule.forRoot()
+    QuillModule.forRoot(),
+    TimePickerModule
   ],
   exports: [
     SmartFormComponent