@bcweed/dynamic-form-lib 0.0.3 → 0.0.4

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

@@ -0,0 +1,315 @@
+.p-overlay-mask {
+  z-index: 10000 !important;
+}
+
+.p-drawer .p-drawer.form-pop-info {
+  z-index: 10000 !important;
+ 
+}
+.p-drawer-right, .p-drawer.form-pop-info.p-drawer-right {
+  top: 65px;
+}
+p-message .p-message.light-font .p-message-text{
+    font-weight:normal;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+  position: relative;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+
+  .left-pre-input {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    flex-basis: 40%;
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    .left-pre-input-text {
+      text-align: right;
+      width: 100%;
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+  }
+
+  .input-container {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    margin-bottom: 0.5rem;
+  }
+
+  .help-icons {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: 0.5rem;
+
+    i {
+      cursor: pointer;
+      color: #6c757d;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #007bff;
+      }
+    }
+  }
+
+  .control-label {
+    display: block;
+    /*margin-bottom: 0.5rem;*/
+    font-weight: 500;
+    color: #333;
+
+    .required-indicator {
+      color: #dc3545;
+      margin-left: 0.25rem;
+    }
+  }
+
+  .form-control {
+    width: 100%;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .field-hint {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: #6c757d;
+  }
+  // Checkbox wrapper
+  .checkbox-wrapper {
+    padding: 0.5rem 0;
+  }
+  // Radio group
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    .radio-option {
+      display: flex;
+      align-items: center;
+      /*gap: 0.5rem;*/
+      flex-wrap: wrap;
+
+      .radio-label {
+        margin: 0;
+        cursor: pointer;
+        font-weight: normal;
+      }
+
+      .radion-hint {
+        flex-basis: 100%;
+        width: 100%;
+        display: block;
+        /*margin-top: 0.25rem;*/
+        margin-left: 36px;
+        font-size: 0.875rem;
+        color: #6c757d;
+      }
+
+      .radio-message-container {
+        flex-basis: 100%;
+        width: 100%;
+        margin-top: 0.25rem;
+        margin-left: 36px;
+      }
+    }
+  }
+  // Error messages
+  .error-messages {
+    margin-top: 0.5rem;
+    flex-basis: 100%;
+    width: 100%;
+    animation: slideDown 0.3s ease;
+
+    ::ng-deep .p-message {
+      margin-bottom: 0.25rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  // Valid indicator
+  .valid-indicator, .valid-indicator-select, .valid-indicator-calendar {
+    position: absolute;
+    color: #28a745;
+    font-size: 1.2rem;
+    animation: fadeIn 0.3s ease;
+
+    i {
+      display: block;
+    }
+  }
+
+  .valid-indicator {
+    right: 10px;
+    top: 38px;
+  }
+
+  .valid-indicator-select {
+    right: 80px;
+    top: 38px;
+  }
+
+  .valid-indicator-calendar {
+    right: 80px;
+    top: 38px;
+  }
+  //fix padding
+  .p-select,
+  ::ng-deep .p-datepicker,
+  .p-inputnumber {
+    padding: 0;
+  }
+  //fix number border
+  .p-datepicker > span > input,
+  .p-inputnumber {
+    border: none !important;
+  }
+  // Field states
+  &.field-error {
+    .form-control,
+    ::ng-deep .p-inputtext,
+    ::ng-deep .p-select,
+    ::ng-deep .p-datepicker,
+    ::ng-deep .p-inputnumber input {
+      border-color: #dc3545 !important;
+
+      &:focus {
+        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+      }
+    }
+
+    .p-datepicker > span > input {
+      border: none !important;
+    }
+
+    .control-label {
+      color: #dc3545;
+    }
+  }
+
+  &.field-valid {
+    .form-control,
+    ::ng-deep .p-inputtext,
+    ::ng-deep .p-select,
+    ::ng-deep .p-datepicker,
+    ::ng-deep .p-inputnumber input {
+      border-color: #28a745;
+
+      &:focus {
+        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+      }
+    }
+
+    .p-datepicker > span > input {
+      border: none !important;
+    }
+  }
+
+  &.field-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+
+    .control-label {
+      color: #6c757d;
+    }
+  }
+
+  &.field-required {
+    // Additional styling for required fields if needed
+  }
+}
+
+.form-group.field-error {
+  padding: 12px;
+  border: 1px solid #dc3545;
+  background-color: var(--p-red-100);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+// Animations
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// PrimeNG component overrides for consistent styling
+::ng-deep {
+  .p-inputtext,
+  .p-select,
+  .p-datepicker .p-inputtext,
+  .p-inputnumber-input {
+    width: 100%;
+  }
+
+  .p-select {
+    display: flex;
+  }
+
+  .p-datepicker {
+    width: 100%;
+
+    .p-inputtext {
+      width: 100%;
+    }
+  }
+
+  .p-inputnumber {
+    width: 100%;
+  }
+
+  .p-checkbox {
+    margin-right: 0.5rem;
+  }
+
+  .p-radiobutton {
+    margin-right: 0.5rem;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .form-group {
+    .radio-group {
+      .radio-option {
+        flex-direction: row;
+        align-items: flex-start;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,233 @@
+import { Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, NgForm, ReactiveFormsModule } from '@angular/forms';
+import { DynamicFormField, DynamicFormOption } from '../models/dynamic-form-interfaces';
+import { InputTextModule } from 'primeng/inputtext';
+import { TextareaModule } from 'primeng/textarea';
+//import { InputTextarea } from 'primeng/inputtextarea';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { CheckboxChangeEvent, CheckboxModule } from 'primeng/checkbox';
+import { RadioButtonModule, RadioButtonClickEvent, RadioButton } from 'primeng/radiobutton';
+import { SelectModule } from 'primeng/select';
+//import { DropdownModule } from 'primeng/dropdown';
+import { DatePickerModule } from 'primeng/datepicker';
+//import { CalendarModule } from 'primeng/calendar';
+import { MessageModule } from 'primeng/message';
+import { DynamicRefDirective } from '../directives/dynamic-ref-directive';
+import { TooltipModule } from 'primeng/tooltip';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { PopoverModule } from 'primeng/popover';
+import { DrawerModule } from 'primeng/drawer';
+import { InputMaskModule } from 'primeng/inputmask';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+
+@Component({
+  selector: 'app-dynamic-form-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    InputTextModule,
+    TextareaModule,
+    //InputTextarea,
+    InputNumberModule,
+    CheckboxModule,
+    RadioButtonModule,
+    SelectModule,
+    //DropdownModule,
+    DatePickerModule,
+    //CalendarModule,
+    MessageModule,
+    TooltipModule,
+    DynamicRefDirective,
+    ScrollPanelModule,
+    PopoverModule,
+    DrawerModule,
+    InputMaskModule
+  ],
+  templateUrl: './dynamic-form-field.component.html',
+  styleUrls: ['./dynamic-form-field.component.scss']
+})
+export class DynamicFormFieldComponent implements OnInit {
+  @Input() field!: DynamicFormField;
+  @Input() form!: FormGroup;
+  @Input() errors: string[] = [];
+  @Input() allowHelpOverlay = false;
+  @Input() allowHelpSideBar = false;
+  @ViewChild(DynamicRefDirective) ref!: DynamicRefDirective;
+  elementRef: ElementRef | null = null;
+  @ViewChild(RadioButton) radioButton?: RadioButton;
+  helpSideBarVisible = false;
+  shouldDisable = true;
+  isExpanded = false;
+  isSmallMedia = false;
+  isMediumMedia = false;
+
+  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;
+
+        }
+      });
+
+    if (!this.field || !this.form) {
+      console.error('DynamicFormFieldComponent requires field and form inputs');
+      
+     }
+  }
+  ngAfterViewInit(): void {
+    if (this.radioButton) {
+      this.elementRef = this.radioButton.inputViewChild;
+    }
+    if (this.ref) {
+      this.elementRef = this.ref.el;
+    }
+    if ((this.field.conditionalDisabled && this.field.conditionalDisabled()) || this.field.disabled) {
+      this.form.controls[this.field.id].disable();
+    }
+  }
+  get isValid(): boolean {
+    const control = this.form.get(this.field.id);
+    return control ? control.valid : true;
+  }
+
+  get isTouched(): boolean {
+    const control = this.form.get(this.field.id);
+    return control ? control.touched : false;
+  }
+
+  get isDirty(): boolean {
+    const control = this.form.get(this.field.id);
+    return control ? control.dirty : false;
+  }
+
+  get showError(): boolean {
+    return !this.isValid && (this.isTouched || this.isDirty);
+  }
+
+  get fieldClasses(): string {
+    const classes = ['form-group'];
+    
+    if (this.showError) {
+      if (!this.field.disabled) {
+        classes.push('field-error');
+      }
+    } else if (this.isValid && (this.isTouched || this.isDirty)) {
+      classes.push('field-valid');
+    }
+
+    if (this.field.disabled) {
+      classes.push('field-disabled');
+    }
+
+    if (this.field.required) {
+      classes.push('field-required');
+    }
+
+    return classes.join(' ');
+  }
+
+  get successIndicatorClass():string {
+
+    if (this.field.type == 'select') {
+      return "valid-indicator-select";
+    }
+    else if (this.field.type == 'date') {
+      return "valid-indicator-calendar";
+    }
+    else {
+      return "valid-indicator";
+
+    }
+  }
+  get controlName(): string {
+    return this.field.id;
+  }
+
+  focusOn() {
+    if (this.elementRef) {
+      this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      this.elementRef.nativeElement.focus();
+    }
+  }
+  onBlur(): void {
+    const control = this.form.get(this.field.id);
+    if (control) {
+      control.markAsTouched();
+    }
+  }
+
+  displayRadioError(option: DynamicFormOption) {
+    if (option.displayError && typeof option.displayError === 'function') {
+      return option.displayError();
+    }
+    return false;
+  }
+
+  onClick(event: Event): void {
+
+    if (typeof this.field.onClick === 'function') {
+
+      this.field.onClick((event.target as HTMLInputElement).value, this.form);
+    }
+  }
+  onChange(event: Event): void {
+
+    if (typeof this.field.onChange === 'function') {
+
+      this.field.onChange((event.target as HTMLInputElement).value, this.form);
+    }
+  }
+  onCheckboxChange(event: CheckboxChangeEvent): void {
+
+    if (typeof this.field.onChange === 'function') {
+
+      this.field.onChange((event.checked ? true : false), this.form);
+    }
+  }
+  labelWidthStyle(): string {
+    return this.isSmallMedia ? '100%' : this.field.labelWidth ? this.field.labelWidth : '100%';
+  }
+  fieldWidthStyle(): string {
+    return this.isSmallMedia ? '100%' : this.field.fieldWidth ? this.field.fieldWidth : '100%';
+  }
+  inputWidthStyle(): string {
+    return this.isSmallMedia ? '100%' : this.field.inputWidth ? this.field.inputWidth : '100%';
+  }
+  trackByFn(index: number, item: any): any {
+    return item.value;
+  }
+  get getMinValue(): number | null {
+    if (this.field.type === 'number' && this.field.min !== undefined) {
+      return this.field.min;
+    }
+    return null;
+  }
+
+  get getMaxValue(): number | null {
+    if (this.field.type === 'number' && this.field.max !== undefined) {
+      return this.field.max;
+    }
+    return null;
+  }
+  get getDecimalPlace(): number {
+    if (this.field.type === 'number' && this.field.decimals !== undefined) {
+      return this.field.decimals;
+    }
+    return 0;
+  }
+  isFieldDisabled(): any {
+    const t = (this.field.conditionalDisabled && this.field.conditionalDisabled()) ? '' : null;
+    return t;
+  }
+}

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

@@ -0,0 +1,137 @@
+@if (config) {
+  <div class="dynamic-form-container">
+    @if (config.title || config.description) {
+      <div class="form-title">
+        <div class="title-container">
+          @if (config.title) {
+            <h4>{{ config.title }}</h4>
+          }
+          @if (config.description) {
+            <p class="form-description">{{ config.description }}</p>
+          }
+          <hr class="title-subline" />
+        </div>
+      </div>
+    }
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+        <div *ngIf="config.preInfo" class="message-container">
+          <p-message styleClass="light-font" severity="info">
+            <div [innerHTML]="config.preInfo"></div>
+          </p-message>
+        </div>
+        <div *ngIf="config.preWarning" class="message-container">
+          <p-message styleClass="light-font" severity="warn">
+            <div [innerHTML]="config.preWarning"></div>
+          </p-message>
+        </div>
+
+        <ng-container *ngFor="let frame of sortedFrames">
+          <div [ngClass]="frame.cssClass" *ngIf="isFrameVisible(frame)">
+            <div [ngClass]="frame.innerFrameCssClass">
+              <div *ngIf="frame.title" [ngClass]="frame.titleContainerCssClass">
+                <span *ngIf="frame.titlePrefix" [ngClass]="frame.titlePrefixCssClass">{{frame.titlePrefix}}</span>
+                <h3 [ngClass]="frame.titleCssClass">{{frame.title}}</h3>
+              </div>
+              <div *ngIf="frame.description" class="frame-description">
+                <p-message styleClass="light-font" severity="info">
+                  <div [innerHTML]="frame.description"></div>
+                </p-message>
+              </div>
+
+              <ng-container *ngFor="let section of frame.sections">
+                <div class="section-wrapper" *ngIf="isSectionVisible(section)">
+                  <div class="section-content">
+
+                    <h5 *ngIf="section.title != null" class="section-title">{{section.title}}</h5>
+                    <div *ngIf="section.preInfo" class="message-container">
+                      <p-message styleClass="light-font" severity="info">
+                        <div [innerHTML]="section.preInfo"></div>
+                      </p-message>
+                    </div>
+                    <div *ngIf="section.preWarning" class="message-container">
+                      <p-message styleClass="light-font" severity="warn">
+                        <div [innerHTML]="section.preWarning"></div>
+                      </p-message>
+                    </div>
+
+                    <div class="fields-wrapper">
+                      <div class="fields-grid">
+                        <ng-container *ngFor="let field of section.fields">
+                          <ng-container *ngIf="field.type == 'hidden'" [formGroup]="form">
+                            <input type="hidden" [formControlName]="field.id" />
+
+                          </ng-container>
+                          <ng-container *ngIf="field.type != 'hidden'">
+
+                            <div class="field-container" [ngClass]="field.cssClass" *ngIf="isFieldVisible(field)">
+                              <app-dynamic-form-field [field]="field"
+                                                      [form]="form"
+                                                      [errors]="getFieldErrors(field.id)"
+                                                      [allowHelpOverlay]="allowHelpOverlay"
+                                                      [allowHelpSideBar]="allowHelpSideBar">
+                              </app-dynamic-form-field>
+
+                            </div>
+                          </ng-container>
+
+                        </ng-container>
+                      </div>
+                    </div>
+
+                    <div *ngIf="section.postInfo" class="message-container">
+                      <p-message styleClass="light-font" severity="info">
+                        <div [innerHTML]="section.postInfo"></div>
+                      </p-message>
+                    </div>
+                    <div *ngIf="section.postWarning" class="message-container">
+                      <p-message styleClass="light-font" severity="warn">
+                        <div [innerHTML]="section.postWarning"></div>
+                      </p-message>
+                    </div>
+
+
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+            </div>
+        </ng-container>
+
+
+          <ng-content></ng-content>
+          <div id="buttoncont" class="button-container">
+            <div class="button-group">
+              @if (showCancelButton()) {
+              <button pButton
+                      type="button"
+                      class="btn-cancel"
+                      icon="{{config.cancelIcon ? config.cancelIcon : 'pi pi-times'}}"
+                      iconPos="left"
+                      [label]="cancelLabel"
+                      [disabled]="formState.isSubmitting"
+                      (click)="onCancel()">
+              </button>
+              }
+              @if (showSubmitButton()) {
+              <button pButton
+                      type="submit"
+                      class=""
+                      icon="{{config.submitIcon ? config.submitIcon : 'pi pi-check'}}"
+                      iconPos="right"
+                      [label]="submitLabel"
+                      [disabled]="formState.isSubmitting"
+                      [loading]="formState.isSubmitting">
+              </button>
+              }
+            </div>
+          </div>
+          <div *ngIf="config.postInfo" class="message-container">
+            <p-message styleClass="light-font" severity="info">{{config.postInfo}}</p-message>
+          </div>
+          <div *ngIf="config.postWarning" class="message-container">
+            <p-message styleClass="light-font" severity="warn">{{config.postWarning}}</p-message>
+          </div>
+
+      </form>
+  </div>
+}