@bcweed/dynamic-form-lib 0.0.3 → 0.0.4

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

@@ -0,0 +1,141 @@
+.dynamic-form-container {
+  width: 100%;
+
+  p-message .p-message.light-font .p-message-text {
+    font-weight: normal;
+  }
+
+  .form-description {
+    color: #666;
+    margin-bottom: 1rem;
+  }
+
+  .form-fields-container {
+    margin-bottom: 1rem;
+
+    .row {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .form-actions {
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid #dee2e6;
+
+    button {
+      margin-left: 0.5rem;
+    }
+
+    .btn-cancel {
+      background-color: #6c757d;
+      border-color: #6c757d;
+
+      &:hover {
+        background-color: #5a6268;
+        border-color: #545b62;
+      }
+    }
+  }
+  // New styles for converted Tailwind classes
+  .section-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .section-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    padding-top: 16px;
+  }
+
+  .section-title {
+    width: 100%;
+    text-align:left;
+    font-size:24px;
+    font-weight:600;
+    margin-top:8px;
+    margin-bottom:16px;
+  }
+
+  .message-container {
+    width: 100%;
+    display: block;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    text-align: left;
+  }
+
+  .fields-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .fields-grid {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: left;
+  }
+
+  .field-container {
+    width: 100%;
+    text-align: left;
+  }
+
+  .field-container-2col {
+    width: 100%;
+    text-align: left;
+  }
+
+  .field-container-1col {
+    width: 100%;
+    text-align: left;
+  }
+
+  .button-container {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .button-group {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+
+// Responsive adjustments
+@media (min-width: 1024px) {
+  .dynamic-form-container {
+
+    .field-container {
+      width: calc(50% - 0.5rem);
+    }
+
+    .field-container-2col {
+      width: calc(50% - 0.5rem);
+    }
+
+    .field-container-1col {
+      width: 100%;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .dynamic-form-container {
+    .form-actions {
+      button {
+        width: 100%;
+        margin: 0.25rem 0;
+      }
+    }
+  }
+}

package/projects/dynamic-form-lib/src/lib/dynamic-form.component.ts

@@ -0,0 +1,366 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DynamicFormConfig, DynamicFormSection, DynamicFormState, DynamicFormValue, DynamicFormError, DynamicFormField, DynamicFormFrameGroup } from './models/dynamic-form-interfaces';
+import { DynamicFormFieldComponent } from './dynamic-form-field/dynamic-form-field.component';
+import { DynamicFormService } from './services/dynamic-form.service';
+import { ButtonModule } from 'primeng/button';
+import { inject } from '@angular/core';
+import { MessageModule } from 'primeng/message';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+
+@Component({
+  selector: 'app-dynamic-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, DynamicFormFieldComponent, ButtonModule, MessageModule],
+  templateUrl: './dynamic-form.component.html',
+  styleUrls: ['./dynamic-form.component.scss']
+})
+export class DynamicFormComponent implements OnInit, OnDestroy {
+  // Inject dependencies using field initializers (this IS the injection context)
+  private fb = inject(FormBuilder);
+  private dynamicFormService = inject(DynamicFormService);
+
+  @Input() config!: DynamicFormConfig;
+  @Input() initialValues?: DynamicFormValue;
+  @Input() allowHelpOverlay = false;
+  @Input() allowHelpSideBar = false;
+ 
+  @Output() formSubmit = new EventEmitter<DynamicFormValue>();
+  @Output() formCancel = new EventEmitter<void>();
+  @Output() formStateChange = new EventEmitter<DynamicFormState>();
+  @ViewChildren(DynamicFormFieldComponent) fieldComponents!: QueryList<DynamicFormFieldComponent>;
+
+  componentMap!: Map<string, DynamicFormFieldComponent>;
+  fieldMap!: Map<string, DynamicFormField>;
+  form!: FormGroup;
+  formState!: DynamicFormState;
+  sortedFields: DynamicFormField[] = [];
+  sortedSections: DynamicFormSection[] = [];
+  sortedFrames: DynamicFormFrameGroup[] = [];
+  private destroy$ = new Subject<void>();
+  isExpanded = false;
+  isSmallMedia = false;
+  isMediumMedia = false;
+
+  // Empty constructor - no code needed here
+  constructor(private responsive: BreakpointObserver) {}
+
+    
+
+  ngOnInit(): void {
+    this.responsive.observe([Breakpoints.Medium, Breakpoints.Small, Breakpoints.XSmall])
+      .subscribe(result => {
+
+
+        if (result.matches) {
+          this.isSmallMedia = true;
+
+        }
+        else {
+          this.isSmallMedia = false;
+
+        }
+      });
+
+    this.initializeForm();
+    this.subscribeToFormChanges();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  ngAfterViewInit() {
+    this.componentMap = new Map(
+      this.fieldComponents.map(comp => [comp.field.id, comp])
+    );
+  }
+
+  private initializeForm(): void {
+
+    //sort frames
+    // Sort sections and fields by order
+    this.sortedFrames = [...this.config.frames].sort((a, b) =>
+      (a.order ?? 0) - (b.order ?? 0)
+    );
+    this.sortedFrames.forEach((frame) => {
+      frame.sections = [...frame.sections].sort((a, b) =>
+        (a.order ?? 0) - (b.order ?? 0)
+      );
+      frame.sections.forEach((section) => {
+        section.fields = [...section.fields].sort((a, b) =>
+          (a.order ?? 0) - (b.order ?? 0)
+        );
+      });
+    });
+     
+    
+    // Build field map for O(1) lookup
+    this.fieldMap = new Map();
+    this.sortedFrames.forEach(frame => {
+      frame.sections.forEach(section => {
+        section.fields.forEach(field => {
+          this.fieldMap.set(field.id, field);
+        });
+      });
+    });
+    
+    // Build form controls
+    const group: { [key: string]: any } = {};
+    
+    this.sortedFrames.forEach(frame => {
+      frame.sections.forEach(section => {
+        section.fields.forEach(field => {
+          const validators = field.disabled === true ? [] : this.dynamicFormService.getValidators(field);
+          const initialValue = this.getInitialValue(field);
+
+        group[field.id] = [
+          { value: initialValue, disabled: field.disabled ?? false },
+          validators
+        ];
+
+        });
+      });
+    });
+
+    this.form = this.fb.group(group);
+
+    // Trigger all click events on form controls
+    this.triggerAllClickEvents();
+
+    // Initialize form state
+    this.formState = {
+      values: this.form.value,
+      errors: [],
+      touched: {},
+      isSubmitting: false,
+      isValid: this.form.valid
+    };
+    if (this.form.valid) {
+      this.markAllAsTouched();
+    }
+    this.emitFormState();
+   
+  }
+
+  private triggerAllClickEvents(): void {
+    this.sortedFrames.forEach(frame => {
+      frame.sections.forEach(section => {
+        section.fields.forEach(field => {
+          const control = this.form.get(field.id);
+          if (control && field.onClick) {
+            // Trigger the onClick event with current control value
+            field.onClick(control.value, this.form);
+          }
+        });
+      });
+    })
+  }
+
+  private getInitialValue(field: DynamicFormField): any {
+    if (this.initialValues && this.initialValues[field.id] !== undefined) {
+      //return this.initialValues[field.id];
+      if (field.type == "date") {
+        if (this.initialValues[field.id] instanceof Date && !isNaN(this.initialValues[field.id].getTime())) {
+          console.log(field.id + " is already a valid Date object");
+          return this.initialValues[field.id];
+        }
+        else {
+          console.log(field.id + " is not a valid Date object, attempting to parse");
+          return new Date(this.initialValues[field.id]);
+        }
+      }
+      else {
+        return this.initialValues[field.id];
+      }
+     }
+    return field.value ?? this.getDefaultValue(field.type);
+  }
+
+  private getDefaultValue(type: string): any {
+    switch (type) {
+      case 'checkbox':
+        return null;
+      case 'number':
+        return null;
+      case 'hidden':
+        return 0;
+      default:
+        return '';
+    }
+  }
+
+  private subscribeToFormChanges(): void {
+    this.form.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(values => {
+        this.updateFormState();
+      });
+
+    this.form.statusChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.updateFormState();
+      });
+  }
+
+  private updateFormState(): void {
+    const touched: { [key: string]: boolean } = {};
+    const errors: DynamicFormError[] = [];
+
+    this.fieldMap.forEach((field, fieldId) => {
+      const control = this.form.get(fieldId);
+      if (control) {
+        touched[fieldId] = control.touched;
+        
+        if (control.invalid && control.touched) {
+          const fieldErrors = this.dynamicFormService.getErrorMessages(field, control.errors);
+          errors.push(...fieldErrors);
+        }
+      }
+    });
+
+    this.formState = {
+      values: this.form.value,
+      errors,
+      touched,
+      isSubmitting: this.formState.isSubmitting,
+      isValid: this.form.valid
+    };
+
+    this.emitFormState();
+  }
+
+  private emitFormState(): void {
+    this.formStateChange.emit({ ...this.formState });
+  }
+  showCancelButton(): boolean {
+    if (!this.config.hideCancelButton) {
+      return true;
+    }
+    return !this.config.hideCancelButton();
+  }
+
+  showSubmitButton(): boolean {
+    if (!this.config.hideSubmitButton) {
+      return true;
+    }
+    return !this.config.hideSubmitButton();
+  }
+
+  isFieldVisible(field: DynamicFormField): boolean {
+    if (!field.conditionalDisplay) {
+      return true;
+    }
+    return field.conditionalDisplay(this.form.value);
+  }
+
+  isSectionVisible(section: DynamicFormSection): boolean {
+    if (!section.conditionalDisplay) {
+      return true;
+    }
+    return section.conditionalDisplay(this.form.value);
+  }
+
+  isFrameVisible(frame: DynamicFormFrameGroup): boolean {
+    if (!frame.conditionalDisplay) {
+      return true;
+    }
+    return frame.conditionalDisplay(this.form.value);
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.markAllAsTouched();
+      this.updateFormState();
+      for (const frame of this.sortedFrames) {
+        for (const section of frame.sections) {
+        for (const field of section.fields) {
+          const control = this.form.get(field.id);
+          if (control && !control.valid) {
+            const component = this.componentMap.get(field.id);
+            if (component) {
+              component.focusOn();
+              return;
+            }
+          }
+          }
+        }
+      }
+      return;
+    }
+
+    this.formState.isSubmitting = true;
+    this.emitFormState();
+
+    const formValue = this.form.value;
+    this.formSubmit.emit(formValue);
+
+    // Reset submitting state after emission
+    setTimeout(() => {
+      this.formState.isSubmitting = false;
+      this.emitFormState();
+    }, 0);
+  }
+
+  onCancel(): void {
+    this.formCancel.emit();
+  }
+
+  private markAllAsTouched(): void {
+    Object.keys(this.form.controls).forEach(key => {
+      const control = this.form.get(key);
+      control?.markAsTouched();
+    });
+  }
+
+  getFieldErrors(fieldId: string): string[] {
+    const control = this.form.get(fieldId);
+    if (!control || !control.errors || !control.touched) {
+      return [];
+    }
+
+    const field = this.fieldMap.get(fieldId);
+    if (!field) {
+      return [];
+    }
+
+    return this.dynamicFormService.getErrorMessages(field, control.errors).map(e => e.message);
+  }
+
+  reset(): void {
+    this.form.reset();
+    this.formState = {
+      values: this.form.value,
+      errors: [],
+      touched: {},
+      isSubmitting: false,
+      isValid: this.form.valid
+    };
+    this.emitFormState();
+  }
+
+  patchValues(values: DynamicFormValue): void {
+    this.form.patchValue(values);
+    if (this.form.valid) {
+      this.markAllAsTouched();
+    }
+
+  }
+
+  getFormValue(): DynamicFormValue {
+    return this.form.value;
+  }
+
+  get submitLabel(): string {
+    return this.config.submitLabel ?? 'Submit';
+  }
+
+  get cancelLabel(): string {
+    return this.config.cancelLabel ?? 'Cancel';
+  }
+}

package/projects/dynamic-form-lib/src/lib/helpers/component-helper.ts

@@ -0,0 +1,54 @@
+import { ElementRef, Injector, Type } from '@angular/core';
+
+export function getComponentFromElement<T>(
+  el: ElementRef,
+  injector: Injector,
+  componentType: Type<T>
+): T | null {
+  try {
+    // Get the native element
+    const nativeElement = el.nativeElement;
+    
+    // Access Angular's internal context from the element
+    const context = (nativeElement as any).__ngContext__;
+    
+    if (!context) {
+      return null;
+    }
+    
+    // The context is an array or number that references the LView
+    // We need to traverse up to find the component instance
+    let lView: any;
+    if (typeof context === 'number') {
+      // Context is an index into the LView array
+      lView = (nativeElement as any).__ngContext__;
+    } else if (Array.isArray(context)) {
+      lView = context;
+    }
+    
+    // Try to find the parent component by traversing the DOM tree
+    let currentElement = nativeElement.parentElement;
+    while (currentElement) {
+      const elementContext = (currentElement as any).__ngContext__;
+      if (elementContext) {
+        // Check if this element has a component instance
+        const lViewArray = Array.isArray(elementContext) ? elementContext : null;
+        if (lViewArray) {
+          // LView[8] typically contains the component instance
+          for (let i = 8; i < lViewArray.length; i++) {
+            const item = lViewArray[i];
+            if (item && item instanceof componentType) {
+              return item as T;
+            }
+          }
+        }
+      }
+      currentElement = currentElement.parentElement;
+    }
+    
+    return null;
+  } catch (error) {
+    console.error('Error getting component from element:', error);
+    return null;
+  }
+}

package/projects/dynamic-form-lib/src/lib/index.ts

@@ -0,0 +1,10 @@
+// Components
+export * from './dynamic-form.component';
+export * from './dynamic-form-field/dynamic-form-field.component';
+export * from './dynamic-form-demo/dynamic-form-demo.component';
+
+// Services
+export * from './services/dynamic-form.service';
+
+// Re-export models for convenience
+export * from './models/dynamic-form-interfaces';

package/projects/dynamic-form-lib/src/lib/models/dynamic-form-interfaces.ts

@@ -0,0 +1,117 @@
+import { FormGroup } from '@angular/forms';
+export interface DynamicFormField {
+  id: string;
+  label: string;
+  superTitle?: string; //????
+  type: 'text' | 'number' | 'email' | 'select' | 'checkbox' | 'radio' | 'multi-checkbox' | 'multi-radio' | 'date' | 'textarea' | 'hidden' | 'phone';
+  value?: any;
+  decimals?: number;
+  placeholder?: string; //normal placeholder for input
+  popInfo?: string; //drawer or popover info for the field
+  leftPreInput?: string; // left side mid aligned pre phrase for input
+  helperInfo?: string; //????
+  hint?: string; // hint message shown below the field
+  toolTip?: string; // tooltip for the field
+  postWarning?: string; // warning message shown after the field
+  postInfo?: string; // info message shown after the field
+  required?: boolean; // for basic required validation
+  disabled?: boolean; // for disabling the field
+  options?: DynamicFormOption[];
+  validations?: DynamicFormValidation[];
+  order?: number;
+  cssClass?: string;
+  dependsOn?: string;
+  fieldWidth?: string;
+  inputWidth?: string;
+  labelWidth?: string;
+  min?: number;
+  max?: number;
+  conditionalDisplay?: (formValues: any) => boolean;
+  conditionalDisabled?: () => boolean;
+  onChange?: (value: any, form: FormGroup) => void;
+  onClick?: (value: any, form: FormGroup) => void;
+}
+
+export interface DynamicFormFrameGroup {
+  sections: DynamicFormSection[];
+  cssClass?: string;
+  innerFrameCssClass?: string;
+  titleContainerCssClass?: string;
+  titlePrefixCssClass?: string;
+  titleCssClass?: string;
+  id: string;
+  title?: string;
+  titleIcon?: string;
+  titlePrefix?: string;
+  description?: string;
+  order?: number;
+  conditionalDisplay?: (formValues: any) => boolean;
+
+}
+
+export interface DynamicFormSection {
+  id: string;
+  title?: string;
+  description?: string;
+  order?: number;
+  fields: DynamicFormField[];
+  preWarning?: string; // warning message shown before the section
+  postWarning?: string; // warning message shown after the section
+  preInfo?: string; // info message shown before the section
+  postInfo?: string; // info message shown after the section
+  conditionalDisplay?: (formValues: any) => boolean;
+  conditionalDisabled?: () => boolean;
+
+
+}
+export interface DynamicFormOption {
+  label: string;
+  toolTip?: string;
+  helpInfo?: string;
+  errorInfo?: string;
+  displayError?: () => boolean;
+  hint?: string;
+  value: any;
+ }
+
+export interface DynamicFormValidation {
+  type: 'required' | 'minLength' | 'maxLength' | 'pattern' | 'min' | 'max' | 'email' | 'custom' | 'compare';
+  value?: any;
+  message: string;
+  compareToField?: string; // For 'compare' validation
+  validator?: (value: any) => boolean;
+}
+
+export interface DynamicFormConfig {
+  id: string;
+  title?: string;
+  description?: string;
+  frames: DynamicFormFrameGroup[];
+  hideSubmitButton?: () => boolean; // function to determine if the submit button should be hidden
+  hideCancelButton?: () => boolean; // function to determine if the cancel button should be hidden
+  submitLabel?: string; // label for the submit button
+  cancelLabel?: string; // label for the cancel button
+  submitIcon?: string; // icon for the submit button
+  cancelIcon?: string; // icon for the cancel button
+  preWarning?: string; // warning message shown before the form
+  postWarning?: string; // warning message shown after the form
+  preInfo?: string; // info message shown before the form
+  postInfo?: string; // info message shown after the form
+}
+
+export interface DynamicFormValue {
+  [key: string]: any;
+}
+
+export interface DynamicFormError {
+  fieldId: string;
+  message: string;
+}
+
+export interface DynamicFormState {
+  values: DynamicFormValue;
+  errors: DynamicFormError[];
+  touched: { [key: string]: boolean };
+  isSubmitting: boolean;
+  isValid: boolean;
+}