platformcommons-web-lib 1.0.0

package/src/lib/modules/button-dropdown/components/button-dropdown/button-dropdown.component.html

@@ -0,0 +1,41 @@
+<div class="cc-btn-dropdown-container">
+    <!-- Main Toggle Button -->
+    <lib-button 
+        [variant]="variant" 
+        [disabled]="disabled"
+        (click)="toggleDropdown($event)">
+        <span class="cc-btn-dropdown-content">
+            {{ label }}
+            <i *ngIf="icon" [class]="icon" class="cc-btn-dropdown-icon"></i>
+        </span>
+    </lib-button>
+
+    <!-- Dropdown Menu -->
+    <div class="cc-dropdown-menu" [ngClass]="'cc-dropdown-menu--' + menuTheme" *ngIf="isOpen">
+        <button 
+            type="button" 
+            class="cc-dropdown-item" 
+            *ngFor="let action of actions"
+            [disabled]="action.disabled"
+            [ngClass]="action.variant ? 'cc-dropdown-item--' + action.variant : (action.color === 'red' || action.color === 'danger') ? 'cc-dropdown-item--danger' : ''"
+            [style.color]="action.color && !action.variant && action.color !== 'red' && action.color !== 'danger' ? action.color : null"
+            (click)="onActionItemClick(action, $event)">
+            <i *ngIf="action.icon" [class]="action.icon" class="cc-dropdown-item-icon"></i>
+            <span>{{ action.label }}</span>
+        </button>
+        <div class="cc-dropdown-empty" *ngIf="!actions || actions.length === 0">
+            No actions available
+        </div>
+    </div>
+</div>
+
+<!-- Confirmation Modal for Critical Actions -->
+<cc-confirmation-modal 
+    *ngIf="isConfirmModalOpen"
+    [isOpen]="isConfirmModalOpen" 
+    [config]="confirmConfig!"
+    (confirm)="invokePendingAction()"
+    (close)="closeConfirmModal()"
+    (cancel)="closeConfirmModal()">
+    <p>{{ confirmMessage }}</p>
+</cc-confirmation-modal>

package/src/lib/modules/button-dropdown/components/button-dropdown/button-dropdown.component.scss

