platformcommons-web-lib 1.0.0

package/src/lib/modules/configurable-form/configurable-form.examples.ts

@@ -0,0 +1,154 @@
+import { FormConfig } from './configurable-form.model';
+
+/**
+ * Example: Basic Form Configuration
+ * This is a generic example for testing and demonstration purposes.
+ */
+export const EXAMPLE_FORM_CONFIG: FormConfig = {
+    sections: [
+        {
+            sectionTitle: 'User Information',
+            fields: [
+                {
+                    name: 'fullName',
+                    label: 'Full Name',
+                    type: 'text',
+                    placeholder: 'Enter full name',
+                    required: true,
+                    class: 'col-12'
+                },
+                {
+                    name: 'email',
+                    label: 'Email Address',
+                    type: 'email',
+                    placeholder: 'Enter email address',
+                    required: true,
+                    class: 'col-6'
+                },
+                {
+                    name: 'phone',
+                    label: 'Phone Number',
+                    type: 'tel',
+                    placeholder: '+91 9999999999',
+                    class: 'col-6'
+                },
+                {
+                    name: 'role',
+                    label: 'Role',
+                    type: 'dropdown',
+                    placeholder: 'Select Role',
+                    options: [
+                        { label: 'Admin', value: 'admin' },
+                        { label: 'User', value: 'user' },
+                        { label: 'Guest', value: 'guest' }
+                    ],
+                    class: 'col-12'
+                }
+            ]
+        },
+        {
+            sectionTitle: 'Preferences',
+            fields: [
+                {
+                    name: 'notifications',
+                    label: 'Receive Notifications',
+                    type: 'radio',
+                    options: [
+                        { label: 'Yes', value: 'yes' },
+                        { label: 'No', value: 'no' }
+                    ],
+                    value: 'yes',
+                    class: 'col-12'
+                }
+            ]
+        },
+        {
+            sectionTitle: 'Documents',
+            fields: [
+                {
+                    name: 'profilePicture',
+                    label: 'Profile Picture',
+                    type: 'file',
+                    accept: '.jpg,.png',
+                    multiple: false,
+                    helpText: 'Upload a single profile picture (Max 5MB)',
+                    class: 'col-12'
+                },
+                {
+                    name: 'certificates',
+                    label: 'Certificates',
+                    type: 'file',
+                    accept: '.pdf,.doc,.docx',
+                    multiple: true,
+                    helpText: 'Upload multiple certificates (Max 5MB each)',
+                    class: 'col-12'
+                }
+            ]
+        }
+    ],
+    entityType: 'User'
+};
+
+/**
+ * Example: Target Group Configuration
+ * Demonstrates composite fields for Age Group and Gender Split
+ */
+export const TARGET_GROUP_CONFIG: FormConfig = {
+    sections: [
+        {
+            sectionTitle: 'Target Group Settings',
+            fields: [
+                {
+                    name: 'targetAgeGroup',
+                    label: 'Target Age Group',
+                    type: 'composite',
+                    separator: '-',
+                    subFields: [
+                        {
+                            label: "Min Age",
+                            name: 'minAge',
+                            type: 'number',
+                            placeholder: 'Min Age',
+                            validationRules: { min: 0 }
+                        },
+                        {
+                            label: "Max Age",
+                            name: 'maxAge',
+                            type: 'number',
+                            placeholder: 'Max Age',
+                            validationRules: { min: 0 }
+                        }
+                    ],
+                    compositeValidationRule: 'minMax',
+                    class: 'col-12'
+                },
+                {
+                    name: 'genderSplit',
+                    label: 'Target Gender Split',
+                    type: 'composite',
+                    subFields: [
+                        {
+                            label: "Male",
+                            name: 'malePercentage',
+                            type: 'number',
+                            placeholder: 'Male',
+                            suffixText: '%',
+                            validationRules: { min: 0, max: 100 }
+                        },
+                        {
+                            label: "Female",
+                            name: 'femalePercentage',
+                            type: 'number',
+                            placeholder: 'Female',
+                            suffixText: '%',
+                            validationRules: { min: 0, max: 100 }
+                        }
+                    ],
+                    compositeValidationRule: 'percentageTotal',
+                    class: 'col-12'
+                }
+            ]
+        }
+    ],
+
+};

