@bcweed/dynamic-form-lib 0.0.1 → 0.0.3

package/projects/dynamic-form-lib/src/lib/README.md

@@ -1,424 +0,0 @@
-# Dynamic Form Component
-
-A comprehensive, reusable dynamic form system for Angular applications with built-in validation and visual state management.
-
-## Features
-
-- 🎨 **Multiple Field Types**: text, email, number, select, checkbox, radio, date, textarea
-- ✅ **Built-in Validation**: required, minLength, maxLength, min, max, email, pattern, custom validators
-- 🎯 **Visual State Changes**: Real-time visual feedback for valid/invalid fields
-- 📱 **Responsive Design**: Mobile-friendly layout using Bootstrap grid
-- 🔄 **State Management**: Complete form state tracking (values, errors, touched fields)
-- 🎭 **Conditional Display**: Show/hide fields based on form values
-- 🎨 **PrimeNG Integration**: Uses PrimeNG components for consistent UI
-- 🚀 **Standalone Components**: Uses Angular standalone components
-
-## Installation
-
-The dynamic form components are located in `src/app/dynamic-form/`.
-
-### Required Dependencies
-
-Make sure you have the following packages installed:
-- `@angular/forms`
-- `@angular/common`
-- `primeng`
-- `primeicons`
-- `@primeng/themes`
-
-## Usage
-
-### Basic Example
-
-```typescript
-import { Component } from '@angular/core';
-import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
-import { DynamicFormConfig, DynamicFormValue } from './models/dynamic-forms';
-
-@Component({
-  selector: 'app-example',
-  standalone: true,
-  imports: [DynamicFormComponent],
-  template: `
-    <app-dynamic-form
-      [config]="formConfig"
-      (formSubmit)="onSubmit($event)"
-      (formCancel)="onCancel()">
-    </app-dynamic-form>
-  `
-})
-export class ExampleComponent {
-  formConfig: DynamicFormConfig = {
-    id: 'example-form',
-    title: 'Example Form',
-    description: 'This is an example form',
-    fields: [
-      {
-        id: 'name',
-        label: 'Name',
-        type: 'text',
-        placeholder: 'Enter your name',
-        required: true,
-        validations: [
-          {
-            type: 'required',
-            message: 'Name is required'
-          }
-        ]
-      },
-      {
-        id: 'email',
-        label: 'Email',
-        type: 'email',
-        placeholder: 'Enter your email',
-        required: true,
-        validations: [
-          {
-            type: 'required',
-            message: 'Email is required'
-          },
-          {
-            type: 'email',
-            message: 'Please enter a valid email'
-          }
-        ]
-      }
-    ],
-    submitLabel: 'Submit',
-    cancelLabel: 'Cancel'
-  };
-
-  onSubmit(values: DynamicFormValue): void {
-    console.log('Form submitted:', values);
-  }
-
-  onCancel(): void {
-    console.log('Form cancelled');
-  }
-}
-```
-
-### Field Types
-
-#### Text Input
-```typescript
-{
-  id: 'firstName',
-  label: 'First Name',
-  type: 'text',
-  placeholder: 'Enter first name',
-  required: true
-}
-```
-
-#### Email Input
-```typescript
-{
-  id: 'email',
-  label: 'Email',
-  type: 'email',
-  placeholder: 'email@example.com',
-  required: true,
-  validations: [
-    { type: 'required', message: 'Email is required' },
-    { type: 'email', message: 'Invalid email format' }
-  ]
-}
-```
-
-#### Number Input
-```typescript
-{
-  id: 'age',
-  label: 'Age',
-  type: 'number',
-  validations: [
-    { type: 'min', value: 18, message: 'Must be at least 18' },
-    { type: 'max', value: 120, message: 'Must be less than 120' }
-  ]
-}
-```
-
-#### Select Dropdown
-```typescript
-{
-  id: 'country',
-  label: 'Country',
-  type: 'select',
-  required: true,
-  options: [
-    { label: 'United States', value: 'US' },
-    { label: 'Canada', value: 'CA' },
-    { label: 'United Kingdom', value: 'UK' }
-  ]
-}
-```
-
-#### Radio Buttons
-```typescript
-{
-  id: 'gender',
-  label: 'Gender',
-  type: 'radio',
-  options: [
-    { label: 'Male', value: 'male' },
-    { label: 'Female', value: 'female' },
-    { label: 'Other', value: 'other' }
-  ]
-}
-```
-
-#### Checkbox
-```typescript
-{
-  id: 'newsletter',
-  label: 'Subscribe to newsletter',
-  type: 'checkbox',
-  value: false
-}
-```
-
-#### Date Picker
-```typescript
-{
-  id: 'birthDate',
-  label: 'Birth Date',
-  type: 'date',
-  placeholder: 'Select date',
-  required: true
-}
-```
-
-#### Textarea
-```typescript
-{
-  id: 'comments',
-  label: 'Comments',
-  type: 'textarea',
-  placeholder: 'Enter comments',
-  validations: [
-    { type: 'maxLength', value: 500, message: 'Max 500 characters' }
-  ]
-}
-```
-
-### Validation Types
-
-#### Required
-```typescript
-{
-  type: 'required',
-  message: 'This field is required'
-}
-```
-
-#### Min/Max Length
-```typescript
-{
-  type: 'minLength',
-  value: 3,
-  message: 'Minimum 3 characters'
-},
-{
-  type: 'maxLength',
-  value: 50,
-  message: 'Maximum 50 characters'
-}
-```
-
-#### Min/Max Value
-```typescript
-{
-  type: 'min',
-  value: 0,
-  message: 'Value must be at least 0'
-},
-{
-  type: 'max',
-  value: 100,
-  message: 'Value must be at most 100'
-}
-```
-
-#### Pattern (Regex)
-```typescript
-{
-  type: 'pattern',
-  value: '^[0-9]{5}$',
-  message: 'Must be a 5-digit ZIP code'
-}
-```
-
-#### Custom Validator
-```typescript
-{
-  type: 'custom',
-  message: 'Password must contain at least one uppercase letter',
-  validator: (value: any) => {
-    return /[A-Z]/.test(value);
-  }
-}
-```
-
-### Conditional Display
-
-You can show/hide fields based on other field values:
-
-```typescript
-{
-  id: 'companyName',
-  label: 'Company Name',
-  type: 'text',
-  conditionalDisplay: (formValues: any) => {
-    return formValues.accountType === 'business';
-  }
-}
-```
-
-### Field Ordering and Layout
-
-Control field order and layout using `order` and `cssClass`:
-
-```typescript
-{
-  id: 'firstName',
-  label: 'First Name',
-  type: 'text',
-  order: 1,
-  cssClass: 'col-md-6' // Bootstrap grid class
-}
-```
-
-### Form State Management
-
-Track form state in real-time:
-
-```typescript
-onFormStateChange(state: DynamicFormState): void {
-  console.log('Form valid:', state.isValid);
-  console.log('Current values:', state.values);
-  console.log('Errors:', state.errors);
-  console.log('Touched fields:', state.touched);
-  console.log('Submitting:', state.isSubmitting);
-}
-```
-
-### Initial Values
-
-Provide initial values to the form:
-
-```typescript
-<app-dynamic-form
-  [config]="formConfig"
-  [initialValues]="{ firstName: 'John', email: 'john@example.com' }"
-  (formSubmit)="onSubmit($event)">
-</app-dynamic-form>
-```
-
-## Component API
-
-### Inputs
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `config` | `DynamicFormConfig` | Form configuration (required) |
-| `initialValues` | `DynamicFormValue` | Initial form values (optional) |
-
-### Outputs
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `formSubmit` | `DynamicFormValue` | Emitted when form is submitted |
-| `formCancel` | `void` | Emitted when cancel is clicked |
-| `formStateChange` | `DynamicFormState` | Emitted when form state changes |
-
-### Methods
-
-The component exposes these methods via ViewChild:
-
-- `reset()`: Reset the form to initial state
-- `patchValues(values: DynamicFormValue)`: Update form values
-- `getFormValue()`: Get current form values
-
-## Demo Component
-
-A complete demo component is available at `src/app/dynamic-form/dynamic-form-demo/` that showcases all features.
-
-To use the demo:
-1. Import and add to your routes
-2. Navigate to the demo route
-3. Interact with the form to see validation and state changes
-
-## Styling
-
-The components use a combination of:
-- Bootstrap grid system for layout
-- PrimeNG component styles
-- Custom SCSS for visual state changes
-
-Visual states include:
-- ✅ Valid fields (green border + checkmark)
-- ❌ Invalid fields (red border + error messages)
-- 🔒 Disabled fields (grayed out)
-- ⭐ Required fields (asterisk indicator)
-
-## Service
-
-The `DynamicFormService` provides:
-- Validator creation from validation config
-- Error message generation
-- Form configuration validation
-- Sample form configuration generator
-
-## File Structure
-
-```
-src/app/dynamic-form/
-├── dynamic-form.component.ts
-├── dynamic-form.component.html
-├── dynamic-form.component.scss
-├── dynamic-form-field/
-│   ├── dynamic-form-field.component.ts
-│   ├── dynamic-form-field.component.html
-│   └── dynamic-form-field.component.scss
-├── services/
-│   └── dynamic-form.service.ts
-├── dynamic-form-demo/
-│   ├── dynamic-form-demo.component.ts
-│   ├── dynamic-form-demo.component.html
-│   └── dynamic-form-demo.component.scss
-└── README.md
-```
-
-## TypeScript Interfaces
-
-All interfaces are defined in `src/app/models/dynamic-forms.ts`:
-
-- `DynamicFormField`: Field configuration
-- `DynamicFormOption`: Select/Radio options
-- `DynamicFormValidation`: Validation rules
-- `DynamicFormConfig`: Complete form configuration
-- `DynamicFormValue`: Form values object
-- `DynamicFormError`: Error representation
-- `DynamicFormState`: Complete form state
-
-## Best Practices
-
-1. **Always provide validation messages**: Users need clear feedback
-2. **Use appropriate field types**: Choose the right input type for data
-3. **Order fields logically**: Use the `order` property
-4. **Group related fields**: Use `cssClass` for layout
-5. **Handle form submission**: Always provide feedback after submission
-6. **Validate configuration**: Use `DynamicFormService.validateFormConfig()`
-
-## Browser Support
-
-Supports all modern browsers that Angular 19 supports:
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
-## License
-
-Part of the VesselRegistry application.

