@bcweed/dynamic-form-lib 0.0.2 → 0.0.3

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

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