package/src/lib/modules/configurable-form/configurable-form.model.ts

@@ -0,0 +1,131 @@
+export type FieldType = 'text' | 'number' | 'email' | 'tel' | 'password' | 'select' | 'radio' | 'textarea' | 'date' | 'composite' | 'file' | 'dropdown' | 'url';
+export type KeyType = 'KEY_TYPE.UI_INPUT' | 'KEY_TYPE.NESTED_REF_JSON' | 'KEY_TYPE.REF_JSON';
+export type UIType = 'UI_TYPE.TEXT' | 'UI_TYPE.DROP_DOWN' | 'UI_TYPE.RADIO' | 'UI_TYPE.DATE' | 'UI_TYPE.FILE' | 'UI_TYPE.TEXTAREA';
+export type UISubType = 'UI_SUBTYPE.SHORT_TEXT' | 'UI_SUBTYPE.LONG_TEXT' | 'UI_SUBTYPE.NUMBER' | 'UI_SUBTYPE.EMAIL' | 'UI_SUBTYPE.PHONE' | 'UI_SUBTYPE.URL';
+export type OptionDTO = 'OPTION_DTO.REF_DATA' | 'OPTION_DTO.STATIC';
+
+export interface FormOption {
+    label: string;
+    value: any;
+    code?: string;
+    name?: string;
+}
+
+export interface OptionConfig {
+    optionDTO: OptionDTO;
+    class?: string;
+    url?: string;
+    labelKey?: string;
+    requestKey?: string;
+    valueKey?: string;
+    staticOptions?: FormOption[];
+}
+
+export interface UIConfig {
+    type: UIType;
+    subType?: UISubType;
+    dependent?: string[]; // Array of field names that depend on this field
+    optionConfigs?: OptionConfig;
+    minCharacters?: number;
+    maxCharacters?: number;
+}
+
+export interface ValidationRules {
+    isMandatory?: boolean;
+    isRequired?: boolean; // Alias for isMandatory
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    min?: number;
+    max?: number;
+}
+
+export interface UploadedFile {
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+    file?: File;
+}
+
+export interface FormField {
+    // Core properties
+    type?: FieldType;
+    name: string;
+    label?: string; // i18n key
+    jsonKey?: string; // Alternative to 'name' for JSON config
+    sequence?: number; // For ordering fields
+
+    // JSON Config properties
+    keyType?: KeyType;
+    uiConfig?: UIConfig;
+    validationRules?: ValidationRules;
+
+    // Legacy properties (for backward compatibility)
+    placeholder?: string;
+    hint?: string;
+    helpText?: string;
+    options?: FormOption[];
+    required?: boolean;
+    mandatory?: boolean;
+    disabled?: boolean;
+    visible?: boolean; // Controls field visibility
+    class?: string; // Grid class e.g. 'col-3', 'col-6 col-md-4'
+    value?: any;
+    icon?: string; // Internal icon
+    suffixIcon?: string;
+    prefixIcon?: string;
+    suffixText?: string;
+    readonly?: boolean;
+    subFields?: FormField[]; // For composite fields
+    separator?: string; // For composite fields like 'Age Range'
+    dependsOn?: string; // Name of the field this field depends on
+    dependent?: string[]; // Fields that depend on this field
+    accept?: string; // For file fields
+    multiple?: boolean; // For file fields
+    uploadedFiles?: UploadedFile[]; // Track uploaded files
+
+    // Dynamic options
+    optionConfigs?: OptionConfig;
+    loadedOptions?: FormOption[]; // Dynamically loaded options
+
+    // Composite Validators
+    compositeValidationRule?: 'minTotal' | 'percentageTotal' | 'minMax';
+}
+
+export interface FormSection {
+    sectionTitle?: string;
+    fields: FormField[];
+    isRepeater?: boolean; // If true, this section is a FormArray
+    addLabel?: string; // Label for 'Add' button if repeater
+    removeLabel?: string; // Label for 'Remove' button if repeater
+    repeaterItemLabel?: string; // Label template for repeater items (e.g., "Contact")
+    formArrayName?: string; // Name for the FormArray control
+    noCardLayout?: boolean; // If true, removes the section-card container styling
+    collapsible?: boolean; // If true, section can be collapsed
+    collapsed?: boolean; // Initial collapsed state
+    minItems?: number; // Minimum number of items in repeater (default: 1)
+    maxItems?: number; // Maximum number of items in repeater
+    class?: string; // CSS class for section container
+}
+
+export interface FormConfig {
+    sections: FormSection[];
+    entityType?: string;
+}
+
+// JSON Config format (from API)
+export interface JsonFieldConfig {
+    jsonKey: string;
+    sequence: number;
+    label: string;
+    keyType: KeyType;
+    validationRules?: ValidationRules;
+    uiConfig: UIConfig;
+}
+
+export interface JsonFormConfig {
+    entityType: string;
+    label: string;
+    jsonConfig: JsonFieldConfig[];
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ConfigurableFormComponent } from './component/configurable-form.component';
+import { MaterialModule } from '../material/material.module';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        MaterialModule,
+        ConfigurableFormComponent
+    ],
+    exports: [
+        ConfigurableFormComponent
+    ]
+})
+export class ConfigurableFormModule { }

