commons-shared-web-ui 0.0.62 → 0.0.64

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

@@ -1,294 +0,0 @@
-<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>