@bcweed/dynamic-form-lib 0.0.4 → 0.0.5

package/projects/dynamic-form-lib/src/lib/services/dynamic-form.service.spec.ts

@@ -1,302 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { FormControl } from '@angular/forms';
-import { DynamicFormService } from './dynamic-form.service';
-import { DynamicFormField, DynamicFormValidation } from '../../models/dynamic-forms';
-
-describe('DynamicFormService', () => {
-  let service: DynamicFormService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [DynamicFormService]
-    });
-    service = TestBed.inject(DynamicFormService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  describe('getValidators', () => {
-    it('should return empty array when no validations', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text'
-      };
-      const validators = service.getValidators(field);
-      expect(validators.length).toBe(0);
-    });
-
-    it('should create required validator', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'required', message: 'Required' }
-        ]
-      };
-      const validators = service.getValidators(field);
-      expect(validators.length).toBe(1);
-
-      const control = new FormControl('');
-      const result = validators[0](control);
-      expect(result).not.toBeNull();
-    });
-
-    it('should create minLength validator', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'minLength', value: 5, message: 'Min 5 chars' }
-        ]
-      };
-      const validators = service.getValidators(field);
-      expect(validators.length).toBe(1);
-
-      const control = new FormControl('abc');
-      const result = validators[0](control);
-      expect(result).not.toBeNull();
-      expect(result?.['minlength']).toBeDefined();
-    });
-
-    it('should create email validator', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'email',
-        validations: [
-          { type: 'email', message: 'Invalid email' }
-        ]
-      };
-      const validators = service.getValidators(field);
-      expect(validators.length).toBe(1);
-
-      const control = new FormControl('invalid-email');
-      const result = validators[0](control);
-      expect(result).not.toBeNull();
-    });
-
-    it('should create custom validator', () => {
-      const customValidator = (value: any) => value === 'valid';
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'custom', message: 'Custom error', validator: customValidator }
-        ]
-      };
-      const validators = service.getValidators(field);
-      expect(validators.length).toBe(1);
-
-      let control = new FormControl('invalid');
-      let result = validators[0](control);
-      expect(result).not.toBeNull();
-
-      control = new FormControl('valid');
-      result = validators[0](control);
-      expect(result).toBeNull();
-    });
-
-    it('should create multiple validators', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'required', message: 'Required' },
-          { type: 'minLength', value: 3, message: 'Min 3' },
-          { type: 'maxLength', value: 10, message: 'Max 10' }
-        ]
-      };
-      const validators = service.getValidators(field);
-      expect(validators.length).toBe(3);
-    });
-  });
-
-  describe('getErrorMessages', () => {
-    it('should return empty array when no errors', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'required', message: 'Required' }
-        ]
-      };
-      const errors = service.getErrorMessages(field, null);
-      expect(errors.length).toBe(0);
-    });
-
-    it('should return error message for required validation', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'required', message: 'This field is required' }
-        ]
-      };
-      const validationErrors = { required: true };
-      const errors = service.getErrorMessages(field, validationErrors);
-      
-      expect(errors.length).toBe(1);
-      expect(errors[0].fieldId).toBe('test');
-      expect(errors[0].message).toBe('This field is required');
-    });
-
-    it('should return error message for email validation', () => {
-      const field: DynamicFormField = {
-        id: 'email',
-        label: 'Email',
-        type: 'email',
-        validations: [
-          { type: 'email', message: 'Invalid email address' }
-        ]
-      };
-      const validationErrors = { email: true };
-      const errors = service.getErrorMessages(field, validationErrors);
-      
-      expect(errors.length).toBe(1);
-      expect(errors[0].message).toBe('Invalid email address');
-    });
-
-    it('should return multiple error messages', () => {
-      const field: DynamicFormField = {
-        id: 'test',
-        label: 'Test',
-        type: 'text',
-        validations: [
-          { type: 'required', message: 'Required' },
-          { type: 'minLength', value: 5, message: 'Min 5 chars' }
-        ]
-      };
-      const validationErrors = { 
-        required: true,
-        minlength: { requiredLength: 5, actualLength: 2 }
-      };
-      const errors = service.getErrorMessages(field, validationErrors);
-      
-      expect(errors.length).toBe(2);
-    });
-  });
-
-  describe('validateFormConfig', () => {
-    it('should return true for valid config', () => {
-      const config = {
-        id: 'test-form',
-        fields: [
-          {
-            id: 'name',
-            label: 'Name',
-            type: 'text'
-          }
-        ]
-      };
-      expect(service.validateFormConfig(config)).toBe(true);
-    });
-
-    it('should return false for missing id', () => {
-      const config = {
-        fields: [
-          {
-            id: 'name',
-            label: 'Name',
-            type: 'text'
-          }
-        ]
-      };
-      expect(service.validateFormConfig(config)).toBe(false);
-    });
-
-    it('should return false for missing fields', () => {
-      const config = {
-        id: 'test-form'
-      };
-      expect(service.validateFormConfig(config)).toBe(false);
-    });
-
-    it('should return false for empty fields array', () => {
-      const config = {
-        id: 'test-form',
-        fields: []
-      };
-      expect(service.validateFormConfig(config)).toBe(false);
-    });
-
-    it('should return false for invalid field type', () => {
-      const config = {
-        id: 'test-form',
-        fields: [
-          {
-            id: 'name',
-            label: 'Name',
-            type: 'invalid-type'
-          }
-        ]
-      };
-      expect(service.validateFormConfig(config)).toBe(false);
-    });
-
-    it('should return false for select without options', () => {
-      const config = {
-        id: 'test-form',
-        fields: [
-          {
-            id: 'country',
-            label: 'Country',
-            type: 'select'
-          }
-        ]
-      };
-      expect(service.validateFormConfig(config)).toBe(false);
-    });
-
-    it('should return true for select with options', () => {
-      const config = {
-        id: 'test-form',
-        fields: [
-          {
-            id: 'country',
-            label: 'Country',
-            type: 'select',
-            options: [
-              { label: 'USA', value: 'US' }
-            ]
-          }
-        ]
-      };
-      expect(service.validateFormConfig(config)).toBe(true);
-    });
-  });
-
-  describe('createSampleConfig', () => {
-    it('should create a valid sample config', () => {
-      const config = service.createSampleConfig();
-      
-      expect(config).toBeDefined();
-      expect(config.id).toBe('sample-form');
-      expect(config.fields).toBeDefined();
-      expect(config.fields.length).toBeGreaterThan(0);
-      expect(service.validateFormConfig(config)).toBe(true);
-    });
-
-    it('should include all field types', () => {
-      const config = service.createSampleConfig();
-      const types = config.fields.map((f: any) => f.type);
-      
-      expect(types).toContain('text');
-      expect(types).toContain('email');
-      expect(types).toContain('number');
-      expect(types).toContain('select');
-      expect(types).toContain('radio');
-      expect(types).toContain('checkbox');
-      expect(types).toContain('date');
-      expect(types).toContain('textarea');
-    });
-  });
-});