package/src/lib/modules/configurable-form/configurable-form.theme.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+
+// Default configuration for the configurable form theme
+$default-configurable-form-config: (
+    // Colors
+    primary-color: #3B82F6,
+    surface-background: #ffffff,
+    border-color: #D1D5DB,
+    text-primary: #111827,
+    text-secondary: #6B7280,
+    error-color: #DC2626,
+    disabled-background: #F3F4F6,
+    hover-background: #F9FAFB,
+
+    // Inputs specific
+    input-border-color: #D1D5DB,
+    input-focus-border-color: #3B82F6,
+    input-hover-border-color: #9CA3AF,
+    input-bg: #ffffff,
+
+    // Dimensions
+    section-radius: 12px,
+    section-padding: 2rem,
+    section-spacing: 1.5rem,
+    input-radius: 8px,
+    input-padding-y: 0.625rem,
+    input-padding-x: 0.875rem,
+
+    // Typography
+    font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
+    section-title-size: 1.25rem,
+    section-title-weight: 600,
+    label-size: 0.875rem,
+    label-weight: 600,
+    input-font-size: 0.875rem,
+    hint-size: 0.75rem,
+
+    // Shadows
+    section-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)),
+);
+
+// Mixin to generate CSS variables for the configurable form component
+@mixin configurable-form-theme($user-config: ()) {
+    // Merge user config with defaults
+    $config: map.merge($default-configurable-form-config, $user-config);
+
+    // Generate CSS Variables
+    --cf-primary-color: #{map.get($config, primary-color)};
+    --cf-surface-background: #{map.get($config, surface-background)};
+    --cf-border-color: #{map.get($config, border-color)};
+    --cf-text-primary: #{map.get($config, text-primary)};
+    --cf-text-secondary: #{map.get($config, text-secondary)};
+    --cf-error-color: #{map.get($config, error-color)};
+    --cf-disabled-background: #{map.get($config, disabled-background)};
+    --cf-hover-background: #{map.get($config, hover-background)};
+
+    --cf-input-border-color: #{map.get($config, input-border-color)};
+    --cf-input-focus-border-color: #{map.get($config, input-focus-border-color)};
+    --cf-input-hover-border-color: #{map.get($config, input-hover-border-color)};
+    --cf-input-bg: #{map.get($config, input-bg)};
+
+    --cf-section-radius: #{map.get($config, section-radius)};
+    --cf-section-padding: #{map.get($config, section-padding)};
+    --cf-section-spacing: #{map.get($config, section-spacing)};
+    --cf-input-radius: #{map.get($config, input-radius)};
+    --cf-input-padding-y: #{map.get($config, input-padding-y)};
+    --cf-input-padding-x: #{map.get($config, input-padding-x)};
+
+    --cf-font-family: #{map.get($config, font-family)};
+    --cf-section-title-size: #{map.get($config, section-title-size)};
+    --cf-section-title-weight: #{map.get($config, section-title-weight)};
+    --cf-label-size: #{map.get($config, label-size)};
+    --cf-label-weight: #{map.get($config, label-weight)};
+    --cf-input-font-size: #{map.get($config, input-font-size)};
+    --cf-hint-size: #{map.get($config, hint-size)};
+
+    --cf-section-shadow: #{map.get($config, section-shadow)};
+}

