@bcweed/dynamic-form-lib 0.0.4 → 0.0.6

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

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

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

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