@bcweed/dynamic-form-lib 0.0.3 → 0.0.4

package/fesm2022/bcweed-dynamic-form-lib.mjs

@@ -1,938 +0,0 @@
-import * as i0 from '@angular/core';
-import { Input, Directive, ViewChild, Component, Injectable, inject, EventEmitter, ViewChildren, Output } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
-import { ReactiveFormsModule, Validators, FormBuilder } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i4 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import * as i5 from 'primeng/textarea';
-import { TextareaModule } from 'primeng/textarea';
-import * as i6 from 'primeng/inputnumber';
-import { InputNumberModule } from 'primeng/inputnumber';
-import * as i7 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import * as i8 from 'primeng/radiobutton';
-import { RadioButtonModule, RadioButton } from 'primeng/radiobutton';
-import * as i9 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import * as i10 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
-import * as i11 from 'primeng/message';
-import { MessageModule } from 'primeng/message';
-import * as i12 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i13 from 'primeng/scrollpanel';
-import { ScrollPanelModule } from 'primeng/scrollpanel';
-import * as i14 from 'primeng/popover';
-import { PopoverModule } from 'primeng/popover';
-import * as i15 from 'primeng/drawer';
-import { DrawerModule } from 'primeng/drawer';
-import * as i16 from 'primeng/inputmask';
-import { InputMaskModule } from 'primeng/inputmask';
-import * as i1 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
-import * as i4$1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-
-class DynamicRefDirective {
-    el;
-    refKey;
-    constructor(el) {
-        this.el = el;
-        const t = this.refKey;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicRefDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DynamicRefDirective, isStandalone: true, selector: "[dynamicRef]", inputs: { refKey: "refKey" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicRefDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dynamicRef]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { refKey: [{
-                type: Input
-            }] } });
-
-class DynamicFormFieldComponent {
-    responsive;
-    field;
-    form;
-    errors = [];
-    allowHelpOverlay = false;
-    allowHelpSideBar = false;
-    ref;
-    elementRef = null;
-    radioButton;
-    helpSideBarVisible = false;
-    shouldDisable = true;
-    isExpanded = false;
-    isSmallMedia = false;
-    isMediumMedia = false;
-    constructor(responsive) {
-        this.responsive = responsive;
-    }
-    ngOnInit() {
-        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() {
-        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() {
-        const control = this.form.get(this.field.id);
-        return control ? control.valid : true;
-    }
-    get isTouched() {
-        const control = this.form.get(this.field.id);
-        return control ? control.touched : false;
-    }
-    get isDirty() {
-        const control = this.form.get(this.field.id);
-        return control ? control.dirty : false;
-    }
-    get showError() {
-        return !this.isValid && (this.isTouched || this.isDirty);
-    }
-    get fieldClasses() {
-        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() {
-        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() {
-        return this.field.id;
-    }
-    focusOn() {
-        if (this.elementRef) {
-            this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            this.elementRef.nativeElement.focus();
-        }
-    }
-    onBlur() {
-        const control = this.form.get(this.field.id);
-        if (control) {
-            control.markAsTouched();
-        }
-    }
-    displayRadioError(option) {
-        if (option.displayError && typeof option.displayError === 'function') {
-            return option.displayError();
-        }
-        return false;
-    }
-    onClick(event) {
-        if (typeof this.field.onClick === 'function') {
-            this.field.onClick(event.target.value, this.form);
-        }
-    }
-    labelWidthStyle() {
-        return this.isSmallMedia ? '100%' : this.field.labelWidth ? this.field.labelWidth : '100%';
-    }
-    fieldWidthStyle() {
-        return this.isSmallMedia ? '100%' : this.field.fieldWidth ? this.field.fieldWidth : '100%';
-    }
-    inputWidthStyle() {
-        return this.isSmallMedia ? '100%' : this.field.inputWidth ? this.field.inputWidth : '100%';
-    }
-    trackByFn(index, item) {
-        return item.value;
-    }
-    get getMinValue() {
-        if (this.field.type === 'number' && this.field.min !== undefined) {
-            return this.field.min;
-        }
-        return null;
-    }
-    get getMaxValue() {
-        if (this.field.type === 'number' && this.field.max !== undefined) {
-            return this.field.max;
-        }
-        return null;
-    }
-    get getDecimalPlace() {
-        if (this.field.type === 'number' && this.field.decimals !== undefined) {
-            return this.field.decimals;
-        }
-        return 0;
-    }
-    isFieldDisabled() {
-        const t = (this.field.conditionalDisabled && this.field.conditionalDisabled()) ? '' : null;
-        return t;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormFieldComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DynamicFormFieldComponent, isStandalone: true, selector: "app-dynamic-form-field", inputs: { field: "field", form: "form", errors: "errors", allowHelpOverlay: "allowHelpOverlay", allowHelpSideBar: "allowHelpSideBar" }, viewQueries: [{ propertyName: "ref", first: true, predicate: DynamicRefDirective, descendants: true }, { propertyName: "radioButton", first: true, predicate: RadioButton, descendants: true }], ngImport: i0, template: "\r\n<div [ngClass]=\"fieldClasses\" [formGroup]=\"form\">\r\n  <div [ngStyle]=\"{ width: fieldWidthStyle(), position: 'relative' }\">\r\n    <!-- Label -->\r\n    <div *ngIf=\"field.leftPreInput\" class=\"left-pre-input\">\r\n      <span [innerHTML]=\"field.leftPreInput\" class=\"left-pre-input-text\">\r\n      </span>\r\n\r\n    </div>\r\n    <div #field_container class=\"input-container\">\r\n      <div class=\"label-row\" [ngStyle]=\"{ width: labelWidthStyle() }\">\r\n        <label [attr.for]=\"field.id\" class=\"control-label\">\r\n          {{ field.label }}\r\n          <span *ngIf=\"field.required\" class=\"required-indicator\">*</span>\r\n        </label>\r\n        <div class=\"help-icons\">\r\n          <i (click)=\"helpSideBarVisible = true\" class=\"pi pi-question-circle\" *ngIf=\"allowHelpSideBar && field.popInfo\"></i>\r\n          <i (click)=\"popover.toggle($event)\" class=\"pi pi-question-circle\" *ngIf=\"allowHelpOverlay && field.popInfo\"></i>\r\n        </div>\r\n      </div>\r\n      <!-- Text Input -->\r\n      <input *ngIf=\"field.type === 'text'\"\r\n             [attr.data-dynamic-id]=\"field.id\"\r\n             [refKey]=\"field.id\" dynamicRef\r\n             [id]=\"field.id\"\r\n             [formControlName]=\"controlName\"\r\n             [placeholder]=\"field.placeholder || ''\"\r\n             class=\"form-control\"\r\n             type=\"text\"\r\n             pInputText\r\n             [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n             tooltipPosition=\"bottom\"\r\n             pTooltip=\"{{field.toolTip}}\"\r\n             (blur)=\"onBlur()\"\r\n             (onClick)=\"onClick($event)\" />\r\n      <!-- Email Input -->\r\n      <input *ngIf=\"field.type === 'email'\"\r\n             [attr.data-dynamic-id]=\"field.id\"\r\n             [refKey]=\"field.id\" dynamicRef\r\n             [id]=\"field.id\"\r\n             [formControlName]=\"controlName\"\r\n             [placeholder]=\"field.placeholder || ''\"\r\n             class=\"form-control\"\r\n             type=\"email\"\r\n             pInputText\r\n             pTooltip=\"{{field.toolTip}}\"\r\n             [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n             tooltipPosition=\"bottom\"\r\n             (blur)=\"onBlur()\"\r\n             (onClick)=\"onClick($event)\" />\r\n      <!-- Number Input -->\r\n      <p-inputNumber *ngIf=\"field.type === 'number'\"\r\n                     [attr.data-dynamic-id]=\"field.id\"\r\n                     [refKey]=\"field.id\" dynamicRef\r\n                     [id]=\"field.id\"\r\n                     [inputId]=\"field.id\"\r\n                     [useGrouping]=\"false\"\r\n                     [minFractionDigits]=\"getDecimalPlace\"\r\n                     [min]=\"getMinValue\"\r\n                     [max]=\"getMaxValue\"\r\n                     [formControlName]=\"controlName\"\r\n                     [placeholder]=\"field.placeholder || ''\"\r\n                     styleClass=\"form-control\"\r\n                     pTooltip=\"{{field.toolTip}}\"\r\n                     [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                     tooltipPosition=\"bottom\"\r\n                     (onBlur)=\"onBlur()\"\r\n                     (onClick)=\"onClick($event)\"></p-inputNumber>\r\n\r\n\r\n      <!-- phone -->\r\n\r\n      <p-inputMask *ngIf=\"field.type === 'phone'\"\r\n                   [attr.data-dynamic-id]=\"field.id\"\r\n                   [refKey]=\"field.id\" dynamicRef\r\n                   [id]=\"field.id\"\r\n                   [formControlName]=\"controlName\"\r\n                   [placeholder]=\"field.placeholder || ''\"\r\n                   mask=\"(999) 999-9999\"\r\n                   unmask=\"true\"\r\n                   styleClass=\"form-control-phone\"\r\n                   [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                   tooltipPosition=\"bottom\"\r\n                   pTooltip=\"{{field.toolTip}}\"\r\n                   (blur)=\"onBlur()\"\r\n                   (onClick)=\"onClick($event)\"></p-inputMask>\r\n      <!-- Textarea -->\r\n      <textarea *ngIf=\"field.type === 'textarea'\"\r\n                [attr.data-dynamic-id]=\"field.id\"\r\n                [refKey]=\"field.id\" dynamicRef\r\n                [id]=\"field.id\"\r\n                [formControlName]=\"controlName\"\r\n                [placeholder]=\"field.placeholder || ''\"\r\n                [rows]=\"5\"\r\n                class=\"form-control\"\r\n                pInputTextarea\r\n                [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                tooltipPosition=\"bottom\"\r\n                pTooltip=\"{{field.toolTip}}\"\r\n                (blur)=\"onBlur()\"\r\n                (onClick)=\"onClick($event)\"></textarea>\r\n\r\n      <!-- Date Picker -->\r\n      <p-datepicker *ngIf=\"field.type === 'date'\"\r\n                    [attr.data-dynamic-id]=\"field.id\"\r\n                    [refKey]=\"field.id\" dynamicRef\r\n                    [inputId]=\"field.id\"\r\n                    [id]=\"field.id\"\r\n                    [formControlName]=\"controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    styleClass=\"form-control-datepicker\"\r\n                    dateFormat=\"DD MM yy\"\r\n                    [showIcon]=\"true\"\r\n                    [style]=\"{ width: inputWidthStyle() }\"\r\n                    [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                    tooltipPosition=\"bottom\"\r\n                    pTooltip=\"{{field.toolTip}}\"\r\n                    (onBlur)=\"onBlur()\"\r\n                    (onClick)=\"onClick($event)\"></p-datepicker>\r\n\r\n      <!-- Select Dropdown -->\r\n      <p-select *ngIf=\"field.type === 'select'\"\r\n                [attr.data-dynamic-id]=\"field.id\"\r\n                [refKey]=\"field.id\" dynamicRef\r\n                [inputId]=\"field.id\"\r\n                [formControlName]=\"controlName\"\r\n                [id]=\"field.id\"\r\n                appendTo=\"body\"\r\n                [options]=\"field.options || []\"\r\n                [placeholder]=\"field.placeholder || 'Select an option'\"\r\n                optionLabel=\"label\"\r\n                optionValue=\"value\"\r\n                styleClass=\"form-control-select\"\r\n                [showClear]=\"!field.required\"\r\n                [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                tooltipPosition=\"bottom\"\r\n                pTooltip=\"{{field.toolTip}}\"\r\n                (onBlur)=\"onBlur()\"\r\n                (onClick)=\"onClick($event)\"></p-select>\r\n\r\n      <!-- Checkbox -->\r\n      <div *ngIf=\"field.type === 'checkbox'\" class=\"checkbox-wrapper\">\r\n        <p-checkbox [attr.data-dynamic-id]=\"field.id\"\r\n                    [refKey]=\"field.id\" dynamicRef\r\n                    [id]=\"field.id\"\r\n                    [inputId]=\"field.id\"\r\n                    [formControlName]=\"controlName\"\r\n                    [style]=\"{ width: inputWidthStyle() }\"\r\n                    [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                    [binary]=\"true\"\r\n                    tooltipPosition=\"right\"\r\n                    pTooltip=\"{{field.toolTip}}\"\r\n                    (onBlur)=\"onBlur()\"\r\n                    (onClick)=\"onClick($event)\"></p-checkbox>\r\n      </div>\r\n\r\n      <!-- Radio Buttons -->\r\n      <div *ngIf=\"field.type === 'radio'\" class=\"radio-group\">\r\n        <div *ngFor=\"let option of field.options; trackBy: trackByFn; let first = first\"\r\n             class=\"radio-option\" tooltipPosition=\"right\" pTooltip=\"{{option.toolTip}}\">\r\n\r\n          <p-radioButton *ngIf=\"first\"\r\n                         [attr.data-dynamic-id]=\"field.id\"\r\n                         [inputId]=\"field.id + '_' + option.value\"\r\n                         [id]=\"field.id + '_' + option.value\"\r\n                         [name]=\"field.id\"\r\n                         [value]=\"option.value\"\r\n                         [formControlName]=\"controlName\"\r\n                         (onBlur)=\"onBlur()\"\r\n                         (onClick)=\"onClick($event.originalEvent)\"></p-radioButton>\r\n          <p-radioButton *ngIf=\"!first\"\r\n                         [inputId]=\"field.id + '_' + option.value\"\r\n                         [id]=\"field.id + '_' + option.value\"\r\n                         [name]=\"field.id\"\r\n                         [value]=\"option.value\"\r\n                         [formControlName]=\"controlName\"\r\n                         (onBlur)=\"onBlur()\"\r\n                         (onClick)=\"onClick($event.originalEvent)\"></p-radioButton>\r\n          <label [for]=\"field.id + '_' + option.value\" class=\"radio-label\">\r\n            {{ option.label }}\r\n          </label>\r\n          <div *ngIf=\"option.helpInfo\" class=\"radio-message-container\">\r\n            <p-message styleClass=\"light-font\" severity=\"info\">\r\n              <div [innerHTML]=\"option.helpInfo\"></div>\r\n            </p-message>\r\n          </div>\r\n          <div *ngIf=\"option.errorInfo && displayRadioError(option)\" class=\"radio-message-container\">\r\n            <p-message severity=\"error\">\r\n              <div [innerHTML]=\"option.errorInfo\"></div>\r\n            </p-message>\r\n          </div>\r\n          <small class=\"radion-hint\" *ngIf=\"option.hint\" id=\"field.id + '_' + option.value + '-help'\">{{option.hint}}</small>\r\n\r\n\r\n        </div>\r\n      </div>\r\n      <small class=\"field-hint\" *ngIf=\"field.hint\" id=\"field.id + '-help'\">{{field.hint}}</small>\r\n    </div>\r\n    <!-- Error Messages -->\r\n    <div *ngIf=\"showError\" class=\"error-messages\">\r\n      <p-message *ngFor=\"let error of errors\"\r\n                 severity=\"error\"\r\n                 [text]=\"error\"></p-message>\r\n    </div>\r\n\r\n    <div *ngIf=\"field.postInfo\" class=\"message-container\">\r\n      <p-message styleClass=\"light-font\" severity=\"info\">\r\n        <div [innerHTML]=\"field.postInfo\"></div>\r\n      </p-message>\r\n    </div>\r\n    <div *ngIf=\"field.postWarning\" class=\"message-container\">\r\n      <p-message styleClass=\"light-font\" severity=\"warn\">\r\n        <div [innerHTML]=\"field.postWarning\"></div>\r\n      </p-message>\r\n    </div>\r\n\r\n    <!-- Valid Indicator (optional) -->\r\n    <div *ngIf=\"isValid && isTouched && field.required\" [ngClass]=\"successIndicatorClass\">\r\n      <i class=\"pi pi-check-circle\"></i>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<p-popover appendTo=\"body\" styleClass=\"form-pop-info\" #popover>\r\n  <h4>{{field.label}}</h4>\r\n  <div [innerHTML]=\"field.popInfo\"></div>\r\n</p-popover>\r\n@if (allowHelpSideBar && field.popInfo) {\r\n  <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\">\r\n    <p-scrollPanel [ngStyle]=\"{height: '100%'}\">\r\n      <div [innerHTML]=\"field.popInfo\"></div>\r\n    </p-scrollPanel>\r\n  </p-drawer>\r\n}\r\n", styles: [".p-overlay-mask,.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:400}.form-group{margin-bottom:1rem;position:relative;transition:all .3s ease;display:flex;flex-wrap:wrap;gap:.75rem}.form-group .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}.form-group .left-pre-input .left-pre-input-text{text-align:right;width:100%;margin-bottom:10px;font-weight:600}.form-group .input-container{flex-grow:1;flex-shrink:1;min-width:0}.form-group .label-row{display:flex;justify-content:space-between;align-items:start;margin-bottom:.5rem}.form-group .help-icons{display:flex;gap:.5rem;margin-left:.5rem}.form-group .help-icons i{cursor:pointer;color:#6c757d;transition:color .2s ease}.form-group .help-icons i:hover{color:#007bff}.form-group .control-label{display:block;font-weight:500;color:#333}.form-group .control-label .required-indicator{color:#dc3545;margin-left:.25rem}.form-group .form-control{width:100%;transition:border-color .3s ease,box-shadow .3s ease}.form-group .field-hint{display:block;margin-top:.25rem;font-size:.875rem;color:#6c757d}.form-group .checkbox-wrapper{padding:.5rem 0}.form-group .radio-group{display:flex;flex-direction:column;gap:.75rem}.form-group .radio-group .radio-option{display:flex;align-items:center;flex-wrap:wrap}.form-group .radio-group .radio-option .radio-label{margin:0;cursor:pointer;font-weight:400}.form-group .radio-group .radio-option .radion-hint{flex-basis:100%;width:100%;display:block;margin-left:36px;font-size:.875rem;color:#6c757d}.form-group .radio-group .radio-option .radio-message-container{flex-basis:100%;width:100%;margin-top:.25rem;margin-left:36px}.form-group .error-messages{margin-top:.5rem;flex-basis:100%;width:100%;animation:slideDown .3s ease}.form-group .error-messages ::ng-deep .p-message{margin-bottom:.25rem}.form-group .error-messages ::ng-deep .p-message:last-child{margin-bottom:0}.form-group .valid-indicator,.form-group .valid-indicator-select,.form-group .valid-indicator-calendar{position:absolute;color:#28a745;font-size:1.2rem;animation:fadeIn .3s ease}.form-group .valid-indicator i,.form-group .valid-indicator-select i,.form-group .valid-indicator-calendar i{display:block}.form-group .valid-indicator{right:10px;top:38px}.form-group .valid-indicator-select,.form-group .valid-indicator-calendar{right:80px;top:38px}.form-group .p-select,.form-group ::ng-deep .p-datepicker,.form-group .p-inputnumber{padding:0}.form-group .p-datepicker>span>input,.form-group .p-inputnumber{border:none!important}.form-group.field-error .form-control,.form-group.field-error ::ng-deep .p-inputtext,.form-group.field-error ::ng-deep .p-select,.form-group.field-error ::ng-deep .p-datepicker,.form-group.field-error ::ng-deep .p-inputnumber input{border-color:#dc3545!important}.form-group.field-error .form-control:focus,.form-group.field-error ::ng-deep .p-inputtext:focus,.form-group.field-error ::ng-deep .p-select:focus,.form-group.field-error ::ng-deep .p-datepicker:focus,.form-group.field-error ::ng-deep .p-inputnumber input:focus{box-shadow:0 0 0 .2rem #dc354540}.form-group.field-error .p-datepicker>span>input{border:none!important}.form-group.field-error .control-label{color:#dc3545}.form-group.field-valid .form-control,.form-group.field-valid ::ng-deep .p-inputtext,.form-group.field-valid ::ng-deep .p-select,.form-group.field-valid ::ng-deep .p-datepicker,.form-group.field-valid ::ng-deep .p-inputnumber input{border-color:#28a745}.form-group.field-valid .form-control:focus,.form-group.field-valid ::ng-deep .p-inputtext:focus,.form-group.field-valid ::ng-deep .p-select:focus,.form-group.field-valid ::ng-deep .p-datepicker:focus,.form-group.field-valid ::ng-deep .p-inputnumber input:focus{box-shadow:0 0 0 .2rem #28a74540}.form-group.field-valid .p-datepicker>span>input{border:none!important}.form-group.field-disabled{opacity:.6;pointer-events:none}.form-group.field-disabled .control-label{color:#6c757d}.form-group.field-error{padding:12px;border:1px solid #dc3545;background-color:var(--p-red-100);box-shadow:0 0 10px #00000080;border-radius:10px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .p-inputtext,::ng-deep .p-select,::ng-deep .p-datepicker .p-inputtext,::ng-deep .p-inputnumber-input{width:100%}::ng-deep .p-select{display:flex}::ng-deep .p-datepicker{width:100%}::ng-deep .p-datepicker .p-inputtext{width:100%}::ng-deep .p-inputnumber{width:100%}::ng-deep .p-checkbox{margin-right:.5rem}::ng-deep .p-radiobutton{margin-right:.5rem}@media (max-width: 768px){.form-group .radio-group .radio-option{flex-direction:row;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: 
-                //InputTextarea,
-                InputNumberModule }, { kind: "component", type: i6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i8.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i9.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: 
-                //DropdownModule,
-                DatePickerModule }, { kind: "component", type: i10.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: 
-                //CalendarModule,
-                MessageModule }, { kind: "component", type: i11.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "directive", type: DynamicRefDirective, selector: "[dynamicRef]", inputs: ["refKey"] }, { kind: "ngmodule", type: ScrollPanelModule }, { kind: "component", type: i13.ScrollPanel, selector: "p-scroll-panel, p-scrollPanel, p-scrollpanel", inputs: ["styleClass", "step"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i15.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i16.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "readonly", "unmask", "characterPattern", "autofocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ 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
-                    ], template: "\r\n<div [ngClass]=\"fieldClasses\" [formGroup]=\"form\">\r\n  <div [ngStyle]=\"{ width: fieldWidthStyle(), position: 'relative' }\">\r\n    <!-- Label -->\r\n    <div *ngIf=\"field.leftPreInput\" class=\"left-pre-input\">\r\n      <span [innerHTML]=\"field.leftPreInput\" class=\"left-pre-input-text\">\r\n      </span>\r\n\r\n    </div>\r\n    <div #field_container class=\"input-container\">\r\n      <div class=\"label-row\" [ngStyle]=\"{ width: labelWidthStyle() }\">\r\n        <label [attr.for]=\"field.id\" class=\"control-label\">\r\n          {{ field.label }}\r\n          <span *ngIf=\"field.required\" class=\"required-indicator\">*</span>\r\n        </label>\r\n        <div class=\"help-icons\">\r\n          <i (click)=\"helpSideBarVisible = true\" class=\"pi pi-question-circle\" *ngIf=\"allowHelpSideBar && field.popInfo\"></i>\r\n          <i (click)=\"popover.toggle($event)\" class=\"pi pi-question-circle\" *ngIf=\"allowHelpOverlay && field.popInfo\"></i>\r\n        </div>\r\n      </div>\r\n      <!-- Text Input -->\r\n      <input *ngIf=\"field.type === 'text'\"\r\n             [attr.data-dynamic-id]=\"field.id\"\r\n             [refKey]=\"field.id\" dynamicRef\r\n             [id]=\"field.id\"\r\n             [formControlName]=\"controlName\"\r\n             [placeholder]=\"field.placeholder || ''\"\r\n             class=\"form-control\"\r\n             type=\"text\"\r\n             pInputText\r\n             [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n             tooltipPosition=\"bottom\"\r\n             pTooltip=\"{{field.toolTip}}\"\r\n             (blur)=\"onBlur()\"\r\n             (onClick)=\"onClick($event)\" />\r\n      <!-- Email Input -->\r\n      <input *ngIf=\"field.type === 'email'\"\r\n             [attr.data-dynamic-id]=\"field.id\"\r\n             [refKey]=\"field.id\" dynamicRef\r\n             [id]=\"field.id\"\r\n             [formControlName]=\"controlName\"\r\n             [placeholder]=\"field.placeholder || ''\"\r\n             class=\"form-control\"\r\n             type=\"email\"\r\n             pInputText\r\n             pTooltip=\"{{field.toolTip}}\"\r\n             [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n             tooltipPosition=\"bottom\"\r\n             (blur)=\"onBlur()\"\r\n             (onClick)=\"onClick($event)\" />\r\n      <!-- Number Input -->\r\n      <p-inputNumber *ngIf=\"field.type === 'number'\"\r\n                     [attr.data-dynamic-id]=\"field.id\"\r\n                     [refKey]=\"field.id\" dynamicRef\r\n                     [id]=\"field.id\"\r\n                     [inputId]=\"field.id\"\r\n                     [useGrouping]=\"false\"\r\n                     [minFractionDigits]=\"getDecimalPlace\"\r\n                     [min]=\"getMinValue\"\r\n                     [max]=\"getMaxValue\"\r\n                     [formControlName]=\"controlName\"\r\n                     [placeholder]=\"field.placeholder || ''\"\r\n                     styleClass=\"form-control\"\r\n                     pTooltip=\"{{field.toolTip}}\"\r\n                     [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                     tooltipPosition=\"bottom\"\r\n                     (onBlur)=\"onBlur()\"\r\n                     (onClick)=\"onClick($event)\"></p-inputNumber>\r\n\r\n\r\n      <!-- phone -->\r\n\r\n      <p-inputMask *ngIf=\"field.type === 'phone'\"\r\n                   [attr.data-dynamic-id]=\"field.id\"\r\n                   [refKey]=\"field.id\" dynamicRef\r\n                   [id]=\"field.id\"\r\n                   [formControlName]=\"controlName\"\r\n                   [placeholder]=\"field.placeholder || ''\"\r\n                   mask=\"(999) 999-9999\"\r\n                   unmask=\"true\"\r\n                   styleClass=\"form-control-phone\"\r\n                   [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                   tooltipPosition=\"bottom\"\r\n                   pTooltip=\"{{field.toolTip}}\"\r\n                   (blur)=\"onBlur()\"\r\n                   (onClick)=\"onClick($event)\"></p-inputMask>\r\n      <!-- Textarea -->\r\n      <textarea *ngIf=\"field.type === 'textarea'\"\r\n                [attr.data-dynamic-id]=\"field.id\"\r\n                [refKey]=\"field.id\" dynamicRef\r\n                [id]=\"field.id\"\r\n                [formControlName]=\"controlName\"\r\n                [placeholder]=\"field.placeholder || ''\"\r\n                [rows]=\"5\"\r\n                class=\"form-control\"\r\n                pInputTextarea\r\n                [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                tooltipPosition=\"bottom\"\r\n                pTooltip=\"{{field.toolTip}}\"\r\n                (blur)=\"onBlur()\"\r\n                (onClick)=\"onClick($event)\"></textarea>\r\n\r\n      <!-- Date Picker -->\r\n      <p-datepicker *ngIf=\"field.type === 'date'\"\r\n                    [attr.data-dynamic-id]=\"field.id\"\r\n                    [refKey]=\"field.id\" dynamicRef\r\n                    [inputId]=\"field.id\"\r\n                    [id]=\"field.id\"\r\n                    [formControlName]=\"controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    styleClass=\"form-control-datepicker\"\r\n                    dateFormat=\"DD MM yy\"\r\n                    [showIcon]=\"true\"\r\n                    [style]=\"{ width: inputWidthStyle() }\"\r\n                    [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                    tooltipPosition=\"bottom\"\r\n                    pTooltip=\"{{field.toolTip}}\"\r\n                    (onBlur)=\"onBlur()\"\r\n                    (onClick)=\"onClick($event)\"></p-datepicker>\r\n\r\n      <!-- Select Dropdown -->\r\n      <p-select *ngIf=\"field.type === 'select'\"\r\n                [attr.data-dynamic-id]=\"field.id\"\r\n                [refKey]=\"field.id\" dynamicRef\r\n                [inputId]=\"field.id\"\r\n                [formControlName]=\"controlName\"\r\n                [id]=\"field.id\"\r\n                appendTo=\"body\"\r\n                [options]=\"field.options || []\"\r\n                [placeholder]=\"field.placeholder || 'Select an option'\"\r\n                optionLabel=\"label\"\r\n                optionValue=\"value\"\r\n                styleClass=\"form-control-select\"\r\n                [showClear]=\"!field.required\"\r\n                [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                tooltipPosition=\"bottom\"\r\n                pTooltip=\"{{field.toolTip}}\"\r\n                (onBlur)=\"onBlur()\"\r\n                (onClick)=\"onClick($event)\"></p-select>\r\n\r\n      <!-- Checkbox -->\r\n      <div *ngIf=\"field.type === 'checkbox'\" class=\"checkbox-wrapper\">\r\n        <p-checkbox [attr.data-dynamic-id]=\"field.id\"\r\n                    [refKey]=\"field.id\" dynamicRef\r\n                    [id]=\"field.id\"\r\n                    [inputId]=\"field.id\"\r\n                    [formControlName]=\"controlName\"\r\n                    [style]=\"{ width: inputWidthStyle() }\"\r\n                    [ngStyle]=\"{ width: inputWidthStyle() }\"\r\n                    [binary]=\"true\"\r\n                    tooltipPosition=\"right\"\r\n                    pTooltip=\"{{field.toolTip}}\"\r\n                    (onBlur)=\"onBlur()\"\r\n                    (onClick)=\"onClick($event)\"></p-checkbox>\r\n      </div>\r\n\r\n      <!-- Radio Buttons -->\r\n      <div *ngIf=\"field.type === 'radio'\" class=\"radio-group\">\r\n        <div *ngFor=\"let option of field.options; trackBy: trackByFn; let first = first\"\r\n             class=\"radio-option\" tooltipPosition=\"right\" pTooltip=\"{{option.toolTip}}\">\r\n\r\n          <p-radioButton *ngIf=\"first\"\r\n                         [attr.data-dynamic-id]=\"field.id\"\r\n                         [inputId]=\"field.id + '_' + option.value\"\r\n                         [id]=\"field.id + '_' + option.value\"\r\n                         [name]=\"field.id\"\r\n                         [value]=\"option.value\"\r\n                         [formControlName]=\"controlName\"\r\n                         (onBlur)=\"onBlur()\"\r\n                         (onClick)=\"onClick($event.originalEvent)\"></p-radioButton>\r\n          <p-radioButton *ngIf=\"!first\"\r\n                         [inputId]=\"field.id + '_' + option.value\"\r\n                         [id]=\"field.id + '_' + option.value\"\r\n                         [name]=\"field.id\"\r\n                         [value]=\"option.value\"\r\n                         [formControlName]=\"controlName\"\r\n                         (onBlur)=\"onBlur()\"\r\n                         (onClick)=\"onClick($event.originalEvent)\"></p-radioButton>\r\n          <label [for]=\"field.id + '_' + option.value\" class=\"radio-label\">\r\n            {{ option.label }}\r\n          </label>\r\n          <div *ngIf=\"option.helpInfo\" class=\"radio-message-container\">\r\n            <p-message styleClass=\"light-font\" severity=\"info\">\r\n              <div [innerHTML]=\"option.helpInfo\"></div>\r\n            </p-message>\r\n          </div>\r\n          <div *ngIf=\"option.errorInfo && displayRadioError(option)\" class=\"radio-message-container\">\r\n            <p-message severity=\"error\">\r\n              <div [innerHTML]=\"option.errorInfo\"></div>\r\n            </p-message>\r\n          </div>\r\n          <small class=\"radion-hint\" *ngIf=\"option.hint\" id=\"field.id + '_' + option.value + '-help'\">{{option.hint}}</small>\r\n\r\n\r\n        </div>\r\n      </div>\r\n      <small class=\"field-hint\" *ngIf=\"field.hint\" id=\"field.id + '-help'\">{{field.hint}}</small>\r\n    </div>\r\n    <!-- Error Messages -->\r\n    <div *ngIf=\"showError\" class=\"error-messages\">\r\n      <p-message *ngFor=\"let error of errors\"\r\n                 severity=\"error\"\r\n                 [text]=\"error\"></p-message>\r\n    </div>\r\n\r\n    <div *ngIf=\"field.postInfo\" class=\"message-container\">\r\n      <p-message styleClass=\"light-font\" severity=\"info\">\r\n        <div [innerHTML]=\"field.postInfo\"></div>\r\n      </p-message>\r\n    </div>\r\n    <div *ngIf=\"field.postWarning\" class=\"message-container\">\r\n      <p-message styleClass=\"light-font\" severity=\"warn\">\r\n        <div [innerHTML]=\"field.postWarning\"></div>\r\n      </p-message>\r\n    </div>\r\n\r\n    <!-- Valid Indicator (optional) -->\r\n    <div *ngIf=\"isValid && isTouched && field.required\" [ngClass]=\"successIndicatorClass\">\r\n      <i class=\"pi pi-check-circle\"></i>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<p-popover appendTo=\"body\" styleClass=\"form-pop-info\" #popover>\r\n  <h4>{{field.label}}</h4>\r\n  <div [innerHTML]=\"field.popInfo\"></div>\r\n</p-popover>\r\n@if (allowHelpSideBar && field.popInfo) {\r\n  <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\">\r\n    <p-scrollPanel [ngStyle]=\"{height: '100%'}\">\r\n      <div [innerHTML]=\"field.popInfo\"></div>\r\n    </p-scrollPanel>\r\n  </p-drawer>\r\n}\r\n", styles: [".p-overlay-mask,.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:400}.form-group{margin-bottom:1rem;position:relative;transition:all .3s ease;display:flex;flex-wrap:wrap;gap:.75rem}.form-group .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}.form-group .left-pre-input .left-pre-input-text{text-align:right;width:100%;margin-bottom:10px;font-weight:600}.form-group .input-container{flex-grow:1;flex-shrink:1;min-width:0}.form-group .label-row{display:flex;justify-content:space-between;align-items:start;margin-bottom:.5rem}.form-group .help-icons{display:flex;gap:.5rem;margin-left:.5rem}.form-group .help-icons i{cursor:pointer;color:#6c757d;transition:color .2s ease}.form-group .help-icons i:hover{color:#007bff}.form-group .control-label{display:block;font-weight:500;color:#333}.form-group .control-label .required-indicator{color:#dc3545;margin-left:.25rem}.form-group .form-control{width:100%;transition:border-color .3s ease,box-shadow .3s ease}.form-group .field-hint{display:block;margin-top:.25rem;font-size:.875rem;color:#6c757d}.form-group .checkbox-wrapper{padding:.5rem 0}.form-group .radio-group{display:flex;flex-direction:column;gap:.75rem}.form-group .radio-group .radio-option{display:flex;align-items:center;flex-wrap:wrap}.form-group .radio-group .radio-option .radio-label{margin:0;cursor:pointer;font-weight:400}.form-group .radio-group .radio-option .radion-hint{flex-basis:100%;width:100%;display:block;margin-left:36px;font-size:.875rem;color:#6c757d}.form-group .radio-group .radio-option .radio-message-container{flex-basis:100%;width:100%;margin-top:.25rem;margin-left:36px}.form-group .error-messages{margin-top:.5rem;flex-basis:100%;width:100%;animation:slideDown .3s ease}.form-group .error-messages ::ng-deep .p-message{margin-bottom:.25rem}.form-group .error-messages ::ng-deep .p-message:last-child{margin-bottom:0}.form-group .valid-indicator,.form-group .valid-indicator-select,.form-group .valid-indicator-calendar{position:absolute;color:#28a745;font-size:1.2rem;animation:fadeIn .3s ease}.form-group .valid-indicator i,.form-group .valid-indicator-select i,.form-group .valid-indicator-calendar i{display:block}.form-group .valid-indicator{right:10px;top:38px}.form-group .valid-indicator-select,.form-group .valid-indicator-calendar{right:80px;top:38px}.form-group .p-select,.form-group ::ng-deep .p-datepicker,.form-group .p-inputnumber{padding:0}.form-group .p-datepicker>span>input,.form-group .p-inputnumber{border:none!important}.form-group.field-error .form-control,.form-group.field-error ::ng-deep .p-inputtext,.form-group.field-error ::ng-deep .p-select,.form-group.field-error ::ng-deep .p-datepicker,.form-group.field-error ::ng-deep .p-inputnumber input{border-color:#dc3545!important}.form-group.field-error .form-control:focus,.form-group.field-error ::ng-deep .p-inputtext:focus,.form-group.field-error ::ng-deep .p-select:focus,.form-group.field-error ::ng-deep .p-datepicker:focus,.form-group.field-error ::ng-deep .p-inputnumber input:focus{box-shadow:0 0 0 .2rem #dc354540}.form-group.field-error .p-datepicker>span>input{border:none!important}.form-group.field-error .control-label{color:#dc3545}.form-group.field-valid .form-control,.form-group.field-valid ::ng-deep .p-inputtext,.form-group.field-valid ::ng-deep .p-select,.form-group.field-valid ::ng-deep .p-datepicker,.form-group.field-valid ::ng-deep .p-inputnumber input{border-color:#28a745}.form-group.field-valid .form-control:focus,.form-group.field-valid ::ng-deep .p-inputtext:focus,.form-group.field-valid ::ng-deep .p-select:focus,.form-group.field-valid ::ng-deep .p-datepicker:focus,.form-group.field-valid ::ng-deep .p-inputnumber input:focus{box-shadow:0 0 0 .2rem #28a74540}.form-group.field-valid .p-datepicker>span>input{border:none!important}.form-group.field-disabled{opacity:.6;pointer-events:none}.form-group.field-disabled .control-label{color:#6c757d}.form-group.field-error{padding:12px;border:1px solid #dc3545;background-color:var(--p-red-100);box-shadow:0 0 10px #00000080;border-radius:10px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .p-inputtext,::ng-deep .p-select,::ng-deep .p-datepicker .p-inputtext,::ng-deep .p-inputnumber-input{width:100%}::ng-deep .p-select{display:flex}::ng-deep .p-datepicker{width:100%}::ng-deep .p-datepicker .p-inputtext{width:100%}::ng-deep .p-inputnumber{width:100%}::ng-deep .p-checkbox{margin-right:.5rem}::ng-deep .p-radiobutton{margin-right:.5rem}@media (max-width: 768px){.form-group .radio-group .radio-option{flex-direction:row;align-items:flex-start}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.BreakpointObserver }], propDecorators: { field: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], allowHelpOverlay: [{
-                type: Input
-            }], allowHelpSideBar: [{
-                type: Input
-            }], ref: [{
-                type: ViewChild,
-                args: [DynamicRefDirective]
-            }], radioButton: [{
-                type: ViewChild,
-                args: [RadioButton]
-            }] } });
-
-function compareValidator(matchingControlName) {
-    return (control) => {
-        const group = control.parent;
-        if (!group) {
-            return null;
-        }
-        const matchingControl = group.get(matchingControlName);
-        if (!matchingControl) {
-            return null;
-        }
-        // Return error on the current control instead of modifying the other
-        if (control.value !== matchingControl.value) {
-            return { compare: true };
-        }
-        return null;
-    };
-}
-
-class DynamicFormService {
-    constructor() { }
-    /**
-      * Gets the validators for a specific field based on its validations
-      */
-    getValidators(fieldOrValidations) {
-        let validations = [];
-        if (!Array.isArray(fieldOrValidations)) {
-            if (!fieldOrValidations.validations || fieldOrValidations.validations.length === 0) {
-                return [];
-            }
-            validations = fieldOrValidations.validations;
-        }
-        else {
-            validations = fieldOrValidations;
-        }
-        const validators = [];
-        validations.forEach(validation => {
-            const validator = this.createValidator(validation);
-            if (validator) {
-                validators.push(validator);
-            }
-        });
-        return validators;
-    }
-    /**
-     * Creates a validator function based on validation type
-     */
-    createValidator(validation) {
-        switch (validation.type) {
-            case 'required':
-                return Validators.required;
-            case 'minLength':
-                return validation.value ? Validators.minLength(validation.value) : null;
-            case 'maxLength':
-                return validation.value ? Validators.maxLength(validation.value) : null;
-            case 'min':
-                return validation.value !== undefined ? Validators.min(validation.value) : null;
-            case 'max':
-                return validation.value !== undefined ? Validators.max(validation.value) : null;
-            case 'compare':
-                return validation.compareToField !== undefined ? compareValidator(validation.compareToField) : null;
-            case 'email':
-                return Validators.email;
-            case 'pattern':
-                return validation.value ? Validators.pattern(validation.value) : null;
-            case 'custom':
-                return validation.validator ? this.customValidator(validation) : null;
-            default:
-                return null;
-        }
-    }
-    /**
-     * Creates a custom validator wrapper
-     */
-    customValidator(validation) {
-        return (control) => {
-            if (!validation.validator) {
-                return null;
-            }
-            const isValid = validation.validator(control.value);
-            return isValid ? null : { custom: { message: validation.message } };
-        };
-    }
-    /**
-     * Gets error messages for a field based on its validation errors
-     */
-    getErrorMessages(field, errors) {
-        if (!errors || !field.validations) {
-            return [];
-        }
-        const errorMessages = [];
-        field.validations.forEach(validation => {
-            const errorKey = this.getErrorKey(validation.type);
-            if (errors[errorKey]) {
-                errorMessages.push({
-                    fieldId: field.id,
-                    message: validation.message
-                });
-            }
-        });
-        return errorMessages;
-    }
-    /**
-     * Maps validation type to Angular error key
-     */
-    getErrorKey(validationType) {
-        switch (validationType) {
-            case 'required':
-                return 'required';
-            case 'minLength':
-                return 'minlength';
-            case 'maxLength':
-                return 'maxlength';
-            case 'min':
-                return 'min';
-            case 'max':
-                return 'max';
-            case 'email':
-                return 'email';
-            case 'pattern':
-                return 'pattern';
-            case 'custom':
-                return 'custom';
-            case 'compare':
-                return 'compare';
-            default:
-                return validationType;
-        }
-    }
-    /**
-     * Validates a complete form configuration
-     */
-    validateFormConfig(config) {
-        if (!config || !config.id || !config.frames) {
-            console.error('Invalid form config: missing required properties');
-            return false;
-        }
-        if (!Array.isArray(config.frames) || config.frames.length === 0) {
-            console.error('Invalid form config: frames must be a non-empty array');
-            return false;
-        }
-        for (const frame of config.frames) {
-            if (!Array.isArray(frame.sections) || frame.sections.length === 0) {
-                console.error('Invalid form config: sections must be a non-empty array');
-                return false;
-            }
-        }
-        if (!Array.isArray(config.frames[0].sections) || config.frames[0].sections.length === 0 || !Array.isArray(config.frames[0].sections[0].fields) || config.frames[0].sections[0].fields.length === 0) {
-            console.error('Invalid form config: fields must be a non-empty array');
-            return false;
-        }
-        for (const frame of config.frames) {
-            for (const section of frame.sections) {
-                for (const field of section.fields) {
-                    if (!field.id || !field.label || !field.type) {
-                        console.error('Invalid field config: missing required properties', field);
-                        return false;
-                    }
-                    const validTypes = ['text', 'number', 'email', 'select', 'checkbox', 'radio', 'date', 'textarea'];
-                    if (!validTypes.includes(field.type)) {
-                        console.error(`Invalid field type: ${field.type}`, field);
-                        return false;
-                    }
-                    if ((field.type === 'select' || field.type === 'radio') && (!field.options || field.options.length === 0)) {
-                        console.error(`Field type ${field.type} requires options`, field);
-                        return false;
-                    }
-                }
-            }
-        }
-        return true;
-    }
-    /**
-     * Creates a sample form configuration for testing
-     */
-    createSampleConfig() {
-        return {
-            id: 'sample-form',
-            title: 'Sample Dynamic Form',
-            description: 'This is a sample form configuration demonstrating all field types.',
-            sections: [
-                {
-                    id: 'sample-form',
-                    title: 'Sample Dynamic Form',
-                    description: 'This is a sample form configuration demonstrating all field types.',
-                    fields: [
-                        {
-                            id: 'firstName',
-                            label: 'First Name',
-                            type: 'text',
-                            placeholder: 'Enter your first name',
-                            required: true,
-                            order: 1,
-                            validations: [
-                                {
-                                    type: 'required',
-                                    message: 'First name is required'
-                                },
-                                {
-                                    type: 'minLength',
-                                    value: 2,
-                                    message: 'First name must be at least 2 characters'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'email',
-                            label: 'Email Address',
-                            type: 'email',
-                            placeholder: 'Enter your email',
-                            required: true,
-                            order: 2,
-                            validations: [
-                                {
-                                    type: 'required',
-                                    message: 'Email is required'
-                                },
-                                {
-                                    type: 'email',
-                                    message: 'Please enter a valid email address'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'age',
-                            label: 'Age',
-                            type: 'number',
-                            placeholder: 'Enter your age',
-                            order: 3,
-                            validations: [
-                                {
-                                    type: 'min',
-                                    value: 18,
-                                    message: 'You must be at least 18 years old'
-                                },
-                                {
-                                    type: 'max',
-                                    value: 120,
-                                    message: 'Age must be less than 120'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'country',
-                            label: 'Country',
-                            type: 'select',
-                            placeholder: 'Select your country',
-                            required: true,
-                            order: 4,
-                            options: [
-                                { label: 'United States', value: 'US' },
-                                { label: 'Canada', value: 'CA' },
-                                { label: 'United Kingdom', value: 'UK' },
-                                { label: 'Australia', value: 'AU' }
-                            ],
-                            validations: [
-                                {
-                                    type: 'required',
-                                    message: 'Country is required'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'gender',
-                            label: 'Gender',
-                            type: 'radio',
-                            order: 5,
-                            options: [
-                                { label: 'Male', value: 'male' },
-                                { label: 'Female', value: 'female' },
-                                { label: 'Other', value: 'other' }
-                            ]
-                        },
-                        {
-                            id: 'newsletter',
-                            label: 'Subscribe to newsletter',
-                            type: 'checkbox',
-                            order: 6,
-                            value: false
-                        },
-                        {
-                            id: 'birthDate',
-                            label: 'Birth Date',
-                            type: 'date',
-                            placeholder: 'Select your birth date',
-                            order: 7
-                        },
-                        {
-                            id: 'comments',
-                            label: 'Comments',
-                            type: 'textarea',
-                            placeholder: 'Enter any additional comments',
-                            order: 8,
-                            validations: [
-                                {
-                                    type: 'maxLength',
-                                    value: 500,
-                                    message: 'Comments must be less than 500 characters'
-                                }
-                            ]
-                        }
-                    ],
-                }
-            ],
-            submitLabel: 'Submit Form',
-            cancelLabel: 'Cancel'
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class DynamicFormComponent {
-    responsive;
-    // Inject dependencies using field initializers (this IS the injection context)
-    fb = inject(FormBuilder);
-    dynamicFormService = inject(DynamicFormService);
-    config;
-    initialValues;
-    allowHelpOverlay = false;
-    allowHelpSideBar = false;
-    formSubmit = new EventEmitter();
-    formCancel = new EventEmitter();
-    formStateChange = new EventEmitter();
-    fieldComponents;
-    componentMap;
-    fieldMap;
-    form;
-    formState;
-    sortedFields = [];
-    sortedSections = [];
-    sortedFrames = [];
-    destroy$ = new Subject();
-    isExpanded = false;
-    isSmallMedia = false;
-    isMediumMedia = false;
-    // Empty constructor - no code needed here
-    constructor(responsive) {
-        this.responsive = responsive;
-    }
-    ngOnInit() {
-        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() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    ngAfterViewInit() {
-        this.componentMap = new Map(this.fieldComponents.map(comp => [comp.field.id, comp]));
-    }
-    initializeForm() {
-        //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 = {};
-        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();
-    }
-    triggerAllClickEvents() {
-        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);
-                    }
-                });
-            });
-        });
-    }
-    getInitialValue(field) {
-        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);
-    }
-    getDefaultValue(type) {
-        switch (type) {
-            case 'checkbox':
-                return null;
-            case 'number':
-                return null;
-            case 'hidden':
-                return 0;
-            default:
-                return '';
-        }
-    }
-    subscribeToFormChanges() {
-        this.form.valueChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(values => {
-            this.updateFormState();
-        });
-        this.form.statusChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.updateFormState();
-        });
-    }
-    updateFormState() {
-        const touched = {};
-        const errors = [];
-        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();
-    }
-    emitFormState() {
-        this.formStateChange.emit({ ...this.formState });
-    }
-    showCancelButton() {
-        if (!this.config.hideCancelButton) {
-            return true;
-        }
-        return !this.config.hideCancelButton();
-    }
-    showSubmitButton() {
-        if (!this.config.hideSubmitButton) {
-            return true;
-        }
-        return !this.config.hideSubmitButton();
-    }
-    isFieldVisible(field) {
-        if (!field.conditionalDisplay) {
-            return true;
-        }
-        return field.conditionalDisplay(this.form.value);
-    }
-    isSectionVisible(section) {
-        if (!section.conditionalDisplay) {
-            return true;
-        }
-        return section.conditionalDisplay(this.form.value);
-    }
-    isFrameVisible(frame) {
-        if (!frame.conditionalDisplay) {
-            return true;
-        }
-        return frame.conditionalDisplay(this.form.value);
-    }
-    onSubmit() {
-        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() {
-        this.formCancel.emit();
-    }
-    markAllAsTouched() {
-        Object.keys(this.form.controls).forEach(key => {
-            const control = this.form.get(key);
-            control?.markAsTouched();
-        });
-    }
-    getFieldErrors(fieldId) {
-        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() {
-        this.form.reset();
-        this.formState = {
-            values: this.form.value,
-            errors: [],
-            touched: {},
-            isSubmitting: false,
-            isValid: this.form.valid
-        };
-        this.emitFormState();
-    }
-    patchValues(values) {
-        this.form.patchValue(values);
-        if (this.form.valid) {
-            this.markAllAsTouched();
-        }
-    }
-    getFormValue() {
-        return this.form.value;
-    }
-    get submitLabel() {
-        return this.config.submitLabel ?? 'Submit';
-    }
-    get cancelLabel() {
-        return this.config.cancelLabel ?? 'Cancel';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { config: "config", initialValues: "initialValues", allowHelpOverlay: "allowHelpOverlay", allowHelpSideBar: "allowHelpSideBar" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formStateChange: "formStateChange" }, viewQueries: [{ propertyName: "fieldComponents", predicate: DynamicFormFieldComponent, descendants: true }], ngImport: i0, template: "@if (config) {\r\n  <div class=\"dynamic-form-container\">\r\n    @if (config.title || config.description) {\r\n      <div class=\"form-title\">\r\n        <div class=\"title-container\">\r\n          @if (config.title) {\r\n            <h4>{{ config.title }}</h4>\r\n          }\r\n          @if (config.description) {\r\n            <p class=\"form-description\">{{ config.description }}</p>\r\n          }\r\n          <hr class=\"title-subline\" />\r\n        </div>\r\n      </div>\r\n    }\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n        <div *ngIf=\"config.preInfo\" class=\"message-container\">\r\n          <p-message styleClass=\"light-font\" severity=\"info\">\r\n            <div [innerHTML]=\"config.preInfo\"></div>\r\n          </p-message>\r\n        </div>\r\n        <div *ngIf=\"config.preWarning\" class=\"message-container\">\r\n          <p-message styleClass=\"light-font\" severity=\"warn\">\r\n            <div [innerHTML]=\"config.preWarning\"></div>\r\n          </p-message>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let frame of sortedFrames\">\r\n          <div [ngClass]=\"frame.cssClass\" *ngIf=\"isFrameVisible(frame)\">\r\n            <div [ngClass]=\"frame.innerFrameCssClass\">\r\n              <div *ngIf=\"frame.title\" [ngClass]=\"frame.titleContainerCssClass\">\r\n                <span *ngIf=\"frame.titlePrefix\" [ngClass]=\"frame.titlePrefixCssClass\">{{frame.titlePrefix}}</span>\r\n                <h3 [ngClass]=\"frame.titleCssClass\">{{frame.title}}</h3>\r\n              </div>\r\n              <div *ngIf=\"frame.description\" class=\"frame-description\">\r\n                <p-message styleClass=\"light-font\" severity=\"info\">\r\n                  <div [innerHTML]=\"frame.description\"></div>\r\n                </p-message>\r\n              </div>\r\n\r\n              <ng-container *ngFor=\"let section of frame.sections\">\r\n                <div class=\"section-wrapper\" *ngIf=\"isSectionVisible(section)\">\r\n                  <div class=\"section-content\">\r\n\r\n                    <h5 *ngIf=\"section.title != null\" class=\"section-title\">{{section.title}}</h5>\r\n                    <div *ngIf=\"section.preInfo\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"info\">\r\n                        <div [innerHTML]=\"section.preInfo\"></div>\r\n                      </p-message>\r\n                    </div>\r\n                    <div *ngIf=\"section.preWarning\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"warn\">\r\n                        <div [innerHTML]=\"section.preWarning\"></div>\r\n                      </p-message>\r\n                    </div>\r\n\r\n                    <div class=\"fields-wrapper\">\r\n                      <div class=\"fields-grid\">\r\n                        <ng-container *ngFor=\"let field of section.fields\">\r\n                          <ng-container *ngIf=\"field.type == 'hidden'\" [formGroup]=\"form\">\r\n                            <input type=\"hidden\" [formControlName]=\"field.id\" />\r\n\r\n                          </ng-container>\r\n                          <ng-container *ngIf=\"field.type != 'hidden'\">\r\n\r\n                            <div class=\"field-container\" [ngClass]=\"field.cssClass\" *ngIf=\"isFieldVisible(field)\">\r\n                              <app-dynamic-form-field [field]=\"field\"\r\n                                                      [form]=\"form\"\r\n                                                      [errors]=\"getFieldErrors(field.id)\"\r\n                                                      [allowHelpOverlay]=\"allowHelpOverlay\"\r\n                                                      [allowHelpSideBar]=\"allowHelpSideBar\">\r\n                              </app-dynamic-form-field>\r\n\r\n                            </div>\r\n                          </ng-container>\r\n\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"section.postInfo\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"info\">\r\n                        <div [innerHTML]=\"section.postInfo\"></div>\r\n                      </p-message>\r\n                    </div>\r\n                    <div *ngIf=\"section.postWarning\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"warn\">\r\n                        <div [innerHTML]=\"section.postWarning\"></div>\r\n                      </p-message>\r\n                    </div>\r\n\r\n\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n          <ng-content></ng-content>\r\n          <div id=\"buttoncont\" class=\"button-container\">\r\n            <div class=\"button-group\">\r\n              @if (showCancelButton()) {\r\n              <button pButton\r\n                      type=\"button\"\r\n                      class=\"btn-cancel\"\r\n                      icon=\"{{config.cancelIcon ? config.cancelIcon : 'pi pi-times'}}\"\r\n                      iconPos=\"left\"\r\n                      [label]=\"cancelLabel\"\r\n                      [disabled]=\"formState.isSubmitting\"\r\n                      (click)=\"onCancel()\">\r\n              </button>\r\n              }\r\n              @if (showSubmitButton()) {\r\n              <button pButton\r\n                      type=\"submit\"\r\n                      class=\"\"\r\n                      icon=\"{{config.submitIcon ? config.submitIcon : 'pi pi-check'}}\"\r\n                      iconPos=\"right\"\r\n                      [label]=\"submitLabel\"\r\n                      [disabled]=\"formState.isSubmitting\"\r\n                      [loading]=\"formState.isSubmitting\">\r\n              </button>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"config.postInfo\" class=\"message-container\">\r\n            <p-message styleClass=\"light-font\" severity=\"info\">{{config.postInfo}}</p-message>\r\n          </div>\r\n          <div *ngIf=\"config.postWarning\" class=\"message-container\">\r\n            <p-message styleClass=\"light-font\" severity=\"warn\">{{config.postWarning}}</p-message>\r\n          </div>\r\n\r\n      </form>\r\n  </div>\r\n}\r\n", styles: [".dynamic-form-container{width:100%}.dynamic-form-container p-message .p-message.light-font .p-message-text{font-weight:400}.dynamic-form-container .form-description{color:#666;margin-bottom:1rem}.dynamic-form-container .form-fields-container{margin-bottom:1rem}.dynamic-form-container .form-fields-container .row{margin-bottom:.5rem}.dynamic-form-container .form-actions{margin-top:2rem;padding-top:1rem;border-top:1px solid #dee2e6}.dynamic-form-container .form-actions button{margin-left:.5rem}.dynamic-form-container .form-actions .btn-cancel{background-color:#6c757d;border-color:#6c757d}.dynamic-form-container .form-actions .btn-cancel:hover{background-color:#5a6268;border-color:#545b62}.dynamic-form-container .section-wrapper{width:100%;display:flex;justify-content:center}.dynamic-form-container .section-content{width:100%;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding-top:16px}.dynamic-form-container .section-title{width:100%;text-align:left;font-size:24px;font-weight:600;margin-top:8px;margin-bottom:16px}.dynamic-form-container .message-container{width:100%;display:block;margin-top:.5rem;margin-bottom:.5rem;text-align:left}.dynamic-form-container .fields-wrapper{width:100%;display:flex;justify-content:center}.dynamic-form-container .fields-grid{width:100%;display:flex;flex-wrap:wrap;gap:1rem;justify-content:left}.dynamic-form-container .field-container,.dynamic-form-container .field-container-2col,.dynamic-form-container .field-container-1col{width:100%;text-align:left}.dynamic-form-container .button-container{width:100%;display:flex;justify-content:flex-end}.dynamic-form-container .button-group{display:flex;gap:.5rem}@media (min-width: 1024px){.dynamic-form-container .field-container,.dynamic-form-container .field-container-2col{width:calc(50% - .5rem)}.dynamic-form-container .field-container-1col{width:100%}}@media (max-width: 768px){.dynamic-form-container .form-actions button{width:100%;margin:.25rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "app-dynamic-form-field", inputs: ["field", "form", "errors", "allowHelpOverlay", "allowHelpSideBar"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i11.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-dynamic-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormFieldComponent, ButtonModule, MessageModule], template: "@if (config) {\r\n  <div class=\"dynamic-form-container\">\r\n    @if (config.title || config.description) {\r\n      <div class=\"form-title\">\r\n        <div class=\"title-container\">\r\n          @if (config.title) {\r\n            <h4>{{ config.title }}</h4>\r\n          }\r\n          @if (config.description) {\r\n            <p class=\"form-description\">{{ config.description }}</p>\r\n          }\r\n          <hr class=\"title-subline\" />\r\n        </div>\r\n      </div>\r\n    }\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n        <div *ngIf=\"config.preInfo\" class=\"message-container\">\r\n          <p-message styleClass=\"light-font\" severity=\"info\">\r\n            <div [innerHTML]=\"config.preInfo\"></div>\r\n          </p-message>\r\n        </div>\r\n        <div *ngIf=\"config.preWarning\" class=\"message-container\">\r\n          <p-message styleClass=\"light-font\" severity=\"warn\">\r\n            <div [innerHTML]=\"config.preWarning\"></div>\r\n          </p-message>\r\n        </div>\r\n\r\n        <ng-container *ngFor=\"let frame of sortedFrames\">\r\n          <div [ngClass]=\"frame.cssClass\" *ngIf=\"isFrameVisible(frame)\">\r\n            <div [ngClass]=\"frame.innerFrameCssClass\">\r\n              <div *ngIf=\"frame.title\" [ngClass]=\"frame.titleContainerCssClass\">\r\n                <span *ngIf=\"frame.titlePrefix\" [ngClass]=\"frame.titlePrefixCssClass\">{{frame.titlePrefix}}</span>\r\n                <h3 [ngClass]=\"frame.titleCssClass\">{{frame.title}}</h3>\r\n              </div>\r\n              <div *ngIf=\"frame.description\" class=\"frame-description\">\r\n                <p-message styleClass=\"light-font\" severity=\"info\">\r\n                  <div [innerHTML]=\"frame.description\"></div>\r\n                </p-message>\r\n              </div>\r\n\r\n              <ng-container *ngFor=\"let section of frame.sections\">\r\n                <div class=\"section-wrapper\" *ngIf=\"isSectionVisible(section)\">\r\n                  <div class=\"section-content\">\r\n\r\n                    <h5 *ngIf=\"section.title != null\" class=\"section-title\">{{section.title}}</h5>\r\n                    <div *ngIf=\"section.preInfo\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"info\">\r\n                        <div [innerHTML]=\"section.preInfo\"></div>\r\n                      </p-message>\r\n                    </div>\r\n                    <div *ngIf=\"section.preWarning\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"warn\">\r\n                        <div [innerHTML]=\"section.preWarning\"></div>\r\n                      </p-message>\r\n                    </div>\r\n\r\n                    <div class=\"fields-wrapper\">\r\n                      <div class=\"fields-grid\">\r\n                        <ng-container *ngFor=\"let field of section.fields\">\r\n                          <ng-container *ngIf=\"field.type == 'hidden'\" [formGroup]=\"form\">\r\n                            <input type=\"hidden\" [formControlName]=\"field.id\" />\r\n\r\n                          </ng-container>\r\n                          <ng-container *ngIf=\"field.type != 'hidden'\">\r\n\r\n                            <div class=\"field-container\" [ngClass]=\"field.cssClass\" *ngIf=\"isFieldVisible(field)\">\r\n                              <app-dynamic-form-field [field]=\"field\"\r\n                                                      [form]=\"form\"\r\n                                                      [errors]=\"getFieldErrors(field.id)\"\r\n                                                      [allowHelpOverlay]=\"allowHelpOverlay\"\r\n                                                      [allowHelpSideBar]=\"allowHelpSideBar\">\r\n                              </app-dynamic-form-field>\r\n\r\n                            </div>\r\n                          </ng-container>\r\n\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"section.postInfo\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"info\">\r\n                        <div [innerHTML]=\"section.postInfo\"></div>\r\n                      </p-message>\r\n                    </div>\r\n                    <div *ngIf=\"section.postWarning\" class=\"message-container\">\r\n                      <p-message styleClass=\"light-font\" severity=\"warn\">\r\n                        <div [innerHTML]=\"section.postWarning\"></div>\r\n                      </p-message>\r\n                    </div>\r\n\r\n\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n          <ng-content></ng-content>\r\n          <div id=\"buttoncont\" class=\"button-container\">\r\n            <div class=\"button-group\">\r\n              @if (showCancelButton()) {\r\n              <button pButton\r\n                      type=\"button\"\r\n                      class=\"btn-cancel\"\r\n                      icon=\"{{config.cancelIcon ? config.cancelIcon : 'pi pi-times'}}\"\r\n                      iconPos=\"left\"\r\n                      [label]=\"cancelLabel\"\r\n                      [disabled]=\"formState.isSubmitting\"\r\n                      (click)=\"onCancel()\">\r\n              </button>\r\n              }\r\n              @if (showSubmitButton()) {\r\n              <button pButton\r\n                      type=\"submit\"\r\n                      class=\"\"\r\n                      icon=\"{{config.submitIcon ? config.submitIcon : 'pi pi-check'}}\"\r\n                      iconPos=\"right\"\r\n                      [label]=\"submitLabel\"\r\n                      [disabled]=\"formState.isSubmitting\"\r\n                      [loading]=\"formState.isSubmitting\">\r\n              </button>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"config.postInfo\" class=\"message-container\">\r\n            <p-message styleClass=\"light-font\" severity=\"info\">{{config.postInfo}}</p-message>\r\n          </div>\r\n          <div *ngIf=\"config.postWarning\" class=\"message-container\">\r\n            <p-message styleClass=\"light-font\" severity=\"warn\">{{config.postWarning}}</p-message>\r\n          </div>\r\n\r\n      </form>\r\n  </div>\r\n}\r\n", styles: [".dynamic-form-container{width:100%}.dynamic-form-container p-message .p-message.light-font .p-message-text{font-weight:400}.dynamic-form-container .form-description{color:#666;margin-bottom:1rem}.dynamic-form-container .form-fields-container{margin-bottom:1rem}.dynamic-form-container .form-fields-container .row{margin-bottom:.5rem}.dynamic-form-container .form-actions{margin-top:2rem;padding-top:1rem;border-top:1px solid #dee2e6}.dynamic-form-container .form-actions button{margin-left:.5rem}.dynamic-form-container .form-actions .btn-cancel{background-color:#6c757d;border-color:#6c757d}.dynamic-form-container .form-actions .btn-cancel:hover{background-color:#5a6268;border-color:#545b62}.dynamic-form-container .section-wrapper{width:100%;display:flex;justify-content:center}.dynamic-form-container .section-content{width:100%;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding-top:16px}.dynamic-form-container .section-title{width:100%;text-align:left;font-size:24px;font-weight:600;margin-top:8px;margin-bottom:16px}.dynamic-form-container .message-container{width:100%;display:block;margin-top:.5rem;margin-bottom:.5rem;text-align:left}.dynamic-form-container .fields-wrapper{width:100%;display:flex;justify-content:center}.dynamic-form-container .fields-grid{width:100%;display:flex;flex-wrap:wrap;gap:1rem;justify-content:left}.dynamic-form-container .field-container,.dynamic-form-container .field-container-2col,.dynamic-form-container .field-container-1col{width:100%;text-align:left}.dynamic-form-container .button-container{width:100%;display:flex;justify-content:flex-end}.dynamic-form-container .button-group{display:flex;gap:.5rem}@media (min-width: 1024px){.dynamic-form-container .field-container,.dynamic-form-container .field-container-2col{width:calc(50% - .5rem)}.dynamic-form-container .field-container-1col{width:100%}}@media (max-width: 768px){.dynamic-form-container .form-actions button{width:100%;margin:.25rem 0}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.BreakpointObserver }], propDecorators: { config: [{
-                type: Input
-            }], initialValues: [{
-                type: Input
-            }], allowHelpOverlay: [{
-                type: Input
-            }], allowHelpSideBar: [{
-                type: Input
-            }], formSubmit: [{
-                type: Output
-            }], formCancel: [{
-                type: Output
-            }], formStateChange: [{
-                type: Output
-            }], fieldComponents: [{
-                type: ViewChildren,
-                args: [DynamicFormFieldComponent]
-            }] } });
-
-function getComponentFromElement(el, injector, componentType) {
-    try {
-        // Get the native element
-        const nativeElement = el.nativeElement;
-        // Access Angular's internal context from the element
-        const context = nativeElement.__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;
-        if (typeof context === 'number') {
-            // Context is an index into the LView array
-            lView = nativeElement.__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.__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;
-                        }
-                    }
-                }
-            }
-            currentElement = currentElement.parentElement;
-        }
-        return null;
-    }
-    catch (error) {
-        console.error('Error getting component from element:', error);
-        return null;
-    }
-}
-
-/*
- * Public API Surface of dynamic-form-lib
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DynamicFormComponent, DynamicFormFieldComponent, DynamicFormService, DynamicRefDirective, getComponentFromElement };
-//# sourceMappingURL=bcweed-dynamic-form-lib.mjs.map