package/src/lib/modules/confirmation-modal/components/confirmation-modal/confirmation-modal.component.html

@@ -0,0 +1,77 @@
+<div *ngIf="isOpen" class="cc-modal-backdrop" 
+    [ngClass]="{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}"
+    (click)="onBackdropClick($event)" role="dialog" [attr.aria-modal]="true"
+    [attr.aria-labelledby]="'modal-title-' + mergedConfig.title" [attr.aria-label]="mergedConfig.ariaLabel"
+    [attr.aria-describedby]="mergedConfig.ariaDescribedBy">
+
+    <div class="cc-modal-container {{ mergedConfig.customClass }}" 
+        [ngClass]="{'side-panel': mergedConfig.type === 'side-panel'}"
+        [ngStyle]="getModalStyles()" (click)="$event.stopPropagation()">
+
+        <!-- Header -->
+        <div [ngClass]="getHeaderClass()" [style.background-color]="mergedConfig.headerBackgroundColor"
+            [style.border-bottom]="mergedConfig.headerBorderBottom">
+            <div class="modal-header__content">
+                <!-- Icon (Optional) -->
+                <span *ngIf="mergedConfig.icon" class="modal-header__icon">
+                    <ng-container [ngSwitch]="resolveIconType(mergedConfig.icon)">
+                        <mat-icon *ngSwitchCase="'material'" [style.color]="getIconColor(mergedConfig.icon)">
+                            {{ getIconValue(mergedConfig.icon) }}
+                        </mat-icon>
+                        <img *ngSwitchCase="'custom'" [src]="getIconValue(mergedConfig.icon)"
+                            [attr.alt]="mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'"
+                            class="modal-header__custom-icon">
+                        <img *ngSwitchCase="'img'" [src]="getIconValue(mergedConfig.icon)"
+                            [attr.alt]="mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'"
+                            class="modal-header__custom-icon">
+                    </ng-container>
+                </span>
+
+                <!-- Title -->
+                <h2 class="modal-header__title" [id]="'modal-title-' + mergedConfig.title"
+                    [style.color]="mergedConfig.headerTextColor">
+                    {{ mergedConfig.title }}
+                </h2>
+            </div>
+
+            <!-- Code Snippet Button -->
+            <button *ngIf="mergedConfig.showCodeSnippetButton" type="button" class="modal-header__code-btn"
+                (click)="onShowCodeSnippet()" [attr.aria-label]="mergedConfig.labels?.codeSnippetAriaLabel"
+                [attr.title]="mergedConfig.labels?.codeSnippetTitle">
+                <mat-icon>code</mat-icon>
+            </button>
+
+            <!-- Close Button -->
+            <button *ngIf="mergedConfig.showCloseButton" type="button" class="modal-header__close" (click)="onClose()"
+                [attr.aria-label]="mergedConfig.labels?.closeAriaLabel">
+                <mat-icon>close</mat-icon>
+            </button>
+        </div>
+
+        <!-- Body (Content Projection) -->
+        <div class="cc-modal-body" [ngClass]="{'cc-modal-body--form-mode': mergedConfig.formMode}" [style.padding]="mergedConfig.padding" [style.color]="mergedConfig.bodyTextColor">
+            <ng-content></ng-content>
+        </div>
+
+        <!-- Footer -->
+        <div class="cc-modal-footer" [style.background-color]="mergedConfig.footerBackgroundColor"
+            [style.border-top]="mergedConfig.footerBorderTop">
+
+            <ng-container *ngIf="!mergedConfig.customFooter">
+                <button *ngIf="mergedConfig.cancelButton?.show" type="button" class="cc-btn cc-btn-secondary"
+                    (click)="onCancel()">
+                    {{ mergedConfig.cancelButton?.label }}
+                </button>
+
+                <button type="button" [ngClass]="getConfirmButtonClass()"
+                    [disabled]="confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading"
+                    (click)="onConfirm()">
+                    <span *ngIf="confirmLoading || mergedConfig.confirmButton.loading" class="cc-btn-spinner"></span>
+                    {{ mergedConfig.confirmButton.label }}
+                </button>
+            </ng-container>
+
+            <ng-content select="[cc-modal-footer]"></ng-content>
+        </div>
+    </div>
+</div>