@ohioepa/oepa-ui-lib 2.0.3 → 2.0.5

package/fesm2022/ohioepa-oepa-ui-lib.mjs

@@ -389,11 +389,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class DatepickerComponent {
     idService;
-    // Exposes the input element's id for parent label association.
-    get inputId() {
-        return this.componentId + '_Input';
+    _componentId;
+    set componentId(value) {
+        this._componentId = value;
     }
-    componentId = 'OepaDatepickerComponent';
     group;
     field;
     bsConfig;
@@ -401,6 +400,20 @@ class DatepickerComponent {
     placement;
     tableIdx;
     small = false;
+    // Exposes the input element's id for parent label association.
+    get componentIdComputed() {
+        // Priority: explicit input → generated → fallback
+        if (this._componentId)
+            return this._componentId;
+        if (this.group && this.field) {
+            const base = this.idService.getComponentId(this.group);
+            return base + (base ? '_' : '') + this.field + (this.tableIdx ?? '');
+        }
+        return 'oepa-datepicker';
+    }
+    get inputId() {
+        return this.componentIdComputed + '_Input';
+    }
     minDate;
     maxDate;
     isDisabled = false;
@@ -408,13 +421,10 @@ class DatepickerComponent {
         switch (this.placement) {
             case 'top':
                 return 'top';
-                break;
             case 'left':
                 return 'left';
-                break;
             case 'right':
                 return 'right';
-                break;
             default:
                 return 'bottom';
         }
@@ -459,13 +469,12 @@ class DatepickerComponent {
             this.bsConfig = {};
         }
         this.bsConfig.showWeekNumbers = false;
-        if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group);
-            this.componentId += (this.componentId.length > 0 ? '_' : '') + (this.field || '') + (this.tableIdx || '');
-        }
-        else {
-            console.log('OOPS No datepickerForm yet');
-        }
+        // if (this.group) {
+        //   this.componentId = this.idService.getComponentId(this.group);
+        //   this.componentId += (this.componentId.length > 0 ? '_' : '') + (this.field || '') + (this.tableIdx || '');
+        // } else {
+        //   console.log('OOPS No datepickerForm yet');
+        // }
     }
     // force value to null in case where user enters non-numeric values
     // in the field. The "normal" behavior of the ngx-bootstrap datepicker
@@ -495,12 +504,14 @@ class DatepickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "oepa-datepicker", inputs: { group: "group", field: "field", bsConfig: "bsConfig", showValidation: "showValidation", placement: "placement", tableIdx: "tableIdx", small: "small" }, exportAs: ["oepa-datepicker"], usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"group\" role=\"group\" aria-label=\"Datepicker Group\">\n  <div>\n    <div class=\"input-group\">\n      <!-- a label (hidden or not) should be provided by the parent component to ensure accessibility -->\n      <input\n        [id]=\"componentId+'_Input'\"\n        class=\"form-control\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        #dp=\"bsDatepicker\"\n        bsDatepicker\n        [formControlName]=\"field\"\n        [bsConfig]=\"bsConfig\"\n        [isDisabled]=\"group.get('field')?.disabled || false\"\n        [placement]=\"getPlacement()  || 'bottom'\"\n        [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n        (bsValueChange)=\"onValueChange($event)\"\n        [attr.aria-describedby]=\"(showValidation && group.get(field)?.invalid) ? (componentId + '_Error') : null\"\n        [attr.aria-invalid]=\"showValidation && !checkValidity() ? 'true' : 'false'\"\n        autocomplete=\"off\"\n      >\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Datepicker controls\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"dp.toggle()\"\n          [id]=\"componentId+'_ToggleBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Open calendar\"\n        >\n          <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"clearDate()\"\n          [id]=\"componentId+'_ClearBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Clear date\"\n        >\n          <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is required\n    </small>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is out of range\n    </small>\n  </div>\n</div>\n", styles: ["::ng-deep .bs-datepicker-head,::ng-deep .bs-datepicker-navigation-view,::ng-deep .bs-datepicker-navigation-view *{text-align:left!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i4.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "oepa-datepicker", inputs: { componentId: "componentId", group: "group", field: "field", bsConfig: "bsConfig", showValidation: "showValidation", placement: "placement", tableIdx: "tableIdx", small: "small" }, exportAs: ["oepa-datepicker"], usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"group\" role=\"group\" aria-label=\"Datepicker Group\">\n  <div>\n    <div class=\"input-group\">\n      <!-- a label (hidden or not) should be provided by the parent component to ensure accessibility -->\n      <input\n        [id]=\"componentIdComputed+'_Input'\"\n        class=\"form-control\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        #dp=\"bsDatepicker\"\n        bsDatepicker\n        [formControlName]=\"field\"\n        [bsConfig]=\"bsConfig\"\n        [isDisabled]=\"group.get(field)?.disabled || false\"\n        [placement]=\"getPlacement()  || 'bottom'\"\n        [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n        (bsValueChange)=\"onValueChange($event)\"\n        [attr.aria-describedby]=\"(showValidation && group.get(field)?.invalid) ? (componentIdComputed + '_Error') : null\"\n        [attr.aria-invalid]=\"showValidation && !checkValidity() ? 'true' : 'false'\"\n        autocomplete=\"off\"\n      >\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Datepicker controls\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"dp.toggle()\"\n          [id]=\"componentIdComputed+'_ToggleBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Open calendar\"\n        >\n          <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"clearDate()\"\n          [id]=\"componentIdComputed+'_ClearBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Clear date\"\n        >\n          <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.hasError('required')\"\n      [id]=\"componentIdComputed+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is required\n    </small>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\"\n      [id]=\"componentIdComputed+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is out of range\n    </small>\n  </div>\n</div>\n", styles: ["::ng-deep .bs-datepicker-head,::ng-deep .bs-datepicker-navigation-view,::ng-deep .bs-datepicker-navigation-view *{text-align:left!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i4.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-datepicker', exportAs: 'oepa-datepicker', template: "<div [formGroup]=\"group\" role=\"group\" aria-label=\"Datepicker Group\">\n  <div>\n    <div class=\"input-group\">\n      <!-- a label (hidden or not) should be provided by the parent component to ensure accessibility -->\n      <input\n        [id]=\"componentId+'_Input'\"\n        class=\"form-control\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        #dp=\"bsDatepicker\"\n        bsDatepicker\n        [formControlName]=\"field\"\n        [bsConfig]=\"bsConfig\"\n        [isDisabled]=\"group.get('field')?.disabled || false\"\n        [placement]=\"getPlacement()  || 'bottom'\"\n        [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n        (bsValueChange)=\"onValueChange($event)\"\n        [attr.aria-describedby]=\"(showValidation && group.get(field)?.invalid) ? (componentId + '_Error') : null\"\n        [attr.aria-invalid]=\"showValidation && !checkValidity() ? 'true' : 'false'\"\n        autocomplete=\"off\"\n      >\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Datepicker controls\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"dp.toggle()\"\n          [id]=\"componentId+'_ToggleBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Open calendar\"\n        >\n          <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"clearDate()\"\n          [id]=\"componentId+'_ClearBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Clear date\"\n        >\n          <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is required\n    </small>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is out of range\n    </small>\n  </div>\n</div>\n", styles: ["::ng-deep .bs-datepicker-head,::ng-deep .bs-datepicker-navigation-view,::ng-deep .bs-datepicker-navigation-view *{text-align:left!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-datepicker', exportAs: 'oepa-datepicker', template: "<div [formGroup]=\"group\" role=\"group\" aria-label=\"Datepicker Group\">\n  <div>\n    <div class=\"input-group\">\n      <!-- a label (hidden or not) should be provided by the parent component to ensure accessibility -->\n      <input\n        [id]=\"componentIdComputed+'_Input'\"\n        class=\"form-control\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        #dp=\"bsDatepicker\"\n        bsDatepicker\n        [formControlName]=\"field\"\n        [bsConfig]=\"bsConfig\"\n        [isDisabled]=\"group.get(field)?.disabled || false\"\n        [placement]=\"getPlacement()  || 'bottom'\"\n        [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n        (bsValueChange)=\"onValueChange($event)\"\n        [attr.aria-describedby]=\"(showValidation && group.get(field)?.invalid) ? (componentIdComputed + '_Error') : null\"\n        [attr.aria-invalid]=\"showValidation && !checkValidity() ? 'true' : 'false'\"\n        autocomplete=\"off\"\n      >\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Datepicker controls\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"dp.toggle()\"\n          [id]=\"componentIdComputed+'_ToggleBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Open calendar\"\n        >\n          <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"clearDate()\"\n          [id]=\"componentIdComputed+'_ClearBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Clear date\"\n        >\n          <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.hasError('required')\"\n      [id]=\"componentIdComputed+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is required\n    </small>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\"\n      [id]=\"componentIdComputed+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is out of range\n    </small>\n  </div>\n</div>\n", styles: ["::ng-deep .bs-datepicker-head,::ng-deep .bs-datepicker-navigation-view,::ng-deep .bs-datepicker-navigation-view *{text-align:left!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { componentId: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -1938,11 +1949,11 @@ class ConfirmationModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i2$1.BsModalRef }, { token: i2$2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationModalComponent, selector: "oepa-confirmation-modal", inputs: { tableHeader: "tableHeader", tableData: "tableData", headerText: "headerText", bodyText: "bodyText", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel", skipBtnLabel: "skipBtnLabel", bodyClassName: "bodyClassName", confirmationCallback: "confirmationCallback", confirmationCallbackComponent: "confirmationCallbackComponent" }, outputs: { onCellClick: "onCellClick", confirmClicked: "confirmClicked", cancelClicked: "cancelClicked", skipClicked: "skipClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\" role=\"banner\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\" role=\"dialog\" aria-labelledby=\"confirmationModalTitle\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table id = \"permitDetail\" tableId=\"permitDetail\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onCellSelect($event)\" (cellClicked)=\"onCellClicked($event)\"></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\" role=\"contentinfo\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\" (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\" (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\" (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationModalComponent, selector: "oepa-confirmation-modal", inputs: { tableHeader: "tableHeader", tableData: "tableData", headerText: "headerText", bodyText: "bodyText", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel", skipBtnLabel: "skipBtnLabel", bodyClassName: "bodyClassName", confirmationCallback: "confirmationCallback", confirmationCallbackComponent: "confirmationCallbackComponent" }, outputs: { onCellClick: "onCellClick", confirmClicked: "confirmClicked", cancelClicked: "cancelClicked", skipClicked: "skipClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table\n      id = \"permitDetail\"\n      tableId=\"permitDetail\"\n      [config]=\"tableConfig\"\n      [data]=\"tableData\"\n      [header]=\"tableHeader\"\n      (rowSelected)=\"onCellSelect($event)\"\n      (cellClicked)=\"onCellClicked($event)\"\n    ></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\"\n    (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\"\n    (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\"\n    (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-confirmation-modal', template: "<div *ngIf=\"headerText\" class=\"modal-header\" role=\"banner\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\" role=\"dialog\" aria-labelledby=\"confirmationModalTitle\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table id = \"permitDetail\" tableId=\"permitDetail\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onCellSelect($event)\" (cellClicked)=\"onCellClicked($event)\"></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\" role=\"contentinfo\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\" (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\" (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\" (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n" }]
+            args: [{ selector: 'oepa-confirmation-modal', template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table\n      id = \"permitDetail\"\n      tableId=\"permitDetail\"\n      [config]=\"tableConfig\"\n      [data]=\"tableData\"\n      [header]=\"tableHeader\"\n      (rowSelected)=\"onCellSelect($event)\"\n      (cellClicked)=\"onCellClicked($event)\"\n    ></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\"\n    (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\"\n    (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\"\n    (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2$1.BsModalRef }, { type: i2$2.ToastrService }], propDecorators: { tableHeader: [{
                 type: Input
             }], tableData: [{
@@ -2388,11 +2399,11 @@ class TableHeaderCellComponent {
         this.onFilterChanged.emit(filter);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: { column: "column", tableId: "tableId", allRowsSelected: "allRowsSelected", rowCount: "rowCount", noFiltersSubject: "noFiltersSubject" }, outputs: { onToggleAllRowsSelection: "onToggleAllRowsSelection", onSortChanged: "onSortChanged", onHideColumn: "onHideColumn", onFilterChanged: "onFilterChanged" }, ngImport: i0, template: "<!-- Select all Rows Checkbox -->\n<div class=\"text-center\">\n  <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n  <!-- Header cell text with sort capability (if specified) -->\n  <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"sortChanged($event)\"\n    [id]=\"tableId+'_SortColumnLink_'+column.id\">\n    <span *ngIf=\"column.sort\"><i class=\"pull-left bi\"\n        [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\"></i>\n      <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n    <span *ngIf=\"!column.title || column.title.trim() === ''\" class=\"visually-hidden\">Column</span>\n    <span *ngIf=\"column.title && column.title.trim() !== ''\">{{column.title}}</span>\n  </span>\n  <!-- button to allow column to be hidden (if specified) -->\n  <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide\"\n    (click)=\"hideColumn(column)\" [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n  </button>\n\n</div>\n<!-- column filter (if specified) -->\n<div *ngIf=\"column.filterable\">\n  <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\"\n    class=\"form-control input-sm\" (tableChanged)=\"filterChanged($event)\" [id]=\"tableId+'_FilterColumn_'+column.id\"\n    [attr.aria-label]=\"'Filter for ' + column.title\" />\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: { column: "column", tableId: "tableId", allRowsSelected: "allRowsSelected", rowCount: "rowCount", noFiltersSubject: "noFiltersSubject" }, outputs: { onToggleAllRowsSelection: "onToggleAllRowsSelection", onSortChanged: "onSortChanged", onHideColumn: "onHideColumn", onFilterChanged: "onFilterChanged" }, ngImport: i0, template: "<!-- Select all Rows Checkbox -->\n<div class=\"text-center\">\n  <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n  <!-- Header cell text with sort capability (if specified) -->\n  <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"sortChanged($event)\"\n    [id]=\"tableId+'_SortColumnLink_'+column.id\">\n    <span *ngIf=\"column.sort\"><i class=\"pull-left bi\"\n        [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\"></i>\n      <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n    <span *ngIf=\"!column.title || column.title.trim() === ''\" class=\"sr-only\">Column</span>\n    <span *ngIf=\"column.title && column.title.trim() !== ''\">{{column.title}}</span>\n  </span>\n  <!-- button to allow column to be hidden (if specified) -->\n  <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide\"\n    (click)=\"hideColumn(column)\" [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n  </button>\n\n</div>\n<!-- column filter (if specified) -->\n<div *ngIf=\"column.filterable\">\n  <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\"\n    class=\"form-control input-sm\" (tableChanged)=\"filterChanged($event)\" [id]=\"tableId+'_FilterColumn_'+column.id\"\n    [attr.aria-label]=\"'Filter for ' + column.title\" />\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableHeaderCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-table-header-cell', template: "<!-- Select all Rows Checkbox -->\n<div class=\"text-center\">\n  <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n  <!-- Header cell text with sort capability (if specified) -->\n  <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"sortChanged($event)\"\n    [id]=\"tableId+'_SortColumnLink_'+column.id\">\n    <span *ngIf=\"column.sort\"><i class=\"pull-left bi\"\n        [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\"></i>\n      <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n    <span *ngIf=\"!column.title || column.title.trim() === ''\" class=\"visually-hidden\">Column</span>\n    <span *ngIf=\"column.title && column.title.trim() !== ''\">{{column.title}}</span>\n  </span>\n  <!-- button to allow column to be hidden (if specified) -->\n  <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide\"\n    (click)=\"hideColumn(column)\" [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n  </button>\n\n</div>\n<!-- column filter (if specified) -->\n<div *ngIf=\"column.filterable\">\n  <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\"\n    class=\"form-control input-sm\" (tableChanged)=\"filterChanged($event)\" [id]=\"tableId+'_FilterColumn_'+column.id\"\n    [attr.aria-label]=\"'Filter for ' + column.title\" />\n</div>" }]
+            args: [{ selector: 'oepa-table-header-cell', template: "<!-- Select all Rows Checkbox -->\n<div class=\"text-center\">\n  <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n  <!-- Header cell text with sort capability (if specified) -->\n  <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"sortChanged($event)\"\n    [id]=\"tableId+'_SortColumnLink_'+column.id\">\n    <span *ngIf=\"column.sort\"><i class=\"pull-left bi\"\n        [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\"></i>\n      <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n    <span *ngIf=\"!column.title || column.title.trim() === ''\" class=\"sr-only\">Column</span>\n    <span *ngIf=\"column.title && column.title.trim() !== ''\">{{column.title}}</span>\n  </span>\n  <!-- button to allow column to be hidden (if specified) -->\n  <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide\"\n    (click)=\"hideColumn(column)\" [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n  </button>\n\n</div>\n<!-- column filter (if specified) -->\n<div *ngIf=\"column.filterable\">\n  <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\"\n    class=\"form-control input-sm\" (tableChanged)=\"filterChanged($event)\" [id]=\"tableId+'_FilterColumn_'+column.id\"\n    [attr.aria-label]=\"'Filter for ' + column.title\" />\n</div>" }]
         }], propDecorators: { column: [{
                 type: Input
             }], tableId: [{
@@ -3253,14 +3264,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class DaterangepickerComponent {
     idService;
-    //Exposes the input element's id for parent label association.
-    get inputId() {
-        return this.componentId + '_Input';
+    _componentId;
+    set componentId(value) {
+        this._componentId = value;
     }
-    componentId = 'OepaDaterangepickerComponent';
     minDate;
     maxDate;
     isDisabled = false;
+    // Exposes the input element's id for parent label association.
+    get componentIdComputed() {
+        // Priority: explicit input → generated → fallback
+        if (this._componentId)
+            return this._componentId;
+        if (this.group && this.field) {
+            const base = this.idService.getComponentId(this.group);
+            return base + (base ? '_' : '') + this.field;
+        }
+        return 'oepa-datepicker';
+    }
+    get inputId() {
+        return this.componentIdComputed + '_Input';
+    }
     group;
     field;
     bsConfig;
@@ -3299,17 +3323,19 @@ class DaterangepickerComponent {
         if (this.bsConfig && this.bsConfig.isDisabled) {
             this.isDisabled = this.bsConfig.isDisabled; // defaults to false
         }
-        if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group);
-        }
+        // if (this.group) {
+        //     this.componentId = this.idService.getComponentId(this.group);
+        // }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DaterangepickerComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DaterangepickerComponent, selector: "oepa-daterangepicker", inputs: { group: "group", field: "field", bsConfig: "bsConfig", showValidation: "showValidation" }, exportAs: ["oepa-datepicker"], ngImport: i0, template: "<div [formGroup]=\"group\">\n  <div>\n      <div class=\"input-group\">\n            <input  [id]=\"componentId+'_Input'\"\n              class=\"form-control\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              #drp=\"bsDaterangepicker\"\n              bsDaterangepicker\n              [formControlName]=\"field\"\n              [bsConfig]=\"bsConfig\"\n              [isDisabled]=\"isDisabled\"\n              [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n              role=\"textbox\"\n              >\n          <div *ngIf=\"!isDisabled\" class=\"input-group-btn\">\n            <button class=\"btn btn-primary\"\n                    (click)=\"drp.toggle()\"\n                    [id]=\"componentId+'_ToggleBtn'\"\n                    aria-label=\"Toggle Date Picker\"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n              <span class=\"visually-hidden\">Open calendar picker</span>\n            </button>\n            <button class=\"btn btn-primary\"\n                    (click)=\"clearRange()\"\n                    [id]=\"componentId+'_ClearBtn'\"\n                    aria-label=\"Clear Range\"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n              <span class=\"visually-hidden\">Clear selected date range</span>\n            </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && !checkValidity()\">Date is required</small>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i4.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DaterangepickerComponent, selector: "oepa-daterangepicker", inputs: { componentId: "componentId", group: "group", field: "field", bsConfig: "bsConfig", showValidation: "showValidation" }, exportAs: ["oepa-datepicker"], ngImport: i0, template: "<div [formGroup]=\"group\">\n  <div>\n      <div class=\"input-group\">\n            <input  [id]=\"componentIdComputed+'_Input'\"\n              class=\"form-control\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              #drp=\"bsDaterangepicker\"\n              bsDaterangepicker\n              [formControlName]=\"field\"\n              [bsConfig]=\"bsConfig\"\n              [isDisabled]=\"isDisabled\"\n              [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n              role=\"textbox\"\n              >\n          <div *ngIf=\"!isDisabled\" class=\"input-group-btn\">\n            <button class=\"btn btn-primary\"\n                    (click)=\"drp.toggle()\"\n                    [id]=\"componentIdComputed+'_ToggleBtn'\"\n                    aria-label=\"Toggle Date Picker\"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n            </button>\n            <button class=\"btn btn-primary\"\n                    (click)=\"clearRange()\"\n                    [id]=\"componentIdComputed+'_ClearBtn'\"\n                    aria-label=\"Clear selected date range \"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && !checkValidity()\">Date is required</small>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i4.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DaterangepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-daterangepicker', exportAs: 'oepa-datepicker', template: "<div [formGroup]=\"group\">\n  <div>\n      <div class=\"input-group\">\n            <input  [id]=\"componentId+'_Input'\"\n              class=\"form-control\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              #drp=\"bsDaterangepicker\"\n              bsDaterangepicker\n              [formControlName]=\"field\"\n              [bsConfig]=\"bsConfig\"\n              [isDisabled]=\"isDisabled\"\n              [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n              role=\"textbox\"\n              >\n          <div *ngIf=\"!isDisabled\" class=\"input-group-btn\">\n            <button class=\"btn btn-primary\"\n                    (click)=\"drp.toggle()\"\n                    [id]=\"componentId+'_ToggleBtn'\"\n                    aria-label=\"Toggle Date Picker\"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n              <span class=\"visually-hidden\">Open calendar picker</span>\n            </button>\n            <button class=\"btn btn-primary\"\n                    (click)=\"clearRange()\"\n                    [id]=\"componentId+'_ClearBtn'\"\n                    aria-label=\"Clear Range\"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n              <span class=\"visually-hidden\">Clear selected date range</span>\n            </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && !checkValidity()\">Date is required</small>\n  </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-daterangepicker', exportAs: 'oepa-datepicker', template: "<div [formGroup]=\"group\">\n  <div>\n      <div class=\"input-group\">\n            <input  [id]=\"componentIdComputed+'_Input'\"\n              class=\"form-control\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              #drp=\"bsDaterangepicker\"\n              bsDaterangepicker\n              [formControlName]=\"field\"\n              [bsConfig]=\"bsConfig\"\n              [isDisabled]=\"isDisabled\"\n              [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n              role=\"textbox\"\n              >\n          <div *ngIf=\"!isDisabled\" class=\"input-group-btn\">\n            <button class=\"btn btn-primary\"\n                    (click)=\"drp.toggle()\"\n                    [id]=\"componentIdComputed+'_ToggleBtn'\"\n                    aria-label=\"Toggle Date Picker\"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n            </button>\n            <button class=\"btn btn-primary\"\n                    (click)=\"clearRange()\"\n                    [id]=\"componentIdComputed+'_ClearBtn'\"\n                    aria-label=\"Clear selected date range \"\n                    type=\"button\"\n                    tabindex=\"0\"\n            >\n              <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && !checkValidity()\">Date is required</small>\n  </div>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { componentId: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -4649,11 +4675,11 @@ class OrganizationSearchModalComponent {
         return this.modalFormGroup.controls[name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchModalComponent, selector: "oepa-organization-search-modal", outputs: { onOrganizationSelected: "onOrganizationSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"visually-hidden\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ 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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchModalComponent, selector: "oepa-organization-search-modal", outputs: { onOrganizationSelected: "onOrganizationSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ 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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-organization-search-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"visually-hidden\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'oepa-organization-search-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: i2$1.BsModalService }, { type: OepaFormsService }, { type: EntityService }], propDecorators: { onOrganizationSelected: [{
                 type: Output
             }] } });
@@ -5068,11 +5094,11 @@ class PersonCreateModalComponent {
         return this.modalFormGroup.controls[name].hasError(field);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonCreateModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonCreateModalComponent, selector: "oepa-person-create-modal", outputs: { onPersonCreated: "onPersonCreated" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center visually-hidden\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ 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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonCreateModalComponent, selector: "oepa-person-create-modal", outputs: { onPersonCreated: "onPersonCreated" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center sr-only\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ 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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonCreateModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-person-create-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center visually-hidden\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'oepa-person-create-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center sr-only\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: OepaFormsService }, { type: EntityService }], propDecorators: { onPersonCreated: [{
                 type: Output
             }] } });
@@ -5364,11 +5390,11 @@ class PersonSearchModalComponent {
         return this.modalFormGroup.controls[name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchModalComponent, selector: "oepa-person-search-modal", outputs: { onPersonSelected: "onPersonSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"visually-hidden\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ 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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchModalComponent, selector: "oepa-person-search-modal", outputs: { onPersonSelected: "onPersonSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ 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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-person-search-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"visually-hidden\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'oepa-person-search-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: i2$1.BsModalService }, { type: OepaFormsService }, { type: EntityService }], propDecorators: { onPersonSelected: [{
                 type: Output
             }] } });
@@ -5975,7 +6001,7 @@ class DateInputModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputModalComponent, deps: [{ token: i2$1.BsModalRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputModalComponent, selector: "oepa-date-input-modal", inputs: { title: "title", infoText: "infoText", dateLabel: "dateLabel", submitBtnLabel: "submitBtnLabel", cancelBtnLabel: "cancelBtnLabel", bsConfig: "bsConfig" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n  <h1 class=\"modal-title pull-left\" id=\"dateInputModalTitle\">{{title}}</h1>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-labelledby=\"dateInputModalTitle\">\n  <div class=\"row\">\n    <div *ngIf=\"infoText\" class=\"col-sm-12\">\n      <div class=\"alert alert-info\" role=\"alert\">\n        {{infoText}}\n      </div>\n    </div>\n    <div class=\"col-sm-12\">\n      <div>\n        <label [for]=\"datepicker.inputId\" [id]=\"datepicker.inputId+'_Label'\">{{dateLabel}}</label>\n        <oepa-datepicker\n          #datepicker=\"oepa-datepicker\"\n          [group]=\"dateForm\"\n          field=\"date\"\n          [bsConfig]=\"bsConfig || {}\"\n          [showValidation]=\"true\"\n        ></oepa-datepicker>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n    <div class=\"alert alert-danger\" role=\"alert\">{{errorMessage}}</div>\n  </div>\n</div>\n<div class=\"modal-footer\" role=\"contentinfo\">\n  <button type=\"submit\" class=\"btn btn-primary mr-1\" (click)=\"submit()\" \n          [id]=\"'submitDateBtn'\" [disabled]=\"dateForm.status === 'INVALID'\" [attr.aria-label]=\"submitBtnLabel\">{{submitBtnLabel}}</button>\n  <button [id]=\"'cancelDateInputBtn'\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"], exportAs: ["oepa-datepicker"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputModalComponent, selector: "oepa-date-input-modal", inputs: { title: "title", infoText: "infoText", dateLabel: "dateLabel", submitBtnLabel: "submitBtnLabel", cancelBtnLabel: "cancelBtnLabel", bsConfig: "bsConfig" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n  <h1 class=\"modal-title pull-left\" id=\"dateInputModalTitle\">{{title}}</h1>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-labelledby=\"dateInputModalTitle\">\n  <div class=\"row\">\n    <div *ngIf=\"infoText\" class=\"col-sm-12\">\n      <div class=\"alert alert-info\" role=\"alert\">\n        {{infoText}}\n      </div>\n    </div>\n    <div class=\"col-sm-12\">\n      <div>\n        <label [for]=\"datepicker.inputId\" [id]=\"datepicker.inputId+'_Label'\">{{dateLabel}}</label>\n        <oepa-datepicker\n          #datepicker=\"oepa-datepicker\"\n          [group]=\"dateForm\"\n          field=\"date\"\n          [bsConfig]=\"bsConfig || {}\"\n          [showValidation]=\"true\"\n        ></oepa-datepicker>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n    <div class=\"alert alert-danger\" role=\"alert\">{{errorMessage}}</div>\n  </div>\n</div>\n<div class=\"modal-footer\" role=\"contentinfo\">\n  <button type=\"submit\" class=\"btn btn-primary mr-1\" (click)=\"submit()\" \n          [id]=\"'submitDateBtn'\" [disabled]=\"dateForm.status === 'INVALID'\" [attr.aria-label]=\"submitBtnLabel\">{{submitBtnLabel}}</button>\n  <button [id]=\"'cancelDateInputBtn'\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["componentId", "group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"], exportAs: ["oepa-datepicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputModalComponent, decorators: [{
             type: Component,
@@ -8617,7 +8643,7 @@ class DateInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputComponent, selector: "oepa-date-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", placement: "placement", showValidation: "showValidation", pauseChangeProcessing: "pauseChangeProcessing" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\" role=\"group\" aria-label=\"Date Input Group\">\n    <oepa-datepicker [group]=\"group\" [field]=\"field\" [tableIdx]=\"tableIdx\" \n    [placement]=\"placement\" [showValidation]=\"showValidation\"></oepa-datepicker>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"], exportAs: ["oepa-datepicker"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputComponent, selector: "oepa-date-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", placement: "placement", showValidation: "showValidation", pauseChangeProcessing: "pauseChangeProcessing" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\" role=\"group\" aria-label=\"Date Input Group\">\n    <oepa-datepicker [group]=\"group\" [field]=\"field\" [tableIdx]=\"tableIdx\" \n    [placement]=\"placement\" [showValidation]=\"showValidation\"></oepa-datepicker>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["componentId", "group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"], exportAs: ["oepa-datepicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,