@ohioepa/oepa-ui-lib 2.0.18 → 2.0.20

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, Input, EventEmitter, Output, Directive, HostListener, Pipe, ViewChild, forwardRef, NgModule } from '@angular/core';
+import { Injectable, Inject, Component, Input, EventEmitter, ViewChildren, Output, Directive, HostListener, Pipe, ViewChild, forwardRef, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Observable, Subject, forkJoin, EMPTY, of, throwError } from 'rxjs';
@@ -541,6 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ActionBtnComponent {
     sanitizer;
     busy = false;
+    actionMenuItems;
     /** Emits true when dropdown opens, false when closes */
     dropdownOpenChange = new EventEmitter();
     /** Button label */
@@ -586,13 +587,96 @@ class ActionBtnComponent {
     dropdownClosed() {
         this.dropdownOpenChange.emit(false);
     }
+    onToggleKeydown(event) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const toggleBtn = event.currentTarget;
+        if (!toggleBtn) {
+            return;
+        }
+        const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true';
+        if (isExpanded) {
+            this.focusFirstOrLastItem(event.key);
+            return;
+        }
+        // Open first, then move focus into the menu.
+        toggleBtn.click();
+        setTimeout(() => this.focusFirstOrLastItem(event.key));
+    }
+    onMenuKeydown(event) {
+        const handledKeys = ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape'];
+        if (!handledKeys.includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const items = this.getMenuItems();
+        if (!items.length) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        let currentIndex = items.findIndex(item => item === activeElement);
+        if (currentIndex < 0) {
+            currentIndex = 0;
+        }
+        if (event.key === 'ArrowDown') {
+            const nextIndex = (currentIndex + 1) % items.length;
+            items[nextIndex].focus();
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            const prevIndex = (currentIndex - 1 + items.length) % items.length;
+            items[prevIndex].focus();
+            return;
+        }
+        if (event.key === 'Home') {
+            items[0].focus();
+            return;
+        }
+        if (event.key === 'End') {
+            items[items.length - 1].focus();
+            return;
+        }
+        const toggleButton = document.getElementById(this.getID());
+        if (toggleButton) {
+            toggleButton.click();
+            toggleButton.focus();
+        }
+    }
+    getMenuItems() {
+        if (!this.actionMenuItems) {
+            return [];
+        }
+        return this.actionMenuItems
+            .toArray()
+            .map(item => item.nativeElement)
+            .filter(item => !!item && !item.hasAttribute('disabled'));
+    }
+    focusFirstOrLastItem(key) {
+        const items = this.getMenuItems();
+        if (!items.length) {
+            return;
+        }
+        if (key === 'ArrowUp') {
+            items[items.length - 1].focus();
+        }
+        else {
+            items[0].focus();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBtnComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: { label: "label", btnId: "btnId", data: "data", actions: "actions", normalSize: "normalSize", dropup: "dropup" }, outputs: { 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"] }] });
+    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" }, viewQueries: [{ propertyName: "actionMenuItems", predicate: ["actionMenuItem"], descendants: true }], 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    (keydown)=\"onToggleKeydown($event)\"\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=\"oepa-action-menu dropdown-menu-right\" role=\"menu\" aria-label=\"Action Menu\" (keydown)=\"onMenuKeydown($event)\">\n      <li *ngFor=\"let action of actions; let i = index;\" role=\"menuitem\">\n          <a *ngIf=\"!busy\" #actionMenuItem class=\"dropdown-item\" (click)=\"onActionClicked(action)\"\n            (keydown.enter)=\"onActionClicked(action); $event.preventDefault(); $event.stopPropagation()\"\n            (keydown.space)=\"onActionClicked(action); $event.preventDefault(); $event.stopPropagation()\"\n            [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: [".oepa-action-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.oepa-action-menu.show{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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\" (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$3.DomSanitizer }], propDecorators: { dropdownOpenChange: [{
+            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    (keydown)=\"onToggleKeydown($event)\"\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=\"oepa-action-menu dropdown-menu-right\" role=\"menu\" aria-label=\"Action Menu\" (keydown)=\"onMenuKeydown($event)\">\n      <li *ngFor=\"let action of actions; let i = index;\" role=\"menuitem\">\n          <a *ngIf=\"!busy\" #actionMenuItem class=\"dropdown-item\" (click)=\"onActionClicked(action)\"\n            (keydown.enter)=\"onActionClicked(action); $event.preventDefault(); $event.stopPropagation()\"\n            (keydown.space)=\"onActionClicked(action); $event.preventDefault(); $event.stopPropagation()\"\n            [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: [".oepa-action-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.oepa-action-menu.show{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { actionMenuItems: [{
+                type: ViewChildren,
+                args: ['actionMenuItem']
+            }], dropdownOpenChange: [{
                 type: Output
             }], label: [{
                 type: Input
@@ -1097,6 +1181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class TableComponent {
     sanitizer;
+    elementRef;
     tableService;
     tableExportService;
     fileUtilService;
@@ -1108,7 +1193,8 @@ class TableComponent {
     exportVisibleOnly = false;
     /** True if any action dropdown is open */
     isAnyActionDropdownOpen = false;
-    actionDropdownOpenChange = new EventEmitter();
+    /** Dynamic spacer height used to avoid clipping inside expansion panels */
+    actionFillerHeight = 0;
     dataColumns = [];
     hiddenColumns = [];
     columnHeaders = [];
@@ -1131,6 +1217,7 @@ class TableComponent {
     currentPage = 1;
     paginationOn = true;
     tableId = '';
+    addActionFiller = false;
     set config(conf) {
         if (!conf.className) {
             conf.className = 'table-striped table-bordered';
@@ -1183,8 +1270,30 @@ class TableComponent {
     }
     /** Called when any oepa-action-btn dropdown open/close changes */
     onDropdownOpenChange(isOpen) {
-        this.isAnyActionDropdownOpen = isOpen;
-        this.actionDropdownOpenChange.emit(isOpen);
+        // Wait for DOM class updates from dropdown directive before measuring.
+        setTimeout(() => this.updateDropdownFillerState());
+    }
+    updateDropdownFillerState() {
+        const host = this.elementRef.nativeElement;
+        const openMenus = Array.from(host.querySelectorAll('.oepa-action-menu.show'));
+        this.isAnyActionDropdownOpen = openMenus.length > 0;
+        if (!this.addActionFiller || !this.isAnyActionDropdownOpen) {
+            this.actionFillerHeight = 0;
+            return;
+        }
+        const panelContent = host.closest('.mat-expansion-panel-content');
+        let maxOverflow = 0;
+        openMenus.forEach((menu) => {
+            const menuRect = menu.getBoundingClientRect();
+            const overflow = panelContent
+                ? menuRect.bottom - panelContent.getBoundingClientRect().bottom
+                : menuRect.bottom - window.innerHeight;
+            if (overflow > maxOverflow) {
+                maxOverflow = overflow;
+            }
+        });
+        // Add small cushion so border/shadow are fully visible.
+        this.actionFillerHeight = Math.max(0, Math.ceil(maxOverflow) + 16);
     }
     initializeHiddenColumns(complexHeader) {
         this.visibleColumnCount = 0;
@@ -1226,8 +1335,9 @@ class TableComponent {
         return this._data.map(x => Object.assign({}, x));
     }
     totalRow;
-    constructor(sanitizer, tableService, tableExportService, fileUtilService) {
+    constructor(sanitizer, elementRef, tableService, tableExportService, fileUtilService) {
         this.sanitizer = sanitizer;
+        this.elementRef = elementRef;
         this.tableService = tableService;
         this.tableExportService = tableExportService;
         this.fileUtilService = fileUtilService;
@@ -1814,7 +1924,7 @@ class TableComponent {
     convertToTable(template) {
         let oepaTable = undefined;
         if (template.component === TableComponent) {
-            const table = new TableComponent(this.sanitizer, this.tableService, this.tableExportService, this.fileUtilService);
+            const table = new TableComponent(this.sanitizer, this.elementRef, this.tableService, this.tableExportService, this.fileUtilService);
             if (template.inputs && template.inputs.length > 0) {
                 template.inputs.forEach((input) => {
                     if (input.name === 'config') {
@@ -1854,15 +1964,15 @@ class TableComponent {
     onCustomBtnClick() {
         this.customBtnClicked.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { actionDropdownOpenChange: "actionDropdownOpenChange", cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span class=\"sr-only\">Row details</span>\n      <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n        <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n      </button>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\" (dropdownOpenChange)=\"onDropdownOpenChange($event)\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["dropdownOpenChange", "actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: i0.ElementRef }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", addActionFiller: "addActionFiller", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span class=\"sr-only\">Row details</span>\n      <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n        <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n      </button>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\" (dropdownOpenChange)=\"onDropdownOpenChange($event)\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>\n<div class=\"expansion-filler\" *ngIf=\"addActionFiller && isAnyActionDropdownOpen\" [style.height.px]=\"actionFillerHeight\"></div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}.tall-expansion-panel .mat-expansion-panel-content{min-height:700px;padding-bottom:96px}.expansion-filler{width:100%;pointer-events:none;background:transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["dropdownOpenChange", "actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span class=\"sr-only\">Row details</span>\n      <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n        <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n      </button>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\" (dropdownOpenChange)=\"onDropdownOpenChange($event)\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }], propDecorators: { actionDropdownOpenChange: [{
-                type: Output
-            }], tableId: [{
+            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span class=\"sr-only\">Row details</span>\n      <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n        <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n      </button>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\" (dropdownOpenChange)=\"onDropdownOpenChange($event)\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>\n<div class=\"expansion-filler\" *ngIf=\"addActionFiller && isAnyActionDropdownOpen\" [style.height.px]=\"actionFillerHeight\"></div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}.tall-expansion-panel .mat-expansion-panel-content{min-height:700px;padding-bottom:96px}.expansion-filler{width:100%;pointer-events:none;background:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: i0.ElementRef }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }], propDecorators: { tableId: [{
+                type: Input
+            }], addActionFiller: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -1969,7 +2079,7 @@ class ConfirmationModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationModalComponent, deps: [{ token: i2$1.BsModalRef }, { token: i2$2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationModalComponent, selector: "oepa-confirmation-modal", inputs: { tableHeader: "tableHeader", tableData: "tableData", headerText: "headerText", bodyText: "bodyText", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel", skipBtnLabel: "skipBtnLabel", bodyClassName: "bodyClassName", confirmationCallback: "confirmationCallback", confirmationCallbackComponent: "confirmationCallbackComponent" }, outputs: { onCellClick: "onCellClick", confirmClicked: "confirmClicked", cancelClicked: "cancelClicked", skipClicked: "skipClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table\n      id = \"permitDetail\"\n      tableId=\"permitDetail\"\n      [config]=\"tableConfig\"\n      [data]=\"tableData\"\n      [header]=\"tableHeader\"\n      (rowSelected)=\"onCellSelect($event)\"\n      (cellClicked)=\"onCellClicked($event)\"\n    ></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\"\n    (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\"\n    (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\"\n    (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationModalComponent, selector: "oepa-confirmation-modal", inputs: { tableHeader: "tableHeader", tableData: "tableData", headerText: "headerText", bodyText: "bodyText", confirmBtnLabel: "confirmBtnLabel", cancelBtnLabel: "cancelBtnLabel", skipBtnLabel: "skipBtnLabel", bodyClassName: "bodyClassName", confirmationCallback: "confirmationCallback", confirmationCallbackComponent: "confirmationCallbackComponent" }, outputs: { onCellClick: "onCellClick", confirmClicked: "confirmClicked", cancelClicked: "cancelClicked", skipClicked: "skipClicked" }, ngImport: i0, template: "<div *ngIf=\"headerText\" class=\"modal-header\">\n  <h1 class=\"modal-title pull-left\" id=\"confirmationModalTitle\">{{headerText}}</h1>\n  <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"cancel()\"></button>\n</div>\n<div class=\"modal-body\" [ngClass]=\"bodyClassName\">\n  <div *ngIf=\"tableData && tableHeader\">\n    <oepa-table\n      id = \"permitDetail\"\n      tableId=\"permitDetail\"\n      [config]=\"tableConfig\"\n      [data]=\"tableData\"\n      [header]=\"tableHeader\"\n      (rowSelected)=\"onCellSelect($event)\"\n      (cellClicked)=\"onCellClicked($event)\"\n    ></oepa-table>\n  </div>\n  <span id=\"confirmationBodyText\">{{bodyText}}</span>\n</div>\n<div class=\"modal-footer\">\n  <button *ngIf=\"confirmBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnConfirm\"\n    (click)=\"confirm()\" [attr.aria-label]=\"confirmBtnLabel\">{{confirmBtnLabel}}</button>\n  <button *ngIf=\"cancelBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnCancel\"\n    (click)=\"cancel()\" [attr.aria-label]=\"cancelBtnLabel\">{{cancelBtnLabel}}</button>\n  <button *ngIf=\"skipBtnLabel\" type=\"button\" class=\"btn btn-primary mr-1\" id=\"btnSkip\"\n    (click)=\"skip()\" [attr.aria-label]=\"skipBtnLabel\">{{skipBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
@@ -2160,7 +2270,7 @@ class AccountSearchModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: AccountSearchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccountSearchModalComponent, selector: "oepa-account-search-modal", inputs: { searchURL: "searchURL" }, outputs: { onAccountSelected: "onAccountSelected" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\" id=\"accountSearchModalTitle\">Advanced Ebiz Account Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\" [expanded]=\"openSearchCriteria\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    <div id=\"accountSearchCriteria\">\n                        <b>Ebiz Account Search Criteria</b>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"userUIDInput\">Ebiz User ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"userUIDInput\" formControlName=\"userID\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"firstNameInput\">First Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"firstNameInput\" formControlName=\"firstName\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"lastNameInput\">Last Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"lastNameInput\" formControlName=\"lastName\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" class=\"spinner-border text-primary\" role=\"status\"></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Ebiz Account List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\" *ngIf=\"tableHeader\">\n            <oepa-table tableId=\"accountSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveAccountBtn\"\n                [disabled]=\"!selectedAccount || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "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\" id=\"accountSearchModalTitle\">Advanced Ebiz Account Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    </button>\n</div>\n<div class=\"modal-body\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\" [expanded]=\"openSearchCriteria\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    <div id=\"accountSearchCriteria\">\n                        <b>Ebiz Account Search Criteria</b>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"userUIDInput\">Ebiz User ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"userUIDInput\" formControlName=\"userID\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"firstNameInput\">First Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"firstNameInput\" formControlName=\"firstName\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"lastNameInput\">Last Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"lastNameInput\" formControlName=\"lastName\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" class=\"spinner-border text-primary\" role=\"status\"></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\">\n        <div class=\"card-header\">\n            <b>Ebiz Account List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\" *ngIf=\"tableHeader\">\n            <oepa-table tableId=\"accountSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveAccountBtn\"\n                [disabled]=\"!selectedAccount || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccountSearchModalComponent, decorators: [{
             type: Component,
@@ -3237,11 +3347,11 @@ class PTableComponent {
         this.customBtn2Clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n             [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n              {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}:host ::ng-deep .pagination-sm .page-item .page-link{min-width:44px;min-height:44px;padding:10px 16px;margin:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5 d-flex justify-content-end\">\n        <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n          [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n          name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n          (numPages)=\"pageInfo.numPages = $event\">\n        </pagination>\n        &nbsp;\n        <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n         [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n          {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n        </button>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-p-table', template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n             [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n              {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}:host ::ng-deep .pagination-sm .page-item .page-link{min-width:44px;min-height:44px;padding:10px 16px;margin:4px}\n"] }]
+            args: [{ selector: 'oepa-p-table', template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5 d-flex justify-content-end\">\n        <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n          [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n          name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n          (numPages)=\"pageInfo.numPages = $event\">\n        </pagination>\n        &nbsp;\n        <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n         [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n          {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n        </button>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }, { type: i0.ElementRef }], propDecorators: { tableId: [{
                 type: Input
             }], allowEdit: [{
@@ -4405,7 +4515,7 @@ class OrganizationCreateModalComponent {
         return this.modalFormGroup.controls[name].hasError(field);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationCreateModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationCreateModalComponent, selector: "oepa-organization-create-modal", outputs: { onOrganizationCreated: "onOrganizationCreated" }, ngImport: i0, template: "<div class=\"modal-header\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationCreateModalTitle\">Create Organization</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationCreateModalTitle\" tabindex=\"-1\">\n    <div *ngIf=\"!modalFormGroup\">\n        <div class=\"text-center\">Initializing...</div>\n        <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n    </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <label for=\"orgTypeSelect\">Organization Type</label>\n        <select id=\"orgTypeSelect\" formControlName=\"orgType\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('orgType')\" aria-describedby=\"orgTypeError\">\n            <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"orgTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('orgType','required')\">Organization Type is required</small>\n\n        <label for=\"programSelect\">Program</label>\n        <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('program')\" aria-describedby=\"programError\">\n            <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n        </select>\n        <small id=\"programError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n\n        <label for=\"organizationName\">Organization Name</label>\n        <input type=\"text\" class=\"form-control\" formControlName=\"organizationName\" id=\"organizationName\" maxlength=\"40\"\n                [ngClass]=\"getModalFormGroupInvalidClass('organizationName')\" aria-describedby=\"organizationNameError\">\n        <small id=\"organizationNameError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('organizationName','required')\">Organization is required</small>\n\n        <label for=\"PhoneInput\">Phone Number</label>\n        <input type=\"text\" class=\"form-control\" [ngClass]=\"getModalFormGroupInvalidClass('phoneNumber')\"\n            placeholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" id=\"PhoneInput\" mask=\"(000) 000-0000\" minlength=\"10\" aria-describedby=\"phoneNumberError phoneNumberMinlengthError\">\n        <small id=\"phoneNumberError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','required')\">Phone Number is required</small>\n        <small id=\"phoneNumberMinlengthError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','minlength')\">Please enter a valid phone number</small>\n          \n                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\" aria-describedby=\"phoneNumberTypeError\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                </select>\n                <small id=\"phoneNumberTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" [cityMaxLength] = \"25\"></oepa-address>   \n\n        <label for=\"addressTypeSelect\">Address Type</label>\n        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\" [ngClass]=\"getModalFormGroupInvalidClass('addressType')\" aria-describedby=\"addressTypeError\">\n            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"addressTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n        \n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\">\n        <div class=\"card-header\">\n            <b>Matching Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\" [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"saveOrganizationAfterSearch()\" aria-label=\"Save new organization\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveOrganization()\" aria-label=\"No match, save new organization\">No Match, Save New Organization</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedOrganizationBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedOrganization()\" aria-label=\"Use selected organization\">Use Selected Organization</button>\n            <button id=\"CancelOrganizationBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "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\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationCreateModalTitle\">Create Organization</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationCreateModalTitle\" tabindex=\"-1\">\n    <div *ngIf=\"!modalFormGroup\">\n        <div class=\"text-center\">Initializing...</div>\n        <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\"></span></div>\n    </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\">\n        <label for=\"orgTypeSelect\">Organization Type</label>\n        <select id=\"orgTypeSelect\" formControlName=\"orgType\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('orgType')\" aria-describedby=\"orgTypeError\">\n            <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"orgTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('orgType','required')\">Organization Type is required</small>\n\n        <label for=\"programSelect\">Program</label>\n        <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\"\n        [ngClass]=\"getModalFormGroupInvalidClass('program')\" aria-describedby=\"programError\">\n            <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n        </select>\n        <small id=\"programError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n\n        <label for=\"organizationName\">Organization Name</label>\n        <input type=\"text\" class=\"form-control\" formControlName=\"organizationName\" id=\"organizationName\" maxlength=\"40\"\n                [ngClass]=\"getModalFormGroupInvalidClass('organizationName')\" aria-describedby=\"organizationNameError\">\n        <small id=\"organizationNameError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('organizationName','required')\">Organization is required</small>\n\n        <label for=\"PhoneInput\">Phone Number</label>\n        <input type=\"text\" class=\"form-control\" [ngClass]=\"getModalFormGroupInvalidClass('phoneNumber')\"\n            placeholder=\"(xxx) xxx-xxxx\" formControlName=\"phoneNumber\" id=\"PhoneInput\" mask=\"(000) 000-0000\" minlength=\"10\" aria-describedby=\"phoneNumberError phoneNumberMinlengthError\">\n        <small id=\"phoneNumberError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','required')\">Phone Number is required</small>\n        <small id=\"phoneNumberMinlengthError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumber','minlength')\">Please enter a valid phone number</small>\n          \n                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\" aria-describedby=\"phoneNumberTypeError\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                </select>\n                <small id=\"phoneNumberTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" [cityMaxLength] = \"25\"></oepa-address>   \n\n        <label for=\"addressTypeSelect\">Address Type</label>\n        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\" [ngClass]=\"getModalFormGroupInvalidClass('addressType')\" aria-describedby=\"addressTypeError\">\n            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n        </select>\n        <small id=\"addressTypeError\" class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n        \n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\">\n        <div class=\"card-header\">\n            <b>Matching Organization List&nbsp;</b><span class=\"badge bg-secondary\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\">\n    <div *ngIf=\"inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\">\n        <div class=\"alert alert-info\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\">\n        <div class=\"alert alert-danger\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\" [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"saveOrganizationAfterSearch()\" aria-label=\"Save new organization\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveOrganization()\" aria-label=\"No match, save new organization\">No Match, Save New Organization</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedOrganization && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedOrganizationBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedOrganization()\" aria-label=\"Use selected organization\">Use Selected Organization</button>\n            <button id=\"CancelOrganizationBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationCreateModalComponent, decorators: [{
             type: Component,
@@ -4695,7 +4805,7 @@ class OrganizationSearchModalComponent {
         return this.modalFormGroup.controls[name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchModalComponent, selector: "oepa-organization-search-modal", outputs: { onOrganizationSelected: "onOrganizationSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrganizationSearchModalComponent, selector: "oepa-organization-search-modal", outputs: { onOrganizationSelected: "onOrganizationSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"organizationSearchModalTitle\">Advanced Organization Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\">\n        <!-- Icon visually hidden for screen readers -->\n    </button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"organizationSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"organizationSearchCriteria\">\n                    <mat-panel-title>\n                        Organization Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"organizationSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">      \n                            <label for=\"programSelect\">Program</label>\n                            <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                    </div>\n                </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Organization Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"subType\" class=\"form-select\">\n                                <option *ngFor=\"let t of organizationTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationIDInput\">Organization ID</label>\n                        <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"organizationIDInput\" formControlName=\"id\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"organizationNameInput\">Organization Name</label>\n                        <input type=\"search\" class=\"form-control\" id=\"organizationNameInput\" formControlName=\"name\" maxlength=\"40\">\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <div class=\"form-group\">\n                        <label for=\"secondaryIDInput\">Secondary ID</label>\n                        <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-md-12\">\n                    <div class=\"form-group\">\n                        <label for=\"addressTypeSelect\">Address Type</label>\n                        <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                            <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n            <div class=\"row\">\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                        <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                            <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"areaCodeInput\">Area Code</label>\n                        <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                    </div>\n                </div>\n                <div class=\"col-md-4\">\n                    <div class=\"form-group\">\n                        <label for=\"phoneNumberInput\">Phone Number</label>\n                        <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                    </div>\n                </div>\n                <div class=\"col-md-2\">\n                    <div class=\"form-group\">\n                        <label for=\"extensionInput\">Extension</label>\n                        <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-center\">\n                    <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                    <button  *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                    <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                </div>\n            </div>\n        </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"organizationListHeader\">\n            <b>Organization List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of organizations\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"organizationSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"organizationListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveOrganizationBtn\"\n                [disabled]=\"!selectedOrganization || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save organization\">Save</button>\n\t\t\t<button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreateOrganizationButton\"\n                (click)=\"createNewOrganization()\" aria-label=\"Create new organization\">Create New Organization</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrganizationSearchModalComponent, decorators: [{
             type: Component,
@@ -5114,7 +5224,7 @@ class PersonCreateModalComponent {
         return this.modalFormGroup.controls[name].hasError(field);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonCreateModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonCreateModalComponent, selector: "oepa-person-create-modal", outputs: { onPersonCreated: "onPersonCreated" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center sr-only\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonCreateModalComponent, selector: "oepa-person-create-modal", outputs: { onPersonCreated: "onPersonCreated" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personCreateModalTitle\">Create Person</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personCreateModalTitle\">\n        <div *ngIf=\"!modalFormGroup\" aria-live=\"polite\" aria-atomic=\"true\">\n            <div class=\"text-center sr-only\">Initializing...</div>\n            <div class=\"text-center\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span></div>\n        </div>\n    <form *ngIf=\"modalFormGroup\" [formGroup]=\"modalFormGroup\" (keydown.enter)=\"$event.preventDefault()\">\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"personTypeSelect\">Person Type</label>\n                    <select id=\"personTypeSelect\" formControlName=\"personType\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('personType')\">\n                        <option *ngFor=\"let t of personSubTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('personType','required')\">Person Type is required</small>\n                </div>\n            </div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"programSelect\">Program</label>\n                    <select id=\"programSelect\" formControlName=\"program\" class=\"form-select\" aria-required=\"true\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('program')\">\n                        <option *ngFor=\"let t of programs\" [ngValue]=\"t\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('program','required')\">Program is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-contact [group]=\"getModalFormGroup('contact')\"\n            [showMiddleName]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" [showValidation]=\"true\" aria-label=\"Contact information fields\"></oepa-contact>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                    <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('phoneNumberType')\">\n                        <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('phoneNumberType','required')\">Phone Number Type is required</small>\n                </div>\n            </div>\n        </div>\n        <oepa-address [group]=\"getModalFormGroup('address')\" [showValidation]=\"true\" aria-label=\"Address fields\"></oepa-address>\n        <div class=\"row\">\n            <div class=\"col-md-12\">\n                <div class=\"form-group\">\n                    <label for=\"addressTypeSelect\">Address Type</label>\n                    <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\"\n                    [ngClass]=\"getModalFormGroupInvalidClass('addressType')\">\n                        <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                    </select>\n                    <small class=\"invalid-feedback\" *ngIf=\"getModalFormGroupHasError('addressType','required')\">Address Type is required</small>\n                </div>\n            </div>\n        </div>\n    </form>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"matchingPersonListHeader\">\n            <b>Matching Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of matching persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"matchingPersonListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n           {{inProgressMsg}}\n         </div>\n    </div>\n    <div *ngIf=\"infoMessage && !inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{infoMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Saving\"></span></span>\n            <button *ngIf=\"(!tableData || tableData.length === 0) && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\"\n                [disabled]=\"!modalFormGroup || modalFormGroup.invalid\"\n                (click)=\"savePersonAfterSearch()\" aria-label=\"Save new person\">Save</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && !selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonWithoutSearchBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"savePerson()\" aria-label=\"No match, save new person\">No Match, Save New Person</button>\n            <button *ngIf=\"tableData && tableData.length > 0 && selectedPerson && !inProgressMsg\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SaveSelectedPersonBtn\"\n                [disabled]=\"modalFormGroup.invalid\"\n                (click)=\"saveSelectedPerson()\" aria-label=\"Use selected person\">Use Selected Person</button>\n            <button id=\"CancelPersonBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel and close dialog\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonCreateModalComponent, decorators: [{
             type: Component,
@@ -5410,7 +5520,7 @@ class PersonSearchModalComponent {
         return this.modalFormGroup.controls[name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchModalComponent, selector: "oepa-person-search-modal", outputs: { onPersonSelected: "onPersonSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PersonSearchModalComponent, selector: "oepa-person-search-modal", outputs: { onPersonSelected: "onPersonSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"personSearchModalTitle\">Advanced Person Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"personSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"personSearchCriteria\">\n                    <mat-panel-title>\n                        Person Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <div *ngIf=\"initializing\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Loading\"></span>\n                <span class=\"sr-only\">Initializing...</span>\n            </div>\n            <form *ngIf=\"!initializing\" [formGroup]=\"modalFormGroup\" aria-describedby=\"personSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">      \n                             <label for=\"programSelect\">Program</label>\n                             <select id=\"programSelect\" formControlName=\"programID\" class=\"form-select\">\n                                <option *ngFor=\"let t of programs\" [ngValue]=\"t.id\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"subTypeSelect\">Person Type</label>\n                            <select id=\"subTypeSelect\" formControlName=\"personType\" class=\"form-select\">\n                                <option *ngFor=\"let t of personTypes\" [ngValue]=\"t\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"personIDInput\">Person ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"personIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-contact [group]=\"getModalFormGroup('contact')\" [isSearch]=\"true\"\n                [showMiddleName]=\"true\" [noPhone]=\"true\" [noFax]=\"true\" [noEmail]=\"true\" aria-label=\"Contact search fields\"></oepa-contact>\n                <div class=\"row\">\n                        <div class=\"col-md-12\">\n                            <div class=\"form-group\">\n                                <label for=\"secondaryIDInput\">Secondary ID</label>\n                                <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                            </div>\n                        </div>\n                    </div>\n                    \n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"addressTypeSelect\">Address Type</label>\n                            <select id=\"addressTypeSelect\" formControlName=\"addressType\" class=\"form-select\">\n                                <option *ngFor=\"let t of addressTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                    <div class=\"row\">\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberTypeSelect\">Phone Number Type</label>\n                                <select id=\"phoneNumberTypeSelect\" formControlName=\"phoneNumberType\" class=\"form-select\">\n                                    <option *ngFor=\"let t of phoneNumberTypes\" [ngValue]=\"t.code\">{{t.name}}</option>\n                                </select>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"areaCodeInput\">Area Code</label>\n                                <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <div class=\"form-group\">\n                                <label for=\"phoneNumberInput\">Phone Number</label>\n                                <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                            </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div class=\"form-group\">\n                                <label for=\"extensionInput\">Extension</label>\n                                <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                            </div>\n                        </div>\n                    </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"personListHeader\">\n            <b>Person List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of persons\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"personSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"personListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button *ngIf=\"tableData && tableData.length > 0\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePersonBtn\" [disabled]=\"!selectedPerson\" (click)=\"save()\" aria-label=\"Select\">Select</button>\n            <button *ngIf=\"allowCreateNew\" type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"CreatePersonButton\"\n                (click)=\"createNewPerson()\" aria-label=\"Create New Person\">Create New Person</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: ContactComponent, selector: "oepa-contact", inputs: ["group", "showValidation", "idPrefix", "firstNameLabel", "lastNameLabel", "showMiddleName", "middleNameLabel", "emailLabel", "phoneLabel", "faxLabel", "noFax", "showTitle", "noPhone", "noEmail", "isSearch", "firstNameMaxLength", "middleNameMaxLength", "lastNameMaxLength", "titleMaxLength", "emailMaxLength"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PersonSearchModalComponent, decorators: [{
             type: Component,
@@ -5745,7 +5855,7 @@ class PlaceSearchModalComponent {
         return this.modalFormGroup.controls[name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceSearchModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: OepaFormsService }, { token: EntityService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PlaceSearchModalComponent, selector: "oepa-place-search-modal", outputs: { onPlaceSelected: "onPlaceSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"placeSearchModalTitle\">Advanced Place Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"placeSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"placeSearchCriteria\">\n                    <mat-panel-title>\n                        Place Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\" aria-describedby=\"placeSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeIDInput\">Place ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"placeIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeNameInput\">Place Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"placeNameInput\" formControlName=\"name\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"secondaryIDInput\">Secondary ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                \n                <div class=\"row\">\n                    <div class=\"col-md-3\">\n                        <div class=\"form-group\">\n                            <label for=\"areaCodeInput\">Area Code</label>\n                            <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"phoneNumberInput\">Phone Number</label>\n                            <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-3\">\n                        <div class=\"form-group\">\n                            <label for=\"extensionInput\">Extension</label>\n                            <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"placeListHeader\">\n            <b>Place List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of places\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"placeSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"placeListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePlaceBtn\"\n                [disabled]=\"!selectedPlace || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PlaceSearchModalComponent, selector: "oepa-place-search-modal", outputs: { onPlaceSelected: "onPlaceSelected" }, ngImport: i0, template: "<div class=\"modal-header\" role=\"banner\">\n    <h1 class=\"modal-title pull-left\" id=\"placeSearchModalTitle\">Advanced Place Search</h1>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close dialog\" (click)=\"bsModalRef.hide()\" tabindex=\"0\"></button>\n</div>\n<div class=\"modal-body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"placeSearchModalTitle\">\n    <mat-accordion class=\"accordion\" multi>\n        <mat-expansion-panel class=\"accordion-item\">\n            <mat-expansion-panel-header>\n                <div id=\"placeSearchCriteria\">\n                    <mat-panel-title>\n                        Place Search Criteria\n                    </mat-panel-title>\n                </div>\n            </mat-expansion-panel-header>\n            <form [formGroup]=\"modalFormGroup\" aria-describedby=\"placeSearchCriteria\" (keydown.enter)=\"$event.preventDefault()\">\n                <div class=\"row\">\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeIDInput\">Place ID</label>\n                            <input type=\"search\" mask=\"999999999\" class=\"form-control\" id=\"placeIDInput\" formControlName=\"id\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"placeNameInput\">Place Name</label>\n                            <input type=\"search\" class=\"form-control\" id=\"placeNameInput\" formControlName=\"name\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-12\">\n                        <div class=\"form-group\">\n                            <label for=\"secondaryIDInput\">Secondary ID</label>\n                            <input type=\"search\" class=\"form-control\" id=\"secondaryIDInput\" formControlName=\"secondaryID\">\n                        </div>\n                    </div>\n                </div>\n                <oepa-address [group]=\"getModalFormGroup('address')\" [isSearch]=\"true\"\n                    addressOneLabel=\"Address\" [hideLine2]=\"true\" aria-label=\"Address search fields\"></oepa-address>\n                \n                <div class=\"row\">\n                    <div class=\"col-md-3\">\n                        <div class=\"form-group\">\n                            <label for=\"areaCodeInput\">Area Code</label>\n                            <input type=\"search\" mask=\"999\" class=\"form-control\" id=\"areaCodeInput\" formControlName=\"areaCode\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group\">\n                            <label for=\"phoneNumberInput\">Phone Number</label>\n                            <input type=\"search\" mask=\"999-9999\" class=\"form-control\" id=\"phoneNumberInput\" formControlName=\"phoneNumber\">\n                        </div>\n                    </div>\n                    <div class=\"col-md-3\">\n                        <div class=\"form-group\">\n                            <label for=\"extensionInput\">Extension</label>\n                            <input type=\"search\" mask=\"9999\" class=\"form-control\" id=\"extensionInput\" formControlName=\"extension\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\">\n                    <div class=\"col-sm-12 text-center\">\n                        <span *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\"><span class=\"spinner-border text-primary\" role=\"status\" aria-label=\"Searching\"></span></span>\n                        <button *ngIf=\"!inProgressMsg\" type=\"submit\" class=\"btn btn-primary mr-2\" id=\"submitSearchBtn\" (click)=\"submitSearch()\" aria-label=\"Search\">Search</button>\n                        <button id=\"resetSearchBtn\" type=\"button\" class=\"btn btn-primary\" (click)=\"resetSearch()\" aria-label=\"Reset search form\">Reset</button>\n                    </div>\n                </div>\n            </form>\n        </mat-expansion-panel>\n    </mat-accordion>\n    <div *ngIf=\"tableData && tableData.length > 0\" class=\"card\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"card-header\" id=\"placeListHeader\">\n            <b>Place List&nbsp;</b><span class=\"badge bg-secondary\" aria-label=\"Number of places\">{{tableData.length}}</span>\n        </div>\n        <div class=\"card-body\">\n            <oepa-table tableId=\"placeSearchTable\" [config]=\"tableConfig\" [data]=\"tableData\" [header]=\"tableHeader\" (rowSelected)=\"onRowSelect($event)\" aria-labelledby=\"placeListHeader\">\n            </oepa-table>\n        </div>\n    </div>\n</div>\n<div class=\"modal-footer d-block\" role=\"contentinfo\">\n    <div *ngIf=\"errorMessage\" aria-live=\"assertive\" aria-atomic=\"true\">\n        <div class=\"alert alert-danger\" role=\"alert\">\n            {{errorMessage}}\n        </div>\n    </div>\n    <div *ngIf=\"inProgressMsg\" aria-live=\"polite\" aria-atomic=\"true\">\n        <div class=\"alert alert-info\" role=\"status\">\n            {{inProgressMsg}}\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-sm-12 text-center\">\n            <button type=\"button\" class=\"btn btn-primary mr-2\"\n                id=\"SavePlaceBtn\"\n                [disabled]=\"!selectedPlace || inProgressMsg\"\n                (click)=\"save()\" aria-label=\"Save\">Save</button>\n            <button id=\"CancelPaymentBtn\" type=\"button\" class=\"btn btn-primary\"\n                (click)=\"bsModalRef.hide()\" aria-label=\"Cancel\">Cancel</button>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: AddressComponent, selector: "oepa-address", inputs: ["group", "showValidation", "idPrefix", "addressOneLabel", "addressTwoLabel", "cityLabel", "stateLabel", "zipCodeLabel", "disableState", "isSearch", "hideLine2", "line1MaxLength", "line2MaxLength", "cityMaxLength", "foreignStateLabel", "foreignZipLabel", "countryLabel", "sameAsGroup", "sameAsLabel", "sameAsChecked"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceSearchModalComponent, decorators: [{
             type: Component,
@@ -7027,7 +7137,7 @@ class NotesModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotesModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: i1$1.OepaMappingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotesModalComponent, selector: "oepa-notes-modal", inputs: { loginName: "loginName", deleteAnyNoteAllowed: "deleteAnyNoteAllowed", deleteOwnNoteAllowed: "deleteOwnNoteAllowed", createNoteAllowed: "createNoteAllowed", external: "external", errorMessage: "errorMessage", notes: "notes", defaultNoteType: "defaultNoteType" }, outputs: { onAddNote: "onAddNote", onDeleteNote: "onDeleteNote" }, ngImport: i0, template: "<div class=\"modal-header\">\n\t<h1 class=\"modal-title\" id=\"modalTitle\">Notes</h1>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\" for=\"NoteInput\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\" aria-label=\"Add Note\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\" aria-label=\"Done\">Done</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotesModalComponent, selector: "oepa-notes-modal", inputs: { loginName: "loginName", deleteAnyNoteAllowed: "deleteAnyNoteAllowed", deleteOwnNoteAllowed: "deleteOwnNoteAllowed", createNoteAllowed: "createNoteAllowed", external: "external", errorMessage: "errorMessage", notes: "notes", defaultNoteType: "defaultNoteType" }, outputs: { onAddNote: "onAddNote", onDeleteNote: "onDeleteNote" }, ngImport: i0, template: "<div class=\"modal-header\">\n\t<h1 class=\"modal-title\" id=\"modalTitle\">Notes</h1>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\" for=\"NoteInput\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\" aria-label=\"Add Note\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\" aria-label=\"Done\">Done</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotesModalComponent, decorators: [{
             type: Component,
@@ -8112,7 +8222,7 @@ class ShoppingCartViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShoppingCartViewComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: i2$1.BsModalService }, { token: ShoppingCartService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ShoppingCartViewComponent, selector: "oepa-shopping-cart-view", ngImport: i0, template: "<div class=\"container-fluid\">\n  <div class=\"row\">\n      <div class=\" col-sm-12\">\n          <h1><b>{{title}}</b></h1>\n        </div>\n    <div *ngIf=\"loading || empty\" class=\"col-sm-12 text-center\">\n      <div class=\" alert alert-info \">\n        <span class=\"\"><em>{{ loading ? 'Loading...' : 'Cart is empty' }}</em></span>\n        <img *ngIf=\"loading\" class=\"oepa-icon\" alt=\"Loading\" src=\"{{imageRoot}}/blue-load.gif\" />\n      </div>\n    </div>\n    <div *ngIf=\"!loading && !empty\" class=\"col-sm-12\">\n      <oepa-table [config]=\"tblConfig\" [data]=\"tblData\" [header]=\"tblHeader\" tableId=\"ShoppingCartTable\" (cellClicked)=\"onCellClick($event)\"></oepa-table>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n      <div class=\"alert alert-danger\">{{errorMessage}}</div>\n    </div>\n    <div *ngIf=\"!checkOutInProgress\" class=\"col-12 text-center\">\n        <button class=\"btn btn-primary mr-2\" id=\"returnToPageButton\" (click)=\"goBack()\" [attr.aria-label]=\"returnLabel\">\n          {{returnLabel}}</button>\n        <button *ngIf=\"!empty\" class=\"btn btn-primary mr-2\" id=\"checkoutBtn\" (click)=\"onCheckout()\" aria-label=\"Checkout\">\n          Checkout</button>\n      </div>\n      <div *ngIf=\"checkOutInProgress\" class=\"col-12 text-center\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span>\n          Checking out...\n        </div>\n      </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["actionDropdownOpenChange", "cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ShoppingCartViewComponent, selector: "oepa-shopping-cart-view", ngImport: i0, template: "<div class=\"container-fluid\">\n  <div class=\"row\">\n      <div class=\" col-sm-12\">\n          <h1><b>{{title}}</b></h1>\n        </div>\n    <div *ngIf=\"loading || empty\" class=\"col-sm-12 text-center\">\n      <div class=\" alert alert-info \">\n        <span class=\"\"><em>{{ loading ? 'Loading...' : 'Cart is empty' }}</em></span>\n        <img *ngIf=\"loading\" class=\"oepa-icon\" alt=\"Loading\" src=\"{{imageRoot}}/blue-load.gif\" />\n      </div>\n    </div>\n    <div *ngIf=\"!loading && !empty\" class=\"col-sm-12\">\n      <oepa-table [config]=\"tblConfig\" [data]=\"tblData\" [header]=\"tblHeader\" tableId=\"ShoppingCartTable\" (cellClicked)=\"onCellClick($event)\"></oepa-table>\n    </div>\n    <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n      <div class=\"alert alert-danger\">{{errorMessage}}</div>\n    </div>\n    <div *ngIf=\"!checkOutInProgress\" class=\"col-12 text-center\">\n        <button class=\"btn btn-primary mr-2\" id=\"returnToPageButton\" (click)=\"goBack()\" [attr.aria-label]=\"returnLabel\">\n          {{returnLabel}}</button>\n        <button *ngIf=\"!empty\" class=\"btn btn-primary mr-2\" id=\"checkoutBtn\" (click)=\"onCheckout()\" aria-label=\"Checkout\">\n          Checkout</button>\n      </div>\n      <div *ngIf=\"checkOutInProgress\" class=\"col-12 text-center\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span>\n          Checking out...\n        </div>\n      </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "addActionFiller", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShoppingCartViewComponent, decorators: [{
             type: Component,