@ohioepa/oepa-ui-lib 2.0.9 → 2.0.10

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

@@ -1829,11 +1829,11 @@ class TableComponent {
         this.customBtnClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n          <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n        </button>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span 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\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n          <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n        </button>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
+            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\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" aria-label=\"Filter all columns in table\" type=\"search\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          {{_data.length}}&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" aria-label=\"Export to Excel\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\" aria-label=\"Export to HTML\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\"\n      aria-label=\"Table pagination\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\" [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }], propDecorators: { tableId: [{
                 type: Input
             }], config: [{
@@ -3461,11 +3461,11 @@ class MessageListComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MessageListComponent, selector: "oepa-message-list", inputs: { messageList: "messageList", messageClass: "messageClass", messageLabel: "messageLabel" }, ngImport: i0, template: "<div *ngIf=\"messageList && messageList.length > 0\" class=\"row\" [ngClass]=\"messageClass\">\n  <div class=\"col-sm-12\">\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"messageList=[]\">\n    </button>\n    <label *ngIf=\"messageLabel\">{{messageLabel}}</label>\n    <ul>\n      <li *ngFor=\"let message of messageList\">{{message}}</li>\n    </ul>\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MessageListComponent, selector: "oepa-message-list", inputs: { messageList: "messageList", messageClass: "messageClass", messageLabel: "messageLabel" }, ngImport: i0, template: "<div *ngIf=\"messageList && messageList.length > 0\" class=\"row\" [ngClass]=\"messageClass\">\n  <div class=\"col-sm-12\">\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"messageList=[]\">\n    </button>\n    <span *ngIf=\"messageLabel\">{{messageLabel}}</span>\n    <ul>\n      <li *ngFor=\"let message of messageList\">{{message}}</li>\n    </ul>\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-message-list', template: "<div *ngIf=\"messageList && messageList.length > 0\" class=\"row\" [ngClass]=\"messageClass\">\n  <div class=\"col-sm-12\">\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"messageList=[]\">\n    </button>\n    <label *ngIf=\"messageLabel\">{{messageLabel}}</label>\n    <ul>\n      <li *ngFor=\"let message of messageList\">{{message}}</li>\n    </ul>\n  </div>\n</div>" }]
+            args: [{ selector: 'oepa-message-list', template: "<div *ngIf=\"messageList && messageList.length > 0\" class=\"row\" [ngClass]=\"messageClass\">\n  <div class=\"col-sm-12\">\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"messageList=[]\">\n    </button>\n    <span *ngIf=\"messageLabel\">{{messageLabel}}</span>\n    <ul>\n      <li *ngFor=\"let message of messageList\">{{message}}</li>\n    </ul>\n  </div>\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { messageList: [{
                 type: Input
             }], messageClass: [{
@@ -6999,11 +6999,11 @@ class NotesModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotesModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.BsModalRef }, { token: i2$1.BsModalService }, { token: i1$1.OepaMappingService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotesModalComponent, selector: "oepa-notes-modal", inputs: { loginName: "loginName", deleteAnyNoteAllowed: "deleteAnyNoteAllowed", deleteOwnNoteAllowed: "deleteOwnNoteAllowed", createNoteAllowed: "createNoteAllowed", external: "external", errorMessage: "errorMessage", notes: "notes", defaultNoteType: "defaultNoteType" }, outputs: { onAddNote: "onAddNote", onDeleteNote: "onDeleteNote" }, ngImport: i0, template: "<div class=\"modal-header\">\n\t<h3 class=\"modal-title\">Notes</h3>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\" for=\"NoteInput\">Note:</label>\n            <div class=\"col-sm-10\">\n                <input class=\"form-control\" type=\"input\" formControlName=\"newNoteText\" id=\"NoteInput\" maxlength=\"2000\"/>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\"></label>\n          <div class=\"col-sm-10\">\n              <span *ngIf=\"isCreating\"><span class=\"spinner-border text-primary\" role=\"status\"></span></span>\n              <button *ngIf=\"!isCreating\" class=\"btn btn-primary mr-1\" id=\"AddNoteBtn\" (click)=\"createNote()\" [disabled]=\"newNoteForm.invalid\" aria-label=\"Add Note\">\n                <span>Add Note</span>\n              </button>\n            </div>\n      </div>\n\n\n    </div>  \n  </form> <!-- form -->\n    \n</div>\n\t\n<div class=\"modal-footer\">\n\t<button class=\"btn btn-primary mr-1\" id=\"DoneBtn\" (click)=\"done()\" aria-label=\"Done\">Done</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TableComponent, selector: "oepa-table", inputs: ["tableId", "config", "complexHeader", "header", "customBtnLabel", "customBtnVisible", "customBtnEnabled", "data", "totalRow"], outputs: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
+    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: ["cellClicked", "actionClicked", "rowSelected", "customBtnClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-notes-modal', template: "<div class=\"modal-header\">\n\t<h3 class=\"modal-title\">Notes</h3>\n</div>\n\n<div class=\"modal-body\">\n\t\n  <div *ngIf=\"errorMessage\">\n\t\t<div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n  </div>\n\n  <div *ngIf=\"data.length === 0\" class=\"alert alert-info text-center\"><em>There are no notes defined.</em></div>\n\n  <oepa-table [config]=\"tblConfig\" [data]=\"data\" [header]=\"header\" (actionClicked)=\"noteActionClicked($event)\"></oepa-table>\n\n   \t\n\t<form *ngIf=\"createNoteAllowed\" class=\"form-horizontal\">\n    \n    <hr>\n\t\n    <div [formGroup]=\"newNoteForm\" class=\"form-group\">\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\">Type:</label>\n            <div class=\"col-sm-10\">\n                <span class=\"form-control\" id=\"NoteTypeText\">{{newNoteType.name}}</span>\n            </div>\n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-12 control-label\"></label>    \n      </div>\n\n      <div class=\"row\">\n          <label class=\"col-sm-2 control-label\" 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" }]
+            args: [{ selector: 'oepa-notes-modal', 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" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.BsModalRef }, { type: i2$1.BsModalService }, { type: i1$1.OepaMappingService }], propDecorators: { loginName: [{
                 type: Input
             }], deleteAnyNoteAllowed: [{
@@ -7660,11 +7660,11 @@ class PinModalComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PinModalComponent, deps: [{ token: OepaUserAccountService }, { token: i1$2.FormBuilder }, { token: OepaPinService }, { token: i2$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PinModalComponent, selector: "oepa-pin-modal", inputs: { attestationID: "attestationID", submitCallback: "submitCallback", submittingComponent: "submittingComponent", app: "app" }, outputs: { close: "close" }, ngImport: i0, template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <label>{{securityQuestion.question}}</label>\n            <div>\n              <input  [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label><b>PIN: </b></label>\n            <div>\n              <input [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\" aria-label=\"Submit\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\" aria-label=\"Cancel\">Cancel</button>\n  </div>\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PinModalComponent, selector: "oepa-pin-modal", inputs: { attestationID: "attestationID", submitCallback: "submitCallback", submittingComponent: "submittingComponent", app: "app" }, outputs: { close: "close" }, ngImport: i0, template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <h1 id=\"modalTitle\">PIN Authentication</h1>\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"securityAnswer\" style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <span>{{securityQuestion.question}}</span>\n            <div>\n              <input id=\"securityAnswer\" [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"securityPIN\"><b>PIN: </b></label>\n            <div>\n              <input id=\"securityPIN\" [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\" aria-label=\"Submit\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\" aria-label=\"Cancel\">Cancel</button>\n  </div>\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PinModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-pin-modal', template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <label>{{securityQuestion.question}}</label>\n            <div>\n              <input  [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label><b>PIN: </b></label>\n            <div>\n              <input [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\" aria-label=\"Submit\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\" aria-label=\"Cancel\">Cancel</button>\n  </div>\n\n</form>" }]
+            args: [{ selector: 'oepa-pin-modal', template: "<form [formGroup]=\"oepaSubmissionForm\">\n  <h1 id=\"modalTitle\">PIN Authentication</h1>\n  <div class=\"modal-body\">\n\n    <div [hidden]=\"noPin\">\n      <div class=\"card-header\">\n          <div class=\"row\" *ngIf=\"pinAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"pinAttestation.text\"></div>\n              </div>\n            </div>\n      </div>\n      <br>\n      <div class=\"card-header\" *ngIf=\"serviceAttestation\">\n          <div class=\"row\" *ngIf=\"serviceAttestation.text\">\n              <div class=\"col-md-12\">\n                <div class=\"well\" [innerHTML]=\"serviceAttestation.text\">\"</div>\n              </div>\n            </div>\n      </div>\n    </div>\n    <br>\n\n    <div class=\"row\" *ngIf=\"loadingAttestations\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-info\">\n          <span class=\"spinner-border text-primary\" role=\"status\"></span> Loading PIN information...\n        </div>\n      </div>\n    </div>\n\n    <div [hidden]=\"loadingAttestations || noPin\">\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"securityAnswer\" style=\"padding: 5px;\"><b>Security Question:</b></label>\n            <span>{{securityQuestion.question}}</span>\n            <div>\n              <input id=\"securityAnswer\" [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid}\"\n                formControlName=\"securityAnswer\" type=\"password\" class=\"form-control\" name=\"securityAnswer\" placeholder=\"Answer\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityAnswer'].valid\">Answer to security question is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <div class=\"form-group\">\n            <label for=\"securityPIN\"><b>PIN: </b></label>\n            <div>\n              <input id=\"securityPIN\" [ngClass]=\"{'is-invalid':showValidation && !oepaSubmissionForm.controls['securityPIN'].valid}\"\n                formControlName=\"securityPIN\" type=\"password\" class=\"form-control\" name=\"securityPIN\" placeholder=\"PIN\" required>\n              <small class=\"invalid-feedback\" *ngIf=\"showValidation && !oepaSubmissionForm.controls['securityPIN'].valid\">A valid PIN is required</small>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <div >\n      <div class=\"row\">\n        <div class=\"col-md-12\">\n          <!-- toggle hasPin message -->\n          <div *ngIf=\"noPin\">\n            <b>Attention:</b> Before you can submit, you first must activate your PIN. Cancel this submission, save the application/report and go back to the main eBusiness Home Page. \n            Select <b>MY Account- Request New PIN</b> to get started. <br>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\" *ngIf=\"errorMessage\">\n      <div class=\"col-md-12\">\n        <div class=\"alert alert-danger\" role=\"alert\">{{ errorMessage }}</div>\n      </div>\n    </div>\n\n  </div>\n\n\n  <div class=\"modal-footer\">\n    <span *ngIf=\"submitInProgress === true\" id=\"wait\"><span class=\"spinner-border text-primary\" role=\"status\"></span>Please wait...&nbsp;&nbsp;</span>\n    <button class=\"btn btn-primary mr-1\" (click)=\"submit()\" [disabled]=\"submitInProgress || !oepaSubmissionForm.valid\" aria-label=\"Submit\">Submit</button>\n    <button class=\"btn btn-primary mr-1\" (click)=\"cancel()\" [disabled]=\"submitInProgress\" aria-label=\"Cancel\">Cancel</button>\n  </div>\n\n</form>" }]
         }], ctorParameters: () => [{ type: OepaUserAccountService }, { type: i1$2.FormBuilder }, { type: OepaPinService }, { type: i2$1.BsModalRef }], propDecorators: { attestationID: [{
                 type: Input
             }], submitCallback: [{