commons-shared-web-ui 0.0.53 → 0.0.54

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

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

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

@@ -1,19 +0,0 @@
-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/confirmation-modal/components/confirmation-modal/confirmation-modal.component.html

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