@bcweed/dynamic-form-lib 0.0.4 → 0.0.6

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

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

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

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