@ohioepa/oepa-ui-lib 2.0.0 → 2.0.2

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

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { Observable, Subject, forkJoin, EMPTY, of, throwError } from 'rxjs';
 import { map, mergeMap, catchError, debounceTime, distinctUntilChanged, tap, timeout } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpUrlEncodingCodec } from '@angular/common/http';
 import * as i1$1 from '@ohioepa/oepa-common-lib';
 import { CommonLibModule } from '@ohioepa/oepa-common-lib';
 import * as i1$2 from '@angular/forms';
@@ -14,6 +14,8 @@ import * as i7 from 'ngx-mask';
 import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
 import * as i4 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import * as i6 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
 import * as i4$1 from 'ngx-bootstrap/buttons';
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
 import * as i4$2 from 'ngx-bootstrap/timepicker';
@@ -26,11 +28,11 @@ import * as i7$1 from 'ngx-bootstrap/pagination';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import * as i8 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i9 from 'ngx-bootstrap/tooltip';
+import * as i8$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i6$1 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import * as i6 from 'ngx-bootstrap/accordion';
+import * as i10$1 from 'ngx-bootstrap/accordion';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import * as i11$1 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
@@ -230,11 +232,11 @@ class AddressComponent {
         this.subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressComponent, deps: [{ token: OepaAddressService }, { token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddressComponent, selector: "oepa-address", inputs: { group: "group", showValidation: "showValidation", addressOneLabel: "addressOneLabel", addressTwoLabel: "addressTwoLabel", cityLabel: "cityLabel", stateLabel: "stateLabel", zipCodeLabel: "zipCodeLabel", disableState: "disableState", isSearch: "isSearch", hideLine2: "hideLine2", line1MaxLength: "line1MaxLength", line2MaxLength: "line2MaxLength", cityMaxLength: "cityMaxLength", foreignStateLabel: "foreignStateLabel", foreignZipLabel: "foreignZipLabel", countryLabel: "countryLabel", sameAsGroup: "sameAsGroup", sameAsLabel: "sameAsLabel", sameAsChecked: "sameAsChecked" }, ngImport: i0, template: "<div *ngIf=\"sameAsGroup && sameAsChecked\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <div class=\"form-group\">\n                <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\">\n                    {{addressOneLabel}}\n                    <span *ngIf=\"sameAsGroup\">({{sameAsLabel}} \n                        <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\"/>)\n                    </span>\n                </label>\n            </div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"!sameAsGroup || !sameAsChecked\" [formGroup]=\"group\">\n<div class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\">\n              {{addressOneLabel}}\n              <span *ngIf=\"sameAsGroup\">\n                  ({{sameAsLabel}} \n                  <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\"/>)\n              </span>\n          </label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line1'].status === 'INVALID'}\" \n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line1\" [maxlength]=\"line1MaxLength\"\n            [id]=\"componentId+'_Line1Input'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('required')\">{{addressOneLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"!hideLine2\" class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label>{{addressTwoLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line2'].status === 'INVALID'}\"\n           [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line2\" [maxlength]=\"line2MaxLength\"\n            [id]=\"componentId+'_Line2Input'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-md-6\">\n      <div class=\"form-group\">\n          <label>{{cityLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" [maxlength]=\"cityMaxLength\"\n            [id]=\"componentId+'_CityInput'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n  <div class=\"col-md-2\">\n      <div *ngIf=\"showStates && (!group.controls['country'] || group.get('country')?.value ==='USA')\" class=\"form-group\">\n          <label>{{stateLabel}}</label>\n          <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\" \n            name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n          <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n      </select>\n      <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n      </div>\n  </div>\n  <div class=\"col-md-4\">\n      <div *ngIf=\"!group.controls['country']  || group.get('country')?.value ==='USA'\" class=\"form-group\">\n          <label>{{zipCodeLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['postalCode'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Zip Code\" formControlName=\"postalCode\" [id]=\"componentId+'_ZipInput'\" mask=\"00000\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('required')\">{{zipCodeLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('minlength')\">{{zipCodeLabel}} must contain exactly 5 digits</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"group.controls['country'] && group.get('country')?.value !=='USA'\" class=\"row\">\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignStateLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignState'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign State\" formControlName=\"foreignState\" [id]=\"componentId+'_ForeignStateInput'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\" >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignState'].hasError('required')\">{{foreignStateLabel}} is required</small>\n        \n    </div>\n  </div>\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignZipLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignZip'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign Zip Code\" formControlName=\"foreignZip\" [id]=\"componentId+'_foreignZipInput'\"  >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('required')\">{{foreignZipLabel}} is required</small>\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('minlength')\">{{foreignZipLabel}} must contain exactly ? digits</small>\n    </div> \n  </div>\n\n</div>\n<div *ngIf=\"group.controls['country']\" class=\"row\">\n<div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{countryLabel}}</label>\n        <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['country'].status === 'INVALID'}\" \n          name=\"AddressCountry\" formControlName=\"country\" [id]=\"componentId+'_CountrySelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n        <option *ngFor=\"let c of countries\" [ngValue]=\"c\">{{c}}</option>\n    </select>\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls['country'].hasError('required')\">Country{{countryLabel}} is required</small>\n    </div>\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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddressComponent, selector: "oepa-address", inputs: { group: "group", showValidation: "showValidation", addressOneLabel: "addressOneLabel", addressTwoLabel: "addressTwoLabel", cityLabel: "cityLabel", stateLabel: "stateLabel", zipCodeLabel: "zipCodeLabel", disableState: "disableState", isSearch: "isSearch", hideLine2: "hideLine2", line1MaxLength: "line1MaxLength", line2MaxLength: "line2MaxLength", cityMaxLength: "cityMaxLength", foreignStateLabel: "foreignStateLabel", foreignZipLabel: "foreignZipLabel", countryLabel: "countryLabel", sameAsGroup: "sameAsGroup", sameAsLabel: "sameAsLabel", sameAsChecked: "sameAsChecked" }, ngImport: i0, template: "<div *ngIf=\"sameAsGroup && sameAsChecked\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <div class=\"form-group\">\n                <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\" id=\"addressOneLabel\">\n                    {{addressOneLabel}}\n                    <span *ngIf=\"sameAsGroup\">({{sameAsLabel}} \n                        <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\" [attr.aria-label]=\"sameAsLabel\"/>\n                    </span>\n                </label>\n            </div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"!sameAsGroup || !sameAsChecked\" [formGroup]=\"group\">\n<div class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\" id=\"addressOneLabel\">\n              {{addressOneLabel}}\n              <span *ngIf=\"sameAsGroup\">\n                  ({{sameAsLabel}} \n                  <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\" [attr.aria-label]=\"sameAsLabel\"/>\n              </span>\n          </label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line1'].status === 'INVALID'}\" \n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line1\" [maxlength]=\"line1MaxLength\"\n            [id]=\"componentId+'_Line1Input'\" [attr.aria-labelledby]=\"'addressOneLabel'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('required')\">{{addressOneLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"!hideLine2\" class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label id=\"addressTwoLabel\">{{addressTwoLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line2'].status === 'INVALID'}\"\n           [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line2\" [maxlength]=\"line2MaxLength\"\n            [id]=\"componentId+'_Line2Input'\" [attr.aria-labelledby]=\"'addressTwoLabel'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-md-6\">\n      <div class=\"form-group\">\n          <label>{{cityLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" [maxlength]=\"cityMaxLength\"\n            [id]=\"componentId+'_CityInput'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n  <div class=\"col-md-2\">\n      <div *ngIf=\"showStates && (!group.controls['country'] || group.get('country')?.value ==='USA')\" class=\"form-group\">\n          <label>{{stateLabel}}</label>\n          <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\" \n            name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n          <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n      </select>\n      <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n      </div>\n  </div>\n  <div class=\"col-md-4\">\n      <div *ngIf=\"!group.controls['country']  || group.get('country')?.value ==='USA'\" class=\"form-group\">\n          <label>{{zipCodeLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['postalCode'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Zip Code\" formControlName=\"postalCode\" [id]=\"componentId+'_ZipInput'\" mask=\"00000\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('required')\">{{zipCodeLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('minlength')\">{{zipCodeLabel}} must contain exactly 5 digits</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"group.controls['country'] && group.get('country')?.value !=='USA'\" class=\"row\">\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignStateLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignState'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign State\" formControlName=\"foreignState\" [id]=\"componentId+'_ForeignStateInput'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\" >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignState'].hasError('required')\">{{foreignStateLabel}} is required</small>\n        \n    </div>\n  </div>\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignZipLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignZip'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign Zip Code\" formControlName=\"foreignZip\" [id]=\"componentId+'_foreignZipInput'\"  >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('required')\">{{foreignZipLabel}} is required</small>\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('minlength')\">{{foreignZipLabel}} must contain exactly ? digits</small>\n    </div> \n  </div>\n\n</div>\n<div *ngIf=\"group.controls['country']\" class=\"row\">\n<div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{countryLabel}}</label>\n        <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['country'].status === 'INVALID'}\" \n          name=\"AddressCountry\" formControlName=\"country\" [id]=\"componentId+'_CountrySelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n        <option *ngFor=\"let c of countries\" [ngValue]=\"c\">{{c}}</option>\n    </select>\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls['country'].hasError('required')\">Country{{countryLabel}} is required</small>\n    </div>\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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-address', template: "<div *ngIf=\"sameAsGroup && sameAsChecked\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <div class=\"form-group\">\n                <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\">\n                    {{addressOneLabel}}\n                    <span *ngIf=\"sameAsGroup\">({{sameAsLabel}} \n                        <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\"/>)\n                    </span>\n                </label>\n            </div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"!sameAsGroup || !sameAsChecked\" [formGroup]=\"group\">\n<div class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\">\n              {{addressOneLabel}}\n              <span *ngIf=\"sameAsGroup\">\n                  ({{sameAsLabel}} \n                  <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\"/>)\n              </span>\n          </label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line1'].status === 'INVALID'}\" \n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line1\" [maxlength]=\"line1MaxLength\"\n            [id]=\"componentId+'_Line1Input'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('required')\">{{addressOneLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"!hideLine2\" class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label>{{addressTwoLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line2'].status === 'INVALID'}\"\n           [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line2\" [maxlength]=\"line2MaxLength\"\n            [id]=\"componentId+'_Line2Input'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-md-6\">\n      <div class=\"form-group\">\n          <label>{{cityLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" [maxlength]=\"cityMaxLength\"\n            [id]=\"componentId+'_CityInput'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n  <div class=\"col-md-2\">\n      <div *ngIf=\"showStates && (!group.controls['country'] || group.get('country')?.value ==='USA')\" class=\"form-group\">\n          <label>{{stateLabel}}</label>\n          <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\" \n            name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n          <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n      </select>\n      <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n      </div>\n  </div>\n  <div class=\"col-md-4\">\n      <div *ngIf=\"!group.controls['country']  || group.get('country')?.value ==='USA'\" class=\"form-group\">\n          <label>{{zipCodeLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['postalCode'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Zip Code\" formControlName=\"postalCode\" [id]=\"componentId+'_ZipInput'\" mask=\"00000\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('required')\">{{zipCodeLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('minlength')\">{{zipCodeLabel}} must contain exactly 5 digits</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"group.controls['country'] && group.get('country')?.value !=='USA'\" class=\"row\">\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignStateLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignState'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign State\" formControlName=\"foreignState\" [id]=\"componentId+'_ForeignStateInput'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\" >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignState'].hasError('required')\">{{foreignStateLabel}} is required</small>\n        \n    </div>\n  </div>\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignZipLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignZip'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign Zip Code\" formControlName=\"foreignZip\" [id]=\"componentId+'_foreignZipInput'\"  >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('required')\">{{foreignZipLabel}} is required</small>\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('minlength')\">{{foreignZipLabel}} must contain exactly ? digits</small>\n    </div> \n  </div>\n\n</div>\n<div *ngIf=\"group.controls['country']\" class=\"row\">\n<div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{countryLabel}}</label>\n        <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['country'].status === 'INVALID'}\" \n          name=\"AddressCountry\" formControlName=\"country\" [id]=\"componentId+'_CountrySelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n        <option *ngFor=\"let c of countries\" [ngValue]=\"c\">{{c}}</option>\n    </select>\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls['country'].hasError('required')\">Country{{countryLabel}} is required</small>\n    </div>\n</div>\n</div>\n</div>" }]
+            args: [{ selector: 'oepa-address', template: "<div *ngIf=\"sameAsGroup && sameAsChecked\">\n    <div class=\"row\">\n        <div class=\"col-md-12\">\n            <div class=\"form-group\">\n                <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\" id=\"addressOneLabel\">\n                    {{addressOneLabel}}\n                    <span *ngIf=\"sameAsGroup\">({{sameAsLabel}} \n                        <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\" [attr.aria-label]=\"sameAsLabel\"/>\n                    </span>\n                </label>\n            </div>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"!sameAsGroup || !sameAsChecked\" [formGroup]=\"group\">\n<div class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label [ngStyle]=\"{ 'font-weight': sameAsChecked && group.disabled ? 'bold' : '' }\" id=\"addressOneLabel\">\n              {{addressOneLabel}}\n              <span *ngIf=\"sameAsGroup\">\n                  ({{sameAsLabel}} \n                  <input type=\"checkbox\" [checked]=\"sameAsChecked\" (change)=\"toggleCopyFromSelection()\" [disabled]=\"group.parent?.disabled\" [attr.aria-label]=\"sameAsLabel\"/>\n              </span>\n          </label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line1'].status === 'INVALID'}\" \n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line1\" [maxlength]=\"line1MaxLength\"\n            [id]=\"componentId+'_Line1Input'\" [attr.aria-labelledby]=\"'addressOneLabel'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('required')\">{{addressOneLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"!hideLine2\" class=\"row\">\n  <div class=\"col-md-12\">\n      <div class=\"form-group\">\n          <label id=\"addressTwoLabel\">{{addressTwoLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['line2'].status === 'INVALID'}\"\n           [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"line2\" [maxlength]=\"line2MaxLength\"\n            [id]=\"componentId+'_Line2Input'\" [attr.aria-labelledby]=\"'addressTwoLabel'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['line2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-md-6\">\n      <div class=\"form-group\">\n          <label>{{cityLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" [maxlength]=\"cityMaxLength\"\n            [id]=\"componentId+'_CityInput'\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n      </div>\n  </div>\n  <div class=\"col-md-2\">\n      <div *ngIf=\"showStates && (!group.controls['country'] || group.get('country')?.value ==='USA')\" class=\"form-group\">\n          <label>{{stateLabel}}</label>\n          <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\" \n            name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n          <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n      </select>\n      <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n      </div>\n  </div>\n  <div class=\"col-md-4\">\n      <div *ngIf=\"!group.controls['country']  || group.get('country')?.value ==='USA'\" class=\"form-group\">\n          <label>{{zipCodeLabel}}</label>\n          <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['postalCode'].status === 'INVALID'}\"\n            [type]=\"isSearch ? 'search' : 'text'\" placeholder=\"Zip Code\" formControlName=\"postalCode\" [id]=\"componentId+'_ZipInput'\" mask=\"00000\">\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('required')\">{{zipCodeLabel}} is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['postalCode'].hasError('minlength')\">{{zipCodeLabel}} must contain exactly 5 digits</small>\n      </div>\n  </div>\n</div>\n<div *ngIf=\"group.controls['country'] && group.get('country')?.value !=='USA'\" class=\"row\">\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignStateLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignState'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign State\" formControlName=\"foreignState\" [id]=\"componentId+'_ForeignStateInput'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\" >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignState'].hasError('required')\">{{foreignStateLabel}} is required</small>\n        \n    </div>\n  </div>\n  <div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{foreignZipLabel}}</label>\n        <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['foreignZip'].status === 'INVALID'}\"\n          type=\"text\" placeholder=\"Foreign Zip Code\" formControlName=\"foreignZip\" [id]=\"componentId+'_foreignZipInput'\"  >\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('required')\">{{foreignZipLabel}} is required</small>\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls['foreignZip'].hasError('minlength')\">{{foreignZipLabel}} must contain exactly ? digits</small>\n    </div> \n  </div>\n\n</div>\n<div *ngIf=\"group.controls['country']\" class=\"row\">\n<div class=\"col-md-6\">\n    <div class=\"form-group\">\n        <label>{{countryLabel}}</label>\n        <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['country'].status === 'INVALID'}\" \n          name=\"AddressCountry\" formControlName=\"country\" [id]=\"componentId+'_CountrySelect'\" [attr.disabled]=\"disableState || group.disabled ? '' : null\">\n        <option *ngFor=\"let c of countries\" [ngValue]=\"c\">{{c}}</option>\n    </select>\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls['country'].hasError('required')\">Country{{countryLabel}} is required</small>\n    </div>\n</div>\n</div>\n</div>" }]
         }], ctorParameters: () => [{ type: OepaAddressService }, { type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], showValidation: [{
@@ -323,11 +325,11 @@ class ContactComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactComponent, selector: "oepa-contact", inputs: { group: "group", showValidation: "showValidation", firstNameLabel: "firstNameLabel", lastNameLabel: "lastNameLabel", showMiddleName: "showMiddleName", middleNameLabel: "middleNameLabel", emailLabel: "emailLabel", phoneLabel: "phoneLabel", faxLabel: "faxLabel", noFax: "noFax", showTitle: "showTitle", noPhone: "noPhone", noEmail: "noEmail", isSearch: "isSearch", firstNameMaxLength: "firstNameMaxLength", middleNameMaxLength: "middleNameMaxLength", lastNameMaxLength: "lastNameMaxLength", titleMaxLength: "titleMaxLength", emailMaxLength: "emailMaxLength" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n\t<div *ngIf=\"!showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\" [ngClass]=\"{'is-invalid':showValidation && group.controls['middleName'].status === 'INVALID'}\">\n\t\t\t\t<label>{{middleNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Middle Name\" formControlName=\"middleName\" [id]=\"componentId+'_MiddleNameInput'\" [maxlength]=\"middleNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls['middleName'].status === 'INVALID'\">Middle Name is required</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showTitle\" class=\"row\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>Title</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Title\" \n\t\t\t\t[ngClass]=\"{'is-invalid':showValidation && group.controls['title'].status === 'INVALID'}\"\n\t\t\t\tformControlName=\"title\"  [id]=\"componentId+'_TitleInput'\" [maxlength]=\"titleMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['title'].hasError('required')\">Title is required</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"row\">\n\t\t<div *ngIf=\"!noEmail\" class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{emailLabel}}</label>\n\t\t\t\t<input type=\"email\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['emailAddress'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Email\" formControlName=\"emailAddress\"  [id]=\"componentId+'_EmailInput'\" [maxlength]=\"emailMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('required')\">{{emailLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('maxlength')\">{{emailLabel}} has exceeded its maximum length</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('email')\">Please enter a valid email address</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div [ngClass]=\"{ 'col-md-3': !noFax, 'col-md-6': noFax }\">\n\t\t\t<div *ngIf=\"!noPhone\" class=\"form-group\">\n\t\t\t\t<label>{{phoneLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['phoneNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" [id]=\"componentId+'_PhoneInput'\" mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('required')\">{{phoneLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"!noFax\" class=\"col-md-3\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{faxLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['faxNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"faxNumber\" [id]=\"componentId+'_FaxInput'\"  mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('required')\">{{faxLabel}} is required</small>\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t</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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { 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: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactComponent, selector: "oepa-contact", inputs: { group: "group", showValidation: "showValidation", firstNameLabel: "firstNameLabel", lastNameLabel: "lastNameLabel", showMiddleName: "showMiddleName", middleNameLabel: "middleNameLabel", emailLabel: "emailLabel", phoneLabel: "phoneLabel", faxLabel: "faxLabel", noFax: "noFax", showTitle: "showTitle", noPhone: "noPhone", noEmail: "noEmail", isSearch: "isSearch", firstNameMaxLength: "firstNameMaxLength", middleNameMaxLength: "middleNameMaxLength", lastNameMaxLength: "lastNameMaxLength", titleMaxLength: "titleMaxLength", emailMaxLength: "emailMaxLength" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n\t<div *ngIf=\"!showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label id=\"firstNameLabel\">{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\" [attr.aria-labelledby]=\"'firstNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label id=\"lastNameLabel\">{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\" [attr.aria-labelledby]=\"'lastNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label id=\"firstNameLabel\">{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\" [attr.aria-labelledby]=\"'firstNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\" [ngClass]=\"{'is-invalid':showValidation && group.controls['middleName'].status === 'INVALID'}\">\n\t\t\t\t<label id=\"middleNameLabel\">{{middleNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Middle Name\" formControlName=\"middleName\" [id]=\"componentId+'_MiddleNameInput'\" [maxlength]=\"middleNameMaxLength\" [attr.aria-labelledby]=\"'middleNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls['middleName'].status === 'INVALID'\">Middle Name is required</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showTitle\" class=\"row\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>Title</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Title\" \n\t\t\t\t[ngClass]=\"{'is-invalid':showValidation && group.controls['title'].status === 'INVALID'}\"\n\t\t\t\tformControlName=\"title\"  [id]=\"componentId+'_TitleInput'\" [maxlength]=\"titleMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['title'].hasError('required')\">Title is required</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"row\">\n\t\t<div *ngIf=\"!noEmail\" class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{emailLabel}}</label>\n\t\t\t\t<input type=\"email\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['emailAddress'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Email\" formControlName=\"emailAddress\"  [id]=\"componentId+'_EmailInput'\" [maxlength]=\"emailMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('required')\">{{emailLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('maxlength')\">{{emailLabel}} has exceeded its maximum length</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('email')\">Please enter a valid email address</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div [ngClass]=\"{ 'col-md-3': !noFax, 'col-md-6': noFax }\">\n\t\t\t<div *ngIf=\"!noPhone\" class=\"form-group\">\n\t\t\t\t<label>{{phoneLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['phoneNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" [id]=\"componentId+'_PhoneInput'\" mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('required')\">{{phoneLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"!noFax\" class=\"col-md-3\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{faxLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['faxNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"faxNumber\" [id]=\"componentId+'_FaxInput'\"  mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('required')\">{{faxLabel}} is required</small>\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t</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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { 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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-contact', template: "<div [formGroup]=\"group\">\n\t<div *ngIf=\"!showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\" [ngClass]=\"{'is-invalid':showValidation && group.controls['middleName'].status === 'INVALID'}\">\n\t\t\t\t<label>{{middleNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Middle Name\" formControlName=\"middleName\" [id]=\"componentId+'_MiddleNameInput'\" [maxlength]=\"middleNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls['middleName'].status === 'INVALID'\">Middle Name is required</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showTitle\" class=\"row\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>Title</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Title\" \n\t\t\t\t[ngClass]=\"{'is-invalid':showValidation && group.controls['title'].status === 'INVALID'}\"\n\t\t\t\tformControlName=\"title\"  [id]=\"componentId+'_TitleInput'\" [maxlength]=\"titleMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['title'].hasError('required')\">Title is required</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"row\">\n\t\t<div *ngIf=\"!noEmail\" class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{emailLabel}}</label>\n\t\t\t\t<input type=\"email\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['emailAddress'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Email\" formControlName=\"emailAddress\"  [id]=\"componentId+'_EmailInput'\" [maxlength]=\"emailMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('required')\">{{emailLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('maxlength')\">{{emailLabel}} has exceeded its maximum length</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('email')\">Please enter a valid email address</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div [ngClass]=\"{ 'col-md-3': !noFax, 'col-md-6': noFax }\">\n\t\t\t<div *ngIf=\"!noPhone\" class=\"form-group\">\n\t\t\t\t<label>{{phoneLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['phoneNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" [id]=\"componentId+'_PhoneInput'\" mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('required')\">{{phoneLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"!noFax\" class=\"col-md-3\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{faxLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['faxNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"faxNumber\" [id]=\"componentId+'_FaxInput'\"  mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('required')\">{{faxLabel}} is required</small>\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>" }]
+            args: [{ selector: 'oepa-contact', template: "<div [formGroup]=\"group\">\n\t<div *ngIf=\"!showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label id=\"firstNameLabel\">{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\" [attr.aria-labelledby]=\"'firstNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label id=\"lastNameLabel\">{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\" [attr.aria-labelledby]=\"'lastNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showMiddleName\" class=\"row\">\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label id=\"firstNameLabel\">{{firstNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['firstName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"First Name\" formControlName=\"firstName\" [id]=\"componentId+'_FirstNameInput'\" [maxlength]=\"firstNameMaxLength\" [attr.aria-labelledby]=\"'firstNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('required')\">{{firstNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['firstName'].hasError('maxlength')\">{{firstNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\" [ngClass]=\"{'is-invalid':showValidation && group.controls['middleName'].status === 'INVALID'}\">\n\t\t\t\t<label id=\"middleNameLabel\">{{middleNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Middle Name\" formControlName=\"middleName\" [id]=\"componentId+'_MiddleNameInput'\" [maxlength]=\"middleNameMaxLength\" [attr.aria-labelledby]=\"'middleNameLabel'\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls['middleName'].status === 'INVALID'\">Middle Name is required</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"col-md-4\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{lastNameLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['lastName'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Last Name\" formControlName=\"lastName\" [id]=\"componentId+'_LastNameInput'\" [maxlength]=\"lastNameMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('required')\">{{lastNameLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['lastName'].hasError('maxlength')\">{{lastNameLabel}} has exceeded its maximum length</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"showTitle\" class=\"row\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>Title</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" placeholder=\"Title\" \n\t\t\t\t[ngClass]=\"{'is-invalid':showValidation && group.controls['title'].status === 'INVALID'}\"\n\t\t\t\tformControlName=\"title\"  [id]=\"componentId+'_TitleInput'\" [maxlength]=\"titleMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['title'].hasError('required')\">Title is required</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"row\">\n\t\t<div *ngIf=\"!noEmail\" class=\"col-md-6\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{emailLabel}}</label>\n\t\t\t\t<input type=\"email\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['emailAddress'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"Email\" formControlName=\"emailAddress\"  [id]=\"componentId+'_EmailInput'\" [maxlength]=\"emailMaxLength\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('required')\">{{emailLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('maxlength')\">{{emailLabel}} has exceeded its maximum length</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['emailAddress'].hasError('email')\">Please enter a valid email address</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div [ngClass]=\"{ 'col-md-3': !noFax, 'col-md-6': noFax }\">\n\t\t\t<div *ngIf=\"!noPhone\" class=\"form-group\">\n\t\t\t\t<label>{{phoneLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['phoneNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" [id]=\"componentId+'_PhoneInput'\" mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('required')\">{{phoneLabel}} is required</small>\n\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['phoneNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"!noFax\" class=\"col-md-3\">\n\t\t\t<div class=\"form-group\">\n\t\t\t\t<label>{{faxLabel}}</label>\n\t\t\t\t<input [type]=\"isSearch ? 'search' : 'text'\" class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['faxNumber'].status === 'INVALID'}\"\n\t\t\t\t\tplaceholder=\"(xxx) xxx-xxxx\" formControlName=\"faxNumber\" [id]=\"componentId+'_FaxInput'\"  mask=\"(000) 000-0000\" minlength=\"10\">\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('required')\">{{faxLabel}} is required</small>\n\t\t\t\t\t<small class=\"invalid-feedback\" *ngIf=\"group.controls['faxNumber'].hasError('minlength')\">Please enter a valid phone number</small>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], showValidation: [{
@@ -387,6 +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 = 'OepaDatepickerComponent';
     group;
     field;
@@ -489,11 +495,11 @@ 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" }, usesOnChanges: true, 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                  #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                  >\n          <div class=\"btn-group\" role=\"group\">\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"dp.toggle()\" [id]=\"componentId+'_ToggleBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-calendar3\"></i>\n              </button>\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"clearDate()\" [id]=\"componentId+'_ClearBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-x-lg\"></i>\n              </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.hasError('required')\">Date is required</small>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\">Date is out of range</small>\n  </div>\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: "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: { 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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: '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                  #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                  >\n          <div class=\"btn-group\" role=\"group\">\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"dp.toggle()\" [id]=\"componentId+'_ToggleBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-calendar3\"></i>\n              </button>\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"clearDate()\" [id]=\"componentId+'_ClearBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-x-lg\"></i>\n              </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.hasError('required')\">Date is required</small>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\">Date is out of range</small>\n  </div>\n</div>\n" }]
+            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: [{
                 type: Input
             }], field: [{
@@ -554,11 +560,11 @@ class ActionBtnComponent {
         return this.btnId + '_ActionBtn';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: { label: "label", btnId: "btnId", data: "data", actions: "actions", normalSize: "normalSize", dropup: "dropup" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div *ngIf=\"actions && actions.length > 0\" class=\"btn-group\" dropdown [dropup]=\"dropup\">\n  <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\" [ngClass]=\"{ 'btn-sm' : !normalSize }\"\n    [id]=\"btnId+'_ActionBtn'\">\n    <span *ngIf=\"busy\" class=\"spinner-border text-primary\" role=\"status\"></span>\n    {{label}} \n    <span class=\"caret\"></span>\n  </button>\n\n  <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\" role=\"menu\">\n      <li *ngFor=\"let action of actions; let i = index;\" role=\"menuitem\">\n          <a *ngIf=\"!busy\" class=\"dropdown-item\" (click)=\"onActionClicked(action)\" [id]=\"btnId+'_ActionLink_'+i\">\n            <i ngClass=\"{{action.className || ''}}\"></i> {{action.title}}\n          </a>\n      </li>\n  </ul>\n</div> \n<!-- display disabled button if no actions are available -->\n<div *ngIf=\"!actions || actions.length === 0\">\n  <button type=\"button\" class=\"btn btn-primary\" [ngClass]=\"{ 'btn-sm' : !normalSize }\" [id]=\"btnId+'_ActionBtn'\" disabled>\n    N/A \n  </button>\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: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: { label: "label", btnId: "btnId", data: "data", actions: "actions", normalSize: "normalSize", dropup: "dropup" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div *ngIf=\"actions && actions.length > 0\" class=\"btn-group\" dropdown [dropup]=\"dropup\" role=\"group\" aria-label=\"Action Button Group\">\n  <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\" [ngClass]=\"{ 'btn-sm' : !normalSize }\"\n    [id]=\"btnId+'_ActionBtn'\" aria-label=\"Action Button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    <span *ngIf=\"busy\" class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n    {{label}} \n    <span class=\"caret\" aria-hidden=\"true\"></span>\n  </button>\n\n  <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\" role=\"menu\" aria-label=\"Action Menu\">\n      <li *ngFor=\"let action of actions; let i = index;\" role=\"menuitem\">\n          <a *ngIf=\"!busy\" class=\"dropdown-item\" (click)=\"onActionClicked(action)\" [id]=\"btnId+'_ActionLink_'+i\" [attr.aria-label]=\"action.title\" tabindex=\"0\">\n            <i ngClass=\"{{action.className || ''}}\" aria-hidden=\"true\"></i> {{action.title}}\n          </a>\n      </li>\n  </ul>\n</div> \n<!-- display disabled button if no actions are available -->\n<div *ngIf=\"!actions || actions.length === 0\">\n  <button type=\"button\" class=\"btn btn-primary\" [ngClass]=\"{ 'btn-sm' : !normalSize }\" [id]=\"btnId+'_ActionBtn'\" disabled aria-label=\"No actions available\">\n    N/A \n  </button>\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: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-action-btn', template: "<div *ngIf=\"actions && actions.length > 0\" class=\"btn-group\" dropdown [dropup]=\"dropup\">\n  <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\" [ngClass]=\"{ 'btn-sm' : !normalSize }\"\n    [id]=\"btnId+'_ActionBtn'\">\n    <span *ngIf=\"busy\" class=\"spinner-border text-primary\" role=\"status\"></span>\n    {{label}} \n    <span class=\"caret\"></span>\n  </button>\n\n  <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\" role=\"menu\">\n      <li *ngFor=\"let action of actions; let i = index;\" role=\"menuitem\">\n          <a *ngIf=\"!busy\" class=\"dropdown-item\" (click)=\"onActionClicked(action)\" [id]=\"btnId+'_ActionLink_'+i\">\n            <i ngClass=\"{{action.className || ''}}\"></i> {{action.title}}\n          </a>\n      </li>\n  </ul>\n</div> \n<!-- display disabled button if no actions are available -->\n<div *ngIf=\"!actions || actions.length === 0\">\n  <button type=\"button\" class=\"btn btn-primary\" [ngClass]=\"{ 'btn-sm' : !normalSize }\" [id]=\"btnId+'_ActionBtn'\" disabled>\n    N/A \n  </button>\n</div>" }]
+            args: [{ selector: 'oepa-action-btn', template: "<div *ngIf=\"actions && actions.length > 0\" class=\"btn-group\" dropdown [dropup]=\"dropup\" role=\"group\" aria-label=\"Action Button Group\">\n  <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\" [ngClass]=\"{ 'btn-sm' : !normalSize }\"\n    [id]=\"btnId+'_ActionBtn'\" aria-label=\"Action Button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    <span *ngIf=\"busy\" class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n    {{label}} \n    <span class=\"caret\" aria-hidden=\"true\"></span>\n  </button>\n\n  <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\" role=\"menu\" aria-label=\"Action Menu\">\n      <li *ngFor=\"let action of actions; let i = index;\" role=\"menuitem\">\n          <a *ngIf=\"!busy\" class=\"dropdown-item\" (click)=\"onActionClicked(action)\" [id]=\"btnId+'_ActionLink_'+i\" [attr.aria-label]=\"action.title\" tabindex=\"0\">\n            <i ngClass=\"{{action.className || ''}}\" aria-hidden=\"true\"></i> {{action.title}}\n          </a>\n      </li>\n  </ul>\n</div> \n<!-- display disabled button if no actions are available -->\n<div *ngIf=\"!actions || actions.length === 0\">\n  <button type=\"button\" class=\"btn btn-primary\" [ngClass]=\"{ 'btn-sm' : !normalSize }\" [id]=\"btnId+'_ActionBtn'\" disabled aria-label=\"No actions available\">\n    N/A \n  </button>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { label: [{
                 type: Input
             }], btnId: [{
@@ -584,11 +590,11 @@ class ActionBtnModalComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnModalComponent, deps: [{ token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBtnModalComponent, selector: "oepa-action-btn-modal", ngImport: i0, template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Action Button Test</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <oepa-action-btn [actions]=\"actions\"></oepa-action-btn>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 text-center\">\n                <div class=\"btn-group\" dropdown placement=\"bottom right\">\n                    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                        Button dropdown <span class=\"caret\"></span>\n                    </button>\n                    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\" role=\"menu\"\n                        aria-labelledby=\"button-basic\">\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\n                        <li class=\"divider dropdown-divider\"></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"bsModalRef.hide()\">Close</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBtnModalComponent, selector: "oepa-action-btn-modal", ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"actionBtnModalTitle\">Action Button Test</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-labelledby=\"actionBtnModalTitle\">\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <oepa-action-btn [actions]=\"actions\"></oepa-action-btn>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 text-center\">\n                <div class=\"btn-group\" dropdown placement=\"bottom right\" role=\"group\" aria-label=\"Button Dropdown Group\">\n                    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\" aria-label=\"Button dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        Button dropdown <span class=\"caret\" aria-hidden=\"true\"></span>\n                    </button>\n                    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\" role=\"menu\" aria-label=\"Dropdown Menu\" aria-labelledby=\"button-basic\">\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Another action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Something else here</a></li>\n                        <li class=\"divider dropdown-divider\" aria-hidden=\"true\"></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Separated link</a></li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer\" role=\"contentinfo\">\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"bsModalRef.hide()\" aria-label=\"Close\">Close</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-action-btn-modal', template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Action Button Test</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <oepa-action-btn [actions]=\"actions\"></oepa-action-btn>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 text-center\">\n                <div class=\"btn-group\" dropdown placement=\"bottom right\">\n                    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                        Button dropdown <span class=\"caret\"></span>\n                    </button>\n                    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\" role=\"menu\"\n                        aria-labelledby=\"button-basic\">\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\n                        <li class=\"divider dropdown-divider\"></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"bsModalRef.hide()\">Close</button>\n</div>" }]
+            args: [{ selector: 'oepa-action-btn-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"actionBtnModalTitle\">Action Button Test</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-labelledby=\"actionBtnModalTitle\">\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <oepa-action-btn [actions]=\"actions\"></oepa-action-btn>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 text-center\">\n                <div class=\"btn-group\" dropdown placement=\"bottom right\" role=\"group\" aria-label=\"Button Dropdown Group\">\n                    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\" aria-label=\"Button dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                        Button dropdown <span class=\"caret\" aria-hidden=\"true\"></span>\n                    </button>\n                    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\" role=\"menu\" aria-label=\"Dropdown Menu\" aria-labelledby=\"button-basic\">\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Another action</a></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Something else here</a></li>\n                        <li class=\"divider dropdown-divider\" aria-hidden=\"true\"></li>\n                        <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\" tabindex=\"0\">Separated link</a></li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer\" role=\"contentinfo\">\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"bsModalRef.hide()\" aria-label=\"Close\">Close</button>\n</div>" }]
         }], ctorParameters: () => [{ type: i2$1.BsModalRef }] });
 
 class CheckboxComponent {
@@ -606,11 +612,11 @@ class CheckboxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "oepa-checkbox", inputs: { group: "group", field: "field", label: "label" }, ngImport: i0, template: "<span *ngIf=\"group.controls[field].value && group.disabled\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>\n<span [ngClass]=\"{ 'custom-checkbox': (group.controls[field].value && group.disabled) }\" [formGroup]=\"group\">\n    <input [ngClass]=\"{ 'custom-control-input': (group.controls[field].value && group.disabled) }\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\">\n    <label [ngClass]=\"{ 'custom-control-label': (group.controls[field].value && group.disabled), 'label-bold': (group.controls[field].value && group.disabled) }\">\n        <span *ngIf=\"!group.controls[field].value || !group.disabled\">&nbsp;</span>\n        {{label}}\n    </label>\n</span>\n", styles: [".label-bold{font-weight:700}.custom-control-input:checked~.custom-control-label:before{color:#fff!important;background-color:#777!important;border-color:#777!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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "oepa-checkbox", inputs: { group: "group", field: "field", label: "label" }, ngImport: i0, template: "<span *ngIf=\"group.controls[field].value && group.disabled\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>\n<span [ngClass]=\"{ 'custom-checkbox': (group.controls[field].value && group.disabled) }\" [formGroup]=\"group\">\n    <input [ngClass]=\"{ 'custom-control-input': (group.controls[field].value && group.disabled) }\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\" [attr.aria-labelledby]=\"componentId+'_Label'\">\n    <label [ngClass]=\"{ 'custom-control-label': (group.controls[field].value && group.disabled), 'label-bold': (group.controls[field].value && group.disabled) }\" [id]=\"componentId+'_Label'\">\n        <span *ngIf=\"!group.controls[field].value || !group.disabled\">&nbsp;</span>\n        {{label}}\n    </label>\n</span>\n", styles: [".label-bold{font-weight:700}.custom-control-input:checked~.custom-control-label:before{color:#fff!important;background-color:#777!important;border-color:#777!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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-checkbox', template: "<span *ngIf=\"group.controls[field].value && group.disabled\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>\n<span [ngClass]=\"{ 'custom-checkbox': (group.controls[field].value && group.disabled) }\" [formGroup]=\"group\">\n    <input [ngClass]=\"{ 'custom-control-input': (group.controls[field].value && group.disabled) }\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\">\n    <label [ngClass]=\"{ 'custom-control-label': (group.controls[field].value && group.disabled), 'label-bold': (group.controls[field].value && group.disabled) }\">\n        <span *ngIf=\"!group.controls[field].value || !group.disabled\">&nbsp;</span>\n        {{label}}\n    </label>\n</span>\n", styles: [".label-bold{font-weight:700}.custom-control-input:checked~.custom-control-label:before{color:#fff!important;background-color:#777!important;border-color:#777!important}\n"] }]
+            args: [{ selector: 'oepa-checkbox', template: "<span *ngIf=\"group.controls[field].value && group.disabled\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>\n<span [ngClass]=\"{ 'custom-checkbox': (group.controls[field].value && group.disabled) }\" [formGroup]=\"group\">\n    <input [ngClass]=\"{ 'custom-control-input': (group.controls[field].value && group.disabled) }\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\" [attr.aria-labelledby]=\"componentId+'_Label'\">\n    <label [ngClass]=\"{ 'custom-control-label': (group.controls[field].value && group.disabled), 'label-bold': (group.controls[field].value && group.disabled) }\" [id]=\"componentId+'_Label'\">\n        <span *ngIf=\"!group.controls[field].value || !group.disabled\">&nbsp;</span>\n        {{label}}\n    </label>\n</span>\n", styles: [".label-bold{font-weight:700}.custom-control-input:checked~.custom-control-label:before{color:#fff!important;background-color:#777!important;border-color:#777!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -654,11 +660,11 @@ class CommentModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentModalComponent, selector: "oepa-comment-modal", inputs: { modalTitle: "modalTitle", commentsLabel: "commentsLabel", processBtnLabel: "processBtnLabel" }, outputs: { onProcessComment: "onProcessComment", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h3 class=\"modal-title\">{{modalTitle}}</h3>\n</div>\n\n<div class=\"modal-body\">\n  <div [formGroup]=\"modalForm\"  class=\"form-group\">\n    <label>{{commentsLabel}}</label>\n    <textarea class=\"form-control\" formControlName=\"commentText\" id=\"CommentInput\" rows=\"4\" maxlength=\"2000\"></textarea>\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"ProcessCommentBtn\" (click)=\"processComment()\">{{processBtnLabel}}</button>\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"CencelCommentBtn\" (click)=\"cancel()\">Cancel</button>\n</div>\n", styles: [""], dependencies: [{ 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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentModalComponent, selector: "oepa-comment-modal", inputs: { modalTitle: "modalTitle", commentsLabel: "commentsLabel", processBtnLabel: "processBtnLabel" }, outputs: { onProcessComment: "onProcessComment", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n  <h1 class=\"modal-title\" id=\"commentModalTitle\">{{modalTitle}}</h1>\n</div>\n\n<div class=\"modal-body\" role=\"dialog\" aria-labelledby=\"commentModalTitle\">\n  <div [formGroup]=\"modalForm\"  class=\"form-group\">\n    <label for=\"CommentInput\" id=\"commentLabel\">{{commentsLabel}}</label>\n    <textarea class=\"form-control\" formControlName=\"commentText\" id=\"CommentInput\" rows=\"4\" maxlength=\"2000\" [attr.aria-labelledby]=\"'commentLabel'\"></textarea>\n  </div>\n</div>\n\n<div class=\"modal-footer\" role=\"contentinfo\">\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"ProcessCommentBtn\" (click)=\"processComment()\" [attr.aria-label]=\"processBtnLabel\">{{processBtnLabel}}</button>\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"CencelCommentBtn\" (click)=\"cancel()\" aria-label=\"Cancel\">Cancel</button>\n</div>\n", styles: [""], dependencies: [{ 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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-comment-modal', template: "<div class=\"modal-header\">\n  <h3 class=\"modal-title\">{{modalTitle}}</h3>\n</div>\n\n<div class=\"modal-body\">\n  <div [formGroup]=\"modalForm\"  class=\"form-group\">\n    <label>{{commentsLabel}}</label>\n    <textarea class=\"form-control\" formControlName=\"commentText\" id=\"CommentInput\" rows=\"4\" maxlength=\"2000\"></textarea>\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"ProcessCommentBtn\" (click)=\"processComment()\">{{processBtnLabel}}</button>\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"CencelCommentBtn\" (click)=\"cancel()\">Cancel</button>\n</div>\n" }]
+            args: [{ selector: 'oepa-comment-modal', template: "<div class=\"modal-header\" role=\"banner\">\n  <h1 class=\"modal-title\" id=\"commentModalTitle\">{{modalTitle}}</h1>\n</div>\n\n<div class=\"modal-body\" role=\"dialog\" aria-labelledby=\"commentModalTitle\">\n  <div [formGroup]=\"modalForm\"  class=\"form-group\">\n    <label for=\"CommentInput\" id=\"commentLabel\">{{commentsLabel}}</label>\n    <textarea class=\"form-control\" formControlName=\"commentText\" id=\"CommentInput\" rows=\"4\" maxlength=\"2000\" [attr.aria-labelledby]=\"'commentLabel'\"></textarea>\n  </div>\n</div>\n\n<div class=\"modal-footer\" role=\"contentinfo\">\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"ProcessCommentBtn\" (click)=\"processComment()\" [attr.aria-label]=\"processBtnLabel\">{{processBtnLabel}}</button>\n  <button class=\"btn btn-primary mr-1\" type=\"button\" id=\"CencelCommentBtn\" (click)=\"cancel()\" aria-label=\"Cancel\">Cancel</button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }], propDecorators: { modalTitle: [{
                 type: Input
             }], commentsLabel: [{
@@ -1702,7 +1708,7 @@ class TableComponent {
     toggleRowSelection(row) {
         const selectedRows = [];
         row.selected = !row.selected;
-        this._data.forEach((dr) => {
+        this.rows.forEach((dr) => {
             if (row.privateId === dr.privateId) {
                 dr.selected = row.selected;
             }
@@ -1820,11 +1826,11 @@ class TableComponent {
         this.customBtnClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div ngClass=\"{{config.divClassName || ''}}\" >\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" ngClass=\"{{config.className || ''}}\" role=\"grid\" style=\"width: 100%;\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n      <span>\n        <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n          [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n        </i>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" ngClass=\"{{column.className || ''}}\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [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            {{column.title}}\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\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n          <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n            [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n          </i>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          <span class=\"badge badge-secondary\" style=\"color: #999\">{{_data.length}}</span>&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n          <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n        </button>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- 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)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\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 column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div ngClass=\"{{config.divClassName || ''}}\" >\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" ngClass=\"{{config.className || ''}}\" role=\"grid\" style=\"width: 100%;\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n      <span>\n        <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n          [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n        </i>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" ngClass=\"{{column.className || ''}}\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [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            {{column.title}}\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\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n          <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n            [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n          </i>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          <span class=\"badge badge-secondary\" style=\"color: #999\">{{_data.length}}</span>&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
+            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n          <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n        </button>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- 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)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\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 column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }], propDecorators: { tableId: [{
                 type: Input
             }], config: [{
@@ -1932,11 +1938,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\">\n  <h4 class=\"modal-title pull-left\">{{headerText}}</h4>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\">\n    </button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table id = \"permitDetail\" tableId=\"permitDetail\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onCellSelect($event)\" (cellClicked)=\"onCellClicked($event)\">\n    </oepa-table>\n  </div>\n  {{bodyText}}\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\" (click)=\"confirm()\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\" (click)=\"skip()\">{{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\" 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"] }] });
 }
 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\">\n  <h4 class=\"modal-title pull-left\">{{headerText}}</h4>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\">\n    </button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table id = \"permitDetail\" tableId=\"permitDetail\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onCellSelect($event)\" (cellClicked)=\"onCellClicked($event)\">\n    </oepa-table>\n  </div>\n  {{bodyText}}\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\" (click)=\"confirm()\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\" (click)=\"skip()\">{{skipBtnLabel}}</button>\n</div>\n" }]
+            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" }]
         }], ctorParameters: () => [{ type: i2$1.BsModalRef }, { type: i2$2.ToastrService }], propDecorators: { tableHeader: [{
                 type: Input
             }], tableData: [{
@@ -2056,7 +2062,6 @@ class AccountSearchModalComponent {
         return empty;
     }
     submitSearch() {
-        console.log("SEAARCH");
         this.errorMessage = undefined;
         let filter = this.getFilterFromForm();
         if (this.filterIsEmpty(filter)) {
@@ -2124,11 +2129,11 @@ class AccountSearchModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: AccountSearchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccountSearchModalComponent, selector: "oepa-account-search-modal", inputs: { searchURL: "searchURL" }, outputs: { onAccountSelected: "onAccountSelected" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Advanced Ebiz Account Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n        <accordion>\n            <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n                <div accordion-heading>\n                    <div class=\"row\">\n                        <div class=\"col-sm-6\">\n                            <i class=\"float-xs-right bi\" id=\"accountSearchCriteria\" name=\"accountSearchCriteria\" \n                            [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                                <b>Ebiz Account Search Criteria</b>\n                        </div>\n                    </div>\n                </div>\n                <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Ebiz User ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"userUIDInput\" formControlName=\"userID\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>First Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"firstNameInput\" formControlName=\"firstName\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Last Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"lastNameInput\" formControlName=\"lastName\">\n                        </div>\n                    </div>\n                </div>\n                \n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" class=\"spinner-border text-primary\" role=\"status\"></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n            </accordion-group>\n        </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Ebiz Account List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\" *ngIf=\"tableHeader\">\n            <oepa-table tableId=\"accountSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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=\"SaveAccountBtn\"\n                [disabled]=\"!selectedAccount || inProgressMsg\"\n                (click)=\"save()\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">Cancel</button>\n        </div>\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: i6.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i6.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { 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: AccountSearchModalComponent, selector: "oepa-account-search-modal", inputs: { searchURL: "searchURL" }, outputs: { onAccountSelected: "onAccountSelected" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\">Advanced Ebiz Account Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\" [expanded]=\"openSearchCriteria\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    <div id=\"accountSearchCriteria\">\n                        <b>Ebiz Account Search Criteria</b>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"userUIDInput\">Ebiz User ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"userUIDInput\" formControlName=\"userID\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"firstNameInput\">First Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"firstNameInput\" formControlName=\"firstName\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"lastNameInput\">Last Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"lastNameInput\" formControlName=\"lastName\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" class=\"spinner-border text-primary\" role=\"status\"></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\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Ebiz Account List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\" *ngIf=\"tableHeader\">\n            <oepa-table tableId=\"accountSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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=\"SaveAccountBtn\"\n                [disabled]=\"!selectedAccount || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: 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: "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: AccountSearchModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-account-search-modal', template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Advanced Ebiz Account Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n        <accordion>\n            <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n                <div accordion-heading>\n                    <div class=\"row\">\n                        <div class=\"col-sm-6\">\n                            <i class=\"float-xs-right bi\" id=\"accountSearchCriteria\" name=\"accountSearchCriteria\" \n                            [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                                <b>Ebiz Account Search Criteria</b>\n                        </div>\n                    </div>\n                </div>\n                <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Ebiz User ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"userUIDInput\" formControlName=\"userID\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>First Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"firstNameInput\" formControlName=\"firstName\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Last Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"lastNameInput\" formControlName=\"lastName\">\n                        </div>\n                    </div>\n                </div>\n                \n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" class=\"spinner-border text-primary\" role=\"status\"></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n            </accordion-group>\n        </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Ebiz Account List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\" *ngIf=\"tableHeader\">\n            <oepa-table tableId=\"accountSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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=\"SaveAccountBtn\"\n                [disabled]=\"!selectedAccount || inProgressMsg\"\n                (click)=\"save()\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'oepa-account-search-modal', template: "<div class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\">Advanced Ebiz Account Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\" [expanded]=\"openSearchCriteria\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    <div id=\"accountSearchCriteria\">\n                        <b>Ebiz Account Search Criteria</b>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"userUIDInput\">Ebiz User ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"userUIDInput\" formControlName=\"userID\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"firstNameInput\">First Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"firstNameInput\" formControlName=\"firstName\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"lastNameInput\">Last Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"lastNameInput\" formControlName=\"lastName\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" class=\"spinner-border text-primary\" role=\"status\"></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\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Ebiz Account List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\" *ngIf=\"tableHeader\">\n            <oepa-table tableId=\"accountSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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=\"SaveAccountBtn\"\n                [disabled]=\"!selectedAccount || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</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: AccountSearchService }], propDecorators: { searchURL: [{
                 type: Input,
                 args: ['searchURL']
@@ -2233,11 +2238,11 @@ class AccountSearchInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchInputComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i2$1.BsModalService }, { token: AccountSearchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccountSearchInputComponent, selector: "oepa-account-search-input", inputs: { group: "group", userID: "userID", field: "field", title: "title", searchURL: "searchURL", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { accountSelected: "accountSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #accountTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.userID || '') +\n            (' - ' + model.firstName + ' ' + model.lastName + (model.company ? ' (' + model.company + ')' : '')) }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\" class=\"spinner-border text-primary\" role=\"status\"></span>\n        <a id=\"AdvancedSearch\" href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onAccountSelect($event)\" [id]=\"componentId + '_AccountSearch'\"\n            [typeaheadItemTemplate]=\"accountTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Account\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccountSearchInputComponent, selector: "oepa-account-search-input", inputs: { group: "group", userID: "userID", field: "field", title: "title", searchURL: "searchURL", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { accountSelected: "accountSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #accountTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.userID || '') +\n            (' - ' + model.firstName + ' ' + model.lastName + (model.company ? ' (' + model.company + ')' : '')) }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\" [attr.for]=\"componentId + '_AccountSearch'\">\n        {{title}}\n        <span *ngIf=\"searching\" class=\"spinner-border text-primary\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\"></span>\n        <a id=\"AdvancedSearch\" href=\"javascript:void(0)\" (click)=\"advancedSearch()\" tabindex=\"0\" aria-label=\"Advanced Account Search\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onAccountSelect($event)\" [id]=\"componentId + '_AccountSearch'\"\n            [typeaheadItemTemplate]=\"accountTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Account\" [attr.aria-label]=\"title\" [attr.aria-describedby]=\"'accountSearchError'\">\n        <small id=\"accountSearchError\" class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\" role=\"alert\">\n    {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-account-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #accountTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.userID || '') +\n            (' - ' + model.firstName + ' ' + model.lastName + (model.company ? ' (' + model.company + ')' : '')) }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\" class=\"spinner-border text-primary\" role=\"status\"></span>\n        <a id=\"AdvancedSearch\" href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onAccountSelect($event)\" [id]=\"componentId + '_AccountSearch'\"\n            [typeaheadItemTemplate]=\"accountTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Account\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\n</div>" }]
+            args: [{ selector: 'oepa-account-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #accountTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.userID || '') +\n            (' - ' + model.firstName + ' ' + model.lastName + (model.company ? ' (' + model.company + ')' : '')) }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\" [attr.for]=\"componentId + '_AccountSearch'\">\n        {{title}}\n        <span *ngIf=\"searching\" class=\"spinner-border text-primary\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\"></span>\n        <a id=\"AdvancedSearch\" href=\"javascript:void(0)\" (click)=\"advancedSearch()\" tabindex=\"0\" aria-label=\"Advanced Account Search\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onAccountSelect($event)\" [id]=\"componentId + '_AccountSearch'\"\n            [typeaheadItemTemplate]=\"accountTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Account\" [attr.aria-label]=\"title\" [attr.aria-describedby]=\"'accountSearchError'\">\n        <small id=\"accountSearchError\" class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\" role=\"alert\">\n    {{errorMessage}}\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i2$1.BsModalService }, { type: AccountSearchService }], propDecorators: { group: [{
                 type: Input,
                 args: ['group']
@@ -2327,11 +2332,11 @@ class TableDataCellComponent {
         this.onActionClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableDataCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: { col: "col", row: "row", i: "i", r: "r", tableId: "tableId" }, outputs: { onCellClick: "onCellClick", onToggleRowSelection: "onToggleRowSelection", onSingleRowSelection: "onSingleRowSelection", onActionClick: "onActionClick" }, ngImport: i0, template: "                    <!-- Data Cell -->\n                    <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn && !col.inputColumn\">\n                        <!-- Template for popover 1 -->\n                        <ng-template #popoverTemplate>\n                          <div *ngIf=\"row.popover\">\n                            <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 1 icon (if specified) -->\n                        <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n                          [containerClass]=\"row.popover.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 2 -->\n                        <ng-template #popover2Template>\n                          <div *ngIf=\"row.popover2\">\n                            <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 2 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n                          [containerClass]=\"row.popover2.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 3 -->\n                        <ng-template #popover3Template>\n                          <div *ngIf=\"row.popover3\">\n                            <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 3 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n                          [containerClass]=\"row.popover3.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n                        </span>\n        \n        \n                        <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                      <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n        \n                        <!-- If col is hyperlink, display data as a hyperlink -->\n                        <a *ngIf=\"col.hyperlink && !(row|cellNotSelectable:col)\" href=\"javascript:void(0);\"\n                          (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </a>\n                        <!-- If col is NOT hyperlink, just display data -->\n                        <span *ngIf=\"!col.hyperlink || (row|cellNotSelectable:col)\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </span>\n                      </div>\n                      <!-- Input Cell -->\n                      <div *ngIf=\"col.inputColumn\">\n                        <cml-template [templateInfo]=\"row|cellInputComponent:col\"></cml-template>\n                      </div>\n                      <!-- Select Cell -->\n                      <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\"\n                          (change)=\"toggleRowSelection(row)\">\n                      </div>\n                      <!-- Single Select Cell -->\n                      <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\"\n                          [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\">\n                      </div>\n                      <!-- Action Button Cell -->\n                      <div *ngIf=\"col.actionColumn && row.actions\">\n                        <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\" (actionClicked)=\"actionClick($event)\"\n                          [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\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: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }, { kind: "pipe", type: OepaTableCellNotSelectablePipe, name: "cellNotSelectable" }, { kind: "pipe", type: OepaTableCellInputComponentPipe, name: "cellInputComponent" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: { col: "col", row: "row", i: "i", r: "r", tableId: "tableId" }, outputs: { onCellClick: "onCellClick", onToggleRowSelection: "onToggleRowSelection", onSingleRowSelection: "onSingleRowSelection", onActionClick: "onActionClick" }, ngImport: i0, template: "<!-- Data Cell -->\n                    <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn && !col.inputColumn\">\n                        <!-- Template for popover 1 -->\n                        <ng-template #popoverTemplate>\n                          <div *ngIf=\"row.popover\">\n                            <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 1 icon (if specified) -->\n                        <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n                          [containerClass]=\"row.popover.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 2 -->\n                        <ng-template #popover2Template>\n                          <div *ngIf=\"row.popover2\">\n                            <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 2 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n                          [containerClass]=\"row.popover2.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 3 -->\n                        <ng-template #popover3Template>\n                          <div *ngIf=\"row.popover3\">\n                            <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 3 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n                          [containerClass]=\"row.popover3.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n                        </span>\n        \n        \n                        <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                      <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n        \n                        <!-- If col is hyperlink, display data as a hyperlink -->\n                        <a *ngIf=\"col.hyperlink && !(row|cellNotSelectable:col)\" href=\"javascript:void(0);\"\n                          (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\"\n                          [attr.aria-label]=\"col.title || 'Link'\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </a>\n                        <!-- If col is NOT hyperlink, just display data -->\n                        <span *ngIf=\"!col.hyperlink || (row|cellNotSelectable:col)\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </span>\n                      </div>\n                      <!-- Input Cell -->\n                      <div *ngIf=\"col.inputColumn\">\n                        <cml-template [templateInfo]=\"row|cellInputComponent:col\"></cml-template>\n                      </div>\n                      <!-- Select Cell -->\n                      <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\"\n                          (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n                      </div>\n                      <!-- Single Select Cell -->\n                      <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\"\n                          [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n                      </div>\n                      <!-- Action Button Cell -->\n                      <div *ngIf=\"col.actionColumn && row.actions\">\n                        <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\" (actionClicked)=\"actionClick($event)\"\n                          [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\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: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }, { kind: "pipe", type: OepaTableCellNotSelectablePipe, name: "cellNotSelectable" }, { kind: "pipe", type: OepaTableCellInputComponentPipe, name: "cellInputComponent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableDataCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-table-data-cell', template: "                    <!-- Data Cell -->\n                    <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn && !col.inputColumn\">\n                        <!-- Template for popover 1 -->\n                        <ng-template #popoverTemplate>\n                          <div *ngIf=\"row.popover\">\n                            <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 1 icon (if specified) -->\n                        <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n                          [containerClass]=\"row.popover.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 2 -->\n                        <ng-template #popover2Template>\n                          <div *ngIf=\"row.popover2\">\n                            <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 2 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n                          [containerClass]=\"row.popover2.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 3 -->\n                        <ng-template #popover3Template>\n                          <div *ngIf=\"row.popover3\">\n                            <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 3 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n                          [containerClass]=\"row.popover3.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n                        </span>\n        \n        \n                        <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                      <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n        \n                        <!-- If col is hyperlink, display data as a hyperlink -->\n                        <a *ngIf=\"col.hyperlink && !(row|cellNotSelectable:col)\" href=\"javascript:void(0);\"\n                          (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </a>\n                        <!-- If col is NOT hyperlink, just display data -->\n                        <span *ngIf=\"!col.hyperlink || (row|cellNotSelectable:col)\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </span>\n                      </div>\n                      <!-- Input Cell -->\n                      <div *ngIf=\"col.inputColumn\">\n                        <cml-template [templateInfo]=\"row|cellInputComponent:col\"></cml-template>\n                      </div>\n                      <!-- Select Cell -->\n                      <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\"\n                          (change)=\"toggleRowSelection(row)\">\n                      </div>\n                      <!-- Single Select Cell -->\n                      <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\"\n                          [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\">\n                      </div>\n                      <!-- Action Button Cell -->\n                      <div *ngIf=\"col.actionColumn && row.actions\">\n                        <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\" (actionClicked)=\"actionClick($event)\"\n                          [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n                      </div>\n" }]
+            args: [{ selector: 'oepa-table-data-cell', template: "<!-- Data Cell -->\n                    <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn && !col.inputColumn\">\n                        <!-- Template for popover 1 -->\n                        <ng-template #popoverTemplate>\n                          <div *ngIf=\"row.popover\">\n                            <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 1 icon (if specified) -->\n                        <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n                          [containerClass]=\"row.popover.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 2 -->\n                        <ng-template #popover2Template>\n                          <div *ngIf=\"row.popover2\">\n                            <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 2 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n                          [containerClass]=\"row.popover2.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n                        </span>\n        \n                        <!-- Template for popover 3 -->\n                        <ng-template #popover3Template>\n                          <div *ngIf=\"row.popover3\">\n                            <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n                          </div>\n                        </ng-template>\n                        <!-- Popover 3 icon (if specified) -->\n                        <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\"\n                          [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n                          [containerClass]=\"row.popover3.containerClass\" placement=\"right\"\n                          [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n                          <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n                        </span>\n        \n        \n                        <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                      <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n        \n                        <!-- If col is hyperlink, display data as a hyperlink -->\n                        <a *ngIf=\"col.hyperlink && !(row|cellNotSelectable:col)\" href=\"javascript:void(0);\"\n                          (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\"\n                          [attr.aria-label]=\"col.title || 'Link'\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </a>\n                        <!-- If col is NOT hyperlink, just display data -->\n                        <span *ngIf=\"!col.hyperlink || (row|cellNotSelectable:col)\">\n                          <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                            <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                            <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\" /></span>\n                            {{row|cellValue:col}}\n                          </span>\n                          <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n                        </span>\n                      </div>\n                      <!-- Input Cell -->\n                      <div *ngIf=\"col.inputColumn\">\n                        <cml-template [templateInfo]=\"row|cellInputComponent:col\"></cml-template>\n                      </div>\n                      <!-- Select Cell -->\n                      <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\"\n                          (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n                      </div>\n                      <!-- Single Select Cell -->\n                      <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n                        <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\"\n                          [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n                      </div>\n                      <!-- Action Button Cell -->\n                      <div *ngIf=\"col.actionColumn && row.actions\">\n                        <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\" (actionClicked)=\"actionClick($event)\"\n                          [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n                      </div>\n" }]
         }], propDecorators: { col: [{
                 type: Input
             }], row: [{
@@ -2383,11 +2388,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()\">\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    {{column.title}}\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</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=\"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"] }] });
 }
 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()\">\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    {{column.title}}\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</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=\"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>" }]
         }], propDecorators: { column: [{
                 type: Input
             }], tableId: [{
@@ -2420,6 +2425,7 @@ class PTableComponent {
     visibleColumnCount = 0;
     allColumnCount = 0;
     exportVisibleOnly = false;
+    exportUnselectedRows = false;
     noFiltersSubject = new Subject();
     dataColumns = [];
     visibleColumns = [];
@@ -2456,6 +2462,7 @@ class PTableComponent {
             this.pageInfo.itemsPerPage = conf.rowsPerPage;
         }
         this.exportVisibleOnly = conf.exportVisibleOnly;
+        this.exportUnselectedRows = conf.exportUnselectedRows || false;
         this._config = conf;
     }
     get config() {
@@ -3021,13 +3028,13 @@ class PTableComponent {
             }
         });
         this.rows.slice();
-        // this.updateTable();
+        this.copySelectionState();
         this.rowSelected.emit(selectedRows);
     }
     toggleRowSelection(row) {
         const selectedRows = [];
         row.selected = !row.selected;
-        this._data.forEach((dr) => {
+        this.rows.forEach(dr => {
             if (row.privateId === dr.privateId) {
                 dr.selected = row.selected;
             }
@@ -3038,9 +3045,18 @@ class PTableComponent {
                 this.allRowsSelected = false;
             }
         });
-        this.updateTable();
+        this.copySelectionState();
         this.rowSelected.emit(selectedRows);
     }
+    copySelectionState() {
+        this.rows.forEach((r) => {
+            this._data.forEach(dr => {
+                if (dr.privateId === r.privateId) {
+                    dr.selected = r.selected;
+                }
+            });
+        });
+    }
     singleRowSelection(row) {
         const selectedRows = [];
         row.selected = !row.selected;
@@ -3065,6 +3081,10 @@ class PTableComponent {
         // this.dumpDetailRows();
         if (rows && rows.length) {
             rows.forEach((row) => {
+                if (!this.exportUnselectedRows && this.hasSelectableColumn() && !row.selected) {
+                    // skip unselected rows
+                    return;
+                }
                 result.push({
                     cells: this.simplifyCells(row.cells),
                     actions: row.actions,
@@ -3077,6 +3097,9 @@ class PTableComponent {
         }
         return result;
     }
+    hasSelectableColumn() {
+        return this.dataColumns.some((column) => column.selectColumn);
+    }
     simplifyCells(cells) {
         let simpleCells = [];
         if (cells && cells.length > 0) {
@@ -3142,6 +3165,9 @@ class PTableComponent {
     toggleExportVisibleOnly() {
         this.exportVisibleOnly = !this.exportVisibleOnly;
     }
+    toggleExportUnselectedRows() {
+        this.exportUnselectedRows = !this.exportUnselectedRows;
+    }
     exportToExcel() {
         const sortedData = this.sortData(this._data);
         const exportTable = this.gatherTableData(this.exportVisibleOnly ? this.rows : sortedData);
@@ -3180,11 +3206,11 @@ class PTableComponent {
         this.customBtn2Clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\">{{ paginationOn ?\n              'Show All Rows' : 'Restore Pagination'}}</button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" />\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n             [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n              {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}:host ::ng-deep .pagination-sm .page-item .page-link{min-width:44px;min-height:44px;padding:10px 16px;margin:4px}\n"], 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-p-table', template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\">{{ paginationOn ?\n              'Show All Rows' : 'Restore Pagination'}}</button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" />\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
+            args: [{ selector: 'oepa-p-table', template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n             [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n              {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}:host ::ng-deep .pagination-sm .page-item .page-link{min-width:44px;min-height:44px;padding:10px 16px;margin:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }, { type: i0.ElementRef }], propDecorators: { tableId: [{
                 type: Input
             }], allowEdit: [{
@@ -3227,6 +3253,10 @@ 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 = 'OepaDaterangepickerComponent';
     minDate;
     maxDate;
@@ -3274,11 +3304,11 @@ class DaterangepickerComponent {
         }
     }
     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" }, 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                  >\n          <div *ngIf=\"!isDisabled\" class=\"input-group-btn\">\n            <button class=\"btn btn-primary\" (click)=\"drp.toggle()\" [id]=\"componentId+'_ToggleBtn'\">\n              <i class=\"bi bi-calendar3\"></i>\n            </button>\n            <button class=\"btn btn-primary\" (click)=\"clearRange()\" [id]=\"componentId+'_ClearBtn'\">\n              <i class=\"bi bi-x-lg\"></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]" }] });
+    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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DaterangepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-daterangepicker', 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                  >\n          <div *ngIf=\"!isDisabled\" class=\"input-group-btn\">\n            <button class=\"btn btn-primary\" (click)=\"drp.toggle()\" [id]=\"componentId+'_ToggleBtn'\">\n              <i class=\"bi bi-calendar3\"></i>\n            </button>\n            <button class=\"btn btn-primary\" (click)=\"clearRange()\" [id]=\"componentId+'_ClearBtn'\">\n              <i class=\"bi bi-x-lg\"></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>" }]
+            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: [{
                 type: Input
             }], field: [{
@@ -3325,7 +3355,7 @@ class OEPAErrorMessageComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OEPAErrorMessageComponent, selector: "oepa-error-message", inputs: { errorMessage: "errorMessage" }, ngImport: i0, template: `
     <div class="card error-message">
       <div class="card-header">
-        <div><i class="fa fa-exclamation-circle "></i>&nbsp; <strong>ERROR</strong></div>
+        <div><i class="bi bi-exclamation-circle-fill "></i>&nbsp; <strong>ERROR</strong></div>
       </div>
       <div class="card-body">
         <div class="card-text">
@@ -3340,7 +3370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'oepa-error-message', template: `
     <div class="card error-message">
       <div class="card-header">
-        <div><i class="fa fa-exclamation-circle "></i>&nbsp; <strong>ERROR</strong></div>
+        <div><i class="bi bi-exclamation-circle-fill "></i>&nbsp; <strong>ERROR</strong></div>
       </div>
       <div class="card-body">
         <div class="card-text">
@@ -3528,11 +3558,11 @@ class FileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i1$1.OepaFileUtilService }, { token: i2$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileUploadComponent, selector: "oepa-file-upload", inputs: { group: "group", field: "field", label: "label", errorLabel: "errorLabel", blankForm: "blankForm", blankFormUrl: "blankFormUrl", showValidation: "showValidation", domain: "domain", attachment: "attachment", accept: "accept", removeAllowed: "removeAllowed", parserName: "parserName", parserReport: "parserReport" }, outputs: { fileUploaded: "fileUploaded", fileRemoved: "fileRemoved", download: "download" }, ngImport: i0, template: "<form [formGroup]=\"group\">\n  <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"javascript:void(0)\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [attr.accept]=\"accept ? accept : null\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" \n          type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n        <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div *ngIf=\"!parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachment && attachment.userFilename\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <div class=\"input-group\">\n        <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" [name]=\"componentId+'_DownloadFileLink'\" \n          class=\"form-control\">{{attachment.userFilename}}</a>\n        <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n        <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\" [name]=\"componentId+'_RemoveFileBtn'\"\n          (click)=\"removeFile()\" [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Attachment</button>\n        \n\t\t\t</span>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"], 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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileUploadComponent, selector: "oepa-file-upload", inputs: { group: "group", field: "field", label: "label", errorLabel: "errorLabel", blankForm: "blankForm", blankFormUrl: "blankFormUrl", showValidation: "showValidation", domain: "domain", attachment: "attachment", accept: "accept", removeAllowed: "removeAllowed", parserName: "parserName", parserReport: "parserReport" }, outputs: { fileUploaded: "fileUploaded", fileRemoved: "fileRemoved", download: "download" }, ngImport: i0, template: "<form [formGroup]=\"group\">\n  <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"javascript:void(0)\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [attr.accept]=\"accept ? accept : null\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" \n          type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n        <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" id=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div *ngIf=\"!parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachment && attachment.userFilename\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <div class=\"input-group\">\n        <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" [name]=\"componentId+'_DownloadFileLink'\" \n          class=\"form-control\">{{attachment.userFilename}}</a>\n        <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n        <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\" [name]=\"componentId+'_RemoveFileBtn'\"\n          (click)=\"removeFile()\" [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Attachment\">Remove Attachment</button>\n        \n\t\t\t</span>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"], 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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-file-upload', template: "<form [formGroup]=\"group\">\n  <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"javascript:void(0)\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [attr.accept]=\"accept ? accept : null\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" \n          type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n        <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div *ngIf=\"!parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachment && attachment.userFilename\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <div class=\"input-group\">\n        <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" [name]=\"componentId+'_DownloadFileLink'\" \n          class=\"form-control\">{{attachment.userFilename}}</a>\n        <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n        <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\" [name]=\"componentId+'_RemoveFileBtn'\"\n          (click)=\"removeFile()\" [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Attachment</button>\n        \n\t\t\t</span>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"] }]
+            args: [{ selector: 'oepa-file-upload', template: "<form [formGroup]=\"group\">\n  <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"javascript:void(0)\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [attr.accept]=\"accept ? accept : null\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" \n          type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n        <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" id=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div *ngIf=\"!parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachment && attachment.userFilename\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <div class=\"input-group\">\n        <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" [name]=\"componentId+'_DownloadFileLink'\" \n          class=\"form-control\">{{attachment.userFilename}}</a>\n        <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n        <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\" [name]=\"componentId+'_RemoveFileBtn'\"\n          (click)=\"removeFile()\" [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Attachment\">Remove Attachment</button>\n        \n\t\t\t</span>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaFileUtilService }, { type: i2$1.BsModalService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -3661,11 +3691,11 @@ class MultiFileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiFileUploadComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i1$1.OepaFileUtilService }, { token: i2$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiFileUploadComponent, selector: "oepa-multi-file-upload", inputs: { group: "group", field: "field", label: "label", errorLabel: "errorLabel", blankForm: "blankForm", blankFormUrl: "blankFormUrl", showValidation: "showValidation", domain: "domain", attachments: "attachments", removeAllowed: "removeAllowed" }, outputs: { fileUploaded: "fileUploaded", fileRemoved: "fileRemoved", download: "download" }, viewQueries: [{ propertyName: "myFileInput", first: true, predicate: ["myFileInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"group\">\n  <div class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input #myFileInput type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input  [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n          type=\"text\" class=\"form-control\" \n          [placeholder]=\"(!attachments || attachments.length === 0) ? 'No files uploaded' : (attachments.length + ' file(s) uploaded')\"\n          [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n          <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"!attachments[0] && parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div [hidden]=\"parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachments && attachments[0]\">\n    <div *ngFor=\"let attachment of attachments; let i=index;\">\n      <div class=\"form-group\">\n        <div class=\"input-group\">\n          <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink_'+i\" [name]=\"componentId+'_DownloadFileLink_'+i\"\n            class=\"form-control\">{{attachment.userFilename}}</a>\n          <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n            <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn_'+i\" [name]=\"componentId+'_RemoveFileBtn_'+i\"\n              (click)=\"removeFile(attachment)\" [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Attachment</button>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"], 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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiFileUploadComponent, selector: "oepa-multi-file-upload", inputs: { group: "group", field: "field", label: "label", errorLabel: "errorLabel", blankForm: "blankForm", blankFormUrl: "blankFormUrl", showValidation: "showValidation", domain: "domain", attachments: "attachments", removeAllowed: "removeAllowed" }, outputs: { fileUploaded: "fileUploaded", fileRemoved: "fileRemoved", download: "download" }, viewQueries: [{ propertyName: "myFileInput", first: true, predicate: ["myFileInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"group\">\n  <div class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input #myFileInput type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input  [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n          type=\"text\" class=\"form-control\" \n          [placeholder]=\"(!attachments || attachments.length === 0) ? 'No files uploaded' : (attachments.length + ' file(s) uploaded')\"\n          [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n          <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" id=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"!attachments[0] && parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div [hidden]=\"parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachments && attachments[0]\">\n    <div *ngFor=\"let attachment of attachments; let i=index;\">\n      <div class=\"form-group\">\n        <div class=\"input-group\">\n          <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink_'+i\" [name]=\"componentId+'_DownloadFileLink_'+i\"\n            class=\"form-control\">{{attachment.userFilename}}</a>\n          <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n            <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn_'+i\" [name]=\"componentId+'_RemoveFileBtn_'+i\"\n              (click)=\"removeFile(attachment)\" [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Attachment\">Remove Attachment</button>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"], 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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-multi-file-upload', template: "<form [formGroup]=\"group\">\n  <div class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input #myFileInput type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input  [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n          type=\"text\" class=\"form-control\" \n          [placeholder]=\"(!attachments || attachments.length === 0) ? 'No files uploaded' : (attachments.length + ' file(s) uploaded')\"\n          [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n          <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"!attachments[0] && parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div [hidden]=\"parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachments && attachments[0]\">\n    <div *ngFor=\"let attachment of attachments; let i=index;\">\n      <div class=\"form-group\">\n        <div class=\"input-group\">\n          <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink_'+i\" [name]=\"componentId+'_DownloadFileLink_'+i\"\n            class=\"form-control\">{{attachment.userFilename}}</a>\n          <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n            <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn_'+i\" [name]=\"componentId+'_RemoveFileBtn_'+i\"\n              (click)=\"removeFile(attachment)\" [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Attachment</button>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"] }]
+            args: [{ selector: 'oepa-multi-file-upload', template: "<form [formGroup]=\"group\">\n  <div class=\"form-group\">\n    <div>\n      <label *ngIf=\"label\">{{label}}</label>\n      <span *ngIf=\"blankFormUrl\">&nbsp;<a href=\"{{blankFormUrl}}\" target=\"_blank\">Blank Form</a></span>\n      <span *ngIf=\"blankForm\">&nbsp;<a href=\"\" (click)=\"downloadBlankForm()\">Blank Form</a></span>\n      <div class=\"form-group\">\n      <div class=\"input-group\">\n        <span class=\"input-group-btn\">\n          <label class=\"btn btn-primary btn-file\">\n            Browse&hellip; \n            <input #myFileInput type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n              [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n              [disabled]=\"group.controls[field].status === 'DISABLED'\">\n          </label>\n        </span>\n        <input  [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n          type=\"text\" class=\"form-control\" \n          [placeholder]=\"(!attachments || attachments.length === 0) ? 'No files uploaded' : (attachments.length + ' file(s) uploaded')\"\n          [id]=\"componentId+'_Input'\" [name]=\"componentId+'_Input'\" readonly>\n          <small class=\"invalid-feedback\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is required</small>\n      </div>\n      <!-- dummy input field for validation purposes -->\n      <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" id=\"field\"/>\n    </div>\n  </div>\n    <div *ngIf=\"uploadError\" class=\"alert alert-danger\" role=\"alert\">{{uploadError}}</div>\n    <div *ngIf=\"parserReport\">\n      <div *ngIf=\"!attachments[0] && parserReport.successful\" class=\"alert alert-info\" role=\"alert\">Spreadsheet was successfully parsed.</div>\n      <div [hidden]=\"parserReport.successful\" class=\"alert alert-danger\" role=\"alert\">\n        There are errors in the uploaded spreadsheet:\n        <ul>\n          <li *ngFor=\"let error of parserReport.errors\">{{error.message}}</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"attachments && attachments[0]\">\n    <div *ngFor=\"let attachment of attachments; let i=index;\">\n      <div class=\"form-group\">\n        <div class=\"input-group\">\n          <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink_'+i\" [name]=\"componentId+'_DownloadFileLink_'+i\"\n            class=\"form-control\">{{attachment.userFilename}}</a>\n          <span *ngIf=\"removeAllowed\" class=\"input-group-btn\">\n            <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn_'+i\" [name]=\"componentId+'_RemoveFileBtn_'+i\"\n              (click)=\"removeFile(attachment)\" [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Attachment\">Remove Attachment</button>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaFileUtilService }, { type: i2$1.BsModalService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -4329,11 +4359,11 @@ class OrganizationCreateModalComponent {
         return this.modalFormGroup.controls[name].hasError(field);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationCreateModalComponent, 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: OrganizationCreateModalComponent, selector: "oepa-organization-create-modal", outputs: { onOrganizationCreated: "onOrganizationCreated" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Create Organization</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n    <div *ngIf=\"!modalFormGroup\">\n        <div class=\"text-center\">Initializing...</div>\n        <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n    </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <label>Organization Type</label>\n        <select id=\"orgTypeSelect\" formControlName=\"orgType\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('orgType')\">\n            <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('orgType','required')\">Organization Type is required</small>\n\n        <label>Program</label>\n        <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\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\n        <label>Organization Name</label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"organizationName\" id=\"organizationName\" maxlength=\"40\"\n            [ngClass]=\"getModalFormGroupInvalidClass('organizationName')\">  \n          <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('organizationName','required')\">Organization is required</small>\n\n          <label>Phone Number</label>\n          <input type=\"text\" class=\"form-control\" [ngClass]=\"getModalFormGroupInvalidClass('phoneNumber')\"\n              placeholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" id=\"PhoneInput\" mask=\"(000) 000-0000\" minlength=\"10\">\n          <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','required')\">Phone Number is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','minlength')\">Please enter a valid phone number</small>\n          \n          <label>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\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" [cityMaxLength] = \"25\"></oepa-address>   \n\n        <label>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        \n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Matching Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"saveOrganizationAfterSearch()\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup?.invalid\"\n                (click)=\"saveOrganization()\">No Match, Save New Organization</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedOrganizationBtn\"\n                [disabled]=\"modalFormGroup?.invalid\"\n                (click)=\"saveSelectedOrganization()\">Use Selected Organization</button>\n            <button id=\"CancelOrganizationBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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.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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { 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: 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: OrganizationCreateModalComponent, selector: "oepa-organization-create-modal", outputs: { onOrganizationCreated: "onOrganizationCreated" }, ngImport: i0, template: "<div class=\"modal-header\" id=\"organizationCreateModalTitle\">\n    <h1 class=\"modal-title pull-left\">Create Organization</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationCreateModalTitle\" tabindex=\"-1\">\n    <div *ngIf=\"!modalFormGroup\">\n        <div class=\"text-center\">Initializing...</div>\n        <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n    </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <label for=\"orgTypeSelect\">Organization Type</label>\n        <select id=\"orgTypeSelect\" formControlName=\"orgType\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('orgType')\" aria-describedby=\"orgTypeError\">\n            <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"orgTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('orgType','required')\">Organization Type is required</small>\n\n        <label for=\"programSelect\">Program</label>\n        <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('program')\" aria-describedby=\"programError\">\n            <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n        </select>\n        <small id=\"programError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n\n        <label for=\"organizationName\">Organization Name</label>\n        <input type=\"text\" class=\"form-control\" formControlName=\"organizationName\" id=\"organizationName\" maxlength=\"40\"\n                [ngClass]=\"getModalFormGroupInvalidClass('organizationName')\" aria-describedby=\"organizationNameError\">\n        <small id=\"organizationNameError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('organizationName','required')\">Organization is required</small>\n\n        <label for=\"PhoneInput\">Phone Number</label>\n        <input type=\"text\" class=\"form-control\" [ngClass]=\"getModalFormGroupInvalidClass('phoneNumber')\"\n            placeholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" id=\"PhoneInput\" mask=\"(000) 000-0000\" minlength=\"10\" aria-describedby=\"phoneNumberError phoneNumberMinlengthError\">\n        <small id=\"phoneNumberError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','required')\">Phone Number is required</small>\n        <small id=\"phoneNumberMinlengthError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','minlength')\">Please enter a valid phone number</small>\n          \n                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\" aria-describedby=\"phoneNumberTypeError\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                </select>\n                <small id=\"phoneNumberTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" [cityMaxLength] = \"25\"></oepa-address>   \n\n        <label for=\"addressTypeSelect\">Address Type</label>\n        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\" [ngClass]=\"getModalFormGroupInvalidClass('addressType')\" aria-describedby=\"addressTypeError\">\n            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"addressTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n        \n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\">\n        <div class=\"card-header\">\n            <b>Matching Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\" [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"saveOrganizationAfterSearch()\" aria-label=\"Save new organization\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveOrganization()\" aria-label=\"No match, save new organization\">No Match, Save New Organization</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedOrganizationBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedOrganization()\" aria-label=\"Use selected organization\">Use Selected Organization</button>\n            <button id=\"CancelOrganizationBtn\" 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.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.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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { 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: 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: OrganizationCreateModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-organization-create-modal', template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Create Organization</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n    <div *ngIf=\"!modalFormGroup\">\n        <div class=\"text-center\">Initializing...</div>\n        <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n    </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <label>Organization Type</label>\n        <select id=\"orgTypeSelect\" formControlName=\"orgType\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('orgType')\">\n            <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('orgType','required')\">Organization Type is required</small>\n\n        <label>Program</label>\n        <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\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\n        <label>Organization Name</label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"organizationName\" id=\"organizationName\" maxlength=\"40\"\n            [ngClass]=\"getModalFormGroupInvalidClass('organizationName')\">  \n          <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('organizationName','required')\">Organization is required</small>\n\n          <label>Phone Number</label>\n          <input type=\"text\" class=\"form-control\" [ngClass]=\"getModalFormGroupInvalidClass('phoneNumber')\"\n              placeholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" id=\"PhoneInput\" mask=\"(000) 000-0000\" minlength=\"10\">\n          <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','required')\">Phone Number is required</small>\n          <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','minlength')\">Please enter a valid phone number</small>\n          \n          <label>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\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" [cityMaxLength] = \"25\"></oepa-address>   \n\n        <label>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        \n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Matching Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"saveOrganizationAfterSearch()\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup?.invalid\"\n                (click)=\"saveOrganization()\">No Match, Save New Organization</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedOrganizationBtn\"\n                [disabled]=\"modalFormGroup?.invalid\"\n                (click)=\"saveSelectedOrganization()\">Use Selected Organization</button>\n            <button id=\"CancelOrganizationBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'oepa-organization-create-modal', template: "<div class=\"modal-header\" id=\"organizationCreateModalTitle\">\n    <h1 class=\"modal-title pull-left\">Create Organization</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationCreateModalTitle\" tabindex=\"-1\">\n    <div *ngIf=\"!modalFormGroup\">\n        <div class=\"text-center\">Initializing...</div>\n        <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n    </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <label for=\"orgTypeSelect\">Organization Type</label>\n        <select id=\"orgTypeSelect\" formControlName=\"orgType\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('orgType')\" aria-describedby=\"orgTypeError\">\n            <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"orgTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('orgType','required')\">Organization Type is required</small>\n\n        <label for=\"programSelect\">Program</label>\n        <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('program')\" aria-describedby=\"programError\">\n            <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n        </select>\n        <small id=\"programError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n\n        <label for=\"organizationName\">Organization Name</label>\n        <input type=\"text\" class=\"form-control\" formControlName=\"organizationName\" id=\"organizationName\" maxlength=\"40\"\n                [ngClass]=\"getModalFormGroupInvalidClass('organizationName')\" aria-describedby=\"organizationNameError\">\n        <small id=\"organizationNameError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('organizationName','required')\">Organization is required</small>\n\n        <label for=\"PhoneInput\">Phone Number</label>\n        <input type=\"text\" class=\"form-control\" [ngClass]=\"getModalFormGroupInvalidClass('phoneNumber')\"\n            placeholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" id=\"PhoneInput\" mask=\"(000) 000-0000\" minlength=\"10\" aria-describedby=\"phoneNumberError phoneNumberMinlengthError\">\n        <small id=\"phoneNumberError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','required')\">Phone Number is required</small>\n        <small id=\"phoneNumberMinlengthError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','minlength')\">Please enter a valid phone number</small>\n          \n                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\" aria-describedby=\"phoneNumberTypeError\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                </select>\n                <small id=\"phoneNumberTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" [cityMaxLength] = \"25\"></oepa-address>   \n\n        <label for=\"addressTypeSelect\">Address Type</label>\n        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\" [ngClass]=\"getModalFormGroupInvalidClass('addressType')\" aria-describedby=\"addressTypeError\">\n            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"addressTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n        \n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\">\n        <div class=\"card-header\">\n            <b>Matching Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\" [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"saveOrganizationAfterSearch()\" aria-label=\"Save new organization\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveOrganization()\" aria-label=\"No match, save new organization\">No Match, Save New Organization</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedOrganizationBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedOrganization()\" aria-label=\"Use selected organization\">Use Selected Organization</button>\n            <button id=\"CancelOrganizationBtn\" 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: OepaFormsService }, { type: EntityService }], propDecorators: { onOrganizationCreated: [{
                 type: Output
             }] } });
@@ -4619,11 +4649,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\">\n    <h4 class=\"modal-title pull-left\">Advanced Organization Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n        <accordion>\n            <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n                <div accordion-heading>\n                    <div class=\"row\">\n                        <div class=\"col-sm-6\">\n                            <i class=\"float-xs-right bi\" id=\"organizationSearchCriteria\" name=\"organizationSearchCriteria\" \n                            [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                                <b>Organization Search Criteria</b>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"initializing\">\n                    <span class=\"spinner-border text-primary\" role=\"status\"></span>\n                    Initializing...\n                </div>\n                <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\">  \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label>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>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>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>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>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>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\"></oepa-address>\n                <div class=\"row\">\n                    <div class=\"col-md-4\">\n                        <div class=\"form-group\">\n                            <label>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>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>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>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\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                        <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n            </accordion-group>\n        </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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()\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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.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: "component", type: i6.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i6.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { 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=\"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"] }] });
 }
 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\">\n    <h4 class=\"modal-title pull-left\">Advanced Organization Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n        <accordion>\n            <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n                <div accordion-heading>\n                    <div class=\"row\">\n                        <div class=\"col-sm-6\">\n                            <i class=\"float-xs-right bi\" id=\"organizationSearchCriteria\" name=\"organizationSearchCriteria\" \n                            [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                                <b>Organization Search Criteria</b>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"initializing\">\n                    <span class=\"spinner-border text-primary\" role=\"status\"></span>\n                    Initializing...\n                </div>\n                <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\">  \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label>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>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>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>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>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>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\"></oepa-address>\n                <div class=\"row\">\n                    <div class=\"col-md-4\">\n                        <div class=\"form-group\">\n                            <label>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>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>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>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\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                        <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n            </accordion-group>\n        </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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()\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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=\"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>" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: i2$1.BsModalService }, { type: OepaFormsService }, { type: EntityService }], propDecorators: { onOrganizationSelected: [{
                 type: Output
             }] } });
@@ -4716,11 +4746,11 @@ class OrganizationSearchInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchInputComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i2$1.BsModalService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchInputComponent, selector: "oepa-organization-search-input", inputs: { group: "group", organizationID: "organizationID", field: "field", title: "title", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { organizationSelected: "organizationSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #organizationTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' + model.addressList[0].address.city\n                                     + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n        <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\" [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID'}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onOrganizationSelect($event)\" [id]=\"componentId + '_OrganizationSearch'\"\n            [typeaheadItemTemplate]=\"organizationTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Organization\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchInputComponent, selector: "oepa-organization-search-input", inputs: { group: "group", organizationID: "organizationID", field: "field", title: "title", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { organizationSelected: "organizationSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #organizationTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' + model.addressList[0].address.city\n                                     + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\" [attr.for]=\"componentId + '_OrganizationSearch'\" id=\"organizationSearchLabel\">\n        {{title}}\n        <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\" aria-live=\"polite\" aria-label=\"Searching\"></span></span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"advancedSearch()\" aria-label=\"Advanced Search\">Advanced Search</button>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\" [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID'}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onOrganizationSelect($event)\" [id]=\"componentId + '_OrganizationSearch'\"\n            [typeaheadItemTemplate]=\"organizationTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Organization\"\n            [attr.aria-labelledby]=\"'organizationSearchLabel'\" [attr.aria-describedby]=\"componentId + '_OrganizationSearchError'\">\n        <small id=\"{{componentId + '_OrganizationSearchError'}}\" class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">\n            {{title}} is required {{errorMessageAddendum}}\n        </small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-organization-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #organizationTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' + model.addressList[0].address.city\n                                     + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n        <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\" [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID'}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onOrganizationSelect($event)\" [id]=\"componentId + '_OrganizationSearch'\"\n            [typeaheadItemTemplate]=\"organizationTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Organization\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\n</div>" }]
+            args: [{ selector: 'oepa-organization-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #organizationTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' + model.addressList[0].address.city\n                                     + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\" [attr.for]=\"componentId + '_OrganizationSearch'\" id=\"organizationSearchLabel\">\n        {{title}}\n        <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\" aria-live=\"polite\" aria-label=\"Searching\"></span></span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"advancedSearch()\" aria-label=\"Advanced Search\">Advanced Search</button>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\" [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID'}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onOrganizationSelect($event)\" [id]=\"componentId + '_OrganizationSearch'\"\n            [typeaheadItemTemplate]=\"organizationTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Organization\"\n            [attr.aria-labelledby]=\"'organizationSearchLabel'\" [attr.aria-describedby]=\"componentId + '_OrganizationSearchError'\">\n        <small id=\"{{componentId + '_OrganizationSearchError'}}\" class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">\n            {{title}} is required {{errorMessageAddendum}}\n        </small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i2$1.BsModalService }, { type: EntityService }], propDecorators: { group: [{
                 type: Input,
                 args: ['group']
@@ -5038,11 +5068,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\">\n    <h4 class=\"modal-title pull-left\">Create Person</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n        <div *ngIf=\"!modalFormGroup\">\n            <div class=\"text-center\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label>Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\"\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>Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\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\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label>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\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label>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\">\n        <div class=\"card-header\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">           \n        <div class=\"alert alert-info\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></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()\">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()\">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()\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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 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"] }] });
 }
 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\">\n    <h4 class=\"modal-title pull-left\">Create Person</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n        <div *ngIf=\"!modalFormGroup\">\n            <div class=\"text-center\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label>Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\"\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>Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\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\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label>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\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label>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\">\n        <div class=\"card-header\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">           \n        <div class=\"alert alert-info\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></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()\">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()\">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()\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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 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>" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: OepaFormsService }, { type: EntityService }], propDecorators: { onPersonCreated: [{
                 type: Output
             }] } });
@@ -5334,11 +5364,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\">\n    <h4 class=\"modal-title pull-left\">Advanced Person Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n    <accordion>\n        <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n            <div accordion-heading>\n                <div class=\"row\">\n                    <div class=\"col-sm-6\">\n                        <i class=\"float-xs-right bi\" id=\"personSearchCriteria\" name=\"personSearchCriteria\" \n                        [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                            <b>Person Search Criteria</b>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"initializing\">\n                <span class=\"spinner-border text-primary\" role=\"status\"></span>\n                Initializing...\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label>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>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>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\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label>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>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\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label>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>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>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>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\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </accordion-group>\n    </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\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\"\n                [disabled]=\"!selectedPerson\"\n                (click)=\"save()\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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.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: "component", type: i6.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i6.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { 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=\"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"] }] });
 }
 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\">\n    <h4 class=\"modal-title pull-left\">Advanced Person Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n    <accordion>\n        <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n            <div accordion-heading>\n                <div class=\"row\">\n                    <div class=\"col-sm-6\">\n                        <i class=\"float-xs-right bi\" id=\"personSearchCriteria\" name=\"personSearchCriteria\" \n                        [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                            <b>Person Search Criteria</b>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"initializing\">\n                <span class=\"spinner-border text-primary\" role=\"status\"></span>\n                Initializing...\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label>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>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>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\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label>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>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\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label>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>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>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>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\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </accordion-group>\n    </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\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\"\n                [disabled]=\"!selectedPerson\"\n                (click)=\"save()\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">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=\"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>" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: i2$1.BsModalService }, { type: OepaFormsService }, { type: EntityService }], propDecorators: { onPersonSelected: [{
                 type: Output
             }] } });
@@ -5433,11 +5463,11 @@ class PersonSearchInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchInputComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i2$1.BsModalService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchInputComponent, selector: "oepa-person-search-input", inputs: { group: "group", personID: "personID", field: "field", title: "title", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { personSelected: "personSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n  <ng-template #personTemplate let-model=\"item\" let-index=\"index\">\n    <h5>{{ (model.firstName || '') + ' ' + (model.middleName || '') + ' ' + model.lastName +\n      (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n      model.addressList[0].address.city\n      + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n  </ng-template>\n  <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n    {{title}}\n    <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n    <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n  </label>\n  <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n    <input class=\"form-control\" type=\"search\"\n      [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n      [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n      (typeaheadOnSelect)=\"onPersonSelect($event)\" [id]=\"componentId + '_PersonSearch'\"\n      [typeaheadItemTemplate]=\"personTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Person\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n      {{errorMessageAddendum}}</small>\n  </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n  {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchInputComponent, selector: "oepa-person-search-input", inputs: { group: "group", personID: "personID", field: "field", title: "title", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { personSelected: "personSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n  <ng-template #personTemplate let-model=\"item\" let-index=\"index\">\n    <h5>{{ (model.firstName || '') + ' ' + (model.middleName || '') + ' ' + model.lastName +\n      (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n      model.addressList[0].address.city\n      + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n  </ng-template>\n  <label [attr.for]=\"componentId + '_PersonSearch'\" [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n    {{title}}\n    <span *ngIf=\"searching\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n    <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n  </label>\n  <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n    <input class=\"form-control\" type=\"search\"\n      [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n      [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n      (typeaheadOnSelect)=\"onPersonSelect($event)\" [id]=\"componentId + '_PersonSearch'\"\n      [typeaheadItemTemplate]=\"personTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Person\"\n      [attr.aria-describedby]=\"errorMessage ? componentId + '_PersonSearch_error' : null\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n      {{errorMessageAddendum}}</small>\n  </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\" role=\"alert\" aria-live=\"assertive\" [id]=\"componentId + '_PersonSearch_error'\">\n  {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-person-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n  <ng-template #personTemplate let-model=\"item\" let-index=\"index\">\n    <h5>{{ (model.firstName || '') + ' ' + (model.middleName || '') + ' ' + model.lastName +\n      (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n      model.addressList[0].address.city\n      + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n  </ng-template>\n  <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n    {{title}}\n    <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n    <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n  </label>\n  <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n    <input class=\"form-control\" type=\"search\"\n      [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n      [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n      (typeaheadOnSelect)=\"onPersonSelect($event)\" [id]=\"componentId + '_PersonSearch'\"\n      [typeaheadItemTemplate]=\"personTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Person\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n      {{errorMessageAddendum}}</small>\n  </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n  {{errorMessage}}\n</div>" }]
+            args: [{ selector: 'oepa-person-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n  <ng-template #personTemplate let-model=\"item\" let-index=\"index\">\n    <h5>{{ (model.firstName || '') + ' ' + (model.middleName || '') + ' ' + model.lastName +\n      (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n      model.addressList[0].address.city\n      + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n  </ng-template>\n  <label [attr.for]=\"componentId + '_PersonSearch'\" [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n    {{title}}\n    <span *ngIf=\"searching\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n    <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n  </label>\n  <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n    <input class=\"form-control\" type=\"search\"\n      [ngClass]=\"{'is-invalid':group.controls[field].status === 'INVALID', 'col-sm-8': rowLayout}\"\n      [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n      (typeaheadOnSelect)=\"onPersonSelect($event)\" [id]=\"componentId + '_PersonSearch'\"\n      [typeaheadItemTemplate]=\"personTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Person\"\n      [attr.aria-describedby]=\"errorMessage ? componentId + '_PersonSearch_error' : null\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n      {{errorMessageAddendum}}</small>\n  </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\" role=\"alert\" aria-live=\"assertive\" [id]=\"componentId + '_PersonSearch_error'\">\n  {{errorMessage}}\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i2$1.BsModalService }, { type: EntityService }], propDecorators: { group: [{
                 type: Input,
                 args: ['group']
@@ -5669,11 +5699,11 @@ class PlaceSearchModalComponent {
         return this.modalFormGroup.controls[name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceSearchModalComponent, 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: PlaceSearchModalComponent, selector: "oepa-place-search-modal", outputs: { onPlaceSelected: "onPlaceSelected" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Advanced Place Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n        <accordion>\n            <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n                <div accordion-heading>\n                    <div class=\"row\">\n                        <div class=\"col-sm-6\">\n                            <i class=\"float-xs-right bi\" id=\"placeSearchCriteria\" name=\"placeSearchCriteria\" \n                            [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                                <b>Place Search Criteria</b>\n                        </div>\n                    </div>\n                </div>\n                <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Place ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"placeIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Place Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"placeNameInput\" formControlName=\"name\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Secondary ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\"></oepa-address>\n                \n                <div class=\"row\">\n                    <div class=\"col-md-3\">\n                        <div class=\"form-group\">\n                            <label>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-6\">\n                        <div class=\"form-group\">\n                            <label>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-3\">\n                        <div class=\"form-group\">\n                            <label>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\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n            </accordion-group>\n        </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Place List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"placeSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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=\"SavePlaceBtn\"\n                [disabled]=\"!selectedPlace || inProgressMsg\"\n                (click)=\"save()\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">Cancel</button>\n        </div>\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: i6.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i6.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { 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: PlaceSearchModalComponent, selector: "oepa-place-search-modal", outputs: { onPlaceSelected: "onPlaceSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"placeSearchModalTitle\">Advanced Place 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=\"placeSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"placeSearchCriteria\">\n                    <mat-panel-title>\n                        Place Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\" aria-describedby=\"placeSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeIDInput\">Place ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"placeIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeNameInput\">Place Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"placeNameInput\" formControlName=\"name\">\n                        </div>\n                    </div>\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                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                \n                <div class=\"row\">\n                    <div class=\"col-md-3\">\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-6\">\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-3\">\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=\"placeListHeader\">\n            <b>Place List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of places\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"placeSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"placeListHeader\">\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=\"SavePlaceBtn\"\n                [disabled]=\"!selectedPlace || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: 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: PlaceSearchModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-place-search-modal', template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">Advanced Place Search</h4>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n        \n    </button>\n</div>\n<div class=\"modal-body\">\n        <accordion>\n            <accordion-group panelClass=\"panel-info\" #searchGroup [isOpen]=\"openSearchCriteria\">\n                <div accordion-heading>\n                    <div class=\"row\">\n                        <div class=\"col-sm-6\">\n                            <i class=\"float-xs-right bi\" id=\"placeSearchCriteria\" name=\"placeSearchCriteria\" \n                            [ngClass]=\"{'bi-chevron-down': searchGroup?.isOpen, 'bi-chevron-right': !searchGroup?.isOpen}\"></i>\n                                <b>Place Search Criteria</b>\n                        </div>\n                    </div>\n                </div>\n                <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Place ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"placeIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Place Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"placeNameInput\" formControlName=\"name\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label>Secondary ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\"></oepa-address>\n                \n                <div class=\"row\">\n                    <div class=\"col-md-3\">\n                        <div class=\"form-group\">\n                            <label>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-6\">\n                        <div class=\"form-group\">\n                            <label>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-3\">\n                        <div class=\"form-group\">\n                            <label>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\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\">Reset</button>\n                    </div>\n                </div>\n            </form>\n            </accordion-group>\n        </accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Place List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"placeSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\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=\"SavePlaceBtn\"\n                [disabled]=\"!selectedPlace || inProgressMsg\"\n                (click)=\"save()\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\">Cancel</button>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'oepa-place-search-modal', template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"placeSearchModalTitle\">Advanced Place 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=\"placeSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"placeSearchCriteria\">\n                    <mat-panel-title>\n                        Place Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\" aria-describedby=\"placeSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeIDInput\">Place ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"placeIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeNameInput\">Place Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"placeNameInput\" formControlName=\"name\">\n                        </div>\n                    </div>\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                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                \n                <div class=\"row\">\n                    <div class=\"col-md-3\">\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-6\">\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-3\">\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=\"placeListHeader\">\n            <b>Place List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of places\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"placeSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"placeListHeader\">\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=\"SavePlaceBtn\"\n                [disabled]=\"!selectedPlace || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</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: OepaFormsService }, { type: EntityService }], propDecorators: { onPlaceSelected: [{
                 type: Output
             }] } });
@@ -5765,11 +5795,11 @@ class PlaceSearchInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceSearchInputComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i2$1.BsModalService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PlaceSearchInputComponent, selector: "oepa-place-search-input", inputs: { group: "group", placeID: "placeID", field: "field", title: "title", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { placeSelected: "placeSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #placeTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n            model.addressList[0].address.city\n            + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n        <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onPlaceSelect($event)\" [id]=\"componentId + '_PlaceSearch'\"\n            [typeaheadItemTemplate]=\"placeTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Place\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PlaceSearchInputComponent, selector: "oepa-place-search-input", inputs: { group: "group", placeID: "placeID", field: "field", title: "title", errorMessageAddendum: "errorMessageAddendum", rowLayout: "rowLayout" }, outputs: { placeSelected: "placeSelected" }, ngImport: i0, template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #placeTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n            model.addressList[0].address.city\n            + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [attr.for]=\"componentId + '_PlaceSearch'\" [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n        <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onPlaceSelect($event)\" [id]=\"componentId + '_PlaceSearch'\"\n            [typeaheadItemTemplate]=\"placeTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Place\"\n            [attr.aria-describedby]=\"errorMessage ? componentId + '_PlaceSearch_error' : null\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\" role=\"alert\" aria-live=\"assertive\" [id]=\"componentId + '_PlaceSearch_error'\">\n    {{errorMessage}}\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: i6$1.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-place-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #placeTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n            model.addressList[0].address.city\n            + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n        <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onPlaceSelect($event)\" [id]=\"componentId + '_PlaceSearch'\"\n            [typeaheadItemTemplate]=\"placeTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Place\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\">\n    {{errorMessage}}\n</div>" }]
+            args: [{ selector: 'oepa-place-search-input', template: "<div [formGroup]=\"group\" class=\"form-group\" [ngClass]=\"{'row text-right': rowLayout}\">\n    <ng-template #placeTemplate let-model=\"item\" let-index=\"index\">\n        <h5>{{ (model.name || '') +\n            (model.addressList && model.addressList[0] ? (' - ' + model.addressList[0].address.addressLine1 + ', ' +\n            model.addressList[0].address.city\n            + model.addressList[0].address.state) : '') + ' (' + model.id + ')' }}</h5>\n    </ng-template>\n    <label [attr.for]=\"componentId + '_PlaceSearch'\" [ngClass]=\"{'col-sm-4 col-form-label': rowLayout}\">\n        {{title}}\n        <span *ngIf=\"searching\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n        <a href=\"javascript:void(0)\" (click)=\"advancedSearch()\">Advanced Search</a>\n    </label>\n    <div [ngClass]=\"{'col-sm-8': rowLayout}\">\n        <input class=\"form-control\" type=\"search\"\n            [ngClass]=\"{'is-invalid':group.controls[field]?.status === 'INVALID', 'col-sm-8': rowLayout}\"\n            [formControlName]=\"field\" [typeahead]=\"nameSource\" [typeaheadScrollable]=\"true\"\n            (typeaheadOnSelect)=\"onPlaceSelect($event)\" [id]=\"componentId + '_PlaceSearch'\"\n            [typeaheadItemTemplate]=\"placeTemplate\" [typeaheadMinLength]=\"3\" placeholder=\"Search Place\"\n            [attr.aria-describedby]=\"errorMessage ? componentId + '_PlaceSearch_error' : null\">\n        <small class=\"invalid-feedback\" *ngIf=\"group.controls[field]?.hasError('required')\">{{title}} is required\n            {{errorMessageAddendum}}</small>\n    </div>\n</div>\n<div *ngIf=\"errorMessage\" class=\"alert alert-danger\" role=\"alert\" aria-live=\"assertive\" [id]=\"componentId + '_PlaceSearch_error'\">\n    {{errorMessage}}\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i2$1.BsModalService }, { type: EntityService }], propDecorators: { group: [{
                 type: Input,
                 args: ['group']
@@ -5816,11 +5846,11 @@ class YesNoComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YesNoComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YesNoComponent, selector: "oepa-yes-no", inputs: { group: "group", field: "field", showValidation: "showValidation", disabled: "disabled" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\">\n      <label class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\" \n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">Yes</label>\n      <label class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\" [class.active]=\"group.controls[field].value === 'no'\" \n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">No</label>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>", 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.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$1.ButtonRadioDirective, selector: "[btnRadio]", inputs: ["btnRadio", "uncheckable", "value", "disabled"] }, { kind: "directive", type: i4$1.ButtonRadioGroupDirective, selector: "[btnRadioGroup]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YesNoComponent, selector: "oepa-yes-no", inputs: { group: "group", field: "field", showValidation: "showValidation", disabled: "disabled" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" role=\"radiogroup\">\n      <button type=\"button\" class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\"\n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'yes'\">Yes</button>\n      <button type=\"button\" class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\" [class.active]=\"group.controls[field].value === 'no'\"\n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'no'\">No</button>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>", 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.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$1.ButtonRadioDirective, selector: "[btnRadio]", inputs: ["btnRadio", "uncheckable", "value", "disabled"] }, { kind: "directive", type: i4$1.ButtonRadioGroupDirective, selector: "[btnRadioGroup]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YesNoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-yes-no', template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\">\n      <label class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\" \n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">Yes</label>\n      <label class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\" [class.active]=\"group.controls[field].value === 'no'\" \n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">No</label>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>" }]
+            args: [{ selector: 'oepa-yes-no', template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" role=\"radiogroup\">\n      <button type=\"button\" class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\"\n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'yes'\">Yes</button>\n      <button type=\"button\" class=\"btn\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\" [class.active]=\"group.controls[field].value === 'no'\"\n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'no'\">No</button>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -5854,11 +5884,11 @@ class YesNoBooleanComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YesNoBooleanComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YesNoBooleanComponent, selector: "oepa-yes-no-boolean", inputs: { group: "group", field: "field", showValidation: "showValidation", disabled: "disabled" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\">\n      <label class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'true'}\" [class.active]=\"group.controls[field].value === 'true'\" \n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">Yes</label>\n      <label class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'false'}\" [class.active]=\"group.controls[field].value === 'false'\" \n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">No</label>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>", 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.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$1.ButtonRadioDirective, selector: "[btnRadio]", inputs: ["btnRadio", "uncheckable", "value", "disabled"] }, { kind: "directive", type: i4$1.ButtonRadioGroupDirective, selector: "[btnRadioGroup]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YesNoBooleanComponent, selector: "oepa-yes-no-boolean", inputs: { group: "group", field: "field", showValidation: "showValidation", disabled: "disabled" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" role=\"radiogroup\">\n      <button type=\"button\" class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'true'}\" [class.active]=\"group.controls[field].value === 'true'\"\n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'true'\">Yes</button>\n      <button type=\"button\" class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'false'}\" [class.active]=\"group.controls[field].value === 'false'\"\n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'false'\">No</button>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>", 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.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$1.ButtonRadioDirective, selector: "[btnRadio]", inputs: ["btnRadio", "uncheckable", "value", "disabled"] }, { kind: "directive", type: i4$1.ButtonRadioGroupDirective, selector: "[btnRadioGroup]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YesNoBooleanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-yes-no-boolean', template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\">\n      <label class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'true'}\" [class.active]=\"group.controls[field].value === 'true'\" \n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">Yes</label>\n      <label class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'false'}\" [class.active]=\"group.controls[field].value === 'false'\" \n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\">No</label>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>" }]
+            args: [{ selector: 'oepa-yes-no-boolean', template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" role=\"radiogroup\">\n      <button type=\"button\" class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'true'}\" [class.active]=\"group.controls[field].value === 'true'\"\n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'true'\">Yes</button>\n      <button type=\"button\" class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'false'}\" [class.active]=\"group.controls[field].value === 'false'\"\n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled || disabled\" [disabled]=\"group.disabled || disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'false'\">No</button>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -5891,11 +5921,11 @@ class YesNoOtherInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YesNoOtherInputComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YesNoOtherInputComponent, selector: "oepa-yes-no-other-input", inputs: { group: "group", field: "field", showValidation: "showValidation" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\">\n      <label class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\" \n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\">Yes</label>\n      <label class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\"[class.active]=\"group.controls[field].value === 'no'\" \n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\"[class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\">No</label>\n        <label class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'unknown'}\" [class.active]=\"group.controls[field].value === 'unknown'\" \n        btnRadio=\"unknown\" [uncheckable]=\"true\" [id]=\"componentId+'_UnknownBtn'\"[class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\">Unknown</label>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>", 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.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$1.ButtonRadioDirective, selector: "[btnRadio]", inputs: ["btnRadio", "uncheckable", "value", "disabled"] }, { kind: "directive", type: i4$1.ButtonRadioGroupDirective, selector: "[btnRadioGroup]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: YesNoOtherInputComponent, selector: "oepa-yes-no-other-input", inputs: { group: "group", field: "field", showValidation: "showValidation" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n  <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" role=\"radiogroup\">\n    <button type=\"button\" class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\"\n      btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'yes'\">Yes</button>\n    <button type=\"button\" class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\" [class.active]=\"group.controls[field].value === 'no'\"\n      btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'no'\">No</button>\n    <button type=\"button\" class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'unknown'}\" [class.active]=\"group.controls[field].value === 'unknown'\"\n      btnRadio=\"unknown\" [uncheckable]=\"true\" [id]=\"componentId+'_UnknownBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'unknown'\">Unknown</button>\n  </div>\n</div>\n<small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>", 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.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$1.ButtonRadioDirective, selector: "[btnRadio]", inputs: ["btnRadio", "uncheckable", "value", "disabled"] }, { kind: "directive", type: i4$1.ButtonRadioGroupDirective, selector: "[btnRadioGroup]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: YesNoOtherInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-yes-no-other-input', template: "<div [formGroup]=\"group\">\n    <div class=\"btn-group\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\">\n      <label class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\" \n        btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\">Yes</label>\n      <label class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\"[class.active]=\"group.controls[field].value === 'no'\" \n        btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\"[class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\">No</label>\n        <label class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'unknown'}\" [class.active]=\"group.controls[field].value === 'unknown'\" \n        btnRadio=\"unknown\" [uncheckable]=\"true\" [id]=\"componentId+'_UnknownBtn'\"[class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\">Unknown</label>\n    </div>\n  </div>\n  <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>" }]
+            args: [{ selector: 'oepa-yes-no-other-input', template: "<div [formGroup]=\"group\">\n  <div class=\"btn-group\" style=\"background-color: #e9f0f5;\" btnRadioGroup [formControlName]=\"field\" [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\" role=\"radiogroup\">\n    <button type=\"button\" class=\"btn btn-yes\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'yes'}\" [class.active]=\"group.controls[field].value === 'yes'\"\n      btnRadio=\"yes\" [uncheckable]=\"true\" [id]=\"componentId+'_YesBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'yes'\">Yes</button>\n    <button type=\"button\" class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'no'}\" [class.active]=\"group.controls[field].value === 'no'\"\n      btnRadio=\"no\" [uncheckable]=\"true\" [id]=\"componentId+'_NoBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'no'\">No</button>\n    <button type=\"button\" class=\"btn btn-no\" [ngClass]=\"{'btn-primary': group.controls[field].value === 'unknown'}\" [class.active]=\"group.controls[field].value === 'unknown'\"\n      btnRadio=\"unknown\" [uncheckable]=\"true\" [id]=\"componentId+'_UnknownBtn'\" [class.disabled]=\"group.disabled\" [disabled]=\"group.disabled\" role=\"radio\" [attr.aria-checked]=\"group.controls[field].value === 'unknown'\">Unknown</button>\n  </div>\n</div>\n<small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.controls[field].status === 'INVALID' && !group.controls[field].hasError('answeredYes')\">Response is required</small>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -5915,6 +5945,7 @@ class DateInputModalComponent {
     dateLabel = 'Date';
     submitBtnLabel = 'Submit';
     cancelBtnLabel = 'Cancel';
+    bsConfig = undefined;
     onSubmit = new EventEmitter();
     onCancel = new EventEmitter();
     constructor(bsModalRef, fb) {
@@ -5944,11 +5975,11 @@ 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" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{title}}</h4>\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\">\n  <div class=\"row\">\n    <div *ngIf=\"infoText\" class=\"col-sm-12\">\n      <div class=\"alert alert-info\">\n        {{infoText}}\n      </div>\n    </div>\n    <div class=\"col-sm-12\">\n      <div>\n        <label>{{dateLabel}}</label>\n        <oepa-datepicker [group]=\"dateForm\" field=\"date\" [showValidation]=\"true\"></oepa-datepicker>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n    <div class=\"alert alert-danger\">{{errorMessage}}</div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"submit\" class=\"btn btn-primary mr-1\" (click)=\"submit()\" \n          [id]=\"'submitDateBtn'\" [disabled]=\"dateForm.status === 'INVALID'\">{{submitBtnLabel}}</button>\n  <button [id]=\"'cancelDateInputBtn'\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\">{{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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-date-input-modal', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{title}}</h4>\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\">\n  <div class=\"row\">\n    <div *ngIf=\"infoText\" class=\"col-sm-12\">\n      <div class=\"alert alert-info\">\n        {{infoText}}\n      </div>\n    </div>\n    <div class=\"col-sm-12\">\n      <div>\n        <label>{{dateLabel}}</label>\n        <oepa-datepicker [group]=\"dateForm\" field=\"date\" [showValidation]=\"true\"></oepa-datepicker>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n    <div class=\"alert alert-danger\">{{errorMessage}}</div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"submit\" class=\"btn btn-primary mr-1\" (click)=\"submit()\" \n          [id]=\"'submitDateBtn'\" [disabled]=\"dateForm.status === 'INVALID'\">{{submitBtnLabel}}</button>\n  <button [id]=\"'cancelDateInputBtn'\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n</div>\n" }]
+            args: [{ selector: 'oepa-date-input-modal', 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" }]
         }], ctorParameters: () => [{ type: i2$1.BsModalRef }, { type: i1$2.FormBuilder }], propDecorators: { title: [{
                 type: Input
             }], infoText: [{
@@ -5959,6 +5990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], cancelBtnLabel: [{
                 type: Input
+            }], bsConfig: [{
+                type: Input
             }], onSubmit: [{
                 type: Output
             }], onCancel: [{
@@ -5995,11 +6028,11 @@ class EbizAddressComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EbizAddressComponent, deps: [{ token: OepaAddressService }, { token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EbizAddressComponent, selector: "oepa-ebiz-address", inputs: { group: "group", showValidation: "showValidation", addressOneLabel: "addressOneLabel", addressTwoLabel: "addressTwoLabel", cityLabel: "cityLabel", stateLabel: "stateLabel", zipCodeLabel: "zipCodeLabel" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n  <div class=\"row\">\n      <div class=\"col-md-12\">\n          <div class=\"form-group\">\n              <label>{{addressOneLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine1'].status === 'INVALID'}\" \n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine1\" \n                [id]=\"componentId+'_Line1Input'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('required')\">{{addressOneLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n  </div>\n  <div class=\"row\">\n      <div class=\"col-md-12\">\n          <div class=\"form-group\">\n              <label>{{addressTwoLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine2'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine2\" \n                [id]=\"componentId+'_Line2Input'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n  </div>\n  <div class=\"row\">\n      <div class=\"col-md-6\">\n          <div class=\"form-group\">\n              <label>{{cityLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" \n                [id]=\"componentId+'_CityInput'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n      <div class=\"col-md-2\">\n          <div *ngIf=\"showStates\" class=\"form-group\">\n              <label>{{stateLabel}}</label>\n              <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\" \n                name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\">\n              <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n          </select>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n          </div>\n      </div>\n      <div class=\"col-md-4\">\n          <div class=\"form-group\">\n              <label>{{zipCodeLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['zip'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Zip Code\" formControlName=\"zip\" [id]=\"componentId+'_ZipInput'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('required')\">Zip code is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('pattern')\">Zip code must contain exactly 5 digits</small>\n          </div>\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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EbizAddressComponent, selector: "oepa-ebiz-address", inputs: { group: "group", showValidation: "showValidation", addressOneLabel: "addressOneLabel", addressTwoLabel: "addressTwoLabel", cityLabel: "cityLabel", stateLabel: "stateLabel", zipCodeLabel: "zipCodeLabel" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n  <div class=\"row\">\n      <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label [for]=\"componentId+'_Line1Input'\">{{addressOneLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine1'].status === 'INVALID'}\" \n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine1\" [id]=\"componentId+'_Line1Input'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('required')\">{{addressOneLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</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]=\"componentId+'_Line2Input'\">{{addressTwoLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine2'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine2\" [id]=\"componentId+'_Line2Input'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n  </div>\n  <div class=\"row\">\n      <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label [for]=\"componentId+'_CityInput'\">{{cityLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" [id]=\"componentId+'_CityInput'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n      <div class=\"col-md-2\">\n          <div *ngIf=\"showStates\" class=\"form-group\">\n            <label [for]=\"componentId+'_StateSelect'\">{{stateLabel}}</label>\n            <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\"\n                name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\" role=\"combobox\">\n              <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n          </select>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n          </div>\n      </div>\n      <div class=\"col-md-4\">\n          <div class=\"form-group\">\n            <label [for]=\"componentId+'_ZipInput'\">{{zipCodeLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['zip'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Zip Code\" formControlName=\"zip\" [id]=\"componentId+'_ZipInput'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('required')\">Zip code is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('pattern')\">Zip code must contain exactly 5 digits</small>\n          </div>\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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EbizAddressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-ebiz-address', template: "<div [formGroup]=\"group\">\n  <div class=\"row\">\n      <div class=\"col-md-12\">\n          <div class=\"form-group\">\n              <label>{{addressOneLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine1'].status === 'INVALID'}\" \n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine1\" \n                [id]=\"componentId+'_Line1Input'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('required')\">{{addressOneLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n  </div>\n  <div class=\"row\">\n      <div class=\"col-md-12\">\n          <div class=\"form-group\">\n              <label>{{addressTwoLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine2'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine2\" \n                [id]=\"componentId+'_Line2Input'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n  </div>\n  <div class=\"row\">\n      <div class=\"col-md-6\">\n          <div class=\"form-group\">\n              <label>{{cityLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" \n                [id]=\"componentId+'_CityInput'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n      <div class=\"col-md-2\">\n          <div *ngIf=\"showStates\" class=\"form-group\">\n              <label>{{stateLabel}}</label>\n              <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\" \n                name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\">\n              <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n          </select>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n          </div>\n      </div>\n      <div class=\"col-md-4\">\n          <div class=\"form-group\">\n              <label>{{zipCodeLabel}}</label>\n              <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['zip'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Zip Code\" formControlName=\"zip\" [id]=\"componentId+'_ZipInput'\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('required')\">Zip code is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('pattern')\">Zip code must contain exactly 5 digits</small>\n          </div>\n      </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'oepa-ebiz-address', template: "<div [formGroup]=\"group\">\n  <div class=\"row\">\n      <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label [for]=\"componentId+'_Line1Input'\">{{addressOneLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine1'].status === 'INVALID'}\" \n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine1\" [id]=\"componentId+'_Line1Input'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('required')\">{{addressOneLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine1'].hasError('maxlength')\">{{addressOneLabel}} has exceeded its maximum length</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]=\"componentId+'_Line2Input'\">{{addressTwoLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['addressLine2'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Address\" maxlength=\"40\" formControlName=\"addressLine2\" [id]=\"componentId+'_Line2Input'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('required')\">{{addressTwoLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['addressLine2'].hasError('maxlength')\">{{addressTwoLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n  </div>\n  <div class=\"row\">\n      <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label [for]=\"componentId+'_CityInput'\">{{cityLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['city'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"City\" maxlength=\"30\" formControlName=\"city\" [id]=\"componentId+'_CityInput'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('required')\">{{cityLabel}} is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['city'].hasError('maxlength')\">{{cityLabel}} has exceeded its maximum length</small>\n          </div>\n      </div>\n      <div class=\"col-md-2\">\n          <div *ngIf=\"showStates\" class=\"form-group\">\n            <label [for]=\"componentId+'_StateSelect'\">{{stateLabel}}</label>\n            <select class=\"form-select\" [ngClass]=\"{'is-invalid':showValidation && group.controls['state'].status === 'INVALID'}\"\n                name=\"AddressState\" formControlName=\"state\" [id]=\"componentId+'_StateSelect'\" role=\"combobox\">\n              <option *ngFor=\"let s of usStates\" [ngValue]=\"s\">{{s}}</option>\n          </select>\n          <small class=\"invalid-feedback\" *ngIf=\"group.controls['state'].hasError('required')\">State is required</small>\n          </div>\n      </div>\n      <div class=\"col-md-4\">\n          <div class=\"form-group\">\n            <label [for]=\"componentId+'_ZipInput'\">{{zipCodeLabel}}</label>\n            <input class=\"form-control\" [ngClass]=\"{'is-invalid':showValidation && group.controls['zip'].status === 'INVALID'}\"\n                type=\"text\" placeholder=\"Zip Code\" formControlName=\"zip\" [id]=\"componentId+'_ZipInput'\" role=\"textbox\">\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('required')\">Zip code is required</small>\n              <small class=\"invalid-feedback\" *ngIf=\"group.controls['zip'].hasError('pattern')\">Zip code must contain exactly 5 digits</small>\n          </div>\n      </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: OepaAddressService }, { type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], showValidation: [{
@@ -6243,11 +6276,11 @@ class EdocAttachmentComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EdocAttachmentComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i1$1.OepaFileUtilService }, { token: EdocAttachmentService }, { token: i2$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EdocAttachmentComponent, selector: "oepa-edoc-attachment", inputs: { attachment: "attachment", group: "group", field: "field", label: "label", errorLabel: "errorLabel", showValidation: "showValidation", accept: "accept", removeAllowed: "removeAllowed", okToDelete: "okToDelete" }, outputs: { fileUploaded: "fileUploaded", fileRemoved: "fileRemoved", download: "download" }, ngImport: i0, template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n        <div>\n            <label *ngIf=\"label\">{{label}}</label>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <span *ngIf=\"!busy\" class=\"input-group-btn\">\n                        <label class=\"btn btn-primary btn-file\">\n                            Browse&hellip;\n                            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\"\n                                [id]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                                [attr.accept]=\"accept ? accept : null\"\n                                [disabled]=\"group.controls[field].status === 'DISABLED'\">\n                        </label>\n                    </span>\n                    <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                    <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n                        type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" readonly>\n                    <small class=\"invalid-feedback\"\n                        *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is\n                        required</small>\n                </div>\n                <!-- dummy input field for validation purposes -->\n                <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" />\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"attachment && attachment.userFilename\">\n        <div>\n            <label *ngIf=\"label\">{{label}}</label>\n            <div class=\"input-group\">\n                <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" \n                    class=\"form-control\">{{attachment.userFilename}}</a>\n                <span *ngIf=\"removeAllowed && !busy\" class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\"\n                        (click)=\"removeFile()\"\n                        [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Attachment</button>\n                </span>\n                <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMsg\" class=\"alert alert-danger\" role=\"alert\">{{errorMsg}}</div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EdocAttachmentComponent, selector: "oepa-edoc-attachment", inputs: { attachment: "attachment", group: "group", field: "field", label: "label", errorLabel: "errorLabel", showValidation: "showValidation", accept: "accept", removeAllowed: "removeAllowed", okToDelete: "okToDelete" }, outputs: { fileUploaded: "fileUploaded", fileRemoved: "fileRemoved", download: "download" }, ngImport: i0, template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n        <div>\n            <label *ngIf=\"label\" [for]=\"componentId+'_Input'\">{{label}}</label>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <span *ngIf=\"!busy\" class=\"input-group-btn\">\n                        <label class=\"btn btn-primary btn-file\">\n                            Browse&hellip;\n                            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\"\n                                [id]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                                [attr.accept]=\"accept ? accept : null\"\n                                [disabled]=\"group.controls[field].status === 'DISABLED'\"\n                                aria-label=\"Browse for file\">\n                        </label>\n                    </span>\n                    <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                    <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n                        type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" readonly>\n                    <small class=\"invalid-feedback\"\n                        *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is\n                        required</small>\n                </div>\n                <!-- dummy input field for validation purposes -->\n                <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" aria-hidden=\"true\" />\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"attachment && attachment.userFilename\">\n        <div>\n            <label *ngIf=\"label\" [for]=\"componentId+'_DownloadFileLink'\">{{label}}</label>\n            <div class=\"input-group\">\n                <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" \n                    class=\"form-control\">{{attachment.userFilename}}</a>\n                <span *ngIf=\"removeAllowed && !busy\" class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\"\n                        (click)=\"removeFile()\"\n                        [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Attachment\">Remove Attachment</button>\n                </span>\n                <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMsg\" class=\"alert alert-danger\" role=\"alert\">{{errorMsg}}</div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EdocAttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-edoc-attachment', template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n        <div>\n            <label *ngIf=\"label\">{{label}}</label>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <span *ngIf=\"!busy\" class=\"input-group-btn\">\n                        <label class=\"btn btn-primary btn-file\">\n                            Browse&hellip;\n                            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\"\n                                [id]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                                [attr.accept]=\"accept ? accept : null\"\n                                [disabled]=\"group.controls[field].status === 'DISABLED'\">\n                        </label>\n                    </span>\n                    <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                    <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n                        type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" readonly>\n                    <small class=\"invalid-feedback\"\n                        *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is\n                        required</small>\n                </div>\n                <!-- dummy input field for validation purposes -->\n                <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" />\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"attachment && attachment.userFilename\">\n        <div>\n            <label *ngIf=\"label\">{{label}}</label>\n            <div class=\"input-group\">\n                <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" \n                    class=\"form-control\">{{attachment.userFilename}}</a>\n                <span *ngIf=\"removeAllowed && !busy\" class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\"\n                        (click)=\"removeFile()\"\n                        [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Attachment</button>\n                </span>\n                <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMsg\" class=\"alert alert-danger\" role=\"alert\">{{errorMsg}}</div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"] }]
+            args: [{ selector: 'oepa-edoc-attachment', template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!attachment || !attachment.userFilename\" class=\"form-group\">\n        <div>\n            <label *ngIf=\"label\" [for]=\"componentId+'_Input'\">{{label}}</label>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <span *ngIf=\"!busy\" class=\"input-group-btn\">\n                        <label class=\"btn btn-primary btn-file\">\n                            Browse&hellip;\n                            <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\"\n                                [id]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                                [attr.accept]=\"accept ? accept : null\"\n                                [disabled]=\"group.controls[field].status === 'DISABLED'\"\n                                aria-label=\"Browse for file\">\n                        </label>\n                    </span>\n                    <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n                    <input [ngClass]=\"{'is-invalid':showValidation && group.controls[field].status === 'INVALID'}\"\n                        type=\"text\" class=\"form-control\" placeholder=\"No file chosen\" [id]=\"componentId+'_Input'\" readonly>\n                    <small class=\"invalid-feedback\"\n                        *ngIf=\"showValidation && group.controls[field].status === 'INVALID'\">{{errorLabel || label}} is\n                        required</small>\n                </div>\n                <!-- dummy input field for validation purposes -->\n                <input type=\"text\" [hidden]=\"true\" [formControlName]=\"field\" aria-hidden=\"true\" />\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"attachment && attachment.userFilename\">\n        <div>\n            <label *ngIf=\"label\" [for]=\"componentId+'_DownloadFileLink'\">{{label}}</label>\n            <div class=\"input-group\">\n                <a (click)=\"downloadFile(attachment)\" [id]=\"componentId+'_DownloadFileLink'\" \n                    class=\"form-control\">{{attachment.userFilename}}</a>\n                <span *ngIf=\"removeAllowed && !busy\" class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveFileBtn'\"\n                        (click)=\"removeFile()\"\n                        [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Attachment\">Remove Attachment</button>\n                </span>\n                <span *ngIf=\"busy\"> <span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMsg\" class=\"alert alert-danger\" role=\"alert\">{{errorMsg}}</div>\n</form>", styles: ["a:hover{cursor:pointer}a{color:#3399f3!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaFileUtilService }, { type: EdocAttachmentService }, { type: i2$1.BsModalService }], propDecorators: { attachment: [{
                 type: Input
             }], group: [{
@@ -6618,7 +6651,7 @@ class DualListBoxComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DualListBoxComponent),
                 multi: true
-            }], ngImport: i0, template: "<div class=\"row\" [formGroup]=\"listBoxForm\">\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <h4 class=\"text-center vertical-spacing-5\">{{availableText}}</h4>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{availableFilterPlaceholder}}\"\n               formControlName=\"availableSearchInput\" />\n        <select class=\"form-control list-box\" formControlName=\"availableListBox\" multiple [size]=\"listSize\">\n            <option *ngFor=\"let item of availableItems | arrayFilter:['text', searchTermAvailable] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                    [value]=\"item?.value\"\n                    [id]=\"item?.value+'Option'\"\n                    (dblclick)=\"moveAvailableItemToSelected(item)\">{{item?.text}}</option>\n        </select>\n    </div>\n    <div class=\"col-md-2 col-lg-2 col-sm-12 center-block text-center\">\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atr top80 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToSelected()\">\n            <span class=\"bi bi-list-task\"></span>\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 str vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !availableListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneBtn'\"\n                (click)=\"moveMarkedAvailableItemsToSelected()\">\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 stl vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !selectedListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneLeftBtn'\"\n                (click)=\"moveMarkedSelectedItemsToAvailable()\">\n            <span class=\"bi bi-chevron-left\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atl bottom10 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllLeftBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToAvailable()\">\n            <span class=\"bi bi-chevron-left\"></span>\n            <span class=\"bi bi-list-task\"></span>\n        </button>\n    </div>\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <h4 class=\"text-center vertical-spacing-5\">{{selectedText}}</h4>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{selectedFilterPlaceholder}}\"\n               formControlName=\"selectedSearchInput\" />\n        <select class=\"form-control list-box\" formControlName=\"selectedListBox\" multiple [size]=\"listSize\">\n            <option *ngFor=\"let item of selectedItems | arrayFilter:['text', searchTermSelected] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                    [value]=\"item?.value\"\n                    (dblclick)=\"moveSelectedItemToAvailable(item)\">{{item?.text}}</option>\n        </select>\n    </div>\n</div>\n", styles: [".list-box{min-height:200px;width:100%}.top100{margin-top:100px}.top80{margin-top:80px}.bottom10{margin-bottom:10px}.vertical-spacing-5{margin-top:5px;margin-bottom:5px}.center-block{min-height:50px}@media only screen and (max-width : 768px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (min-width : 768px) and (max-width : 992px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (max-width : 480px){.sm-spacing{margin-top:10px;margin-bottom:10px}}\n"], 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.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.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[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: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }, { kind: "pipe", type: ArraySortPipe, name: "arraySort" }] });
+            }], ngImport: i0, template: "<div class=\"row\" [formGroup]=\"listBoxForm\">\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <span class=\"text-center vertical-spacing-5\" id=\"availableListLabel\">{{availableText}}</span>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{availableFilterPlaceholder}}\"\n               formControlName=\"availableSearchInput\"\n               aria-label=\"Filter available items\"\n               role=\"searchbox\"\n        />\n        <select class=\"form-control list-box\" formControlName=\"availableListBox\" multiple [size]=\"listSize\"\n            aria-labelledby=\"availableListLabel\"\n            aria-multiselectable=\"true\"\n            role=\"listbox\"\n        >\n            <option *ngFor=\"let item of availableItems | arrayFilter:['text', searchTermAvailable] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                [value]=\"item?.value\"\n                [id]=\"item?.value+'Option'\"\n                (dblclick)=\"moveAvailableItemToSelected(item)\"\n                role=\"option\"\n            >{{item?.text}}</option>\n        </select>\n    </div>\n    <div class=\"col-md-2 col-lg-2 col-sm-12 center-block text-center\">\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atr top80 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToSelected()\" aria-label=\"Move All Items To Selected\">\n            <span class=\"bi bi-list-task\"></span>\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 str vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !availableListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneBtn'\"\n                (click)=\"moveMarkedAvailableItemsToSelected()\" aria-label=\"Move Marked Available Items To Selected\">\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 stl vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !selectedListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneLeftBtn'\"\n                (click)=\"moveMarkedSelectedItemsToAvailable()\" aria-label=\"Move Marked Selected Items To Available\">\n            <span class=\"bi bi-chevron-left\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atl bottom10 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllLeftBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToAvailable()\" aria-label=\"Move All Items To Available\">\n            <span class=\"bi bi-chevron-left\"></span>\n            <span class=\"bi bi-list-task\"></span>\n        </button>\n    </div>\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <span class=\"text-center vertical-spacing-5\" id=\"selectedListLabel\">{{selectedText}}</span>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{selectedFilterPlaceholder}}\"\n               formControlName=\"selectedSearchInput\"\n               aria-label=\"Filter selected items\"\n               role=\"searchbox\"\n        />\n        <select class=\"form-control list-box\" formControlName=\"selectedListBox\" multiple [size]=\"listSize\"\n            aria-labelledby=\"selectedListLabel\"\n            aria-multiselectable=\"true\"\n            role=\"listbox\"\n        >\n            <option *ngFor=\"let item of selectedItems | arrayFilter:['text', searchTermSelected] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                [value]=\"item?.value\"\n                (dblclick)=\"moveSelectedItemToAvailable(item)\"\n                role=\"option\"\n            >{{item?.text}}</option>\n        </select>\n    </div>\n</div>\n", styles: [".list-box{min-height:200px;width:100%}.top100{margin-top:100px}.top80{margin-top:80px}.bottom10{margin-bottom:10px}.vertical-spacing-5{margin-top:5px;margin-bottom:5px}.center-block{min-height:50px}@media only screen and (max-width : 768px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (min-width : 768px) and (max-width : 992px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (max-width : 480px){.sm-spacing{margin-top:10px;margin-bottom:10px}}\n"], 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.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.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[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: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }, { kind: "pipe", type: ArraySortPipe, name: "arraySort" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DualListBoxComponent, decorators: [{
             type: Component,
@@ -6626,7 +6659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DualListBoxComponent),
                             multi: true
-                        }], template: "<div class=\"row\" [formGroup]=\"listBoxForm\">\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <h4 class=\"text-center vertical-spacing-5\">{{availableText}}</h4>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{availableFilterPlaceholder}}\"\n               formControlName=\"availableSearchInput\" />\n        <select class=\"form-control list-box\" formControlName=\"availableListBox\" multiple [size]=\"listSize\">\n            <option *ngFor=\"let item of availableItems | arrayFilter:['text', searchTermAvailable] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                    [value]=\"item?.value\"\n                    [id]=\"item?.value+'Option'\"\n                    (dblclick)=\"moveAvailableItemToSelected(item)\">{{item?.text}}</option>\n        </select>\n    </div>\n    <div class=\"col-md-2 col-lg-2 col-sm-12 center-block text-center\">\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atr top80 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToSelected()\">\n            <span class=\"bi bi-list-task\"></span>\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 str vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !availableListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneBtn'\"\n                (click)=\"moveMarkedAvailableItemsToSelected()\">\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 stl vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !selectedListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneLeftBtn'\"\n                (click)=\"moveMarkedSelectedItemsToAvailable()\">\n            <span class=\"bi bi-chevron-left\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atl bottom10 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllLeftBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToAvailable()\">\n            <span class=\"bi bi-chevron-left\"></span>\n            <span class=\"bi bi-list-task\"></span>\n        </button>\n    </div>\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <h4 class=\"text-center vertical-spacing-5\">{{selectedText}}</h4>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{selectedFilterPlaceholder}}\"\n               formControlName=\"selectedSearchInput\" />\n        <select class=\"form-control list-box\" formControlName=\"selectedListBox\" multiple [size]=\"listSize\">\n            <option *ngFor=\"let item of selectedItems | arrayFilter:['text', searchTermSelected] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                    [value]=\"item?.value\"\n                    (dblclick)=\"moveSelectedItemToAvailable(item)\">{{item?.text}}</option>\n        </select>\n    </div>\n</div>\n", styles: [".list-box{min-height:200px;width:100%}.top100{margin-top:100px}.top80{margin-top:80px}.bottom10{margin-bottom:10px}.vertical-spacing-5{margin-top:5px;margin-bottom:5px}.center-block{min-height:50px}@media only screen and (max-width : 768px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (min-width : 768px) and (max-width : 992px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (max-width : 480px){.sm-spacing{margin-top:10px;margin-bottom:10px}}\n"] }]
+                        }], template: "<div class=\"row\" [formGroup]=\"listBoxForm\">\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <span class=\"text-center vertical-spacing-5\" id=\"availableListLabel\">{{availableText}}</span>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{availableFilterPlaceholder}}\"\n               formControlName=\"availableSearchInput\"\n               aria-label=\"Filter available items\"\n               role=\"searchbox\"\n        />\n        <select class=\"form-control list-box\" formControlName=\"availableListBox\" multiple [size]=\"listSize\"\n            aria-labelledby=\"availableListLabel\"\n            aria-multiselectable=\"true\"\n            role=\"listbox\"\n        >\n            <option *ngFor=\"let item of availableItems | arrayFilter:['text', searchTermAvailable] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                [value]=\"item?.value\"\n                [id]=\"item?.value+'Option'\"\n                (dblclick)=\"moveAvailableItemToSelected(item)\"\n                role=\"option\"\n            >{{item?.text}}</option>\n        </select>\n    </div>\n    <div class=\"col-md-2 col-lg-2 col-sm-12 center-block text-center\">\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atr top80 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToSelected()\" aria-label=\"Move All Items To Selected\">\n            <span class=\"bi bi-list-task\"></span>\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 str vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !availableListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneBtn'\"\n                (click)=\"moveMarkedAvailableItemsToSelected()\" aria-label=\"Move Marked Available Items To Selected\">\n            <span class=\"bi bi-chevron-right\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 stl vertical-spacing-5 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled || !selectedListBoxControl.value?.length\"\n                [id]=\"idField+'MoveOneLeftBtn'\"\n                (click)=\"moveMarkedSelectedItemsToAvailable()\" aria-label=\"Move Marked Selected Items To Available\">\n            <span class=\"bi bi-chevron-left\"></span>\n        </button>\n        <button type=\"button\"\n                class=\"btn btn-primary col-md-8 col-md-offset-2 atl bottom10 sm-spacing\"\n                [disabled]=\"listBoxForm.disabled\"\n                [id]=\"idField+'MoveAllLeftBtn'\"\n                *ngIf=\"moveAllButton\" (click)=\"moveAllItemsToAvailable()\" aria-label=\"Move All Items To Available\">\n            <span class=\"bi bi-chevron-left\"></span>\n            <span class=\"bi bi-list-task\"></span>\n        </button>\n    </div>\n    <div class=\"col-md-5 col-lg-5 col-sm-12\">\n        <span class=\"text-center vertical-spacing-5\" id=\"selectedListLabel\">{{selectedText}}</span>\n        <input type=\"text\" class=\"form-control vertical-spacing-5\" placeholder=\"{{selectedFilterPlaceholder}}\"\n               formControlName=\"selectedSearchInput\"\n               aria-label=\"Filter selected items\"\n               role=\"searchbox\"\n        />\n        <select class=\"form-control list-box\" formControlName=\"selectedListBox\" multiple [size]=\"listSize\"\n            aria-labelledby=\"selectedListLabel\"\n            aria-multiselectable=\"true\"\n            role=\"listbox\"\n        >\n            <option *ngFor=\"let item of selectedItems | arrayFilter:['text', searchTermSelected] | arraySort:[sortBy, 'ASC'];trackBy:trackByValue\"\n                [value]=\"item?.value\"\n                (dblclick)=\"moveSelectedItemToAvailable(item)\"\n                role=\"option\"\n            >{{item?.text}}</option>\n        </select>\n    </div>\n</div>\n", styles: [".list-box{min-height:200px;width:100%}.top100{margin-top:100px}.top80{margin-top:80px}.bottom10{margin-bottom:10px}.vertical-spacing-5{margin-top:5px;margin-bottom:5px}.center-block{min-height:50px}@media only screen and (max-width : 768px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (min-width : 768px) and (max-width : 992px){.sm-spacing{margin-top:10px;margin-bottom:10px}}@media only screen and (max-width : 480px){.sm-spacing{margin-top:10px;margin-bottom:10px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$2.ToastrService }], propDecorators: { available: [{
                 type: Input
             }], selected: [{
@@ -6774,11 +6807,11 @@ class LynxImageUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LynxImageUploadComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i2$1.BsModalService }, { token: i1$1.OepaFileUtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LynxImageUploadComponent, selector: "oepa-lynx-image-upload", inputs: { group: "group", field: "field", projectID: "projectID", label: "label", errorLabel: "errorLabel", image: "image", showValidation: "showValidation", required: "required", accept: "accept", imageBlobUrl: "imageBlobUrl" }, outputs: { onImageUpload: "onImageUpload", onImageRemove: "onImageRemove", onImageDownload: "onImageDownload" }, ngImport: i0, template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!imageBlobUrl\">\n            <label class=\"btn btn-primary btn-file\">\n                    Browse&hellip;\n                    <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n                      [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                      [attr.accept]=\"accept ? accept : null\"\n                      [disabled]=\"group.controls[field].status === 'DISABLED'\">\n                  </label>\n            <span>&nbsp;Click the button on the left to upload an image from your computer.</span>\n    </div>\n    <div *ngIf=\"imageBlobUrl\">\n        <div class=\"row\">\n            <div class=\"col-sm-12\">\n                <img [src]=\"imageBlobUrl\" [id]=\"componentId+'_Image'\" width=\"200\">\n            </div>\n            <br/>\n            <div class=\"col-sm-12\">\n                <label>{{image.userFilename}}</label>\n            </div>\n            <div class=\"col-sm-12\">\n                <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveImageBtn'\" [name]=\"componentId+'_RemoveImageBtn'\"\n                    (click)=\"removeImage()\" [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Image</button>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">{{errorMessage}}</div>\n</form>", styles: [""], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LynxImageUploadComponent, selector: "oepa-lynx-image-upload", inputs: { group: "group", field: "field", projectID: "projectID", label: "label", errorLabel: "errorLabel", image: "image", showValidation: "showValidation", required: "required", accept: "accept", imageBlobUrl: "imageBlobUrl" }, outputs: { onImageUpload: "onImageUpload", onImageRemove: "onImageRemove", onImageDownload: "onImageDownload" }, ngImport: i0, template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!imageBlobUrl\">\n            <label class=\"btn btn-primary btn-file\">\n                    Browse&hellip;\n                    <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n                      [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                      [attr.accept]=\"accept ? accept : null\"\n                      [disabled]=\"group.controls[field].status === 'DISABLED'\">\n                  </label>\n            <span>&nbsp;Click the button on the left to upload an image from your computer.</span>\n    </div>\n    <div *ngIf=\"imageBlobUrl\">\n        <div class=\"row\">\n            <div class=\"col-sm-12\">\n                <img [src]=\"imageBlobUrl\" [id]=\"componentId+'_Image'\" width=\"200\">\n            </div>\n            <br/>\n            <div class=\"col-sm-12\">\n                <label>{{image.userFilename}}</label>\n            </div>\n            <div class=\"col-sm-12\">\n                <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveImageBtn'\" [name]=\"componentId+'_RemoveImageBtn'\"\n                    (click)=\"removeImage()\" [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Image\">Remove Image</button>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">{{errorMessage}}</div>\n</form>", styles: [""], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LynxImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-lynx-image-upload', template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!imageBlobUrl\">\n            <label class=\"btn btn-primary btn-file\">\n                    Browse&hellip;\n                    <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n                      [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                      [attr.accept]=\"accept ? accept : null\"\n                      [disabled]=\"group.controls[field].status === 'DISABLED'\">\n                  </label>\n            <span>&nbsp;Click the button on the left to upload an image from your computer.</span>\n    </div>\n    <div *ngIf=\"imageBlobUrl\">\n        <div class=\"row\">\n            <div class=\"col-sm-12\">\n                <img [src]=\"imageBlobUrl\" [id]=\"componentId+'_Image'\" width=\"200\">\n            </div>\n            <br/>\n            <div class=\"col-sm-12\">\n                <label>{{image.userFilename}}</label>\n            </div>\n            <div class=\"col-sm-12\">\n                <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveImageBtn'\" [name]=\"componentId+'_RemoveImageBtn'\"\n                    (click)=\"removeImage()\" [disabled]=\"group.controls[field].status === 'DISABLED'\">Remove Image</button>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">{{errorMessage}}</div>\n</form>" }]
+            args: [{ selector: 'oepa-lynx-image-upload', template: "<form [formGroup]=\"group\">\n    <div *ngIf=\"!imageBlobUrl\">\n            <label class=\"btn btn-primary btn-file\">\n                    Browse&hellip;\n                    <input type=\"file\" style=\"display: none;\" (change)=\"fileChange($event)\" \n                      [id]=\"componentId+'_BrowseBtn'\" [name]=\"componentId+'_BrowseBtn'\" class=\"form-control\"\n                      [attr.accept]=\"accept ? accept : null\"\n                      [disabled]=\"group.controls[field].status === 'DISABLED'\">\n                  </label>\n            <span>&nbsp;Click the button on the left to upload an image from your computer.</span>\n    </div>\n    <div *ngIf=\"imageBlobUrl\">\n        <div class=\"row\">\n            <div class=\"col-sm-12\">\n                <img [src]=\"imageBlobUrl\" [id]=\"componentId+'_Image'\" width=\"200\">\n            </div>\n            <br/>\n            <div class=\"col-sm-12\">\n                <label>{{image.userFilename}}</label>\n            </div>\n            <div class=\"col-sm-12\">\n                <button type=\"button\" class=\"btn btn-primary\" [id]=\"componentId+'_RemoveImageBtn'\" [name]=\"componentId+'_RemoveImageBtn'\"\n                    (click)=\"removeImage()\" [disabled]=\"group.controls[field].status === 'DISABLED'\" aria-label=\"Remove Image\">Remove Image</button>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"alert alert-danger\">{{errorMessage}}</div>\n</form>" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i2$1.BsModalService }, { type: i1$1.OepaFileUtilService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -6900,7 +6933,7 @@ class NotesModalComponent {
         // only display delete action if note can be deleted
         if ((this.deleteAnyNoteAllowed || (this.deleteOwnNoteAllowed && this.loginName === note.user)) && note.type?.code !== 'System') {
             row.actions = [
-                { title: 'Delete', className: 'fa fa-remove' }
+                { title: 'Delete', className: 'bi bi-x-lg' }
             ];
         }
         else {
@@ -6948,11 +6981,11 @@ class NotesModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotesModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: i1$1.OepaMappingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotesModalComponent, selector: "oepa-notes-modal", inputs: { loginName: "loginName", deleteAnyNoteAllowed: "deleteAnyNoteAllowed", deleteOwnNoteAllowed: "deleteOwnNoteAllowed", createNoteAllowed: "createNoteAllowed", external: "external", errorMessage: "errorMessage", notes: "notes", defaultNoteType: "defaultNoteType" }, outputs: { onAddNote: "onAddNote", onDeleteNote: "onDeleteNote" }, ngImport: i0, template: "<div class=\"modal-header\">\n\t<h3 class=\"modal-title\">Notes</h3>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\">Done</button>\n</div>\n", styles: [""], dependencies: [{ 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.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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["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: 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: NotesModalComponent, selector: "oepa-notes-modal", inputs: { loginName: "loginName", deleteAnyNoteAllowed: "deleteAnyNoteAllowed", deleteOwnNoteAllowed: "deleteOwnNoteAllowed", createNoteAllowed: "createNoteAllowed", external: "external", errorMessage: "errorMessage", notes: "notes", defaultNoteType: "defaultNoteType" }, outputs: { onAddNote: "onAddNote", onDeleteNote: "onDeleteNote" }, ngImport: i0, template: "<div class=\"modal-header\">\n\t<h3 class=\"modal-title\">Notes</h3>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\" for=\"NoteInput\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\" aria-label=\"Add Note\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\" aria-label=\"Done\">Done</button>\n</div>\n", styles: [""], dependencies: [{ 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.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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["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: 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: NotesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-notes-modal', template: "<div class=\"modal-header\">\n\t<h3 class=\"modal-title\">Notes</h3>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\">Done</button>\n</div>\n" }]
+            args: [{ selector: 'oepa-notes-modal', template: "<div class=\"modal-header\">\n\t<h3 class=\"modal-title\">Notes</h3>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\" for=\"NoteInput\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\" aria-label=\"Add Note\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\" aria-label=\"Done\">Done</button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: i2$1.BsModalService }, { type: i1$1.OepaMappingService }], propDecorators: { loginName: [{
                 type: Input
             }], deleteAnyNoteAllowed: [{
@@ -7048,10 +7081,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class OepaUserAccountService {
     http;
     ebizRootURL;
+    app;
     hostUrl = '/ebiz';
     accountsUrl = '/api/v1/user-accounts';
-    ebizAccountsUrl = '/api/v1/accounts';
-    ebizSessionUrl = '/api/v1/session';
+    ebizAccountsUrl = '/api/v2/accounts';
+    ebizSessionUrl = '/api/v2/session';
     account;
     personID = '';
     sessionID = '';
@@ -7066,18 +7100,22 @@ class OepaUserAccountService {
     userAccount$ = new Subject();
     sessionID$ = new Subject(); // session ID is used for "backdoor" processing of internal (webapps) accounts
     authToken = '';
-    constructor(http, ebizRootURL) {
+    params = {};
+    constructor(http, ebizRootURL, app) {
         this.http = http;
         this.ebizRootURL = ebizRootURL;
+        this.app = app;
         this.hostUrl = this.ebizRootURL + this.hostUrl;
-        this.logoutPath = '/jsp/logout.jsp';
+        this.logoutPath = this.ebizRootURL + '/jsp/logout.jsp';
+        this.params = { 'app': this.app };
     }
     /**
      * Retrieve the User Account for the user userid.
      * @param userid
      */
     retrieveAccountForUser(userid, app) {
-        return this.http.get(this.hostUrl + this.accountsUrl + '/' + userid, { params: { 'app': app } });
+        const params = new HttpParams({ encoder: new HttpUrlEncodingCodec() }).set('userid', userid).set('app', app);
+        return this.http.get(this.hostUrl + this.accountsUrl + '/account', { params: params });
     }
     retrieveAccountByOHID(ohid, app) {
         const url = this.hostUrl + this.accountsUrl + '/ohid/' + ohid;
@@ -7236,10 +7274,13 @@ class OepaUserAccountService {
             return of(this.ebizVersion);
         }
         else {
-            const url = this.hostUrl + '/api/v1/gateway/gatewayConfig';
-            return this.http.get(url, { params: { 'app': app } }).pipe(map((gatewayConfig) => {
-                if (gatewayConfig) {
-                    this.ebizVersion = gatewayConfig.versionNumber;
+            const url = this.hostUrl + '/api/v1/gateway/version';
+            return this.http.get(url, { params: { 'app': app } }).pipe(map((version) => {
+                if (version && version.response) {
+                    this.ebizVersion = version.response;
+                }
+                else {
+                    this.ebizVersion = 'unknown';
                 }
                 return this.ebizVersion;
             }));
@@ -7252,7 +7293,7 @@ class OepaUserAccountService {
      */
     searchPrivileges(programPrivilegeRequest, altUserID) {
         const url = this.hostUrl + this.ebizAccountsUrl + '/programPrivileges/search' + (altUserID ? '?userid=' + altUserID : '');
-        return this.http.post(url, programPrivilegeRequest);
+        return this.http.post(url, programPrivilegeRequest, { params: this.params });
     }
     /**
      * Create a new ProgramPrivilege based on contents of ProgramPrivilegeRequest.
@@ -7260,7 +7301,7 @@ class OepaUserAccountService {
      * @returns Observable<ProgramPrivilege?
      */
     createProgramPrivilege(programPrivilegeRequest, altUserID) {
-        return this.http.post(this.hostUrl + this.ebizAccountsUrl + '/programPrivileges' + (altUserID ? '?userid=' + altUserID : ''), programPrivilegeRequest);
+        return this.http.post(this.hostUrl + this.ebizAccountsUrl + '/programPrivileges' + (altUserID ? '?userid=' + altUserID : ''), programPrivilegeRequest, { params: this.params });
     }
     /**
      * Delete the ProgramPrivilege identified by programPrivilegeID.
@@ -7268,7 +7309,7 @@ class OepaUserAccountService {
      * @returns Observable<void>
      */
     deleteProgramPrivilege(programPrivilegeID, altUserID) {
-        return this.http.delete(this.hostUrl + this.ebizAccountsUrl + '/programPrivileges/' + programPrivilegeID + (altUserID ? '?userid=' + altUserID : ''), { responseType: 'text' });
+        return this.http.delete(this.hostUrl + this.ebizAccountsUrl + '/programPrivileges/' + programPrivilegeID + (altUserID ? '?userid=' + altUserID : ''), { responseType: 'text', params: this.params });
     }
     /**
      * Delegate a program privilege based on information in delegation.
@@ -7276,7 +7317,7 @@ class OepaUserAccountService {
      * @returns Observable<void>
      */
     delegateProgramPrivilege(delegation, altUserID) {
-        return this.http.post(this.hostUrl + this.ebizAccountsUrl + '/programPrivileges/delegation' + (altUserID ? '?userid=' + altUserID : ''), delegation, { responseType: 'text' });
+        return this.http.post(this.hostUrl + this.ebizAccountsUrl + '/programPrivileges/delegation' + (altUserID ? '?userid=' + altUserID : ''), delegation, { responseType: 'text', params: this.params });
     }
     /**
       * ===========================================================================================================================
@@ -7290,7 +7331,7 @@ class OepaUserAccountService {
     setLiveReloadUser(userAccount) {
         this.account = userAccount;
         console.log('setLiveReloadUser: ' + this.account?.loginName || '<unknown>');
-        return this.http.post(this.hostUrl + this.ebizAccountsUrl + '/liveReload', userAccount);
+        return this.http.post(this.hostUrl + this.ebizAccountsUrl + '/liveReload', userAccount, { params: this.params });
     }
     /**
      * Stores the given user in the eBiz session.
@@ -7299,7 +7340,7 @@ class OepaUserAccountService {
     storeUserInSession(accountUserID) {
         let acct = {};
         acct.accountID = accountUserID;
-        return this.http.post(this.hostUrl + this.ebizSessionUrl + '/storeUser/' + accountUserID, null);
+        return this.http.post(this.hostUrl + this.ebizSessionUrl + '/storeUser/' + accountUserID, null, { params: this.params });
     }
     /**
      * See if the current user should be allowed to see "demo" capabilities
@@ -7360,16 +7401,22 @@ class OepaUserAccountService {
             response: message
         };
         const url = this.hostUrl + '/api/v1/userAccounts/logs/message';
-        return this.http.post(url, messageResponse);
+        return this.http.post(url, messageResponse, { params: this.params });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OepaUserAccountService, deps: [{ token: i1.HttpClient }, { token: 'ebizRootURL' }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OepaUserAccountService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OepaUserAccountService, deps: [{ token: i1.HttpClient }, { token: 'ebizRootURL' }, { token: 'app' }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OepaUserAccountService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OepaUserAccountService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['ebizRootURL']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['app']
                 }] }] });
 
 class OepaPinService {
@@ -7596,11 +7643,11 @@ class PinModalComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PinModalComponent, deps: [{ token: OepaUserAccountService }, { token: i1$2.FormBuilder }, { token: OepaPinService }, { token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PinModalComponent, selector: "oepa-pin-modal", inputs: { attestationID: "attestationID", submitCallback: "submitCallback", submittingComponent: "submittingComponent", app: "app" }, outputs: { close: "close" }, ngImport: i0, template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <label>{{securityQuestion.question}}</label>\n            <div>\n              <input  [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label><b>PIN: </b></label>\n            <div>\n              <input [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\">Cancel</button>\n  </div>\n\n</form>", 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PinModalComponent, selector: "oepa-pin-modal", inputs: { attestationID: "attestationID", submitCallback: "submitCallback", submittingComponent: "submittingComponent", app: "app" }, outputs: { close: "close" }, ngImport: i0, template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <label>{{securityQuestion.question}}</label>\n            <div>\n              <input  [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label><b>PIN: </b></label>\n            <div>\n              <input [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\" aria-label=\"Submit\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\" aria-label=\"Cancel\">Cancel</button>\n  </div>\n\n</form>", 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PinModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-pin-modal', template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <label>{{securityQuestion.question}}</label>\n            <div>\n              <input  [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label><b>PIN: </b></label>\n            <div>\n              <input [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\">Cancel</button>\n  </div>\n\n</form>" }]
+            args: [{ selector: 'oepa-pin-modal', template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <label>{{securityQuestion.question}}</label>\n            <div>\n              <input  [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label><b>PIN: </b></label>\n            <div>\n              <input [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\" aria-label=\"Submit\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\" aria-label=\"Cancel\">Cancel</button>\n  </div>\n\n</form>" }]
         }], ctorParameters: () => [{ type: OepaUserAccountService }, { type: i1$2.FormBuilder }, { type: OepaPinService }, { type: i2$1.BsModalRef }], propDecorators: { attestationID: [{
                 type: Input
             }], submitCallback: [{
@@ -7733,11 +7780,11 @@ class ServerTimeoutModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServerTimeoutModalComponent, deps: [{ token: OepaUserAccountService }, { token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServerTimeoutModalComponent, selector: "oepa-server-timeout-modal", inputs: { countdownSeconds: "countdownSeconds" }, outputs: { onKeepAlive: "onKeepAlive" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">\n        <span>Connection Timeout</span>\n        <span *ngIf=\"!connectionLost\">&nbsp;Pending</span>\n    </h4>\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n  </div>\n  <div class=\"modal-body\">\n    <div *ngIf=\"!connectionLost\">\n        Your connection is about to time out: {{mm}}:{{ss}}\n        <!-- : <countdown [config]=\"config\" (event)=\"handleEvent($event)\"></countdown> -->\n        <br/>\n        Click the button below to keep from being logged out.\n    </div>\n    <div *ngIf=\"connectionLost\">\n        Connection timeout.\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <div class=\"row\">\n        <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n            <div  class=\"alert alert-danger\">\n                {{errorMessage}}\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-12 text-right\">\n        <button *ngIf=\"!connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"keepAlive()\">Stay Logged In</button>\n        <button *ngIf=\"connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"close()\">Close</button>\n    </div>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServerTimeoutModalComponent, selector: "oepa-server-timeout-modal", inputs: { countdownSeconds: "countdownSeconds" }, outputs: { onKeepAlive: "onKeepAlive" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\">\n        <span>Connection Timeout</span>\n        <span *ngIf=\"!connectionLost\">&nbsp;Pending</span>\n    </h1>\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n  </div>\n  <div class=\"modal-body\">\n    <div *ngIf=\"!connectionLost\">\n        Your connection is about to time out: {{mm}}:{{ss}}\n        <!-- : <countdown [config]=\"config\" (event)=\"handleEvent($event)\"></countdown> -->\n        <br/>\n        Click the button below to keep from being logged out.\n    </div>\n    <div *ngIf=\"connectionLost\">\n        Connection timeout.\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <div class=\"row\">\n        <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n            <div  class=\"alert alert-danger\">\n                {{errorMessage}}\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-12 text-right\">\n        <button *ngIf=\"!connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"keepAlive()\" aria-label=\"Stay Logged In\">Stay Logged In</button>\n        <button *ngIf=\"connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"close()\" aria-label=\"Close\">Close</button>\n    </div>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServerTimeoutModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-server-timeout-modal', template: "<div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">\n        <span>Connection Timeout</span>\n        <span *ngIf=\"!connectionLost\">&nbsp;Pending</span>\n    </h4>\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n  </div>\n  <div class=\"modal-body\">\n    <div *ngIf=\"!connectionLost\">\n        Your connection is about to time out: {{mm}}:{{ss}}\n        <!-- : <countdown [config]=\"config\" (event)=\"handleEvent($event)\"></countdown> -->\n        <br/>\n        Click the button below to keep from being logged out.\n    </div>\n    <div *ngIf=\"connectionLost\">\n        Connection timeout.\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <div class=\"row\">\n        <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n            <div  class=\"alert alert-danger\">\n                {{errorMessage}}\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-12 text-right\">\n        <button *ngIf=\"!connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"keepAlive()\">Stay Logged In</button>\n        <button *ngIf=\"connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"close()\">Close</button>\n    </div>\n  </div>\n" }]
+            args: [{ selector: 'oepa-server-timeout-modal', template: "<div class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\">\n        <span>Connection Timeout</span>\n        <span *ngIf=\"!connectionLost\">&nbsp;Pending</span>\n    </h1>\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n  </div>\n  <div class=\"modal-body\">\n    <div *ngIf=\"!connectionLost\">\n        Your connection is about to time out: {{mm}}:{{ss}}\n        <!-- : <countdown [config]=\"config\" (event)=\"handleEvent($event)\"></countdown> -->\n        <br/>\n        Click the button below to keep from being logged out.\n    </div>\n    <div *ngIf=\"connectionLost\">\n        Connection timeout.\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <div class=\"row\">\n        <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n            <div  class=\"alert alert-danger\">\n                {{errorMessage}}\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-12 text-right\">\n        <button *ngIf=\"!connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"keepAlive()\" aria-label=\"Stay Logged In\">Stay Logged In</button>\n        <button *ngIf=\"connectionLost\" type=\"button\" class=\"btn btn-primary mr-2\" (click)=\"close()\" aria-label=\"Close\">Close</button>\n    </div>\n  </div>\n" }]
         }], ctorParameters: () => [{ type: OepaUserAccountService }, { type: i2$1.BsModalRef }], propDecorators: { countdownSeconds: [{
                 type: Input
             }], onKeepAlive: [{
@@ -7956,7 +8003,7 @@ class ShoppingCartViewComponent {
                 { id: 'itemClassification', value: cartItem.itemClassification },
                 { id: 'itemName', value: cartItem.itemName },
                 { id: 'itemDescription', value: cartItem.description },
-                { id: 'deleteItem', value: '', iconClassName: 'fa fa-minus-circle', className: 'text-center' },
+                { id: 'deleteItem', value: '', iconClassName: 'bi bi-dash-circle-fill', className: 'text-center' },
                 { id: 'fee', value: cartItem.unitPrice?.formattedString, sortValue: cartItem.unitPrice?.cents },
             ],
             dataSource: cartItem
@@ -8020,11 +8067,11 @@ class ShoppingCartViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShoppingCartViewComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: i2$1.BsModalService }, { token: ShoppingCartService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ShoppingCartViewComponent, selector: "oepa-shopping-cart-view", ngImport: i0, template: "<div class=\"container-fluid\">\n  <div class=\"row\">\n      <div class=\" col-sm-12\">\n          <h2><b>{{title}}</b></h2>\n        </div>\n    <div *ngIf=\"loading || empty\" class=\"col-sm-12 text-center\">\n      <div class=\" alert alert-info \">\n        <h3><em>{{ loading ? 'Loading...' : 'Cart is empty' }}</em></h3>\n        <img *ngIf=\"loading\" class=\"oepa-icon\" src=\"{{imageRoot}}/blue-load.gif\" />\n      </div>\n    </div>\n    <div *ngIf=\"!loading && !empty\" class=\"col-sm-12\">\n      <oepa-table [config]=\"tblConfig\" [data]=\"tblData\" [header]=\"tblHeader\" tableId=\"ShoppingCartTable\" (cellClicked)=\"onCellClick($event)\"></oepa-table>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n      <div class=\"alert alert-danger\">{{errorMessage}}</div>\n    </div>\n    <div *ngIf=\"!checkOutInProgress\" class=\"col-12 text-center\">\n        <button class=\"btn btn-primary mr-2\" id=\"returnToPageButton\" (click)=\"goBack()\">\n          {{returnLabel}}</button>\n        <button *ngIf=\"!empty\" class=\"btn btn-primary mr-2\" id=\"checkoutBtn\" (click)=\"onCheckout()\">\n          Checkout</button>\n      </div>\n      <div *ngIf=\"checkOutInProgress\" class=\"col-12 text-center\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span>\n          Checking out...\n        </div>\n      </div>\n  </div>\n</div>", styles: [""], dependencies: [{ 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: ShoppingCartViewComponent, selector: "oepa-shopping-cart-view", ngImport: i0, template: "<div class=\"container-fluid\">\n  <div class=\"row\">\n      <div class=\" col-sm-12\">\n          <h2><b>{{title}}</b></h2>\n        </div>\n    <div *ngIf=\"loading || empty\" class=\"col-sm-12 text-center\">\n      <div class=\" alert alert-info \">\n        <h3><em>{{ loading ? 'Loading...' : 'Cart is empty' }}</em></h3>\n        <img *ngIf=\"loading\" class=\"oepa-icon\" src=\"{{imageRoot}}/blue-load.gif\" />\n      </div>\n    </div>\n    <div *ngIf=\"!loading && !empty\" class=\"col-sm-12\">\n      <oepa-table [config]=\"tblConfig\" [data]=\"tblData\" [header]=\"tblHeader\" tableId=\"ShoppingCartTable\" (cellClicked)=\"onCellClick($event)\"></oepa-table>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n      <div class=\"alert alert-danger\">{{errorMessage}}</div>\n    </div>\n    <div *ngIf=\"!checkOutInProgress\" class=\"col-12 text-center\">\n        <button class=\"btn btn-primary mr-2\" id=\"returnToPageButton\" (click)=\"goBack()\" [attr.aria-label]=\"returnLabel\">\n          {{returnLabel}}</button>\n        <button *ngIf=\"!empty\" class=\"btn btn-primary mr-2\" id=\"checkoutBtn\" (click)=\"onCheckout()\" aria-label=\"Checkout\">\n          Checkout</button>\n      </div>\n      <div *ngIf=\"checkOutInProgress\" class=\"col-12 text-center\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span>\n          Checking out...\n        </div>\n      </div>\n  </div>\n</div>", styles: [""], dependencies: [{ 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: ShoppingCartViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-shopping-cart-view', template: "<div class=\"container-fluid\">\n  <div class=\"row\">\n      <div class=\" col-sm-12\">\n          <h2><b>{{title}}</b></h2>\n        </div>\n    <div *ngIf=\"loading || empty\" class=\"col-sm-12 text-center\">\n      <div class=\" alert alert-info \">\n        <h3><em>{{ loading ? 'Loading...' : 'Cart is empty' }}</em></h3>\n        <img *ngIf=\"loading\" class=\"oepa-icon\" src=\"{{imageRoot}}/blue-load.gif\" />\n      </div>\n    </div>\n    <div *ngIf=\"!loading && !empty\" class=\"col-sm-12\">\n      <oepa-table [config]=\"tblConfig\" [data]=\"tblData\" [header]=\"tblHeader\" tableId=\"ShoppingCartTable\" (cellClicked)=\"onCellClick($event)\"></oepa-table>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n      <div class=\"alert alert-danger\">{{errorMessage}}</div>\n    </div>\n    <div *ngIf=\"!checkOutInProgress\" class=\"col-12 text-center\">\n        <button class=\"btn btn-primary mr-2\" id=\"returnToPageButton\" (click)=\"goBack()\">\n          {{returnLabel}}</button>\n        <button *ngIf=\"!empty\" class=\"btn btn-primary mr-2\" id=\"checkoutBtn\" (click)=\"onCheckout()\">\n          Checkout</button>\n      </div>\n      <div *ngIf=\"checkOutInProgress\" class=\"col-12 text-center\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span>\n          Checking out...\n        </div>\n      </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'oepa-shopping-cart-view', template: "<div class=\"container-fluid\">\n  <div class=\"row\">\n      <div class=\" col-sm-12\">\n          <h2><b>{{title}}</b></h2>\n        </div>\n    <div *ngIf=\"loading || empty\" class=\"col-sm-12 text-center\">\n      <div class=\" alert alert-info \">\n        <h3><em>{{ loading ? 'Loading...' : 'Cart is empty' }}</em></h3>\n        <img *ngIf=\"loading\" class=\"oepa-icon\" src=\"{{imageRoot}}/blue-load.gif\" />\n      </div>\n    </div>\n    <div *ngIf=\"!loading && !empty\" class=\"col-sm-12\">\n      <oepa-table [config]=\"tblConfig\" [data]=\"tblData\" [header]=\"tblHeader\" tableId=\"ShoppingCartTable\" (cellClicked)=\"onCellClick($event)\"></oepa-table>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n      <div class=\"alert alert-danger\">{{errorMessage}}</div>\n    </div>\n    <div *ngIf=\"!checkOutInProgress\" class=\"col-12 text-center\">\n        <button class=\"btn btn-primary mr-2\" id=\"returnToPageButton\" (click)=\"goBack()\" [attr.aria-label]=\"returnLabel\">\n          {{returnLabel}}</button>\n        <button *ngIf=\"!empty\" class=\"btn btn-primary mr-2\" id=\"checkoutBtn\" (click)=\"onCheckout()\" aria-label=\"Checkout\">\n          Checkout</button>\n      </div>\n      <div *ngIf=\"checkOutInProgress\" class=\"col-12 text-center\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span>\n          Checking out...\n        </div>\n      </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }, { type: i2$1.BsModalService }, { type: ShoppingCartService }] });
 
 class ShoppingCartSummaryComponent {
@@ -8218,11 +8265,11 @@ class TemplateConfirmationModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateConfirmationModalComponent, deps: [{ token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TemplateConfirmationModalComponent, selector: "oepa-template-confirmation-modal", inputs: { headerText: "headerText", content: "content", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel" }, outputs: { confirmClicked: "confirmClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">{{headerText}}</h4>\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 *ngIf=\"content\" class=\"modal-body\">\n    <cml-template [templateInfo]=\"content\"></cml-template>\n  </div>\n  <div class=\"modal-footer\">\n    <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"confirm()\">{{confirmBtnLabel}}</button>\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TemplateConfirmationModalComponent, selector: "oepa-template-confirmation-modal", inputs: { headerText: "headerText", content: "content", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel" }, outputs: { confirmClicked: "confirmClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\">{{headerText}}</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 *ngIf=\"content\" class=\"modal-body\">\n    <cml-template [templateInfo]=\"content\"></cml-template>\n  </div>\n  <div class=\"modal-footer\">\n    <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TemplateConfirmationModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-template-confirmation-modal', template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">{{headerText}}</h4>\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 *ngIf=\"content\" class=\"modal-body\">\n    <cml-template [templateInfo]=\"content\"></cml-template>\n  </div>\n  <div class=\"modal-footer\">\n    <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"confirm()\">{{confirmBtnLabel}}</button>\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n  </div>" }]
+            args: [{ selector: 'oepa-template-confirmation-modal', template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\">{{headerText}}</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 *ngIf=\"content\" class=\"modal-body\">\n    <cml-template [templateInfo]=\"content\"></cml-template>\n  </div>\n  <div class=\"modal-footer\">\n    <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n    <button type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  </div>" }]
         }], ctorParameters: () => [{ type: i2$1.BsModalRef }], propDecorators: { headerText: [{
                 type: Input
             }], content: [{
@@ -8297,11 +8344,11 @@ class TimeoutModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeoutModalComponent, deps: [{ token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimeoutModalComponent, selector: "oepa-timeout-modal", inputs: { countdown: "countdown" }, outputs: { okClicked: "okClicked" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h3 class=\"modal-title\">Session Timeout Warning</h3>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"alert alert-info\">\n    Your session will timeout in {{ countdown }} seconds. If you wish to stay logged in click 'Continue'.\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <button class=\"btn btn-primary mr-1\" id=\"continueSessionBtn\" (click)=\"ok()\">Continue</button>\n</div>", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimeoutModalComponent, selector: "oepa-timeout-modal", inputs: { countdown: "countdown" }, outputs: { okClicked: "okClicked" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h3 class=\"modal-title\">Session Timeout Warning</h3>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"alert alert-info\">\n    Your session will timeout in {{ countdown }} seconds. If you wish to stay logged in click 'Continue'.\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <button class=\"btn btn-primary mr-1\" id=\"continueSessionBtn\" (click)=\"ok()\" aria-label=\"Continue\">Continue</button>\n</div>", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeoutModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-timeout-modal', template: "<div class=\"modal-header\">\n  <h3 class=\"modal-title\">Session Timeout Warning</h3>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"alert alert-info\">\n    Your session will timeout in {{ countdown }} seconds. If you wish to stay logged in click 'Continue'.\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <button class=\"btn btn-primary mr-1\" id=\"continueSessionBtn\" (click)=\"ok()\">Continue</button>\n</div>" }]
+            args: [{ selector: 'oepa-timeout-modal', template: "<div class=\"modal-header\">\n  <h3 class=\"modal-title\">Session Timeout Warning</h3>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"alert alert-info\">\n    Your session will timeout in {{ countdown }} seconds. If you wish to stay logged in click 'Continue'.\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <button class=\"btn btn-primary mr-1\" id=\"continueSessionBtn\" (click)=\"ok()\" aria-label=\"Continue\">Continue</button>\n</div>" }]
         }], ctorParameters: () => [{ type: i2$1.BsModalRef }], propDecorators: { countdown: [{
                 type: Input
             }], okClicked: [{
@@ -8526,11 +8573,11 @@ class CheckboxInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxInputComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxInputComponent, selector: "oepa-checkbox-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <input class=\"checkboxPlus\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\">\n</div>", styles: ["input.checkboxPlus{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxInputComponent, selector: "oepa-checkbox-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <input class=\"checkboxPlus\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\" [attr.aria-label]=\"field\">\n</div>", styles: ["input.checkboxPlus{transform:scale(1.2)}\n"], dependencies: [{ kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-checkbox-input', template: "<div [formGroup]=\"group\">\n    <input class=\"checkboxPlus\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\">\n</div>", styles: ["input.checkboxPlus{transform:scale(1.2)}\n"] }]
+            args: [{ selector: 'oepa-checkbox-input', template: "<div [formGroup]=\"group\">\n    <input class=\"checkboxPlus\" type=\"checkbox\" [formControlName]=\"field\" [id]=\"componentId\" [attr.aria-label]=\"field\">\n</div>", styles: ["input.checkboxPlus{transform:scale(1.2)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -8570,11 +8617,11 @@ 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\">\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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-date-input', template: "<div [formGroup]=\"group\">\n    <oepa-datepicker [group]=\"group\" [field]=\"field\" [tableIdx]=\"tableIdx\" \n    [placement]=\"placement\" [showValidation]=\"showValidation\"></oepa-datepicker>\n</div>" }]
+            args: [{ selector: 'oepa-date-input', 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>" }]
         }], ctorParameters: () => [], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -8738,8 +8785,9 @@ class CommonFormsModule {
             TemplateConfirmationModalComponent, TextAreaInputComponent, TextInputComponent, TimeoutModalComponent, TimepickerComponent,
             YesNoComponent, YesNoBooleanComponent, YesNoOtherInputComponent], imports: [CommonModule,
             FormsModule,
-            ReactiveFormsModule, i4$1.ButtonsModule, i4.BsDatepickerModule, i4$2.TimepickerModule, i7$1.PaginationModule, i8.PopoverModule, i9.TooltipModule, i3.BsDropdownModule, i2$1.ModalModule, i6$1.TypeaheadModule, i6.AccordionModule, i11$1.CollapseModule, i12.TabsModule, TableModule,
+            ReactiveFormsModule, i4$1.ButtonsModule, i4.BsDatepickerModule, i4$2.TimepickerModule, i7$1.PaginationModule, i8.PopoverModule, i8$1.TooltipModule, i3.BsDropdownModule, i2$1.ModalModule, i6$1.TypeaheadModule, i10$1.AccordionModule, i11$1.CollapseModule, i12.TabsModule, TableModule,
             CommonLibModule,
+            MatExpansionModule,
             NgxMaskDirective, NgxMaskPipe], exports: [AccountSearchInputComponent, AccountSearchModalComponent,
             ActionBtnComponent, ActionBtnModalComponent, AddressComponent, ZipCodeComponent,
             ArrayFilterPipe, ArraySortPipe,
@@ -8784,7 +8832,8 @@ class CommonFormsModule {
             CollapseModule.forRoot(),
             TabsModule.forRoot(),
             TableModule,
-            CommonLibModule] });
+            CommonLibModule,
+            MatExpansionModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommonFormsModule, decorators: [{
             type: NgModule,
@@ -8836,6 +8885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TabsModule.forRoot(),
                         TableModule,
                         CommonLibModule,
+                        MatExpansionModule,
                         NgxMaskDirective, NgxMaskPipe
                     ],
                     exports: [
@@ -9230,14 +9280,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class OepaReferenceService {
     http;
     countiesUrl = '/ebiz/api/v2/references/counties/state';
+    townshipsUrl = '/ebiz/api/v2/references/townships/counties/code';
     districtsUrl = '/ebiz/api/v2/references/districts';
-    doLaaTypessUrl = '/ebiz/api/v1/asbestos/references/doLaaTypes';
+    doLaaTypessUrl = '/ebiz/api/v2/asbestos/references/doLaaTypes';
     params = {};
     constructor(http, ebizRootURL, app) {
         this.http = http;
         this.countiesUrl = ebizRootURL + this.countiesUrl;
         this.districtsUrl = ebizRootURL + this.districtsUrl;
         this.doLaaTypessUrl = ebizRootURL + this.doLaaTypessUrl;
+        this.townshipsUrl = ebizRootURL + this.townshipsUrl;
         this.params = {
             'app': app
         };
@@ -9248,6 +9300,12 @@ class OepaReferenceService {
     getCounties(state) {
         return this.http.get(this.countiesUrl + '/' + state, { params: this.params });
     }
+    /**
+     * Retrieve townships by county code
+     */
+    getTownshipsByCountyCode(countyCode) {
+        return this.http.get(this.townshipsUrl + '/' + countyCode, { params: this.params });
+    }
     /**
      * Retrieve districts
     */
@@ -9377,28 +9435,41 @@ class OepaHttpInterceptor {
         const params = {
             oepats: new Date().getTime().toString()
         };
-        const headers = req.headers;
         if (this.userID) {
             params['userid'] = this.userID;
-            headers.set('X-User-ID', this.userID);
         }
         if (this.sessionID) {
             params['sessionid'] = this.sessionID;
         }
+        let changedReq = undefined;
         if (authToken) {
-            headers.set('Authorization', `Bearer ${authToken}`);
+            changedReq = req.clone({
+                setHeaders: {
+                    Authorization: `Bearer ${authToken}`
+                },
+                setParams: params
+            });
+        }
+        else {
+            changedReq = req.clone({
+                setParams: params
+            });
         }
-        let changedReq = req.clone({
-            headers: headers,
-            setParams: params
-        });
         const timeoutValue = req.headers.get('timeout') || this.defaultTimeout;
         const timeoutValueNumeric = Number(timeoutValue);
         return next.handle(changedReq).pipe(timeout(timeoutValueNumeric), catchError((error) => {
             let msg = error.headers ? error.headers.get('OEPA_ERROR') : '';
             console.log('msg from header = ' + msg);
             console.log('ERROR: [' + req.url + ']: ' + JSON.stringify(error));
-            msg = msg || error.error.message || error.error.errorMessage || 'Server error.';
+            msg = msg || (error && error.error && (error.error.message || error.error.errorMessage || error.error.error || error.error)) || 'Server error.';
+            if (msg && typeof msg !== 'string') {
+                try {
+                    msg = JSON.stringify(msg);
+                }
+                catch {
+                    msg = String(msg);
+                }
+            }
             if (msg) {
                 if (msg.indexOf('User account is required') > -1
                     || msg.toUpperCase().indexOf('USERID IS MISSING') > -1) {