@@ -0,0 +1,135 @@
+.cc-btn-dropdown-container {
+    position: relative;
+    display: inline-block;
+
+    .cc-btn-dropdown-content {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .cc-btn-dropdown-icon {
+        font-size: 0.85em;
+        margin-left: 2px;
+    }
+}
+
+.cc-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0; // Align right edge
+    z-index: 1000;
+    min-width: 140px;
+    border-radius: var(--cc-btn-dropdown-radius, 4px);
+    padding: 0.25rem 0;
+    font-family: var(--cc-btn-font-family, 'Inter', sans-serif);
+    font-size: var(--cc-btn-font-size, 0.875rem);
+    
+    /* ------------------------------ */
+    /* Light vs Dark Global Container */
+    /* ------------------------------ */
+    &--light {
+        background-color: var(--cc-btn-dropdown-light-bg, #ffffff);
+        border: var(--cc-btn-dropdown-border-light, 1px solid #e0e0e0);
+        box-shadow: var(--cc-btn-dropdown-shadow-light, 0 4px 6px rgba(0, 0, 0, 0.1));
+        
+        .cc-dropdown-item {
+            color: var(--cc-btn-dropdown-light-item-color, #333333);
+            &:hover:not(:disabled) {
+                background-color: var(--cc-btn-dropdown-light-item-hover-bg, #f5f5f5);
+            }
+        }
+        
+        .cc-dropdown-empty {
+            color: #888888;
+        }
+    }
+
+    &--dark {
+        background-color: var(--cc-btn-dropdown-dark-bg, #1a1a1a);
+        border: var(--cc-btn-dropdown-border-dark, 1px solid #444444);
+        box-shadow: var(--cc-btn-dropdown-shadow-dark, 0 4px 6px rgba(0, 0, 0, 0.5));
+        
+        .cc-dropdown-item {
+            color: var(--cc-btn-dropdown-dark-item-color, #ffffff);
+            &:hover:not(:disabled) {
+                background-color: var(--cc-btn-dropdown-dark-item-hover-bg, #2d2d2d);
+            }
+        }
+        
+        .cc-dropdown-empty {
+            color: #bbbbbb;
+        }
+    }
+
+    /* ------------------------------ */
+    /* Shared Item Styles             */
+    /* ------------------------------ */
+    .cc-dropdown-empty {
+        padding: 0.5rem 1rem;
+        font-style: italic;
+    }
+
+    .cc-dropdown-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0.5rem 1rem;
+        border: none;
+        background: transparent;
+        text-align: left;
+        cursor: pointer;
+        transition: background-color 0.2s, color 0.2s;
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .cc-dropdown-item-icon {
+            margin-right: 0.5rem;
+            width: 1rem;
+            text-align: center;
+        }
+
+        /* ------------------------------ */
+        /* Explicit Action Variants       */
+        /* ------------------------------ */
+        &--primary {
+            background-color: var(--cc-btn-dropdown-primary-bg, #262125);
+            color: var(--cc-btn-dropdown-primary-color, #ffffff);
+            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-primary-hover, #3d353b); }
+        }
+
+        &--warning {
+            background-color: var(--cc-btn-dropdown-warning-bg, #F9C80E);
+            color: var(--cc-btn-dropdown-warning-color, #000000);
+            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-warning-hover, #ebd573); }
+        }
+
+        &--danger {
+            background-color: var(--cc-btn-dropdown-danger-bg, #E63E30);
+            color: var(--cc-btn-dropdown-danger-color, #ffffff);
+            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-danger-hover, #c93528); }
+        }
+
+        &--success {
+            background-color: var(--cc-btn-dropdown-success-bg, #16A34A);
+            color: var(--cc-btn-dropdown-success-color, #ffffff);
+            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-success-hover, #148f41); }
+        }
+
+        &--secondary {
+            background-color: var(--cc-btn-dropdown-secondary-bg, #E8EAED);
+            color: var(--cc-btn-dropdown-secondary-color, #000000);
+            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-secondary-hover, #d1d5db); }
+        }
+        
+        &--outline {
+            background-color: var(--cc-btn-dropdown-outline-bg, transparent);
+            color: var(--cc-btn-dropdown-outline-color, #000000);
+            border: 1px solid var(--cc-btn-dropdown-outline-color, #000000); // Usually actions don't have borders, but adding for completeness
+            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-outline-hover, rgba(0,0,0,0.05)); }
+        }
+    }
+}

package/src/lib/modules/button-dropdown/components/button-dropdown/button-dropdown.component.ts

@@ -0,0 +1,160 @@
+import {
+    Component,
+    Input,
+    Output,
+    EventEmitter,
+    HostListener,
+    ElementRef
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { DropdownAction } from '../../button-dropdown.models';
+import { ButtonVariant } from '../../../button/button.models';
+import { ConfirmationModalConfig } from '../../../confirmation-modal/confirmation-modal.models';
+
+@Component({
+    selector: 'lib-button-dropdown',
+    templateUrl: './button-dropdown.component.html',
+    styleUrls: ['./button-dropdown.component.scss'],
+    standalone: false
+})
+export class ButtonDropdownComponent {
+    @Input() label: string = 'Actions';
+    @Input() variant: ButtonVariant = 'primary';
+    @Input() menuTheme: 'light' | 'dark' = 'light';
+    @Input() icon: string = 'fa fa-chevron-down';
+    @Input() actions: DropdownAction[] = [];
+    @Input() data: any = null;
+    @Input() disabled: boolean = false;
+
+    @Output() apiActionStart = new EventEmitter<DropdownAction>();
+    @Output() apiActionSuccess = new EventEmitter<{ action: DropdownAction, response: any }>();
+    @Output() apiActionError = new EventEmitter<{ action: DropdownAction, error: any }>();
+    @Output() actionClick = new EventEmitter<{ action: DropdownAction, data: any }>();
+
+    isOpen = false;
+    isConfirmModalOpen = false;
+    pendingAction: DropdownAction | null = null;
+    confirmConfig: ConfirmationModalConfig | null = null;
+    confirmMessage: string = '';
+
+    constructor(
+        private elementRef: ElementRef,
+        private router: Router,
+        private http: HttpClient
+    ) {}
+
+    @HostListener('document:click', ['$event'])
+    onClickOutside(event: Event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+
+    toggleDropdown(event: Event) {
+        if (this.disabled) return;
+        event.stopPropagation();
+        this.isOpen = !this.isOpen;
+    }
+
+    onActionItemClick(action: DropdownAction, event: Event) {
+        event.stopPropagation();
+        this.isOpen = false;
+
+        if (action.disabled) return;
+
+        if (action.confirmationNeeded) {
+            this.pendingAction = action;
+            
+            // Smart inference for "delete" actions
+            const isDelete = action.apiMethod === 'DELETE' || 
+                             action.variant === 'danger' || 
+                             action.color === 'red' || 
+                             action.label.toLowerCase().includes('delete');
+            
+            // Apply intelligent fallbacks based on action intent
+            this.confirmMessage = action.confirmationMessage || (isDelete 
+                ? 'Are you sure you want to delete this item? This action cannot be undone.' 
+                : 'Are you sure you want to proceed?');
+                
+            this.confirmConfig = {
+                title: action.confirmationTitle || (isDelete ? 'Confirm Deletion' : 'Please Confirm'),
+                icon: { type: 'material', value: 'warning', color: isDelete ? '#E63E30' : '#F9C80E' },
+                confirmButton: {
+                    label: isDelete ? 'Delete' : 'Confirm',
+                    type: isDelete ? 'danger' : 'primary'
+                },
+                cancelButton: {
+                    show: true,
+                    label: 'Cancel'
+                }
+            };
+            this.isConfirmModalOpen = true;
+        } else {
+            this.executeAction(action);
+        }
+    }
+
+    private executeAction(action: DropdownAction) {
+        this.actionClick.emit({ action, data: this.data });
+
+        if (action.type === 'callback' && action.callback) {
+            action.callback(this.data);
+        } else if (action.type === 'route' && action.route) {
+            this.navigateToRoute(action.route, this.data);
+        } else if (action.type === 'api' && action.apiUrl) {
+            this.executeApiCall(action);
+        }
+    }
+
+    private navigateToRoute(routePattern: string, rowData: any) {
+        let finalRoute = routePattern;
+        // Simple parameter replacement like smart-table: /users/:id -> /users/123
+        if (rowData) {
+            Object.keys(rowData).forEach(key => {
+                finalRoute = finalRoute.replace(`:${key}`, rowData[key]);
+            });
+        }
+        this.router.navigate([finalRoute]);
+    }
+
+    private executeApiCall(action: DropdownAction) {
+        this.apiActionStart.emit(action);
+        
+        let url = action.apiUrl!;
+        if (this.data) {
+            Object.keys(this.data).forEach(key => {
+                url = url.replace(`:${key}`, this.data[key]);
+            });
+        }
+
+        const method = (action.apiMethod || 'GET').toUpperCase();
+        let request$;
+
+        if (method === 'GET') request$ = this.http.get(url);
+        else if (method === 'POST') request$ = this.http.post(url, action.apiPayload || this.data);
+        else if (method === 'PUT') request$ = this.http.put(url, action.apiPayload || this.data);
+        else if (method === 'DELETE') request$ = this.http.delete(url);
+        else if (method === 'PATCH') request$ = this.http.patch(url, action.apiPayload || this.data);
+        else request$ = this.http.get(url); // fallback
+
+        request$.subscribe({
+            next: (res) => this.apiActionSuccess.emit({ action, response: res }),
+            error: (err) => this.apiActionError.emit({ action, error: err })
+        });
+    }
+
+    invokePendingAction() {
+        if (this.pendingAction) {
+            this.executeAction(this.pendingAction);
+        }
+        this.closeConfirmModal();
+    }
+
+    closeConfirmModal() {
+        this.isConfirmModalOpen = false;
+        this.pendingAction = null;
+        this.confirmConfig = null;
+        this.confirmMessage = '';
+    }
+}

package/src/lib/modules/configurable-form/component/configurable-form.component.html

@@ -0,0 +1,294 @@
+<form [formGroup]="form" class="configurable-form-container" *ngIf="form">
+
+    <ng-container *ngFor="let section of sections">
+
+        <!-- Repeater Section -->
+        <div *ngIf="section.isRepeater; else normalSection"
+            [ngClass]="section.noCardLayout ? 'section-no-card' : 'section-card'">
+            <div class="section-header" *ngIf="section.sectionTitle">
+                <h3 class="section-title">{{ section.sectionTitle }}</h3>
+                <button *ngIf="section.collapsible" mat-icon-button type="button" (click)="toggleSection(section)">
+                    <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>
+                </button>
+            </div>
+
+            <div [formArrayName]="section.formArrayName || 'items'" *ngIf="!section.collapsed">
+                <div *ngFor="let item of getFormArray(section.formArrayName!).controls; let i = index"
+                    [formGroupName]="i" class="repeater-item">
+                    <div class="repeater-item-header" *ngIf="getFormArray(section.formArrayName!).length > 1">
+                        <span class="text-small">{{ section.repeaterItemLabel || labels.repeaterItemDefaultLabel }} {{i
+                            + 1}}</span>
+                        <button mat-icon-button color="warn" type="button"
+                            (click)="removeRepeaterItem(section.formArrayName!, i)"
+                            [disabled]="section.minItems && getFormArray(section.formArrayName!).length <= section.minItems">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                    </div>
+
+                    <!-- Fields Grid -->
+                    <div class="form-grid">
+                        <div *ngFor="let field of section.fields" [ngClass]="['form-col', field.class || 'col-12']"
+                            [hidden]="!isFieldVisible(field)">
+                            <ng-container
+                                *ngTemplateOutlet="fieldTemplate; context: {field: field, group: item}"></ng-container>
+                        </div>
+                    </div>
+
+                    <div class="repeater-separator" *ngIf="i < getFormArray(section.formArrayName!).length - 1"></div>
+                </div>
+            </div>
+
+            <button mat-button color="primary" type="button" (click)="addRepeaterItem(section)" class="add-btn"
+                *ngIf="!section.collapsed"
+                [disabled]="section.maxItems && getFormArray(section.formArrayName!).length >= section.maxItems">
+                <mat-icon>add_circle_outline</mat-icon> {{ section.addLabel || labels.addMoreDefaultLabel }}
+            </button>
+        </div>
+
+        <!-- Normal Section -->
+        <ng-template #normalSection>
+            <div [ngClass]="section.noCardLayout ? 'section-no-card' : 'section-card'">
+                <div class="section-header" *ngIf="section.sectionTitle">
+                    <h3 class="section-title">{{ section.sectionTitle }}</h3>
+                    <button *ngIf="section.collapsible" mat-icon-button type="button" (click)="toggleSection(section)">
+                        <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>
+                    </button>
+                </div>
+                <div class="form-grid" *ngIf="!section.collapsed">
+                    <div *ngFor="let field of section.fields" [ngClass]="['form-col', field.class || 'col-12']"
+                        [hidden]="!isFieldVisible(field)">
+                        <!-- Pass the root form group to the template -->
+                        <ng-container
+                            *ngTemplateOutlet="fieldTemplate; context: {field: field, group: form}"></ng-container>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+
+    </ng-container>
+
+</form>
+
+<!-- Reusable Field Template -->
+<ng-template #fieldTemplate let-field="field" let-group="group">
+    <div [formGroup]="group">
+
+        <!-- Text / Email / Number / Tel / URL (Password removed) -->
+        <div *ngIf="['text', 'email', 'number', 'tel', 'url'].includes(field.type || '')" class="field-container">
+            <div class="field-label" *ngIf="field.label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </div>
+            <div class="input-wrapper">
+                <input [type]="field.type" [formControlName]="field.name" [placeholder]="field.placeholder || ''"
+                    [readonly]="field.readonly" class="form-input" [name]="field.name"
+                    [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid"
+                    [maxlength]="field.validationRules?.maxLength || field.uiConfig?.maxCharacters">
+                <div class="input-suffix">
+                    <span class="suffix-text" *ngIf="field.suffixText">{{ field.suffixText }}</span>
+                    <mat-icon *ngIf="field.suffixIcon">{{ field.suffixIcon }}</mat-icon>
+                    <mat-icon *ngIf="field.icon">{{ field.icon }}</mat-icon>
+                    <mat-icon *ngIf="field.readonly" class="lock-icon">lock_outline</mat-icon>
+                </div>
+            </div>
+            <!-- Character count -->
+            <div class="char-count-row" *ngIf="field.uiConfig?.maxCharacters || field.validationRules?.maxLength">
+                <div class="hint-text" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+                <div class="char-count">
+                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||
+                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}
+                </div>
+            </div>
+            <div class="hint-text mt-2"
+                *ngIf="(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength">
+                {{ field.hint || field.helpText }}
+            </div>
+        </div>
+
+        <!-- Password Field (Separated) -->
+        <div *ngIf="field.type === 'password'" class="field-container">
+            <div class="field-label" *ngIf="field.label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </div>
+            <div class="input-wrapper">
+                <input [type]="isPasswordVisible(field.name) ? 'text' : 'password'" [formControlName]="field.name"
+                    [placeholder]="field.placeholder || ''" [readonly]="field.readonly" class="form-input"
+                    [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid"
+                    [maxlength]="field.validationRules?.maxLength || field.uiConfig?.maxCharacters">
+                <div class="input-suffix">
+                    <span class="suffix-text" *ngIf="field.suffixText">{{ field.suffixText }}</span>
+                    <mat-icon *ngIf="field.suffixIcon">{{ field.suffixIcon }}</mat-icon>
+                    <mat-icon *ngIf="field.icon">{{ field.icon }}</mat-icon>
+                    <mat-icon *ngIf="field.readonly" class="lock-icon">lock_outline</mat-icon>
+                    <mat-icon class="password-toggle-icon" (click)="togglePassword(field.name)">
+                        {{ isPasswordVisible(field.name) ? 'visibility' : 'visibility_off' }}
+                    </mat-icon>
+                </div>
+            </div>
+            <!-- Character count -->
+            <div class="char-count-row" *ngIf="field.uiConfig?.maxCharacters || field.validationRules?.maxLength">
+                <div class="hint-text" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+                <div class="char-count">
+                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||
+                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}
+                </div>
+            </div>
+            <div class="hint-text mt-2"
+                *ngIf="(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength">
+                {{ field.hint || field.helpText }}
+            </div>
+        </div>
+
+        <!-- Textarea -->
+        <div *ngIf="field.type === 'textarea'" class="field-container">
+            <div class="field-label" *ngIf="field.label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </div>
+            <textarea [formControlName]="field.name" [placeholder]="field.placeholder || ''" [readonly]="field.readonly"
+                class="form-input form-textarea" rows="4"
+                [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid"
+                [maxlength]="field.validationRules?.maxLength || field.uiConfig?.maxCharacters"></textarea>
+            <!-- Character count -->
+            <div class="char-count-row" *ngIf="field.uiConfig?.maxCharacters || field.validationRules?.maxLength">
+                <div class="hint-text" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+                <div class="char-count">
+                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||
+                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}
+                </div>
+            </div>
+            <div class="hint-text mt-2"
+                *ngIf="(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength">
+                {{ field.hint || field.helpText }}
+            </div>
+        </div>
+
+        <!-- Select / Dropdown -->
+        <div *ngIf="field.type === 'select' || field.type === 'dropdown'" class="field-container">
+            <div class="field-label" *ngIf="field.label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </div>
+            <select [formControlName]="field.name" class="form-input"
+                [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid">
+                <option value="" disabled selected *ngIf="field.placeholder">{{ field.placeholder }}</option>
+                <option value="" disabled selected *ngIf="!field.placeholder">{{ labels.selectDefaultPlaceholder }}
+                </option>
+                <option *ngFor="let opt of getFieldOptions(field)" [value]="opt.value">{{ opt.label }}</option>
+            </select>
+            <div class="hint-text mt-2" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+        </div>
+
+        <!-- Date -->
+        <div *ngIf="field.type === 'date'" class="field-container">
+            <div class="field-label" *ngIf="field.label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </div>
+            <div class="relative">
+                <input matInput [matDatepicker]="picker" [formControlName]="field.name"
+                    [placeholder]="field.placeholder || ''" class="form-input"
+                    [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid">
+                <mat-datepicker-toggle matSuffix [for]="picker" class="date-toggle"></mat-datepicker-toggle>
+                <mat-datepicker #picker></mat-datepicker>
+            </div>
+            <div class="hint-text mt-2" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+        </div>
+
+        <!-- Radio -->
+        <div *ngIf="field.type === 'radio'" class="radio-group-container"
+            [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid">
+            <label class="field-label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </label>
+            <mat-radio-group [formControlName]="field.name" class="radio-group">
+                <mat-radio-button *ngFor="let opt of getFieldOptions(field)" [value]="opt.value" class="radio-button">
+                    {{ opt.label }}
+                </mat-radio-button>
+            </mat-radio-group>
+            <div class="hint-text mt-2" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+        </div>
+
+        <!-- Composite Field (Sub-groups) -->
+        <div *ngIf="field.type === 'composite'" class="field-container">
+            <div class="field-label" *ngIf="field.label">
+                {{ field.label }}
+                <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+            </div>
+            <div class="composite-container">
+                <ng-container *ngFor="let sub of field.subFields; let last = last">
+                    <div class="composite-sub-field" style="flex: 1;">
+                        <div class="field-label" *ngIf="sub.label"
+                            style="font-size: 0.75rem; font-weight: normal; margin-bottom: 0.25rem;">
+                            {{ sub.label }}
+                        </div>
+                        <div class="input-wrapper">
+                            <input [type]="sub.type" [formControlName]="sub.name" [placeholder]="sub.placeholder || ''"
+                                [readonly]="sub.readonly" class="form-input"
+                                [class.is-invalid]="group.get(sub.name)?.touched && group.get(sub.name)?.invalid">
+                            <div class="input-suffix" [class.color-suffix]="sub.suffixText === '%'">
+                                <span class="suffix-text" *ngIf="sub.suffixText">{{ sub.suffixText }}</span>
+                                <mat-icon *ngIf="sub.readonly" class="lock-icon">lock_outline</mat-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Adjust separator alignment if labels are present -->
+                    <span class="separator" *ngIf="!last && field.separator"
+                        [style.padding-top]="sub.label ? '1.25rem' : '0'">{{ field.separator }}</span>
+                </ng-container>
+            </div>
+            <div class="hint-text mt-2" *ngIf="field.hint || field.helpText">{{ field.hint || field.helpText }}</div>
+            <div class="error-text text-danger text-small mt-1" *ngIf="group.errors?.['invalid_minMax_' + field.name]">
+                {{ labels.errorMinValue }}
+            </div>
+            <div class="error-text text-danger text-small mt-1"
+                *ngIf="group.errors?.['invalid_percentageTotal_' + field.name]">
+                {{ labels.errorPercentageTotal }}
+            </div>
+        </div>
+    </div>
+
+    <!-- File Upload -->
+    <div *ngIf="field.type === 'file'" class="field-container">
+        <div class="field-label" *ngIf="field.label">
+            {{ field.label }}
+            <span class="text-danger" *ngIf="field.required || field.mandatory">*</span>
+        </div>
+
+        <!-- Upload Box -->
+        <div class="upload-box" (click)="fileInput.click()"
+            [class.is-invalid]="group.get(field.name)?.touched && group.get(field.name)?.invalid"
+            *ngIf="!field.uploadedFiles || field.uploadedFiles.length === 0 || field.multiple">
+            <mat-icon class="upload-icon">cloud_upload</mat-icon>
+            <div class="upload-text">{{ labels.uploadDragDropText }}</div>
+            <div class="upload-hint">{{ labels.uploadHint }}</div>
+            <input #fileInput type="file" [attr.multiple]="field.multiple ? true : null" [attr.accept]="field.accept"
+                (change)="onFileChange($event, field)" style="display: none;">
+        </div>
+
+        <!-- Uploaded Files List -->
+        <div class="uploaded-files-list" *ngIf="field.uploadedFiles && field.uploadedFiles.length > 0">
+            <div class="uploaded-file-item" *ngFor="let file of field.uploadedFiles; let i = index">
+                <div class="file-icon">
+                    <mat-icon class="pdf-icon" *ngIf="file.type === 'application/pdf'">picture_as_pdf</mat-icon>
+                    <mat-icon class="doc-icon"
+                        *ngIf="file.type.includes('word') || file.type.includes('document')">description</mat-icon>
+                    <mat-icon class="img-icon" *ngIf="file.type.includes('image')">image</mat-icon>
+                    <mat-icon class="file-icon-default"
+                        *ngIf="!file.type.includes('pdf') && !file.type.includes('word') && !file.type.includes('document') && !file.type.includes('image')">insert_drive_file</mat-icon>
+                </div>
+                <div class="file-info">
+                    <div class="file-name">{{ file.name }}</div>
+                    <div class="file-size">{{ (file.size / 1024).toFixed(2) }} KB</div>
+                </div>
+                <button mat-icon-button color="warn" type="button" (click)="removeFile(field, i)"
+                    class="remove-file-btn">
+                    <mat-icon>close</mat-icon>
+                </button>
+            </div>
+        </div>
+
+    </div>
+</ng-template>