@ohioepa/oepa-ui-lib 2.0.12 → 2.0.14

package/esm2022/lib/account-search-modal/account-search-modal.component.mjs

@@ -128,7 +128,7 @@ export class AccountSearchModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchModalComponent, deps: [{ token: i1.FormBuilder }, { token: i2.BsModalRef }, { token: i3.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    <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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchModalComponent, decorators: [{
             type: Component,

package/esm2022/lib/action-btn/action-btn.component.mjs

@@ -9,6 +9,8 @@ import * as i3 from "ngx-bootstrap/dropdown";
 export class ActionBtnComponent {
     sanitizer;
     busy = false;
+    /** Emits true when dropdown opens, false when closes */
+    dropdownOpenChange = new EventEmitter();
     /** Button label */
     label = 'Actions';
     /** Unique id for this button */
@@ -46,13 +48,21 @@ export class ActionBtnComponent {
     getID() {
         return this.btnId + '_ActionBtn';
     }
+    dropdownOpened() {
+        this.dropdownOpenChange.emit(true);
+    }
+    dropdownClosed() {
+        this.dropdownOpenChange.emit(false);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnComponent, deps: [{ token: i1.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\" 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"] }] });
+    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: { dropdownOpenChange: "dropdownOpenChange", actionClicked: "actionClicked" }, ngImport: i0, template: "<div *ngIf=\"actions && actions.length > 0\" class=\"btn-group\" dropdown [dropup]=\"dropup\" role=\"group\" aria-label=\"Action Button Group\" (onShown)=\"dropdownOpened()\" (onHidden)=\"dropdownClosed()\">\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\" 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.DomSanitizer }], propDecorators: { label: [{
+            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\" (onShown)=\"dropdownOpened()\" (onHidden)=\"dropdownClosed()\">\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.DomSanitizer }], propDecorators: { dropdownOpenChange: [{
+                type: Output
+            }], label: [{
                 type: Input
             }], btnId: [{
                 type: Input
@@ -67,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], actionClicked: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLWJ0bi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL2FjdGlvbi1idG4vYWN0aW9uLWJ0bi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL2FjdGlvbi1idG4vYWN0aW9uLWJ0bi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQU12RTs7R0FFRztBQU1ILE1BQU0sT0FBTyxrQkFBa0I7SUFtQlQ7SUFsQnBCLElBQUksR0FBRyxLQUFLLENBQUM7SUFFYixtQkFBbUI7SUFDVixLQUFLLEdBQUcsU0FBUyxDQUFDO0lBQzNCLGdDQUFnQztJQUN2QixLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLG1DQUFtQztJQUMxQixJQUFJLENBQU07SUFDbkIsc0NBQXNDO0lBQzdCLE9BQU8sR0FBc0IsRUFBRSxDQUFDO0lBQ3pDLG9EQUFvRDtJQUMzQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzVCLGNBQWM7SUFDTCxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBRXhCLCtDQUErQztJQUNyQyxhQUFhLEdBQWtDLElBQUksWUFBWSxFQUFFLENBQUM7SUFFNUUsWUFBb0IsU0FBdUI7UUFBdkIsY0FBUyxHQUFULFNBQVMsQ0FBYztJQUFJLENBQUM7SUFFekMsUUFBUSxDQUFDLElBQVk7UUFDeEIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUF1QixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFFTSxlQUFlLENBQUMsTUFBa0I7UUFDckMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUN2QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQztZQUN0QixNQUFNLEVBQUUsTUFBTTtZQUNkLElBQUksRUFBRSxJQUFJO1lBQ1YsU0FBUyxFQUFFLElBQUk7U0FDaEIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLE9BQU87UUFDWixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztJQUNuQixDQUFDO0lBRU0sU0FBUztRQUNkLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFFTSxLQUFLO1FBQ1YsT0FBTyxJQUFJLENBQUMsS0FBSyxHQUFHLFlBQVksQ0FBQztJQUNuQyxDQUFDO3dHQTVDVSxrQkFBa0I7NEZBQWxCLGtCQUFrQiw4TkNkL0IsazNDQXFCTTs7NEZEUE8sa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGlCQUFpQjtpRkFRbEIsS0FBSztzQkFBYixLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLO2dCQUVHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUdJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyLCBTYWZlSHRtbCB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuXG5pbXBvcnQgeyBPZXBhQWN0aW9uIH0gZnJvbSAnLi9vZXBhLWFjdGlvbic7XG5pbXBvcnQgeyBPZXBhQWN0aW9uRXZlbnQgfSBmcm9tICcuL29lcGEtYWN0aW9uLWV2ZW50JztcblxuLyoqXG4gKiBBIGRyb3Bkb3duIGJ1dHRvbiB3aXRoIGEgbGlzdCBvZiBhY3Rpb25zLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvZXBhLWFjdGlvbi1idG4nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9uLWJ0bi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FjdGlvbi1idG4uY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEFjdGlvbkJ0bkNvbXBvbmVudCB7XG4gIGJ1c3kgPSBmYWxzZTtcblxuICAvKiogQnV0dG9uIGxhYmVsICovXG4gIEBJbnB1dCgpIGxhYmVsID0gJ0FjdGlvbnMnO1xuICAvKiogVW5pcXVlIGlkIGZvciB0aGlzIGJ1dHRvbiAqL1xuICBASW5wdXQoKSBidG5JZCA9ICcnO1xuICAvKiogRGF0YSB0byBiZSBwYXNzZWQgdG8gZW1pdHRlciAqL1xuICBASW5wdXQoKSBkYXRhOiBhbnk7XG4gIC8qKiBMaXN0IG9mIGFjdGlvbnMgZm9yIHRoaXMgYnV0dG9uICovXG4gIEBJbnB1dCgpIGFjdGlvbnM6IEFycmF5PE9lcGFBY3Rpb24+ID0gW107XG4gIC8qKiBNYWtlIGJ1dHRvbiBcIm5vcm1hbFwiIHNpemUgKGRlZmF1bHQgaXMgYnRuLXNtKSAqL1xuICBASW5wdXQoKSBub3JtYWxTaXplID0gZmFsc2U7XG4gIC8qKiBkcm9wdXA/ICovXG4gIEBJbnB1dCgpIGRyb3B1cCA9IGZhbHNlO1xuXG4gIC8qKiBFdmVudCBlbWl0dGVkIHdoZW4gYW4gYWN0aW9uIGlzIHNlbGVjdGVkICovXG4gIEBPdXRwdXQoKSBhY3Rpb25DbGlja2VkOiBFdmVudEVtaXR0ZXI8T2VwYUFjdGlvbkV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyKSB7IH1cblxuICBwdWJsaWMgc2FuaXRpemUoaHRtbDogc3RyaW5nKTogU2FmZUh0bWwge1xuICAgICAgcmV0dXJuIHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RIdG1sKGh0bWwpO1xuICB9XG5cbiAgcHVibGljIG9uQWN0aW9uQ2xpY2tlZChhY3Rpb246IE9lcGFBY3Rpb24pOiB2b2lkIHtcbiAgICAgIGNvbnN0IGRhdGEgPSB0aGlzLmRhdGE7XG4gICAgICB0aGlzLmFjdGlvbkNsaWNrZWQuZW1pdCh7IFxuICAgICAgICBhY3Rpb246IGFjdGlvbiwgXG4gICAgICAgIGRhdGE6IGRhdGEsXG4gICAgICAgIGJ1dHRvbk9iajogdGhpc1xuICAgICAgfSk7XG4gIH1cblxuICBwdWJsaWMgc2V0QnVzeSgpIHtcbiAgICB0aGlzLmJ1c3kgPSB0cnVlO1xuICB9XG5cbiAgcHVibGljIGNsZWFyQnVzeSgpIHtcbiAgICB0aGlzLmJ1c3kgPSBmYWxzZTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRJRCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmJ0bklkICsgJ19BY3Rpb25CdG4nO1xuICB9XG5cbn1cbiIsIjxkaXYgKm5nSWY9XCJhY3Rpb25zICYmIGFjdGlvbnMubGVuZ3RoID4gMFwiIGNsYXNzPVwiYnRuLWdyb3VwXCIgZHJvcGRvd24gW2Ryb3B1cF09XCJkcm9wdXBcIiByb2xlPVwiZ3JvdXBcIiBhcmlhLWxhYmVsPVwiQWN0aW9uIEJ1dHRvbiBHcm91cFwiPlxuICA8YnV0dG9uIGRyb3Bkb3duVG9nZ2xlIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeSBkcm9wZG93bi10b2dnbGVcIiBbbmdDbGFzc109XCJ7ICdidG4tc20nIDogIW5vcm1hbFNpemUgfVwiXG4gICAgW2lkXT1cImJ0bklkKydfQWN0aW9uQnRuJ1wiIGFyaWEtbGFiZWw9XCJBY3Rpb24gQnV0dG9uXCIgYXJpYS1oYXNwb3B1cD1cInRydWVcIiBhcmlhLWV4cGFuZGVkPVwiZmFsc2VcIj5cbiAgICA8c3BhbiAqbmdJZj1cImJ1c3lcIiBjbGFzcz1cInNwaW5uZXItYm9yZGVyIHRleHQtcHJpbWFyeVwiIHJvbGU9XCJzdGF0dXNcIiBhcmlhLWxhYmVsPVwiTG9hZGluZ1wiPjwvc3Bhbj5cbiAgICB7e2xhYmVsfX0gXG4gICAgPHNwYW4gY2xhc3M9XCJjYXJldFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvc3Bhbj5cbiAgPC9idXR0b24+XG5cbiAgPHVsICpkcm9wZG93bk1lbnUgY2xhc3M9XCJkcm9wZG93bi1tZW51IGRyb3Bkb3duLW1lbnUtcmlnaHRcIiByb2xlPVwibWVudVwiIGFyaWEtbGFiZWw9XCJBY3Rpb24gTWVudVwiPlxuICAgICAgPGxpICpuZ0Zvcj1cImxldCBhY3Rpb24gb2YgYWN0aW9uczsgbGV0IGkgPSBpbmRleDtcIiByb2xlPVwibWVudWl0ZW1cIj5cbiAgICAgICAgICA8YSAqbmdJZj1cIiFidXN5XCIgY2xhc3M9XCJkcm9wZG93bi1pdGVtXCIgKGNsaWNrKT1cIm9uQWN0aW9uQ2xpY2tlZChhY3Rpb24pXCIgW2lkXT1cImJ0bklkKydfQWN0aW9uTGlua18nK2lcIiBbYXR0ci5hcmlhLWxhYmVsXT1cImFjdGlvbi50aXRsZVwiIHRhYmluZGV4PVwiMFwiPlxuICAgICAgICAgICAgPGkgbmdDbGFzcz1cInt7YWN0aW9uLmNsYXNzTmFtZSB8fCAnJ319XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9pPiB7e2FjdGlvbi50aXRsZX19XG4gICAgICAgICAgPC9hPlxuICAgICAgPC9saT5cbiAgPC91bD5cbjwvZGl2PiBcbjwhLS0gZGlzcGxheSBkaXNhYmxlZCBidXR0b24gaWYgbm8gYWN0aW9ucyBhcmUgYXZhaWxhYmxlIC0tPlxuPGRpdiAqbmdJZj1cIiFhY3Rpb25zIHx8IGFjdGlvbnMubGVuZ3RoID09PSAwXCI+XG4gIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5XCIgW25nQ2xhc3NdPVwieyAnYnRuLXNtJyA6ICFub3JtYWxTaXplIH1cIiBbaWRdPVwiYnRuSWQrJ19BY3Rpb25CdG4nXCIgZGlzYWJsZWQgYXJpYS1sYWJlbD1cIk5vIGFjdGlvbnMgYXZhaWxhYmxlXCI+XG4gICAgTi9BIFxuICA8L2J1dHRvbj5cbjwvZGl2PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLWJ0bi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL2FjdGlvbi1idG4vYWN0aW9uLWJ0bi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL2FjdGlvbi1idG4vYWN0aW9uLWJ0bi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQU12RTs7R0FFRztBQU1ILE1BQU0sT0FBTyxrQkFBa0I7SUFzQlQ7SUFyQnBCLElBQUksR0FBRyxLQUFLLENBQUM7SUFFYix3REFBd0Q7SUFDOUMsa0JBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUUzRCxtQkFBbUI7SUFDVixLQUFLLEdBQUcsU0FBUyxDQUFDO0lBQzNCLGdDQUFnQztJQUN2QixLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLG1DQUFtQztJQUMxQixJQUFJLENBQU07SUFDbkIsc0NBQXNDO0lBQzdCLE9BQU8sR0FBc0IsRUFBRSxDQUFDO0lBQ3pDLG9EQUFvRDtJQUMzQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzVCLGNBQWM7SUFDTCxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBRXhCLCtDQUErQztJQUNyQyxhQUFhLEdBQWtDLElBQUksWUFBWSxFQUFFLENBQUM7SUFFNUUsWUFBb0IsU0FBdUI7UUFBdkIsY0FBUyxHQUFULFNBQVMsQ0FBYztJQUFJLENBQUM7SUFFekMsUUFBUSxDQUFDLElBQVk7UUFDeEIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUF1QixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFFTSxlQUFlLENBQUMsTUFBa0I7UUFDckMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUN2QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQztZQUN0QixNQUFNLEVBQUUsTUFBTTtZQUNkLElBQUksRUFBRSxJQUFJO1lBQ1YsU0FBUyxFQUFFLElBQUk7U0FDaEIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLE9BQU87UUFDWixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztJQUNuQixDQUFDO0lBRU0sU0FBUztRQUNkLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFFTSxLQUFLO1FBQ1YsT0FBTyxJQUFJLENBQUMsS0FBSyxHQUFHLFlBQVksQ0FBQztJQUNuQyxDQUFDO0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3RDLENBQUM7d0dBdkRVLGtCQUFrQjs0RkFBbEIsa0JBQWtCLHdRQ2QvQixpN0NBcUJNOzs0RkRQTyxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsaUJBQWlCO2lGQVFqQixrQkFBa0I7c0JBQTNCLE1BQU07Z0JBR0UsS0FBSztzQkFBYixLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLO2dCQUVHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUdJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyLCBTYWZlSHRtbCB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuXG5pbXBvcnQgeyBPZXBhQWN0aW9uIH0gZnJvbSAnLi9vZXBhLWFjdGlvbic7XG5pbXBvcnQgeyBPZXBhQWN0aW9uRXZlbnQgfSBmcm9tICcuL29lcGEtYWN0aW9uLWV2ZW50JztcblxuLyoqXG4gKiBBIGRyb3Bkb3duIGJ1dHRvbiB3aXRoIGEgbGlzdCBvZiBhY3Rpb25zLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvZXBhLWFjdGlvbi1idG4nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9uLWJ0bi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FjdGlvbi1idG4uY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEFjdGlvbkJ0bkNvbXBvbmVudCB7XG4gIGJ1c3kgPSBmYWxzZTtcblxuICAvKiogRW1pdHMgdHJ1ZSB3aGVuIGRyb3Bkb3duIG9wZW5zLCBmYWxzZSB3aGVuIGNsb3NlcyAqL1xuICBAT3V0cHV0KCkgZHJvcGRvd25PcGVuQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIC8qKiBCdXR0b24gbGFiZWwgKi9cbiAgQElucHV0KCkgbGFiZWwgPSAnQWN0aW9ucyc7XG4gIC8qKiBVbmlxdWUgaWQgZm9yIHRoaXMgYnV0dG9uICovXG4gIEBJbnB1dCgpIGJ0bklkID0gJyc7XG4gIC8qKiBEYXRhIHRvIGJlIHBhc3NlZCB0byBlbWl0dGVyICovXG4gIEBJbnB1dCgpIGRhdGE6IGFueTtcbiAgLyoqIExpc3Qgb2YgYWN0aW9ucyBmb3IgdGhpcyBidXR0b24gKi9cbiAgQElucHV0KCkgYWN0aW9uczogQXJyYXk8T2VwYUFjdGlvbj4gPSBbXTtcbiAgLyoqIE1ha2UgYnV0dG9uIFwibm9ybWFsXCIgc2l6ZSAoZGVmYXVsdCBpcyBidG4tc20pICovXG4gIEBJbnB1dCgpIG5vcm1hbFNpemUgPSBmYWxzZTtcbiAgLyoqIGRyb3B1cD8gKi9cbiAgQElucHV0KCkgZHJvcHVwID0gZmFsc2U7XG5cbiAgLyoqIEV2ZW50IGVtaXR0ZWQgd2hlbiBhbiBhY3Rpb24gaXMgc2VsZWN0ZWQgKi9cbiAgQE91dHB1dCgpIGFjdGlvbkNsaWNrZWQ6IEV2ZW50RW1pdHRlcjxPZXBhQWN0aW9uRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIpIHsgfVxuXG4gIHB1YmxpYyBzYW5pdGl6ZShodG1sOiBzdHJpbmcpOiBTYWZlSHRtbCB7XG4gICAgICByZXR1cm4gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwoaHRtbCk7XG4gIH1cblxuICBwdWJsaWMgb25BY3Rpb25DbGlja2VkKGFjdGlvbjogT2VwYUFjdGlvbik6IHZvaWQge1xuICAgICAgY29uc3QgZGF0YSA9IHRoaXMuZGF0YTtcbiAgICAgIHRoaXMuYWN0aW9uQ2xpY2tlZC5lbWl0KHsgXG4gICAgICAgIGFjdGlvbjogYWN0aW9uLCBcbiAgICAgICAgZGF0YTogZGF0YSxcbiAgICAgICAgYnV0dG9uT2JqOiB0aGlzXG4gICAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyBzZXRCdXN5KCkge1xuICAgIHRoaXMuYnVzeSA9IHRydWU7XG4gIH1cblxuICBwdWJsaWMgY2xlYXJCdXN5KCkge1xuICAgIHRoaXMuYnVzeSA9IGZhbHNlO1xuICB9XG5cbiAgcHVibGljIGdldElEKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuYnRuSWQgKyAnX0FjdGlvbkJ0bic7XG4gIH1cblxuICBkcm9wZG93bk9wZW5lZCgpIHtcbiAgICB0aGlzLmRyb3Bkb3duT3BlbkNoYW5nZS5lbWl0KHRydWUpO1xuICB9XG5cbiAgZHJvcGRvd25DbG9zZWQoKSB7XG4gICAgdGhpcy5kcm9wZG93bk9wZW5DaGFuZ2UuZW1pdChmYWxzZSk7XG4gIH1cblxufVxuIiwiPGRpdiAqbmdJZj1cImFjdGlvbnMgJiYgYWN0aW9ucy5sZW5ndGggPiAwXCIgY2xhc3M9XCJidG4tZ3JvdXBcIiBkcm9wZG93biBbZHJvcHVwXT1cImRyb3B1cFwiIHJvbGU9XCJncm91cFwiIGFyaWEtbGFiZWw9XCJBY3Rpb24gQnV0dG9uIEdyb3VwXCIgKG9uU2hvd24pPVwiZHJvcGRvd25PcGVuZWQoKVwiIChvbkhpZGRlbik9XCJkcm9wZG93bkNsb3NlZCgpXCI+XG4gIDxidXR0b24gZHJvcGRvd25Ub2dnbGUgdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5IGRyb3Bkb3duLXRvZ2dsZVwiIFtuZ0NsYXNzXT1cInsgJ2J0bi1zbScgOiAhbm9ybWFsU2l6ZSB9XCJcbiAgICBbaWRdPVwiYnRuSWQrJ19BY3Rpb25CdG4nXCIgYXJpYS1sYWJlbD1cIkFjdGlvbiBCdXR0b25cIiBhcmlhLWhhc3BvcHVwPVwidHJ1ZVwiIGFyaWEtZXhwYW5kZWQ9XCJmYWxzZVwiPlxuICAgIDxzcGFuICpuZ0lmPVwiYnVzeVwiIGNsYXNzPVwic3Bpbm5lci1ib3JkZXIgdGV4dC1wcmltYXJ5XCIgcm9sZT1cInN0YXR1c1wiIGFyaWEtbGFiZWw9XCJMb2FkaW5nXCI+PC9zcGFuPlxuICAgIHt7bGFiZWx9fSBcbiAgICA8c3BhbiBjbGFzcz1cImNhcmV0XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9zcGFuPlxuICA8L2J1dHRvbj5cblxuICA8dWwgKmRyb3Bkb3duTWVudSBjbGFzcz1cImRyb3Bkb3duLW1lbnUgZHJvcGRvd24tbWVudS1yaWdodFwiIHJvbGU9XCJtZW51XCIgYXJpYS1sYWJlbD1cIkFjdGlvbiBNZW51XCI+XG4gICAgICA8bGkgKm5nRm9yPVwibGV0IGFjdGlvbiBvZiBhY3Rpb25zOyBsZXQgaSA9IGluZGV4O1wiIHJvbGU9XCJtZW51aXRlbVwiPlxuICAgICAgICAgIDxhICpuZ0lmPVwiIWJ1c3lcIiBjbGFzcz1cImRyb3Bkb3duLWl0ZW1cIiAoY2xpY2spPVwib25BY3Rpb25DbGlja2VkKGFjdGlvbilcIiBbaWRdPVwiYnRuSWQrJ19BY3Rpb25MaW5rXycraVwiIFthdHRyLmFyaWEtbGFiZWxdPVwiYWN0aW9uLnRpdGxlXCIgdGFiaW5kZXg9XCIwXCI+XG4gICAgICAgICAgICA8aSBuZ0NsYXNzPVwie3thY3Rpb24uY2xhc3NOYW1lIHx8ICcnfX1cIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+IHt7YWN0aW9uLnRpdGxlfX1cbiAgICAgICAgICA8L2E+XG4gICAgICA8L2xpPlxuICA8L3VsPlxuPC9kaXY+IFxuPCEtLSBkaXNwbGF5IGRpc2FibGVkIGJ1dHRvbiBpZiBubyBhY3Rpb25zIGFyZSBhdmFpbGFibGUgLS0+XG48ZGl2ICpuZ0lmPVwiIWFjdGlvbnMgfHwgYWN0aW9ucy5sZW5ndGggPT09IDBcIj5cbiAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidG4gYnRuLXByaW1hcnlcIiBbbmdDbGFzc109XCJ7ICdidG4tc20nIDogIW5vcm1hbFNpemUgfVwiIFtpZF09XCJidG5JZCsnX0FjdGlvbkJ0bidcIiBkaXNhYmxlZCBhcmlhLWxhYmVsPVwiTm8gYWN0aW9ucyBhdmFpbGFibGVcIj5cbiAgICBOL0EgXG4gIDwvYnV0dG9uPlxuPC9kaXY+Il19

package/esm2022/lib/action-btn-modal/action-btn-modal.component.mjs

@@ -12,7 +12,7 @@ export class ActionBtnModalComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnModalComponent, deps: [{ token: i1.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\" 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: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.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: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["dropdownOpenChange", "actionClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnModalComponent, decorators: [{
             type: Component,

package/esm2022/lib/confirmation-modal/confirmation-modal.component.mjs

@@ -83,7 +83,7 @@ export class ConfirmationModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.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  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table\n      id = \"permitDetail\"\n      tableId=\"permitDetail\"\n      [config]=\"tableConfig\"\n      [data]=\"tableData\"\n      [header]=\"tableHeader\"\n      (rowSelected)=\"onCellSelect($event)\"\n      (cellClicked)=\"onCellClicked($event)\"\n    ></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\"\n    (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\"\n    (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\"\n    (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationModalComponent, selector: "oepa-confirmation-modal", inputs: { tableHeader: "tableHeader", tableData: "tableData", headerText: "headerText", bodyText: "bodyText", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel", skipBtnLabel: "skipBtnLabel", bodyClassName: "bodyClassName", confirmationCallback: "confirmationCallback", confirmationCallbackComponent: "confirmationCallbackComponent" }, outputs: { onCellClick: "onCellClick", confirmClicked: "confirmClicked", cancelClicked: "cancelClicked", skipClicked: "skipClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table\n      id = \"permitDetail\"\n      tableId=\"permitDetail\"\n      [config]=\"tableConfig\"\n      [data]=\"tableData\"\n      [header]=\"tableHeader\"\n      (rowSelected)=\"onCellSelect($event)\"\n      (cellClicked)=\"onCellClicked($event)\"\n    ></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\"\n    (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\"\n    (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\"\n    (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,

package/esm2022/lib/edoc-attachment/edoc-attachment.component.mjs

@@ -183,11 +183,11 @@ export class EdocAttachmentComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EdocAttachmentComponent, deps: [{ token: i1.OepaComponentIdService }, { token: i1.OepaFileUtilService }, { token: i2.EdocAttachmentService }, { token: i3.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\" [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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.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\" [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"] }]
+            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}\n"] }]
         }], ctorParameters: () => [{ type: i1.OepaComponentIdService }, { type: i1.OepaFileUtilService }, { type: i2.EdocAttachmentService }, { type: i3.BsModalService }], propDecorators: { attachment: [{
                 type: Input
             }], group: [{

package/esm2022/lib/entity/organization-create-modal/organization-create-modal.component.mjs

@@ -296,7 +296,7 @@ export 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.FormBuilder }, { token: i2.BsModalRef }, { token: i3.OepaFormsService }, { token: i4.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\" 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.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: i7.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i8.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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.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: i7.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i8.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationCreateModalComponent, decorators: [{
             type: Component,

package/esm2022/lib/entity/organization-search-modal/organization-search-modal.component.mjs

@@ -293,7 +293,7 @@ export 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.FormBuilder }, { token: i2.BsModalRef }, { token: i2.BsModalService }, { token: i3.OepaFormsService }, { token: i4.EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchModalComponent, selector: "oepa-organization-search-modal", outputs: { onOrganizationSelected: "onOrganizationSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i8.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i9.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchModalComponent, selector: "oepa-organization-search-modal", outputs: { onOrganizationSelected: "onOrganizationSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i8.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i9.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchModalComponent, decorators: [{
             type: Component,

package/esm2022/lib/entity/person-create-modal/person-create-modal.component.mjs

@@ -305,7 +305,7 @@ export 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.FormBuilder }, { token: i2.BsModalRef }, { token: i3.OepaFormsService }, { token: i4.EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonCreateModalComponent, selector: "oepa-person-create-modal", outputs: { onPersonCreated: "onPersonCreated" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center sr-only\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i7.ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: i8.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonCreateModalComponent, selector: "oepa-person-create-modal", outputs: { onPersonCreated: "onPersonCreated" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center sr-only\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i7.ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: i8.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonCreateModalComponent, decorators: [{
             type: Component,

package/esm2022/lib/entity/person-search-modal/person-search-modal.component.mjs

@@ -300,7 +300,7 @@ export 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.FormBuilder }, { token: i2.BsModalRef }, { token: i2.BsModalService }, { token: i3.OepaFormsService }, { token: i4.EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchModalComponent, selector: "oepa-person-search-modal", outputs: { onPersonSelected: "onPersonSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i8.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i9.ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: i10.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchModalComponent, selector: "oepa-person-search-modal", outputs: { onPersonSelected: "onPersonSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i8.AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: i9.ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: i10.TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchModalComponent, decorators: [{
             type: Component,