package/projects/dynamic-form-lib/src/lib/SUMMARY.md

@@ -1,159 +0,0 @@
-# Dynamic Form System - Summary
-
-## Created Files
-
-The following files have been successfully created in `vesselregistry.client/src/app/dynamic-form/`:
-
-### Core Components
-1. **dynamic-form.component.ts** - Main container component that manages the entire form
-2. **dynamic-form.component.html** - Template for the form container
-3. **dynamic-form.component.scss** - Styles for the form container
-
-### Field Component
-4. **dynamic-form-field/dynamic-form-field.component.ts** - Individual field renderer
-5. **dynamic-form-field/dynamic-form-field.component.html** - Template for individual fields
-6. **dynamic-form-field/dynamic-form-field.component.scss** - Styles for fields with visual states
-
-### Service
-7. **services/dynamic-form.service.ts** - Form validation and state management service
-8. **services/dynamic-form.service.spec.ts** - Unit tests for the service
-
-### Demo Component
-9. **dynamic-form-demo/dynamic-form-demo.component.ts** - Demonstration component
-10. **dynamic-form-demo/dynamic-form-demo.component.html** - Demo template
-11. **dynamic-form-demo/dynamic-form-demo.component.scss** - Demo styles
-
-### Documentation
-12. **README.md** - Comprehensive documentation with examples
-13. **index.ts** - Barrel export file for easy imports
-
-## Features Implemented
-
-### ✅ Field Types
-- Text input
-- Email input
-- Number input
-- Select dropdown (with PrimeNG Dropdown)
-- Radio buttons (with PrimeNG RadioButton)
-- Checkbox (with PrimeNG Checkbox)
-- Date picker (with PrimeNG Calendar)
-- Textarea
-
-### ✅ Validation
-- Required
-- Min/Max length
-- Min/Max value
-- Email format
-- Pattern (regex)
-- Custom validators
-
-### ✅ Visual State Changes
-- **Valid fields**: Green border + checkmark icon (animated fadeIn)
-- **Invalid fields**: Red border + error messages (animated slideDown)
-- **Disabled fields**: Grayed out appearance
-- **Required fields**: Asterisk indicator
-- **Touched/Dirty states**: Visual feedback based on interaction
-
-### ✅ Advanced Features
-- Conditional field display based on form values
-- Field ordering system
-- Bootstrap grid integration for responsive layout
-- Custom CSS classes per field
-- Initial values support
-- Form state tracking (values, errors, touched, isSubmitting, isValid)
-- Real-time validation
-- Form reset functionality
-- Value patching
-
-### ✅ Styling
-- Smooth transitions and animations
-- Responsive design (mobile-friendly)
-- PrimeNG component integration
-- Bootstrap grid system
-- Custom visual states with color coding
-- Accessible form labels and error messages
-
-## Architecture
-
-### Component Hierarchy
-```
-DynamicFormComponent (Container)
-  └── DynamicFormFieldComponent (Field Renderer)
-        └── PrimeNG Components (UI Elements)
-```
-
-### Data Flow
-1. Parent provides `DynamicFormConfig`
-2. `DynamicFormComponent` builds Angular `FormGroup`
-3. `DynamicFormService` creates validators
-4. `DynamicFormFieldComponent` renders appropriate field type
-5. Form state tracked and emitted via `formStateChange`
-6. Submission handled via `formSubmit` event
-
-## Integration Points
-
-### With Existing Project
-- Uses existing PrimeNG components (already installed)
-- Follows Bootstrap grid conventions (already in use)
-- Standalone components (Angular 19 best practice)
-- Compatible with existing form patterns
-
-### TypeScript Interfaces
-All interfaces defined in `vesselregistry.client/src/app/models/dynamic-forms.ts`:
-- `DynamicFormField`
-- `DynamicFormOption`
-- `DynamicFormValidation`
-- `DynamicFormConfig`
-- `DynamicFormValue`
-- `DynamicFormError`
-- `DynamicFormState`
-
-## Usage Example
-
-```typescript
-import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
-import { DynamicFormConfig } from './models/dynamic-forms';
-
-formConfig: DynamicFormConfig = {
-  id: 'my-form',
-  title: 'Contact Form',
-  fields: [
-    {
-      id: 'name',
-      label: 'Name',
-      type: 'text',
-      required: true,
-      validations: [
-        { type: 'required', message: 'Name is required' }
-      ]
-    }
-  ]
-};
-```
-
-## Testing
-
-- Unit tests provided for `DynamicFormService`
-- Test coverage for validators and error messages
-- Demo component available for manual testing
-
-## Next Steps
-
-To use the dynamic form system:
-
-1. Import `DynamicFormComponent` in your component
-2. Create a `DynamicFormConfig` object
-3. Handle `formSubmit` and `formCancel` events
-4. Optionally track state with `formStateChange`
-
-See `README.md` for detailed examples and API documentation.
-
-## Status
-
-✅ All files created successfully
-✅ No TypeScript compilation errors
-✅ Follows Angular 19 and PrimeNG conventions
-✅ Includes comprehensive documentation
-✅ Visual states implemented with animations
-✅ Fully responsive design
-✅ Unit tests included