package/projects/dynamic-form-lib/src/lib/services/dynamic-form.service.ts

@@ -1,325 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ValidatorFn, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
-import { DynamicFormField, DynamicFormValidation, DynamicFormError } from '../models/dynamic-form-interfaces';
-import { compareValidator } from '../validators/compare-validator';
-@Injectable({
-  providedIn: 'root'
-})
-export class DynamicFormService {
-  constructor() {}
-
-  /**
-    * Gets the validators for a specific field based on its validations
-    */
-  getValidators(fieldOrValidations: DynamicFormField | DynamicFormValidation[]): ValidatorFn[] {
-    let validations: DynamicFormValidation[] = [];
-    if (!Array.isArray(fieldOrValidations)) {
-      if (!fieldOrValidations.validations || fieldOrValidations.validations.length === 0) {
-        return [];
-      }
-      validations = fieldOrValidations.validations;
-    }
-    else {
-      validations = fieldOrValidations;
-    }
-
-
-    const validators: ValidatorFn[] = [];
-
-    validations.forEach(validation => {
-      const validator = this.createValidator(validation);
-      if (validator) {
-        validators.push(validator);
-      }
-    });
-
-    return validators;
-  }
-  /**
-   * Creates a validator function based on validation type
-   */
-  private createValidator(validation: DynamicFormValidation): ValidatorFn | null {
-    switch (validation.type) {
-      case 'required':
-        return Validators.required;
-
-      case 'minLength':
-        return validation.value ? Validators.minLength(validation.value) : null;
-
-      case 'maxLength':
-        return validation.value ? Validators.maxLength(validation.value) : null;
-
-      case 'min':
-        return validation.value !== undefined ? Validators.min(validation.value) : null;
-
-      case 'max':
-        return validation.value !== undefined ? Validators.max(validation.value) : null;
-
-      case 'compare':
-        return validation.compareToField !== undefined ? compareValidator(validation.compareToField) : null;
-
-      case 'email':
-        return Validators.email;
-
-      case 'pattern':
-        return validation.value ? Validators.pattern(validation.value) : null;
-
-      case 'custom':
-        return validation.validator ? this.customValidator(validation) : null;
-     
-      default:
-        return null;
-    }
-  }
-
-  /**
-   * Creates a custom validator wrapper
-   */
-  private customValidator(validation: DynamicFormValidation): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-      if (!validation.validator) {
-        return null;
-      }
-
-      const isValid = validation.validator(control.value);
-      return isValid ? null : { custom: { message: validation.message } };
-    };
-  }
-
-  /**
-   * Gets error messages for a field based on its validation errors
-   */
-  getErrorMessages(field: DynamicFormField, errors: ValidationErrors | null): DynamicFormError[] {
-    if (!errors || !field.validations) {
-      return [];
-    }
-
-    const errorMessages: DynamicFormError[] = [];
-
-    field.validations.forEach(validation => {
-      const errorKey = this.getErrorKey(validation.type);
-      if (errors[errorKey]) {
-        errorMessages.push({
-          fieldId: field.id,
-          message: validation.message
-        });
-      }
-    });
-
-    return errorMessages;
-  }
-
-  /**
-   * Maps validation type to Angular error key
-   */
-  private getErrorKey(validationType: string): string {
-    switch (validationType) {
-      case 'required':
-        return 'required';
-      case 'minLength':
-        return 'minlength';
-      case 'maxLength':
-        return 'maxlength';
-      case 'min':
-        return 'min';
-      case 'max':
-        return 'max';
-      case 'email':
-        return 'email';
-      case 'pattern':
-        return 'pattern';
-      case 'custom':
-        return 'custom';
-      case 'compare':
-        return 'compare';
-      default:
-        return validationType;
-    }
-  }
-
-  /**
-   * Validates a complete form configuration
-   */
-  validateFormConfig(config: any): boolean {
-    if (!config || !config.id || !config.frames) {
-      console.error('Invalid form config: missing required properties');
-      return false;
-    }
-
-    if (!Array.isArray(config.frames) || config.frames.length === 0) {
-      console.error('Invalid form config: frames must be a non-empty array');
-      return false;
-    }
-
-    for (const frame of config.frames) {
-      if (!Array.isArray(frame.sections) || frame.sections.length === 0) {
-        console.error('Invalid form config: sections must be a non-empty array');
-        return false;
-      }
-
-    }
-    if (!Array.isArray(config.frames[0].sections) || config.frames[0].sections.length === 0 || !Array.isArray(config.frames[0].sections[0].fields) || config.frames[0].sections[0].fields.length === 0) {
-      console.error('Invalid form config: fields must be a non-empty array');
-      return false;
-    }
-    for (const frame of config.frames) {
-      for (const section of frame.sections) {
-      for (const field of section.fields) {
-        if (!field.id || !field.label || !field.type) {
-          console.error('Invalid field config: missing required properties', field);
-          return false;
-        }
-
-        const validTypes = ['text', 'number', 'email', 'select', 'checkbox', 'radio', 'date', 'textarea'];
-        if (!validTypes.includes(field.type)) {
-          console.error(`Invalid field type: ${field.type}`, field);
-          return false;
-        }
-
-        if ((field.type === 'select' || field.type === 'radio') && (!field.options || field.options.length === 0)) {
-          console.error(`Field type ${field.type} requires options`, field);
-          return false;
-        }
-      }
-      }
-    }
-    return true;
-  }
-
-  /**
-   * Creates a sample form configuration for testing
-   */
-  createSampleConfig(): any {
-    return {
-      id: 'sample-form',
-      title: 'Sample Dynamic Form',
-      description: 'This is a sample form configuration demonstrating all field types.',
-      sections: [
-        {
-          id: 'sample-form',
-          title: 'Sample Dynamic Form',
-          description: 'This is a sample form configuration demonstrating all field types.',
-          fields: [
-            {
-              id: 'firstName',
-              label: 'First Name',
-              type: 'text', 
-              placeholder: 'Enter your first name',
-              required: true,
-              order: 1,
-              validations: [
-                {
-                  type: 'required',
-                  message: 'First name is required'
-                },
-                {
-                  type: 'minLength',
-                  value: 2,
-                  message: 'First name must be at least 2 characters'
-                }
-              ]
-            },
-            {
-              id: 'email',
-              label: 'Email Address',
-              type: 'email',
-              placeholder: 'Enter your email',
-              required: true,
-              order: 2,
-              validations: [
-                {
-                  type: 'required',
-                  message: 'Email is required'
-                },
-                {
-                  type: 'email',
-                  message: 'Please enter a valid email address'
-                }
-              ]
-            },
-            {
-              id: 'age',
-              label: 'Age',
-              type: 'number',
-              placeholder: 'Enter your age',
-              order: 3,
-              validations: [
-                {
-                  type: 'min',
-                  value: 18,
-                  message: 'You must be at least 18 years old'
-                },
-                {
-                  type: 'max',
-                  value: 120,
-                  message: 'Age must be less than 120'
-                }
-              ]
-            },
-            {
-              id: 'country',
-              label: 'Country',
-              type: 'select',
-              placeholder: 'Select your country',
-              required: true,
-              order: 4,
-              options: [
-                { label: 'United States', value: 'US' },
-                { label: 'Canada', value: 'CA' },
-                { label: 'United Kingdom', value: 'UK' },
-                { label: 'Australia', value: 'AU' }
-              ],
-              validations: [
-                {
-                  type: 'required',
-                  message: 'Country is required'
-                }
-              ]
-            },
-            {
-              id: 'gender',
-              label: 'Gender',
-              type: 'radio',
-              order: 5,
-              options: [
-                { label: 'Male', value: 'male' },
-                { label: 'Female', value: 'female' },
-                { label: 'Other', value: 'other' }
-              ]
-            },
-            {
-              id: 'newsletter',
-              label: 'Subscribe to newsletter',
-              type: 'checkbox',
-              order: 6,
-              value: false
-            },
-            {
-              id: 'birthDate',
-              label: 'Birth Date',
-              type: 'date',
-              placeholder: 'Select your birth date',
-              order: 7
-            },
-            {
-              id: 'comments',
-              label: 'Comments',
-              type: 'textarea',
-              placeholder: 'Enter any additional comments',
-              order: 8,
-              validations: [
-                {
-                  type: 'maxLength',
-                  value: 500,
-                  message: 'Comments must be less than 500 characters'
-                }
-              ]
-            }
-          ],
-       }
-      ],
-      submitLabel: 'Submit Form',
-      cancelLabel: 'Cancel'
-    };
-  }
-}

