@ohioepa/oepa-ui-lib 1.4.13 → 1.4.15

package/esm2022/lib/util/oepa-http-interceptor.mjs

@@ -56,7 +56,15 @@ export class OepaHttpInterceptor {
             let msg = error.headers ? error.headers.get('OEPA_ERROR') : '';
             console.log('msg from header = ' + msg);
             console.log('ERROR: [' + req.url + ']: ' + JSON.stringify(error));
-            msg = msg || error.error.message || error.error.errorMessage || error.error.error || error.error || 'Server error.';
+            msg = msg || (error && error.error && (error.error.message || error.error.errorMessage || error.error.error || error.error)) || 'Server error.';
+            if (msg && typeof msg !== 'string') {
+                try {
+                    msg = JSON.stringify(msg);
+                }
+                catch {
+                    msg = String(msg);
+                }
+            }
             if (msg) {
                 if (msg.indexOf('User account is required') > -1
                     || msg.toUpperCase().indexOf('USERID IS MISSING') > -1) {
@@ -86,4 +94,4 @@ export class OepaHttpInterceptor {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OepaHttpInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.OepaUserAccountService }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2VwYS1odHRwLWludGVyY2VwdG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvb2VwYS11aS1saWIvc3JjL2xpYi91dGlsL29lcGEtaHR0cC1pbnRlcmNlcHRvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBYyxVQUFVLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDOUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBS3JELE1BQU0sT0FBTyxtQkFBbUI7SUFLUjtJQUpYLGNBQWMsR0FBRyxDQUFDLEdBQUMsRUFBRSxHQUFDLElBQUksQ0FBQztJQUM1QixNQUFNLEdBQVcsRUFBRSxDQUFDO0lBQ3BCLFNBQVMsR0FBVyxFQUFFLENBQUM7SUFFL0IsWUFBb0Isa0JBQTBDO1FBQTFDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBd0I7UUFDMUQsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDckQsSUFBSSxPQUFPLEVBQUUsQ0FBQztnQkFDVixJQUFJLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQyxTQUFTLElBQUksRUFBRSxDQUFDO1lBQzFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxVQUFVLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQ3JELElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQy9CLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxTQUFTLENBQUMsR0FBcUIsRUFBRSxJQUFpQjtRQUM5QyxJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDeEMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pELE1BQU0sTUFBTSxHQUFRO1lBQ2hCLE1BQU0sRUFBRSxJQUFJLElBQUksRUFBRSxDQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsRUFBRTtTQUMxQyxDQUFBO1FBQ0QsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDZCxNQUFNLENBQUMsUUFBUSxDQUFDLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUNuQyxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDakIsTUFBTSxDQUFDLFdBQVcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDekMsQ0FBQztRQUNELElBQUksVUFBVSxHQUFRLFNBQVMsQ0FBQztRQUNoQyxJQUFJLFNBQVMsRUFBRSxDQUFDO1lBQ1osVUFBVSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUM7Z0JBQ25CLFVBQVUsRUFBRTtvQkFDUixhQUFhLEVBQUUsVUFBVSxTQUFTLEVBQUU7aUJBQ3ZDO2dCQUNELFNBQVMsRUFBRSxNQUFNO2FBQ3BCLENBQUMsQ0FBQztRQUNQLENBQUM7YUFBTSxDQUFDO1lBQ0osVUFBVSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUM7Z0JBQ25CLFNBQVMsRUFBRSxNQUFNO2FBQ3BCLENBQUMsQ0FBQztRQUNQLENBQUM7UUFDRCxNQUFNLFlBQVksR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQ3ZFLE1BQU0sbUJBQW1CLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ2pELE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLENBQy9CLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxFQUM1QixVQUFVLENBQUMsQ0FBQyxLQUF3QixFQUFFLEVBQUU7WUFDcEMsSUFBSSxHQUFHLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUMvRCxPQUFPLENBQUMsR0FBRyxDQUFDLG9CQUFvQixHQUFHLEdBQUcsQ0FBQyxDQUFDO1lBQ3hDLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztZQUNsRSxHQUFHLEdBQUcsR0FBRyxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsWUFBWSxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsS0FBSyxJQUFJLEtBQUssQ0FBQyxLQUFLLElBQUksZUFBZSxDQUFDO1lBQ3BILElBQUksR0FBRyxFQUFFLENBQUM7Z0JBQ04sSUFBSSxHQUFHLENBQUMsT0FBTyxDQUFDLDBCQUEwQixDQUFDLEdBQUcsQ0FBQyxDQUFDO3VCQUN6QyxHQUFHLENBQUMsV0FBVyxFQUFFLENBQUMsT0FBTyxDQUFDLG1CQUFtQixDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztvQkFDekQsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUNYLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO2dCQUMvQyxDQUFDO2dCQUNELEdBQUcsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDeEMsQ0FBQztZQUNELE9BQU8sVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ2pDLENBQUMsQ0FBQyxDQUNMLENBQUM7SUFDTixDQUFDO0lBRUQ7O09BRUc7SUFDSyxtQkFBbUIsQ0FBQyxHQUFXO1FBQ25DLE1BQU0sWUFBWSxHQUFHLG1CQUFtQixDQUFDO1FBQ3pDLE1BQU0sWUFBWSxHQUFHLEdBQUcsQ0FBQyxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDL0MsSUFBSSxZQUFZLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNwQixNQUFNLFlBQVksR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ3RDLEdBQUcsR0FBRyxHQUFHLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsWUFBWSxDQUFDLENBQUM7UUFDM0QsQ0FBQztRQUNELE9BQU8sR0FBRyxDQUFDO0lBQ2YsQ0FBQzt3R0EvRVEsbUJBQW1COzRHQUFuQixtQkFBbUI7OzRGQUFuQixtQkFBbUI7a0JBRC9CLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlLCB0aHJvd0Vycm9yIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBjYXRjaEVycm9yLCB0aW1lb3V0IH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgSHR0cEludGVyY2VwdG9yLCBIdHRwUmVxdWVzdCwgSHR0cEhhbmRsZXIsIEh0dHBFdmVudCwgSHR0cEVycm9yUmVzcG9uc2UgfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7XG5pbXBvcnQgeyBPZXBhVXNlckFjY291bnRTZXJ2aWNlIH0gZnJvbSAnLi4vb2VwYS11c2VyLWFjY291bnQvb2VwYS11c2VyLWFjY291bnQuc2VydmljZSc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBPZXBhSHR0cEludGVyY2VwdG9yIGltcGxlbWVudHMgSHR0cEludGVyY2VwdG9yIHtcbiAgICByZWFkb25seSBkZWZhdWx0VGltZW91dCA9IDUqNjAqMTAwMDtcbiAgICBwcml2YXRlIHVzZXJJRDogc3RyaW5nID0gJyc7XG4gICAgcHJpdmF0ZSBzZXNzaW9uSUQ6IHN0cmluZyA9ICcnO1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSB1c2VyQWNjb3VudFNlcnZpY2U6IE9lcGFVc2VyQWNjb3VudFNlcnZpY2UpIHtcbiAgICAgICAgdGhpcy51c2VyQWNjb3VudFNlcnZpY2UudXNlckFjY291bnQkLnN1YnNjcmliZShhY2NvdW50ID0+IHtcbiAgICAgICAgICAgIGlmIChhY2NvdW50KSB7XG4gICAgICAgICAgICAgICAgdGhpcy51c2VySUQgPSBhY2NvdW50LmxvZ2luTmFtZSB8fCAnJztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICAgIHRoaXMudXNlckFjY291bnRTZXJ2aWNlLnNlc3Npb25JRCQuc3Vic2NyaWJlKHNlc3Npb25JRCA9PiB7XG4gICAgICAgICAgICB0aGlzLnNlc3Npb25JRCA9IHNlc3Npb25JRDtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQWRkIGEgdGltZXN0YW1wIGFzIGEgcXVlcnkgcGFyYW1ldGVyIHRvIGFsbCBodHRwIHJlcXVlc3RzXG4gICAgICogQHBhcmFtIHJlcVxuICAgICAqIEBwYXJhbSBuZXh0XG4gICAgICovXG4gICAgaW50ZXJjZXB0KHJlcTogSHR0cFJlcXVlc3Q8YW55PiwgbmV4dDogSHR0cEhhbmRsZXIpOiBPYnNlcnZhYmxlPEh0dHBFdmVudDxhbnk+PiB7XG4gICAgICAgIHRoaXMudXNlckFjY291bnRTZXJ2aWNlLnJlc2V0SWRsZVRpbWUoKTtcbiAgICAgICAgY29uc3QgYXV0aFRva2VuID0gdGhpcy51c2VyQWNjb3VudFNlcnZpY2UuZ2V0QXV0aFRva2VuKCk7XG4gICAgICAgIGNvbnN0IHBhcmFtczogYW55ID0ge1xuICAgICAgICAgICAgb2VwYXRzOiBuZXcgRGF0ZSgpLmdldFRpbWUoKS50b1N0cmluZygpXG4gICAgICAgIH1cbiAgICAgICAgaWYgKHRoaXMudXNlcklEKSB7XG4gICAgICAgICAgICBwYXJhbXNbJ3VzZXJpZCddID0gdGhpcy51c2VySUQ7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKHRoaXMuc2Vzc2lvbklEKSB7XG4gICAgICAgICAgICBwYXJhbXNbJ3Nlc3Npb25pZCddID0gdGhpcy5zZXNzaW9uSUQ7XG4gICAgICAgIH1cbiAgICAgICAgbGV0IGNoYW5nZWRSZXE6IGFueSA9IHVuZGVmaW5lZDtcbiAgICAgICAgaWYgKGF1dGhUb2tlbikge1xuICAgICAgICAgICAgY2hhbmdlZFJlcSA9IHJlcS5jbG9uZSh7XG4gICAgICAgICAgICAgICAgc2V0SGVhZGVyczoge1xuICAgICAgICAgICAgICAgICAgICBBdXRob3JpemF0aW9uOiBgQmVhcmVyICR7YXV0aFRva2VufWBcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIHNldFBhcmFtczogcGFyYW1zXG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIGNoYW5nZWRSZXEgPSByZXEuY2xvbmUoe1xuICAgICAgICAgICAgICAgIHNldFBhcmFtczogcGFyYW1zXG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgICAgICBjb25zdCB0aW1lb3V0VmFsdWUgPSByZXEuaGVhZGVycy5nZXQoJ3RpbWVvdXQnKSB8fCB0aGlzLmRlZmF1bHRUaW1lb3V0O1xuICAgICAgICBjb25zdCB0aW1lb3V0VmFsdWVOdW1lcmljID0gTnVtYmVyKHRpbWVvdXRWYWx1ZSk7XG4gICAgICAgIHJldHVybiBuZXh0LmhhbmRsZShjaGFuZ2VkUmVxKS5waXBlKFxuICAgICAgICAgICAgdGltZW91dCh0aW1lb3V0VmFsdWVOdW1lcmljKSxcbiAgICAgICAgICAgIGNhdGNoRXJyb3IoKGVycm9yOiBIdHRwRXJyb3JSZXNwb25zZSkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBtc2cgPSBlcnJvci5oZWFkZXJzID8gZXJyb3IuaGVhZGVycy5nZXQoJ09FUEFfRVJST1InKSA6ICcnO1xuICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKCdtc2cgZnJvbSBoZWFkZXIgPSAnICsgbXNnKTtcbiAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygnRVJST1I6IFsnICsgcmVxLnVybCArICddOiAnICsgSlNPTi5zdHJpbmdpZnkoZXJyb3IpKTtcbiAgICAgICAgICAgICAgICBtc2cgPSBtc2cgfHwgZXJyb3IuZXJyb3IubWVzc2FnZSB8fCBlcnJvci5lcnJvci5lcnJvck1lc3NhZ2UgfHwgZXJyb3IuZXJyb3IuZXJyb3IgfHwgZXJyb3IuZXJyb3IgfHwgJ1NlcnZlciBlcnJvci4nO1xuICAgICAgICAgICAgICAgIGlmIChtc2cpIHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKG1zZy5pbmRleE9mKCdVc2VyIGFjY291bnQgaXMgcmVxdWlyZWQnKSA+IC0xXG4gICAgICAgICAgICAgICAgICAgICAgICB8fCBtc2cudG9VcHBlckNhc2UoKS5pbmRleE9mKCdVU0VSSUQgSVMgTUlTU0lORycpID4gLTEpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGFsZXJ0KG1zZyk7XG4gICAgICAgICAgICAgICAgICAgICAgICB0aGlzLnVzZXJBY2NvdW50U2VydmljZS5yZWRpcmVjdFRvTG9nb3V0KCk7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgbXNnID0gdGhpcy5zaG9ydGVuRXJyb3JNZXNzYWdlKG1zZyk7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIHJldHVybiB0aHJvd0Vycm9yKCgpID0+IG1zZyk7XG4gICAgICAgICAgICB9KVxuICAgICAgICApO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFNob3J0ZW4gZXJyb3IgbWVzc2FnZSBpbiB0aGUgZXZlbnQgb2YgYSBKU09OIHBhcnNlIGVycm9yXG4gICAgICovXG4gICAgcHJpdmF0ZSBzaG9ydGVuRXJyb3JNZXNzYWdlKG1zZzogc3RyaW5nKTogc3RyaW5nIHtcbiAgICAgICAgY29uc3QgSlNPTlBhcnNlTXNnID0gJ0pTT04gcGFyc2UgZXJyb3I6JztcbiAgICAgICAgY29uc3QgSlNPTlBhcnNlSWR4ID0gbXNnLmluZGV4T2YoSlNPTlBhcnNlTXNnKTtcbiAgICAgICAgaWYgKEpTT05QYXJzZUlkeCA+IC0xKSB7XG4gICAgICAgICAgICBjb25zdCBzZW1pY29sb25JZHggPSBtc2cuaW5kZXhPZignOycpO1xuICAgICAgICAgICAgbXNnID0gbXNnLnN1YnN0cmluZyhKU09OUGFyc2VNc2cubGVuZ3RoLCBzZW1pY29sb25JZHgpO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiBtc2c7XG4gICAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2VwYS1odHRwLWludGVyY2VwdG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvb2VwYS11aS1saWIvc3JjL2xpYi91dGlsL29lcGEtaHR0cC1pbnRlcmNlcHRvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBYyxVQUFVLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDOUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBS3JELE1BQU0sT0FBTyxtQkFBbUI7SUFLUjtJQUpYLGNBQWMsR0FBRyxDQUFDLEdBQUMsRUFBRSxHQUFDLElBQUksQ0FBQztJQUM1QixNQUFNLEdBQVcsRUFBRSxDQUFDO0lBQ3BCLFNBQVMsR0FBVyxFQUFFLENBQUM7SUFFL0IsWUFBb0Isa0JBQTBDO1FBQTFDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBd0I7UUFDMUQsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDckQsSUFBSSxPQUFPLEVBQUUsQ0FBQztnQkFDVixJQUFJLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQyxTQUFTLElBQUksRUFBRSxDQUFDO1lBQzFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxVQUFVLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQ3JELElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQy9CLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxTQUFTLENBQUMsR0FBcUIsRUFBRSxJQUFpQjtRQUM5QyxJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDeEMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pELE1BQU0sTUFBTSxHQUFRO1lBQ2hCLE1BQU0sRUFBRSxJQUFJLElBQUksRUFBRSxDQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsRUFBRTtTQUMxQyxDQUFBO1FBQ0QsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDZCxNQUFNLENBQUMsUUFBUSxDQUFDLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUNuQyxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDakIsTUFBTSxDQUFDLFdBQVcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDekMsQ0FBQztRQUNELElBQUksVUFBVSxHQUFRLFNBQVMsQ0FBQztRQUNoQyxJQUFJLFNBQVMsRUFBRSxDQUFDO1lBQ1osVUFBVSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUM7Z0JBQ25CLFVBQVUsRUFBRTtvQkFDUixhQUFhLEVBQUUsVUFBVSxTQUFTLEVBQUU7aUJBQ3ZDO2dCQUNELFNBQVMsRUFBRSxNQUFNO2FBQ3BCLENBQUMsQ0FBQztRQUNQLENBQUM7YUFBTSxDQUFDO1lBQ0osVUFBVSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUM7Z0JBQ25CLFNBQVMsRUFBRSxNQUFNO2FBQ3BCLENBQUMsQ0FBQztRQUNQLENBQUM7UUFDRCxNQUFNLFlBQVksR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQ3ZFLE1BQU0sbUJBQW1CLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ2pELE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLENBQy9CLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxFQUM1QixVQUFVLENBQUMsQ0FBQyxLQUF3QixFQUFFLEVBQUU7WUFDcEMsSUFBSSxHQUFHLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUMvRCxPQUFPLENBQUMsR0FBRyxDQUFDLG9CQUFvQixHQUFHLEdBQUcsQ0FBQyxDQUFDO1lBQ3hDLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztZQUNsRSxHQUFHLEdBQUcsR0FBRyxJQUFJLENBQUMsS0FBSyxJQUFJLEtBQUssQ0FBQyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLFlBQVksSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLEtBQUssSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxlQUFlLENBQUM7WUFDaEosSUFBSSxHQUFHLElBQUksT0FBTyxHQUFHLEtBQUssUUFBUSxFQUFFLENBQUM7Z0JBQ2pDLElBQUksQ0FBQztvQkFDRCxHQUFHLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDOUIsQ0FBQztnQkFBQyxNQUFNLENBQUM7b0JBQ0wsR0FBRyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDdEIsQ0FBQztZQUNMLENBQUM7WUFDRCxJQUFJLEdBQUcsRUFBRSxDQUFDO2dCQUNOLElBQUksR0FBRyxDQUFDLE9BQU8sQ0FBQywwQkFBMEIsQ0FBQyxHQUFHLENBQUMsQ0FBQzt1QkFDekMsR0FBRyxDQUFDLFdBQVcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxtQkFBbUIsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUM7b0JBQ3pELEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDWCxJQUFJLENBQUMsa0JBQWtCLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztnQkFDL0MsQ0FBQztnQkFDRCxHQUFHLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ3hDLENBQUM7WUFDRCxPQUFPLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FDTCxDQUFDO0lBQ04sQ0FBQztJQUVEOztPQUVHO0lBQ0ssbUJBQW1CLENBQUMsR0FBVztRQUNuQyxNQUFNLFlBQVksR0FBRyxtQkFBbUIsQ0FBQztRQUN6QyxNQUFNLFlBQVksR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQy9DLElBQUksWUFBWSxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDcEIsTUFBTSxZQUFZLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUN0QyxHQUFHLEdBQUcsR0FBRyxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQzNELENBQUM7UUFDRCxPQUFPLEdBQUcsQ0FBQztJQUNmLENBQUM7d0dBdEZRLG1CQUFtQjs0R0FBbkIsbUJBQW1COzs0RkFBbkIsbUJBQW1CO2tCQUQvQixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgdGhyb3dFcnJvciB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgY2F0Y2hFcnJvciwgdGltZW91dCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IEh0dHBJbnRlcmNlcHRvciwgSHR0cFJlcXVlc3QsIEh0dHBIYW5kbGVyLCBIdHRwRXZlbnQsIEh0dHBFcnJvclJlc3BvbnNlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xuaW1wb3J0IHsgT2VwYVVzZXJBY2NvdW50U2VydmljZSB9IGZyb20gJy4uL29lcGEtdXNlci1hY2NvdW50L29lcGEtdXNlci1hY2NvdW50LnNlcnZpY2UnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgT2VwYUh0dHBJbnRlcmNlcHRvciBpbXBsZW1lbnRzIEh0dHBJbnRlcmNlcHRvciB7XG4gICAgcmVhZG9ubHkgZGVmYXVsdFRpbWVvdXQgPSA1KjYwKjEwMDA7XG4gICAgcHJpdmF0ZSB1c2VySUQ6IHN0cmluZyA9ICcnO1xuICAgIHByaXZhdGUgc2Vzc2lvbklEOiBzdHJpbmcgPSAnJztcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgdXNlckFjY291bnRTZXJ2aWNlOiBPZXBhVXNlckFjY291bnRTZXJ2aWNlKSB7XG4gICAgICAgIHRoaXMudXNlckFjY291bnRTZXJ2aWNlLnVzZXJBY2NvdW50JC5zdWJzY3JpYmUoYWNjb3VudCA9PiB7XG4gICAgICAgICAgICBpZiAoYWNjb3VudCkge1xuICAgICAgICAgICAgICAgIHRoaXMudXNlcklEID0gYWNjb3VudC5sb2dpbk5hbWUgfHwgJyc7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgICAgICB0aGlzLnVzZXJBY2NvdW50U2VydmljZS5zZXNzaW9uSUQkLnN1YnNjcmliZShzZXNzaW9uSUQgPT4ge1xuICAgICAgICAgICAgdGhpcy5zZXNzaW9uSUQgPSBzZXNzaW9uSUQ7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEFkZCBhIHRpbWVzdGFtcCBhcyBhIHF1ZXJ5IHBhcmFtZXRlciB0byBhbGwgaHR0cCByZXF1ZXN0c1xuICAgICAqIEBwYXJhbSByZXFcbiAgICAgKiBAcGFyYW0gbmV4dFxuICAgICAqL1xuICAgIGludGVyY2VwdChyZXE6IEh0dHBSZXF1ZXN0PGFueT4sIG5leHQ6IEh0dHBIYW5kbGVyKTogT2JzZXJ2YWJsZTxIdHRwRXZlbnQ8YW55Pj4ge1xuICAgICAgICB0aGlzLnVzZXJBY2NvdW50U2VydmljZS5yZXNldElkbGVUaW1lKCk7XG4gICAgICAgIGNvbnN0IGF1dGhUb2tlbiA9IHRoaXMudXNlckFjY291bnRTZXJ2aWNlLmdldEF1dGhUb2tlbigpO1xuICAgICAgICBjb25zdCBwYXJhbXM6IGFueSA9IHtcbiAgICAgICAgICAgIG9lcGF0czogbmV3IERhdGUoKS5nZXRUaW1lKCkudG9TdHJpbmcoKVxuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLnVzZXJJRCkge1xuICAgICAgICAgICAgcGFyYW1zWyd1c2VyaWQnXSA9IHRoaXMudXNlcklEO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLnNlc3Npb25JRCkge1xuICAgICAgICAgICAgcGFyYW1zWydzZXNzaW9uaWQnXSA9IHRoaXMuc2Vzc2lvbklEO1xuICAgICAgICB9XG4gICAgICAgIGxldCBjaGFuZ2VkUmVxOiBhbnkgPSB1bmRlZmluZWQ7XG4gICAgICAgIGlmIChhdXRoVG9rZW4pIHtcbiAgICAgICAgICAgIGNoYW5nZWRSZXEgPSByZXEuY2xvbmUoe1xuICAgICAgICAgICAgICAgIHNldEhlYWRlcnM6IHtcbiAgICAgICAgICAgICAgICAgICAgQXV0aG9yaXphdGlvbjogYEJlYXJlciAke2F1dGhUb2tlbn1gXG4gICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICBzZXRQYXJhbXM6IHBhcmFtc1xuICAgICAgICAgICAgfSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBjaGFuZ2VkUmVxID0gcmVxLmNsb25lKHtcbiAgICAgICAgICAgICAgICBzZXRQYXJhbXM6IHBhcmFtc1xuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cbiAgICAgICAgY29uc3QgdGltZW91dFZhbHVlID0gcmVxLmhlYWRlcnMuZ2V0KCd0aW1lb3V0JykgfHwgdGhpcy5kZWZhdWx0VGltZW91dDtcbiAgICAgICAgY29uc3QgdGltZW91dFZhbHVlTnVtZXJpYyA9IE51bWJlcih0aW1lb3V0VmFsdWUpO1xuICAgICAgICByZXR1cm4gbmV4dC5oYW5kbGUoY2hhbmdlZFJlcSkucGlwZShcbiAgICAgICAgICAgIHRpbWVvdXQodGltZW91dFZhbHVlTnVtZXJpYyksXG4gICAgICAgICAgICBjYXRjaEVycm9yKChlcnJvcjogSHR0cEVycm9yUmVzcG9uc2UpID0+IHtcbiAgICAgICAgICAgICAgICBsZXQgbXNnID0gZXJyb3IuaGVhZGVycyA/IGVycm9yLmhlYWRlcnMuZ2V0KCdPRVBBX0VSUk9SJykgOiAnJztcbiAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygnbXNnIGZyb20gaGVhZGVyID0gJyArIG1zZyk7XG4gICAgICAgICAgICAgICAgY29uc29sZS5sb2coJ0VSUk9SOiBbJyArIHJlcS51cmwgKyAnXTogJyArIEpTT04uc3RyaW5naWZ5KGVycm9yKSk7XG4gICAgICAgICAgICAgICAgbXNnID0gbXNnIHx8IChlcnJvciAmJiBlcnJvci5lcnJvciAmJiAoZXJyb3IuZXJyb3IubWVzc2FnZSB8fCBlcnJvci5lcnJvci5lcnJvck1lc3NhZ2UgfHwgZXJyb3IuZXJyb3IuZXJyb3IgfHwgZXJyb3IuZXJyb3IpKSB8fCAnU2VydmVyIGVycm9yLic7XG4gICAgICAgICAgICAgICAgaWYgKG1zZyAmJiB0eXBlb2YgbXNnICE9PSAnc3RyaW5nJykge1xuICAgICAgICAgICAgICAgICAgICB0cnkge1xuICAgICAgICAgICAgICAgICAgICAgICAgbXNnID0gSlNPTi5zdHJpbmdpZnkobXNnKTtcbiAgICAgICAgICAgICAgICAgICAgfSBjYXRjaCB7XG4gICAgICAgICAgICAgICAgICAgICAgICBtc2cgPSBTdHJpbmcobXNnKTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBpZiAobXNnKSB7XG4gICAgICAgICAgICAgICAgICAgIGlmIChtc2cuaW5kZXhPZignVXNlciBhY2NvdW50IGlzIHJlcXVpcmVkJykgPiAtMVxuICAgICAgICAgICAgICAgICAgICAgICAgfHwgbXNnLnRvVXBwZXJDYXNlKCkuaW5kZXhPZignVVNFUklEIElTIE1JU1NJTkcnKSA+IC0xKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBhbGVydChtc2cpO1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy51c2VyQWNjb3VudFNlcnZpY2UucmVkaXJlY3RUb0xvZ291dCgpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIG1zZyA9IHRoaXMuc2hvcnRlbkVycm9yTWVzc2FnZShtc2cpO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICByZXR1cm4gdGhyb3dFcnJvcigoKSA9PiBtc2cpO1xuICAgICAgICAgICAgfSlcbiAgICAgICAgKTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBTaG9ydGVuIGVycm9yIG1lc3NhZ2UgaW4gdGhlIGV2ZW50IG9mIGEgSlNPTiBwYXJzZSBlcnJvclxuICAgICAqL1xuICAgIHByaXZhdGUgc2hvcnRlbkVycm9yTWVzc2FnZShtc2c6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IEpTT05QYXJzZU1zZyA9ICdKU09OIHBhcnNlIGVycm9yOic7XG4gICAgICAgIGNvbnN0IEpTT05QYXJzZUlkeCA9IG1zZy5pbmRleE9mKEpTT05QYXJzZU1zZyk7XG4gICAgICAgIGlmIChKU09OUGFyc2VJZHggPiAtMSkge1xuICAgICAgICAgICAgY29uc3Qgc2VtaWNvbG9uSWR4ID0gbXNnLmluZGV4T2YoJzsnKTtcbiAgICAgICAgICAgIG1zZyA9IG1zZy5zdWJzdHJpbmcoSlNPTlBhcnNlTXNnLmxlbmd0aCwgc2VtaWNvbG9uSWR4KTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gbXNnO1xuICAgIH1cbn1cbiJdfQ==

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

@@ -26,7 +26,7 @@ import * as i7$1 from 'ngx-bootstrap/pagination';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 import * as i8 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i9 from 'ngx-bootstrap/tooltip';
+import * as i8$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i6$1 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
@@ -387,6 +387,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class DatepickerComponent {
     idService;
+    /**
+     * Exposes the input element's id for parent label association.
+     */
+    get inputId() {
+        return this.componentId + '_Input';
+    }
     componentId = 'OepaDatepickerComponent';
     group;
     field;
@@ -489,11 +495,11 @@ class DatepickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "oepa-datepicker", inputs: { group: "group", field: "field", bsConfig: "bsConfig", showValidation: "showValidation", placement: "placement", tableIdx: "tableIdx", small: "small" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"group\">\n  <div>\n      <div class=\"input-group\">\n          <input  [id]=\"componentId+'_Input'\"\n                  class=\"form-control\"\n                  [minDate]=\"minDate\"\n                  [maxDate]=\"maxDate\"\n                  #dp=\"bsDatepicker\"\n                  bsDatepicker\n                  [formControlName]=\"field\"\n                  [bsConfig]=\"bsConfig\"\n                  [isDisabled]=\"group.get('field')?.disabled || false\"\n                  [placement]=\"getPlacement()  || 'bottom'\"\n                  [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n                  (bsValueChange)=\"onValueChange($event)\"\n                  >\n          <div class=\"btn-group\" role=\"group\">\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"dp.toggle()\" [id]=\"componentId+'_ToggleBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-calendar3\"></i>\n              </button>\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"clearDate()\" [id]=\"componentId+'_ClearBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-x-lg\"></i>\n              </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.hasError('required')\">Date is required</small>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\">Date is out of range</small>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i4.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, selector: "oepa-datepicker", inputs: { group: "group", field: "field", bsConfig: "bsConfig", showValidation: "showValidation", placement: "placement", tableIdx: "tableIdx", small: "small" }, exportAs: ["oepa-datepicker"], usesOnChanges: true, ngImport: i0, template: "\n<div [formGroup]=\"group\">\n  <div>\n    <div class=\"input-group\">\n      <input\n        [id]=\"componentId+'_Input'\"\n        class=\"form-control\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        #dp=\"bsDatepicker\"\n        bsDatepicker\n        [formControlName]=\"field\"\n        [bsConfig]=\"bsConfig\"\n        [isDisabled]=\"group.get('field')?.disabled || false\"\n        [placement]=\"getPlacement()  || 'bottom'\"\n        [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n        (bsValueChange)=\"onValueChange($event)\"\n        [attr.aria-describedby]=\"(showValidation && group.get(field)?.invalid) ? (componentId + '_Error') : null\"\n        [attr.aria-invalid]=\"showValidation && !checkValidity() ? 'true' : 'false'\"\n        autocomplete=\"off\"\n      >\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Datepicker controls\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"dp.toggle()\"\n          [id]=\"componentId+'_ToggleBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Open calendar\"\n        >\n          <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"clearDate()\"\n          [id]=\"componentId+'_ClearBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Clear date\"\n        >\n          <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is required\n    </small>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is out of range\n    </small>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i4.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-datepicker', template: "<div [formGroup]=\"group\">\n  <div>\n      <div class=\"input-group\">\n          <input  [id]=\"componentId+'_Input'\"\n                  class=\"form-control\"\n                  [minDate]=\"minDate\"\n                  [maxDate]=\"maxDate\"\n                  #dp=\"bsDatepicker\"\n                  bsDatepicker\n                  [formControlName]=\"field\"\n                  [bsConfig]=\"bsConfig\"\n                  [isDisabled]=\"group.get('field')?.disabled || false\"\n                  [placement]=\"getPlacement()  || 'bottom'\"\n                  [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n                  (bsValueChange)=\"onValueChange($event)\"\n                  >\n          <div class=\"btn-group\" role=\"group\">\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"dp.toggle()\" [id]=\"componentId+'_ToggleBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-calendar3\"></i>\n              </button>\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"clearDate()\" [id]=\"componentId+'_ClearBtn'\" [disabled]=\"group.get(field)?.disabled\">\n                <i class=\"bi bi-x-lg\"></i>\n              </button>\n          </div>\n      </div>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.hasError('required')\">Date is required</small>\n      <small class=\"invalid-feedback d-block\" *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\">Date is out of range</small>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'oepa-datepicker', exportAs: 'oepa-datepicker', template: "\n<div [formGroup]=\"group\">\n  <div>\n    <div class=\"input-group\">\n      <input\n        [id]=\"componentId+'_Input'\"\n        class=\"form-control\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        #dp=\"bsDatepicker\"\n        bsDatepicker\n        [formControlName]=\"field\"\n        [bsConfig]=\"bsConfig\"\n        [isDisabled]=\"group.get('field')?.disabled || false\"\n        [placement]=\"getPlacement()  || 'bottom'\"\n        [ngClass]=\"{'is-invalid':showValidation && !checkValidity()}\"\n        (bsValueChange)=\"onValueChange($event)\"\n        [attr.aria-describedby]=\"(showValidation && group.get(field)?.invalid) ? (componentId + '_Error') : null\"\n        [attr.aria-invalid]=\"showValidation && !checkValidity() ? 'true' : 'false'\"\n        autocomplete=\"off\"\n      >\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Datepicker controls\">\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"dp.toggle()\"\n          [id]=\"componentId+'_ToggleBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Open calendar\"\n        >\n          <i class=\"bi bi-calendar3\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"btn btn-primary\"\n          (click)=\"clearDate()\"\n          [id]=\"componentId+'_ClearBtn'\"\n          [disabled]=\"group.get(field)?.disabled\"\n          aria-label=\"Clear date\"\n        >\n          <i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is required\n    </small>\n    <small\n      class=\"invalid-feedback d-block\"\n      *ngIf=\"showValidation && group.get(field)?.invalid && !group.get(field)?.hasError('required')\"\n      [id]=\"componentId+'_Error'\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n    >\n      Date is out of range\n    </small>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
                 type: Input
             }], field: [{
@@ -1820,11 +1826,11 @@ class TableComponent {
         this.customBtnClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div ngClass=\"{{config.divClassName || ''}}\" >\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" ngClass=\"{{config.className || ''}}\" role=\"grid\" style=\"width: 100%;\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n      <span>\n        <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n          [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n        </i>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" ngClass=\"{{column.className || ''}}\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n          <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n            [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n          </i>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          <span class=\"badge badge-secondary\" style=\"color: #999\">{{_data.length}}</span>&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "oepa-table", inputs: { tableId: "tableId", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked" }, ngImport: i0, template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n          <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n        </button>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          <span class=\"badge badge-secondary\" style=\"color: #999\">{{_data.length}}</span>&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" 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\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: ActionBtnComponent, selector: "oepa-action-btn", inputs: ["label", "btnId", "data", "actions", "normalSize", "dropup"], outputs: ["actionClicked"] }, { kind: "directive", type: OepaTableSortingDirective, selector: "[oepaTableSorting]", inputs: ["tableId", "oepaTableSorting", "column"], outputs: ["sortChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellInnerHtmlPipe, name: "cellInnerHTML" }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellValuePipe, name: "cellValue" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }, { kind: "pipe", type: OepaTableCellIconClassnamePipe, name: "cellIconClassname" }, { kind: "pipe", type: OepaTableCellImgSrcPipe, name: "cellImgSrc" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div ngClass=\"{{config.divClassName || ''}}\" >\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" ngClass=\"{{config.className || ''}}\" role=\"grid\" style=\"width: 100%;\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n      <span>\n        <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n          [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n        </i>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" ngClass=\"{{column.className || ''}}\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n          <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n            [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n          </i>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          <span class=\"badge badge-secondary\" style=\"color: #999\">{{_data.length}}</span>&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\">Export to Excel</button>\n        <button type=\"button\" *ngIf=\"config.exportToHTML\" class=\"btn btn-primary mr-1\" (click)=\"exportToHTML()\" [id]=\"tableId+'_ExportToHTMLBtn'\">Export to HTML</button>\n        <button *ngIf=\"customBtnVisible\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"onCustomBtnClick()\" [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n      </div>\n      <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\" id=\"exportVisibleOnlyCheckbox\"/>\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Pagination -->\n  <div *ngIf=\"!config.disablePagination\" class=\"col-sm-4 d-flex justify-content-end\">\n    <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\" [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\"\n      [(ngModel)]=\"currentPage\" name=\"currentTablePage\"\n      [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\" (numPages)=\"pageInfo.numPages = $event\">\n    </pagination>\n    &nbsp;\n    <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm mr-1\">{{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}</button>\n  </div>\n</div>\n</form>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
+            args: [{ selector: 'oepa-table', template: "<!-- Unhide select input - only visible if one or more columns are hidden -->\n\n<form *ngIf=\"hiddenColumns.length > 0\" aria-label=\"Show hidden columns\">\n  <div class=\"row mb-2\">\n    <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n    <div class=\"col-sm-4\">\n      <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\" [id]=\"tableId+'_UnhideColumnSelect'\" aria-label=\"Select column to unhide\">\n        <option value=\"\">Choose a column</option>\n        <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n      </select>\n    </div>\n  </div>\n</form>\n<!-- This is the table -->\n<div [ngClass]=\"config.divClassName || ''\">\n<table *ngIf=\"!config.hideTable\" class=\"table dataTable\" [ngClass]=\"config.className || ''\" role=\"table\" style=\"width: 100%;\" aria-label=\"Data table\">\n\n<!-- This is the table header -->\n<thead>\n  <!-- There may be multiple header rows -->\n  <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n    <!-- Details indicator column (if data has details) -->\n    <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\" scope=\"col\">\n      <span>\n        <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" [attr.aria-pressed]=\"showAllDetails\" [attr.aria-label]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\">\n          <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\" aria-hidden=\"true\"></i>\n        </button>\n      </span>\n    </th>\n    <ng-template ngFor let-column [ngForOf]=\"hdr.columns\" let-c=\"index\">\n      <!-- Header cell -->\n      <th *ngIf=\"!column.hidden\" [ngClass]=\"column.className || ''\" [colSpan]=\"column.colspan || 1\" [rowSpan]=\"column.rowspan || 1\" scope=\"col\">\n        <!-- Select all Rows Checkbox -->\n        <div class=\"text-center\">\n          <input *ngIf=\"column.selectColumn\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"toggleAllRowsSelection()\" [attr.aria-label]=\"'Select all rows'\">\n\n          <!-- Header cell text with sort capability (if specified) -->\n          <span [oepaTableSorting]=\"true\" [column]=\"column\" [tableId]=\"tableId\" (sortChanged)=\"onSortChanged($event)\" [id]=\"tableId+'_SortColumnLink_'+column.id\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Sort by ' + column.title\">\n            <span *ngIf=\"column.sort\"><i class=\"pull-left bi\" [ngClass]=\"{'bi-chevron-down': column.sort === 'desc', 'bi-chevron-up': column.sort === 'asc'}\" aria-hidden=\"true\"></i>\n            <sup *ngIf=\"column?.sortIndex || 0 > 1\">{{column.sortIndex}}</sup></span>\n            {{column.title}}\n          </span>\n          <!-- button to allow column to be hidden (if specified) -->\n          <button *ngIf=\"column.hidden === false\" type=\"button\" class=\"btn-close float-end\" aria-label=\"Hide column\" (click)=\"hideColumn(column)\"\n            [id]=\"tableId+'_HideColumnLink'+'_'+column.id\">\n          </button>\n\n        </div>\n        <!-- column filter (if specified) -->\n        <div *ngIf=\"((rows && rows.length > 0) || !noFilters()) && column.filterable\" >\n          <input [oepaTableFiltering]=\"{ filterString: '', columnId: column.id }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n            [id]=\"tableId+'_FilterColumn_'+column.id\" [attr.aria-label]=\"'Filter for ' + column.title\" />\n        </div>\n      </th>\n    </ng-template>\n  </tr>\n</thead>\n\n<!-- This is the table body -->\n<tbody>\n  <ng-template ngFor let-row [ngForOf]=\"rows\" let-r=\"index\">\n    <!-- Data Row -->\n    <tr>\n      <td *ngIf=\"dataHasDetails\">\n        <!-- Detail icon (if specified) -->\n        <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n          <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\" aria-hidden=\"true\"></i>\n          <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" [attr.aria-pressed]=\"row.showDetail\" [attr.aria-label]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\">\n            <i class=\"bi\" [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\" aria-hidden=\"true\"></i>\n          </button>\n        </span>\n      </td>\n      <!-- If row is a divider, it spans the whole table -->\n      <!-- <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\" [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td> -->\n      <!-- Data Rows -->\n      <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n        <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0\" ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n          <!-- Data Cell -->\n          <div *ngIf=\"!col.actionColumn && !col.selectColumn && !col.singleSelectColumn\">\n            <!-- Template for popover 1 -->\n            <ng-template #popoverTemplate>\n              <div *ngIf=\"row.popover\">\n                <cml-template [templateInfo]=\"row.popover.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 1 icon (if specified) -->\n            <span *ngIf=\"row.popover && i === (row.popoverColumnIndex || 0) && row.popover\" tabindex=\"0\" [popoverTitle]=\"row.popover.title\" [popover]=\"popoverTemplate\"\n              [containerClass]=\"row.popover.containerClass\" placement=\"right\" [triggers]=\"row.popover.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover.className\" [id]=\"tableId+'_PopoverLink_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 2 -->\n            <ng-template #popover2Template>\n              <div *ngIf=\"row.popover2\">\n                <cml-template [templateInfo]=\"row.popover2.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 2 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover2ColumnIndex || 0) && row.popover2\" tabindex=\"0\" [popoverTitle]=\"row.popover2.title\" [popover]=\"popover2Template\"\n              [containerClass]=\"row.popover2.containerClass\" placement=\"right\" [triggers]=\"row.popover2.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover2.className\" [id]=\"tableId+'_Popover2Link_'+r\"></i>\n            </span>\n\n            <!-- Template for popover 3 -->\n            <ng-template #popover3Template>\n              <div *ngIf=\"row.popover3\">\n                <cml-template [templateInfo]=\"row.popover3.content\"></cml-template>\n              </div>\n            </ng-template>\n            <!-- Popover 3 icon (if specified) -->\n            <span *ngIf=\"i === (row.popover3ColumnIndex || 0) && row.popover3\" tabindex=\"0\" [popoverTitle]=\"row.popover3.title\" [popover]=\"popover3Template\"\n              [containerClass]=\"row.popover3.containerClass\" placement=\"right\" [triggers]=\"row.popover3.trigger || 'mouseenter:mouseleave'\">\n              <i [ngClass]=\"row.popover3.className\" [id]=\"tableId+'_Popover3Link_'+r\"></i>\n            </span>\n\n            \n            <!-- <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            <span *ngIf=\"!(row|cellInnerHTML:col)\">{{row|cellValue:col}}</span> -->\n\n            <!-- If col is hyperlink, display data as a hyperlink -->\n            <a *ngIf=\"col.hyperlink\"  href=\"javascript:void(0);\" (click)=\"cellClick(row, col.id)\" [id]=\"tableId+'_CellClick_'+r+'_'+i\" tabindex=\"0\" role=\"button\" [attr.aria-label]=\"'Activate ' + (col.title || 'cell')\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i [ngClass]=\"row|cellIconClassname:col\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </a>\n            <!-- If col is NOT hyperlink, just display data -->\n            <span *ngIf=\"!col.hyperlink\">\n              <span *ngIf=\"!(row|cellInnerHTML:col)\">\n                <i ngClass=\"{{row|cellIconClassname:col || ''}}\" aria-hidden=\"true\"></i>\n                <span *ngIf=\"row|cellImgSrc:col\"><img [src]=\"row|cellImgSrc:col\" alt=\"\"/></span>\n                {{row|cellValue:col}}\n              </span>\n              <div *ngIf=\"row|cellInnerHTML:col\" [innerHTML]=\"row|cellInnerHTML:col\"></div>\n            </span>\n          </div>\n          <!-- Select Cell -->\n          <div *ngIf=\"col.selectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_'+r\" type=\"checkbox\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"toggleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Single Select Cell -->\n          <div *ngIf=\"col.singleSelectColumn\" class=\"text-center\">\n            <input [id]=\"tableId+'_singleSelect_'+r\" type=\"radio\" [disabled]=\"!row.selectable\" [checked]=\"row.selected\" (change)=\"singleRowSelection(row)\" [attr.aria-label]=\"'Select row ' + (r+1)\">\n          </div>\n          <!-- Action Button Cell -->\n          <div *ngIf=\"col.actionColumn && row.actions\">\n            <oepa-action-btn [actions]=\"row.actions\" [data]=\"row.dataSource\"  (actionClicked)=\"onActionClick($event)\" [btnId]=\"tableId+'_'+r\"></oepa-action-btn>\n          </div>\n        </td>\n      </ng-template>\n    </tr>\n\n    <!-- Detail Row -->\n    <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n      <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n        <cml-template [templateInfo]=\"row.detail\"></cml-template>\n      </td>\n    </tr>\n  </ng-template>\n  <tr *ngIf=\"totalRow\">\n    <td *ngIf=\"dataHasDetails\">\n    </td>\n      <ng-template ngFor let-totalCol [ngForOf]=\"dataColumns\">\n          <td *ngIf=\"!totalCol.hidden\" ngClass=\"{{totalRow|cellClassname:totalCol || ''}}\">\n            <div>\n               <span><i ngClass=\"{{totalRow|cellIconClassname:totalCol || ''}}\"></i>{{totalRow|cellValue:totalCol}}</span>\n            </div>\n          </td>\n      </ng-template>\n  </tr>\n</tbody>\n</table>\n</div>\n<!-- Table footer -->\n<form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n<div class=\"form-group row text-right\">\n  <!-- Table-wide filter -->\n  <div class=\"col-sm-4\">\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\" [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\" (tableChanged)=\"onFilterChanged($event)\"\n          [id]=\"tableId+'_FilterAllColumnsInput'\" />\n      </div>\n      <div class=\"col-sm-6\">\n        <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n          <span class=\"badge badge-secondary\" style=\"color: #999\">{{_data.length}}</span>&nbsp;total rows\n        </span>\n      </div>\n    </div>\n  </div>\n  <!-- Export Buttons -->\n  <div class=\"col-sm-4 d-flex justify-content-center\">\n    <div class=\"row\">\n      <div class=\"col-sm-12 text-center\">\n        <button type=\"button\" *ngIf=\"config.exportToExcel\" class=\"btn btn-primary mr-1\" (click)=\"exportToExcel()\" [id]=\"tableId+'_ExportToExcelBtn'\" 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\">{{ 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: [{
@@ -3200,7 +3206,7 @@ class PTableComponent {
         this.customBtn2Clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\">{{ paginationOn ?\n              'Show All Rows' : 'Restore Pagination'}}</button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" />\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" />\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\">{{ paginationOn ?\n              'Show All Rows' : 'Restore Pagination'}}</button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" />\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" />\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, decorators: [{
             type: Component,
@@ -5965,7 +5971,7 @@ class DateInputModalComponent {
         this.bsModalRef.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputModalComponent, deps: [{ token: i2$1.BsModalRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputModalComponent, selector: "oepa-date-input-modal", inputs: { title: "title", infoText: "infoText", dateLabel: "dateLabel", submitBtnLabel: "submitBtnLabel", cancelBtnLabel: "cancelBtnLabel", bsConfig: "bsConfig" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{title}}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div *ngIf=\"infoText\" class=\"col-sm-12\">\n      <div class=\"alert alert-info\">\n        {{infoText}}\n      </div>\n    </div>\n    <div class=\"col-sm-12\">\n      <div>\n        <label>{{dateLabel}}</label>\n        <oepa-datepicker [group]=\"dateForm\" field=\"date\" [bsConfig]=\"bsConfig || {}\" [showValidation]=\"true\"></oepa-datepicker>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n    <div class=\"alert alert-danger\">{{errorMessage}}</div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"submit\" class=\"btn btn-primary mr-1\" (click)=\"submit()\" \n          [id]=\"'submitDateBtn'\" [disabled]=\"dateForm.status === 'INVALID'\">{{submitBtnLabel}}</button>\n  <button [id]=\"'cancelDateInputBtn'\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputModalComponent, selector: "oepa-date-input-modal", inputs: { title: "title", infoText: "infoText", dateLabel: "dateLabel", submitBtnLabel: "submitBtnLabel", cancelBtnLabel: "cancelBtnLabel", bsConfig: "bsConfig" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{title}}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div *ngIf=\"infoText\" class=\"col-sm-12\">\n      <div class=\"alert alert-info\">\n        {{infoText}}\n      </div>\n    </div>\n    <div class=\"col-sm-12\">\n      <div>\n        <label>{{dateLabel}}</label>\n        <oepa-datepicker [group]=\"dateForm\" field=\"date\" [bsConfig]=\"bsConfig || {}\" [showValidation]=\"true\"></oepa-datepicker>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"errorMessage\" class=\"col-sm-12\">\n    <div class=\"alert alert-danger\">{{errorMessage}}</div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"submit\" class=\"btn btn-primary mr-1\" (click)=\"submit()\" \n          [id]=\"'submitDateBtn'\" [disabled]=\"dateForm.status === 'INVALID'\">{{submitBtnLabel}}</button>\n  <button [id]=\"'cancelDateInputBtn'\" type=\"button\" class=\"btn btn-primary mr-1\" (click)=\"cancel()\">{{cancelBtnLabel}}</button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"], exportAs: ["oepa-datepicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputModalComponent, decorators: [{
             type: Component,
@@ -8607,7 +8613,7 @@ class DateInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputComponent, selector: "oepa-date-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", placement: "placement", showValidation: "showValidation", pauseChangeProcessing: "pauseChangeProcessing" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <oepa-datepicker [group]=\"group\" [field]=\"field\" [tableIdx]=\"tableIdx\" \n    [placement]=\"placement\" [showValidation]=\"showValidation\"></oepa-datepicker>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateInputComponent, selector: "oepa-date-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", placement: "placement", showValidation: "showValidation", pauseChangeProcessing: "pauseChangeProcessing" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <oepa-datepicker [group]=\"group\" [field]=\"field\" [tableIdx]=\"tableIdx\" \n    [placement]=\"placement\" [showValidation]=\"showValidation\"></oepa-datepicker>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatepickerComponent, selector: "oepa-datepicker", inputs: ["group", "field", "bsConfig", "showValidation", "placement", "tableIdx", "small"], exportAs: ["oepa-datepicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -8775,7 +8781,7 @@ class CommonFormsModule {
             TemplateConfirmationModalComponent, TextAreaInputComponent, TextInputComponent, TimeoutModalComponent, TimepickerComponent,
             YesNoComponent, YesNoBooleanComponent, YesNoOtherInputComponent], imports: [CommonModule,
             FormsModule,
-            ReactiveFormsModule, i4$1.ButtonsModule, i4.BsDatepickerModule, i4$2.TimepickerModule, i7$1.PaginationModule, i8.PopoverModule, i9.TooltipModule, i3.BsDropdownModule, i2$1.ModalModule, i6$1.TypeaheadModule, i6.AccordionModule, i11$1.CollapseModule, i12.TabsModule, TableModule,
+            ReactiveFormsModule, i4$1.ButtonsModule, i4.BsDatepickerModule, i4$2.TimepickerModule, i7$1.PaginationModule, i8.PopoverModule, i8$1.TooltipModule, i3.BsDropdownModule, i2$1.ModalModule, i6$1.TypeaheadModule, i6.AccordionModule, i11$1.CollapseModule, i12.TabsModule, TableModule,
             CommonLibModule,
             NgxMaskDirective, NgxMaskPipe], exports: [AccountSearchInputComponent, AccountSearchModalComponent,
             ActionBtnComponent, ActionBtnModalComponent, AddressComponent, ZipCodeComponent,
@@ -9448,7 +9454,15 @@ class OepaHttpInterceptor {
             let msg = error.headers ? error.headers.get('OEPA_ERROR') : '';
             console.log('msg from header = ' + msg);
             console.log('ERROR: [' + req.url + ']: ' + JSON.stringify(error));
-            msg = msg || error.error.message || error.error.errorMessage || error.error.error || error.error || 'Server error.';
+            msg = msg || (error && error.error && (error.error.message || error.error.errorMessage || error.error.error || error.error)) || 'Server error.';
+            if (msg && typeof msg !== 'string') {
+                try {
+                    msg = JSON.stringify(msg);
+                }
+                catch {
+                    msg = String(msg);
+                }
+            }
             if (msg) {
                 if (msg.indexOf('User account is required') > -1
                     || msg.toUpperCase().indexOf('USERID IS MISSING') > -1) {