@bcweed/dynamic-form-lib 0.0.3 → 0.0.4

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

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

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

@@ -0,0 +1,127 @@
+.demo-container {
+  padding: 2rem 0;
+
+  .info-panel,
+  .help-panel {
+    margin-bottom: 1rem;
+    padding: 1.5rem;
+
+    h5, h6 {
+      margin-top: 0;
+      color: #333;
+    }
+
+    hr {
+      margin: 1rem 0;
+    }
+  }
+
+  .info-panel {
+    background-color: #f8f9fa;
+
+    .status-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid #dee2e6;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      label {
+        font-weight: 500;
+        color: #666;
+      }
+
+      .status-success {
+        color: #28a745;
+        font-weight: 600;
+      }
+
+      .status-error {
+        color: #dc3545;
+        font-weight: 600;
+      }
+
+      .status-info {
+        color: #17a2b8;
+        font-weight: 600;
+      }
+    }
+
+    .errors-section {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 2px solid #dee2e6;
+
+      h6 {
+        color: #dc3545;
+        margin-bottom: 0.5rem;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .error-item {
+          padding: 0.25rem 0;
+          font-size: 0.9rem;
+          color: #666;
+
+          strong {
+            color: #dc3545;
+          }
+        }
+      }
+    }
+
+    .submitted-data {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 2px solid #dee2e6;
+
+      h6 {
+        color: #28a745;
+        margin-bottom: 0.5rem;
+      }
+
+      pre {
+        background-color: #fff;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        padding: 1rem;
+        font-size: 0.85rem;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .help-panel {
+    background-color: #e7f3ff;
+    border-left: 4px solid #007bff;
+
+    ul {
+      margin: 0;
+      padding-left: 1.5rem;
+
+      li {
+        margin-bottom: 0.5rem;
+        color: #333;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .demo-container {
+    padding: 1rem 0;
+
+    .col-md-8,
+    .col-md-4 {
+      margin-bottom: 1rem;
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicFormComponent } from '../dynamic-form.component';
+import { DynamicFormConfig, DynamicFormValue, DynamicFormState } from '../models/dynamic-form-interfaces';
+import { DynamicFormService } from '../services/dynamic-form.service';
+
+@Component({
+  selector: 'app-dynamic-form-demo',
+  standalone: true,
+  imports: [CommonModule, DynamicFormComponent],
+  templateUrl: './dynamic-form-demo.component.html',
+  styleUrls: ['./dynamic-form-demo.component.scss']
+})
+export class DynamicFormDemoComponent implements OnInit {
+  formConfig!: DynamicFormConfig;
+  formValues: DynamicFormValue = {};
+  formState: DynamicFormState | null = null;
+  submittedData: any = null;
+
+  constructor(private dynamicFormService: DynamicFormService) {}
+
+  ngOnInit(): void {
+  }
+
+  onFormSubmit(values: DynamicFormValue): void {
+    console.log('Form submitted:', values);
+    this.submittedData = values;
+    alert('Form submitted successfully! Check console for values.');
+  }
+
+  onFormCancel(): void {
+    console.log('Form cancelled');
+    this.submittedData = null;
+    alert('Form cancelled');
+  }
+
+  onFormStateChange(state: DynamicFormState): void {
+    this.formState = state;
+    console.log('Form state changed:', state);
+  }
+
+ 
+  get formIsValid(): boolean {
+    return this.formState?.isValid ?? false;
+  }
+
+  get formErrorCount(): number {
+    return this.formState?.errors.length ?? 0;
+  }
+}

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

@@ -0,0 +1,234 @@
+
+<div [ngClass]="fieldClasses" [formGroup]="form">
+  <div [ngStyle]="{ width: fieldWidthStyle(), position: 'relative' }">
+    <!-- Label -->
+    <div *ngIf="field.leftPreInput" class="left-pre-input">
+      <span [innerHTML]="field.leftPreInput" class="left-pre-input-text">
+      </span>
+
+    </div>
+    <div #field_container class="input-container">
+      <div class="label-row" [ngStyle]="{ width: labelWidthStyle() }">
+        <label [attr.for]="field.id" class="control-label">
+          {{ field.label }}
+          <span *ngIf="field.required" class="required-indicator">*</span>
+        </label>
+        <div class="help-icons">
+          <i (click)="helpSideBarVisible = true" class="pi pi-question-circle" *ngIf="allowHelpSideBar && field.popInfo"></i>
+          <i (click)="popover.toggle($event)" class="pi pi-question-circle" *ngIf="allowHelpOverlay && field.popInfo"></i>
+        </div>
+      </div>
+      <!-- Text Input -->
+      <input *ngIf="field.type === 'text'"
+             [attr.data-dynamic-id]="field.id"
+             [refKey]="field.id" dynamicRef
+             [id]="field.id"
+             [formControlName]="controlName"
+             [placeholder]="field.placeholder || ''"
+             class="form-control"
+             type="text"
+             pInputText
+             [ngStyle]="{ width: inputWidthStyle() }"
+             tooltipPosition="bottom"
+             pTooltip="{{field.toolTip}}"
+             (blur)="onBlur()"
+             (onClick)="onClick($event)" />
+      <!-- Email Input -->
+      <input *ngIf="field.type === 'email'"
+             [attr.data-dynamic-id]="field.id"
+             [refKey]="field.id" dynamicRef
+             [id]="field.id"
+             [formControlName]="controlName"
+             [placeholder]="field.placeholder || ''"
+             class="form-control"
+             type="email"
+             pInputText
+             pTooltip="{{field.toolTip}}"
+             [ngStyle]="{ width: inputWidthStyle() }"
+             tooltipPosition="bottom"
+             (blur)="onBlur()"
+             (onClick)="onClick($event)" />
+      <!-- Number Input -->
+      <p-inputNumber *ngIf="field.type === 'number'"
+                     [attr.data-dynamic-id]="field.id"
+                     [refKey]="field.id" dynamicRef
+                     [id]="field.id"
+                     [inputId]="field.id"
+                     [useGrouping]="false"
+                     [minFractionDigits]="getDecimalPlace"
+                     [min]="getMinValue"
+                     [max]="getMaxValue"
+                     [formControlName]="controlName"
+                     [placeholder]="field.placeholder || ''"
+                     styleClass="form-control"
+                     pTooltip="{{field.toolTip}}"
+                     [ngStyle]="{ width: inputWidthStyle() }"
+                     tooltipPosition="bottom"
+                     (onBlur)="onBlur()"
+                     (onClick)="onClick($event)"></p-inputNumber>
+
+
+      <!-- phone -->
+
+      <p-inputMask *ngIf="field.type === 'phone'"
+                   [attr.data-dynamic-id]="field.id"
+                   [refKey]="field.id" dynamicRef
+                   [id]="field.id"
+                   [formControlName]="controlName"
+                   [placeholder]="field.placeholder || ''"
+                   mask="(999) 999-9999"
+                   unmask="true"
+                   styleClass="form-control-phone"
+                   [ngStyle]="{ width: inputWidthStyle() }"
+                   tooltipPosition="bottom"
+                   pTooltip="{{field.toolTip}}"
+                   (blur)="onBlur()"
+                   (onClick)="onClick($event)"></p-inputMask>
+      <!-- Textarea -->
+      <textarea *ngIf="field.type === 'textarea'"
+                [attr.data-dynamic-id]="field.id"
+                [refKey]="field.id" dynamicRef
+                [id]="field.id"
+                [formControlName]="controlName"
+                [placeholder]="field.placeholder || ''"
+                [rows]="5"
+                class="form-control"
+                pInputTextarea
+                [ngStyle]="{ width: inputWidthStyle() }"
+                tooltipPosition="bottom"
+                pTooltip="{{field.toolTip}}"
+                (blur)="onBlur()"
+                (onClick)="onClick($event)"></textarea>
+
+      <!-- Date Picker -->
+      <p-datepicker *ngIf="field.type === 'date'"
+                    [attr.data-dynamic-id]="field.id"
+                    [refKey]="field.id" dynamicRef
+                    [inputId]="field.id"
+                    [id]="field.id"
+                    [formControlName]="controlName"
+                    [placeholder]="field.placeholder || ''"
+                    styleClass="form-control-datepicker"
+                    dateFormat="DD MM yy"
+                    [showIcon]="true"
+                    [style]="{ width: inputWidthStyle() }"
+                    [ngStyle]="{ width: inputWidthStyle() }"
+                    tooltipPosition="bottom"
+                    pTooltip="{{field.toolTip}}"
+                    (onBlur)="onBlur()"
+                    (onClick)="onClick($event)"></p-datepicker>
+
+      <!-- Select Dropdown -->
+      <p-select *ngIf="field.type === 'select'"
+                [attr.data-dynamic-id]="field.id"
+                [refKey]="field.id" dynamicRef
+                [inputId]="field.id"
+                [formControlName]="controlName"
+                [id]="field.id"
+                appendTo="body"
+                [options]="field.options || []"
+                [placeholder]="field.placeholder || 'Select an option'"
+                optionLabel="label"
+                optionValue="value"
+                styleClass="form-control-select"
+                [showClear]="!field.required"
+                [ngStyle]="{ width: inputWidthStyle() }"
+                tooltipPosition="bottom"
+                pTooltip="{{field.toolTip}}"
+                (onBlur)="onBlur()"
+                (onClick)="onClick($event)"></p-select>
+
+      <!-- Checkbox -->
+      <div *ngIf="field.type === 'checkbox'" class="checkbox-wrapper">
+        <p-checkbox [attr.data-dynamic-id]="field.id"
+                    [refKey]="field.id" dynamicRef
+                    [id]="field.id"
+                    [inputId]="field.id"
+                    [formControlName]="controlName"
+                    [style]="{ width: inputWidthStyle() }"
+                    [ngStyle]="{ width: inputWidthStyle() }"
+                    [binary]="true"
+                    tooltipPosition="right"
+                    pTooltip="{{field.toolTip}}"
+                    (onBlur)="onBlur()"
+                    (onChange)="onCheckboxChange($event)"></p-checkbox>
+      </div>
+
+      <!-- Radio Buttons -->
+      <div *ngIf="field.type === 'radio'" class="radio-group">
+        <div *ngFor="let option of field.options; trackBy: trackByFn; let first = first"
+             class="radio-option" tooltipPosition="right" pTooltip="{{option.toolTip}}">
+
+          <p-radioButton *ngIf="first"
+                         [attr.data-dynamic-id]="field.id"
+                         [inputId]="field.id + '_' + option.value"
+                         [id]="field.id + '_' + option.value"
+                         [name]="field.id"
+                         [value]="option.value"
+                         [formControlName]="controlName"
+                         (onBlur)="onBlur()"
+                         (onClick)="onClick($event.originalEvent)"></p-radioButton>
+          <p-radioButton *ngIf="!first"
+                         [inputId]="field.id + '_' + option.value"
+                         [id]="field.id + '_' + option.value"
+                         [name]="field.id"
+                         [value]="option.value"
+                         [formControlName]="controlName"
+                         (onBlur)="onBlur()"
+                         (onClick)="onClick($event.originalEvent)"></p-radioButton>
+          <label [for]="field.id + '_' + option.value" class="radio-label">
+            {{ option.label }}
+          </label>
+          <div *ngIf="option.helpInfo" class="radio-message-container">
+            <p-message styleClass="light-font" severity="info">
+              <div [innerHTML]="option.helpInfo"></div>
+            </p-message>
+          </div>
+          <div *ngIf="option.errorInfo && displayRadioError(option)" class="radio-message-container">
+            <p-message severity="error">
+              <div [innerHTML]="option.errorInfo"></div>
+            </p-message>
+          </div>
+          <small class="radion-hint" *ngIf="option.hint" id="field.id + '_' + option.value + '-help'">{{option.hint}}</small>
+
+
+        </div>
+      </div>
+      <small class="field-hint" *ngIf="field.hint" id="field.id + '-help'">{{field.hint}}</small>
+    </div>
+    <!-- Error Messages -->
+    <div *ngIf="showError" class="error-messages">
+      <p-message *ngFor="let error of errors"
+                 severity="error"
+                 [text]="error"></p-message>
+    </div>
+
+    <div *ngIf="field.postInfo" class="message-container">
+      <p-message styleClass="light-font" severity="info">
+        <div [innerHTML]="field.postInfo"></div>
+      </p-message>
+    </div>
+    <div *ngIf="field.postWarning" class="message-container">
+      <p-message styleClass="light-font" severity="warn">
+        <div [innerHTML]="field.postWarning"></div>
+      </p-message>
+    </div>
+
+    <!-- Valid Indicator (optional) -->
+    <div *ngIf="isValid && isTouched && field.required" [ngClass]="successIndicatorClass">
+      <i class="pi pi-check-circle"></i>
+    </div>
+  </div>
+</div>
+
+<p-popover appendTo="body" styleClass="form-pop-info" #popover>
+  <h4>{{field.label}}</h4>
+  <div [innerHTML]="field.popInfo"></div>
+</p-popover>
+@if (allowHelpSideBar && field.popInfo) {
+  <p-drawer header="{{field.label}}" autoZIndex="false" baseZIndex="10000" [ngStyle]="{'z-index': '10000', 'top': '65px'}" position="right" styleClass="form-pop-info" appendTo="body" [(visible)]="helpSideBarVisible">
+    <p-scrollPanel [ngStyle]="{height: '100%'}">
+      <div [innerHTML]="field.popInfo"></div>
+    </p-scrollPanel>
+  </p-drawer>
+}