package/projects/dynamic-form-lib/src/lib/style.scss

@@ -1,3 +0,0 @@
-@import 'tailwindcss';
-@import 'tailwindcss-utilities';
-@import "tailwindcss-primeui";

package/projects/dynamic-form-lib/src/lib/validators/compare-validator.ts

@@ -1,26 +0,0 @@
-import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
-
-export function compareValidator(
-  matchingControlName: string
-): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const group = control.parent;
-
-    if (!group) {
-      return null;
-    }
-
-    const matchingControl = group.get(matchingControlName);
-
-    if (!matchingControl) {
-      return null;
-    }
-
-    // Return error on the current control instead of modifying the other
-    if (control.value !== matchingControl.value) {
-      return { compare: true };
-    }
-
-    return null;
-  };
-}

package/projects/dynamic-form-lib/src/public-api.css

@@ -1 +0,0 @@
-@import './tailwind.generated.css';

package/projects/dynamic-form-lib/src/public-api.ts

@@ -1,10 +0,0 @@
-/*
- * Public API Surface of dynamic-form-lib
- */
-
-export * from './lib/dynamic-form.component';
-export * from './lib/dynamic-form-field/dynamic-form-field.component';
-export * from './lib/models/dynamic-form-interfaces';
-export * from './lib/services/dynamic-form.service';
-export * from './lib/directives/dynamic-ref-directive';
-export * from './lib/helpers/component-helper';

package/projects/dynamic-form-lib/tailwind.config.js

@@ -1,10 +0,0 @@
-import PrimeUI from 'tailwindcss-primeui';
-
-export default {
-  // ...
-  content: [
-    "./src/**/*.{html,ts}",
-   
-  ],
- plugins: [PrimeUI]
-};

package/projects/dynamic-form-lib/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}