package/projects/dynamic-form-lib/src/lib/directives/dynamic-ref-directive.ts

@@ -1,13 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core';
-import { RadioButton } from 'primeng/radiobutton';
-
-@Directive({
-  selector: '[dynamicRef]',
-  standalone: true
-})
-export class DynamicRefDirective {
-  @Input() refKey!: string;
-  constructor(public el: ElementRef) {
-    const t = this.refKey;
-  }
-}

package/projects/dynamic-form-lib/src/lib/dynamic-form-demo/dynamic-form-demo.component.html

@@ -1,75 +0,0 @@
-<div class="demo-container">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-8">
-        <app-dynamic-form
-          [config]="formConfig"
-          [initialValues]="formValues"
-          (formSubmit)="onFormSubmit($event)"
-          (formCancel)="onFormCancel()"
-          (formStateChange)="onFormStateChange($event)"
-        ></app-dynamic-form>
-      </div>
-
-      <div class="col-md-4">
-        <div class="info-panel card-style card-corner-style">
-          <h5>Form Status</h5>
-          <hr />
-
-          <div class="status-item">
-            <label>Form Valid:</label>
-            <span [class]="formIsValid ? 'status-success' : 'status-error'">
-              {{ formIsValid ? 'Yes' : 'No' }}
-            </span>
-          </div>
-
-          <div class="status-item">
-            <label>Error Count:</label>
-            <span [class]="formErrorCount > 0 ? 'status-error' : 'status-success'">
-              {{ formErrorCount }}
-            </span>
-          </div>
-
-          @if (formState?.isSubmitting) {
-            <div class="status-item">
-              <label>Status:</label>
-              <span class="status-info">Submitting...</span>
-            </div>
-          }
-
-          @if (formState?.errors && formState.errors.length > 0) {
-            <div class="errors-section">
-              <h6>Current Errors:</h6>
-              <ul>
-                @for (error of formState.errors; track error) {
-                  <li class="error-item">
-                    <strong>{{ error.fieldId }}:</strong> {{ error.message }}
-                  </li>
-                }
-              </ul>
-            </div>
-          }
-
-          @if (submittedData) {
-            <div class="submitted-data">
-              <h6>Submitted Data:</h6>
-              <pre>{{ submittedData | json }}</pre>
-            </div>
-          }
-        </div>
-
-        <div class="help-panel card-style card-corner-style">
-          <h5>Instructions</h5>
-          <hr />
-          <ul>
-            <li>Fill out all required fields (marked with *)</li>
-            <li>Fields will show validation errors when touched</li>
-            <li>Valid fields will show a green checkmark</li>
-            <li>Form state is tracked in real-time</li>
-            <li>Click Submit to see the form data</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>