@bcweed/dynamic-form-lib 0.0.4 → 0.0.5

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

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

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

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

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

@@ -1,117 +0,0 @@
-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;
-}