@resolveio/client-lib-core 2.0.12 → 15.0.1

package/fesm2015/resolveio-client-lib-core.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, HostListener, ViewChild, Directive, ChangeDetectionStrategy, EventEmitter, Output, ViewChildren, Pipe, ElementRef, NgModule, ViewEncapsulation, Optional, inject } from '@angular/core';
+import { Injectable, Component, Input, HostListener, ViewChild, Directive, ChangeDetectionStrategy, EventEmitter, Output, ViewChildren, Pipe, ElementRef, NgModule, ViewEncapsulation, Optional } from '@angular/core';
 import { BehaviorSubject, Subject, merge } from 'rxjs';
 import * as i1$2 from '@angular/router';
-import { RouterModule, Router } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { finalize } from 'rxjs/operators';
 import { detailedDiff } from 'deep-object-diff';
 import moment from 'moment';
@@ -108,9 +108,9 @@ class CoreService {
         this.isDemo.next(isDemo);
     }
 }
-CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreService, decorators: [{
+CoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -183,42 +183,35 @@ function toDataURL(url, callback) {
     xhr.send();
 }
 function getDeepDiffDetails(obj1, obj2) {
-    let diff = detailedDiff(obj1, obj2);
-    let newDiff = detailedDiff(obj2, obj1);
+    let diff = detailedDiff(obj2, obj1);
     let diffString = '';
-    if ((Object.keys(diff['updated']).length)) {
-        // if (Object.keys(diff['added']).length){
-        // 	diffString += '; ';
-        // }
-        // if (Object.keys(diff['deleted']).length) {
-        // 	diffString += '; ';
-        // }
-        for (let i = 0; i < Object.keys(diff['updated']).length; i++) {
-            if (!Array.isArray(obj1[Object.keys(diff['updated'])[i]])) {
-                let key = Object.keys(diff['updated'])[i];
-                let newKey = Object.keys(newDiff['updated'])[i];
-                if ((key.substr(0, 2) !== 'id')) {
-                    if (diff['updated'][key] && moment.isDate(diff['updated'][key])) {
-                        diffString += 'Updated: \n' + toTitleCase(key.replace(/_/g, ' ')) + ': "' + moment(diff['updated'][key]).format('llll') + '" to "' + moment(newDiff['updated'][newKey]).format('llll') + '"\n';
-                    }
-                    else if (diff['updated'][key] && typeof (diff['updated'][key]) === 'object') {
-                        let objString = '';
-                        for (let j = 0; j < Object.keys(diff['updated'][key]).length; j++) {
-                            let objKey = Object.keys(diff['updated'][key])[j];
-                            let newObjKey = Object.keys(newDiff['updated'][key])[j];
-                            if (j > 0) {
-                                objString += 'll, \n';
-                            }
-                            objString += toTitleCase(objKey.replace(/_/g, ' ')) + ': "' + diff['updated'][key][objKey] + '" to "' + newDiff['updated'][key][newObjKey] + '"' + (j < Object.keys(diff['updated'][key]).length - 1 ? ', ' : '');
-                        }
-                        diffString += 'Updated: \n' + objString + '\n';
-                    }
-                    else {
-                        diffString += 'Updated: \n' + toTitleCase(key.replace(/_/g, ' ')) + ': "' + diff['updated'][key] + '" to "' + newDiff['updated'][newKey] + '"' + (i < Object.keys(diff['updated']).length - 1 ? '\n' : '');
-                    }
-                }
-            }
-        }
+    const formatObjectDiff = (obj1, obj2) => {
+        if (!obj1 || !obj2)
+            return '';
+        return Object.keys(obj1)
+            .map(key => {
+            if (Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
+                const arrayDiff = obj1[key].map((item, index) => typeof item === 'object' && obj2[key][index]
+                    ? `{${formatObjectDiff(item, obj2[key][index])}}`
+                    : `"${item}" to "${obj2[key][index]}"`).join(', ');
+                return `${toTitleCase(key)}: [${arrayDiff}]`;
+            }
+            if (typeof obj1[key] === 'object' && obj2[key]) {
+                return `${toTitleCase(key)}: {${formatObjectDiff(obj1[key], obj2[key])}}`;
+            }
+            return `${toTitleCase(key)}: "${obj1[key]}" to "${obj2[key]}"`;
+        })
+            .join(', ');
+    };
+    if (Object.keys(diff['updated']).length > 0) {
+        diffString += 'Updated:\n';
+        const updates = Object.keys(diff['updated'])
+            .filter(key => key.substr(0, 2) !== 'id' && diff['updated'][key] !== obj2[key])
+            .map(key => moment.isDate(diff['updated'][key])
+            ? `${toTitleCase(key)}: "${moment(diff['updated'][key]).format('llll')}" to "${moment(obj2[key]).format('llll')}"`
+            : `${toTitleCase(key)}: {${formatObjectDiff(diff['updated'][key], obj2[key])}}`)
+            .join(',\n');
+        diffString += updates ? `${updates}\n` : '';
     }
     return diffString;
 }
@@ -268,6 +261,10 @@ class SocketService {
         this.readyState$ = new BehaviorSubject(0);
         //List of WebSocket sub-protocols
         this.protocols = [];
+        this.pingInterval = null;
+        this.pongTimeout = null;
+        this.pingIntervalTime = 15000; // Time between each ping (e.g., 30 seconds)
+        this.pongTimeoutTime = 12000; // Time to wait for pong before closing connection (e.g., 10 seconds)
         //Set up the default 'noop' event handlers
         this.onopen = function (event) { };
         this.onclose = function (event) { };
@@ -301,6 +298,7 @@ class SocketService {
                 this.readyState = WebSocket.OPEN;
                 this.readyState$.next(this.readyState);
                 this.onopen(event);
+                this.startPinging();
             };
             this.ws.onclose = (event) => {
                 if (this.timeout) {
@@ -315,9 +313,18 @@ class SocketService {
                 setTimeout(() => {
                     this.connect();
                 }, this.reconnectInterval);
+                this.stopPinging();
             };
             this.ws.onmessage = (event) => {
-                this.onmessage(event);
+                if (event.data === 'pong') {
+                    this.log(new Date(), 'WS', 'pong received');
+                    clearTimeout(this.pongTimeout);
+                }
+                else {
+                    let messageData = JSON.parse(event.data);
+                    messageData = this.convertUTCDateToLocalDate(messageData);
+                    this.onmessage(messageData);
+                }
             };
             this.ws.onerror = (event) => {
                 this.log(new Date(), 'WS', 'onerror', this, event);
@@ -326,20 +333,71 @@ class SocketService {
             };
         }
     }
+    convertUTCDateToLocalDate(data) {
+        if (Array.isArray(data)) {
+            return data.map(item => this.convertUTCDateToLocalDate(item));
+        }
+        else if (typeof data === 'object' && data !== null) {
+            const keys = Object.keys(data);
+            keys.forEach((key) => {
+                data[key] = this.convertUTCDateToLocalDate(data[key]);
+            });
+            return data;
+        }
+        else if (typeof data === 'string') {
+            // Check if the string is an ISO date format
+            const datePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z$/;
+            if (datePattern.test(data)) {
+                return new Date(data);
+            }
+        }
+        return data;
+    }
+    startPinging() {
+        this.pingInterval = setInterval(() => {
+            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                this.send('ping');
+                this.pongTimeout = setTimeout(() => {
+                    this.log(new Date(), 'WS', 'pong not received, closing connection');
+                    this.close();
+                }, this.pongTimeoutTime);
+            }
+        }, this.pingIntervalTime);
+    }
+    stopPinging() {
+        if (this.pingInterval) {
+            clearInterval(this.pingInterval);
+        }
+        if (this.pongTimeout) {
+            clearTimeout(this.pongTimeout);
+        }
+    }
+    convertDatesToUTC(obj) {
+        for (let key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                if (obj[key] instanceof Date) {
+                    // Convert Date to UTC ISO String
+                    obj[key] = obj[key].toISOString();
+                }
+                else if (typeof obj[key] === 'object' && obj[key] !== null) {
+                    // Recursively look for Date objects within arrays or nested objects
+                    this.convertDatesToUTC(obj[key]);
+                }
+            }
+        }
+    }
     send(...data) {
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
+            data.forEach(item => this.convertDatesToUTC(item));
             this.ws.send(JSON.stringify(data));
             return true;
         }
         else {
-            this.log(new Date(), 'WS', 'send error', this.ws.readyState);
+            this.log(new Date(), 'WS', 'send error', this.readyState);
             this.reconnect();
             return false;
         }
     }
-    /**
-     * Returns boolean, whether websocket was FORCEFULLY closed.
-     */
     close() {
         if (this.ws) {
             this.log(new Date(), 'WS', 'closing socket');
@@ -373,9 +431,9 @@ class SocketService {
         }
     }
 }
-SocketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SocketService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
-SocketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SocketService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SocketService, decorators: [{
+SocketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+SocketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalStorageService }]; } });
 
@@ -992,9 +1050,9 @@ class OfflineManagerService {
         collection.drop();
     }
 }
-OfflineManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OfflineManagerService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
-OfflineManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OfflineManagerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OfflineManagerService, decorators: [{
+OfflineManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OfflineManagerService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+OfflineManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OfflineManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OfflineManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalStorageService }]; } });
 
@@ -1006,7 +1064,9 @@ class AlertService {
         if (id) {
             this._toastr.clear(id);
         }
-        this._toastr.clear();
+        else {
+            this._toastr.clear();
+        }
     }
     setAlert(type, message, timer = 5000) {
         if (type === 'success') {
@@ -1064,9 +1124,9 @@ class AlertService {
         }
     }
 }
-AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertService, deps: [{ token: i1$1.ToastrService }], target: i0.ɵɵFactoryTarget.Injectable });
-AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AlertService, decorators: [{
+AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlertService, deps: [{ token: i1$1.ToastrService }], target: i0.ɵɵFactoryTarget.Injectable });
+AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlertService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlertService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ToastrService }]; } });
 
@@ -1094,48 +1154,7 @@ class SocketManagerService {
             this.socketStatus = socketStatus;
         });
         this._socket.onmessage = (event) => {
-            let resData = JSON.parse(event.data, dateReviver);
-            if (resData.data === 'reloadWSCommand') {
-                window.location.href = window.location.href + '?forceReload=true';
-            }
-            else if (resData.data === 'reconnectWSCommand') {
-                this._socket.reconnect();
-            }
-            else if (resData.data === 'disconnectWSCommand') {
-                this.closeSocket();
-            }
-            let offlineIndex = this._offlineUpdates.findIndex(a => a.messageId === resData.messageId);
-            if (offlineIndex >= 0) {
-                this._offline.removeDocument(this._offlineUpdates[offlineIndex].type, this._offlineUpdates[offlineIndex].id_offline_doc);
-                this._offlineUpdates.splice(offlineIndex, 1);
-            }
-            if (resData.data !== 'ACK' && resData.data !== 'NACK') {
-                if (this._cbArray.map(a => a.messageId).includes(resData.messageId)) {
-                    let index = this._cbArray.findIndex(a => a.messageId === resData.messageId);
-                    if (index >= 0) {
-                        clearInterval(this._cbArray[index].timerId);
-                        if (this._cbArray[index].cb) {
-                            this._cbArray[index].cb(resData.hasError ? resData.data : null, resData.hasError ? null : resData.data);
-                            this._cbArray[index].resolveFn(resData.hasError ? resData.data : null);
-                        }
-                        else {
-                            if (resData.hasError) {
-                                this._cbArray[index].rejectFn(resData.data);
-                            }
-                            else {
-                                this._cbArray[index].resolveFn(resData.data);
-                            }
-                        }
-                        this._cbArray.splice(index, 1);
-                    }
-                }
-                else if (this._subArray.map(a => a.messageId).includes(resData.messageId)) {
-                    let index = this._subArray.findIndex(a => a.messageId === resData.messageId);
-                    if (index >= 0) {
-                        this._subArray[index].subject.next(resData.data);
-                    }
-                }
-            }
+            this.handleMessage(event);
         };
         this._socket.onopen = (event) => {
             this._connectionDelayTimeout = setTimeout(() => {
@@ -1165,11 +1184,9 @@ class SocketManagerService {
                 if (collectionUpdates.length) {
                     this.send('Offline Updates', new Date(), this.messageId++, 'offline', collectionUpdates.sort((a, b) => a.date.getTime() - b.date.getTime()));
                 }
-                if (this.initConnection) {
-                    this._subArray.forEach(sub => {
-                        this.send(sub.messageRoute, new Date(), sub.messageId, 'subscription', 'sub', sub.subscription, ...sub.parameters);
-                    });
-                }
+                this._subArray.forEach(sub => {
+                    this.send(sub.messageRoute, new Date(), sub.messageId, 'subscription', 'sub', sub.subscription, ...sub.parameters);
+                });
                 this.initConnection = true;
             }, 1000);
         };
@@ -1190,18 +1207,11 @@ class SocketManagerService {
                 if (!this._runningQueue) {
                     if (this._sendQueue.length) {
                         this._runningQueue = true;
-                        for (let i = this._sendQueue.length - 1; i >= 0; i--) {
-                            if (this._socket && this._socket.ws) {
-                                if (this.socketStatus === WebSocket.OPEN) {
-                                    let nextSendItem = this._sendQueue.pop();
-                                    this._socket.send(...nextSendItem);
-                                }
-                                else {
-                                    break;
-                                }
-                            }
-                            else {
-                                break;
+                        if (this._socket && this._socket.ws) {
+                            let nextSendItem = this._sendQueue[this._sendQueue.length - 1];
+                            let sendStatus = this._socket.send(...nextSendItem);
+                            if (sendStatus) {
+                                this._sendQueue.pop();
                             }
                         }
                         this._runningQueue = false;
@@ -1210,6 +1220,49 @@ class SocketManagerService {
             }
         }, 25);
     }
+    handleMessage(resData) {
+        if (resData.data === 'reloadWSCommand') {
+            window.location.href = window.location.href + '?forceReload=true';
+        }
+        else if (resData.data === 'reconnectWSCommand') {
+            this._socket.reconnect();
+        }
+        else if (resData.data === 'disconnectWSCommand') {
+            this.closeSocket();
+        }
+        let offlineIndex = this._offlineUpdates.findIndex(a => a.messageId === resData.messageId);
+        if (offlineIndex >= 0) {
+            this._offline.removeDocument(this._offlineUpdates[offlineIndex].type, this._offlineUpdates[offlineIndex].id_offline_doc);
+            this._offlineUpdates.splice(offlineIndex, 1);
+        }
+        if (resData.data !== 'ACK' && resData.data !== 'NACK') {
+            if (this._cbArray.map(a => a.messageId).includes(resData.messageId)) {
+                let index = this._cbArray.findIndex(a => a.messageId === resData.messageId);
+                if (index >= 0) {
+                    clearInterval(this._cbArray[index].timerId);
+                    if (this._cbArray[index].cb) {
+                        this._cbArray[index].cb(resData.hasError ? resData.data : null, resData.hasError ? null : resData.data);
+                        this._cbArray[index].resolveFn(resData.hasError ? resData.data : null);
+                    }
+                    else {
+                        if (resData.hasError) {
+                            this._cbArray[index].rejectFn(resData.data);
+                        }
+                        else {
+                            this._cbArray[index].resolveFn(resData.data);
+                        }
+                    }
+                    this._cbArray.splice(index, 1);
+                }
+            }
+            else if (this._subArray.map(a => a.messageId).includes(resData.messageId)) {
+                let index = this._subArray.findIndex(a => a.messageId === resData.messageId);
+                if (index >= 0) {
+                    this._subArray[index].subject.next(resData.data);
+                }
+            }
+        }
+    }
     openSocket(environment, protocols) {
         this._socket.openSocket(environment, protocols);
     }
@@ -1301,14 +1354,7 @@ class SocketManagerService {
     }
     send(...data) {
         if (data[3] === 'subscription') {
-            if (this.socketStatus === WebSocket.OPEN) {
-                this._socket.send(...data);
-            }
-            else {
-                if (!this._sendQueue.filter(a => JSON.stringify(a) === JSON.stringify(data)).length) {
-                    this._sendQueue.splice(0, 0, data);
-                }
-            }
+            this._socket.send(...data);
         }
         else if (data[3] === 'method') {
             if (this.socketStatus === WebSocket.OPEN) {
@@ -1393,18 +1439,16 @@ class SocketManagerService {
             }
         }
         else if (data[3] === 'offline') {
-            if (this.socketStatus === WebSocket.OPEN) {
-                this._socket.send(...data);
-            }
+            this._socket.send(...data);
         }
     }
     getStatus() {
         return this._socket.readyState$;
     }
 }
-SocketManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SocketManagerService, deps: [{ token: SocketService }, { token: OfflineManagerService }, { token: AlertService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-SocketManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SocketManagerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SocketManagerService, decorators: [{
+SocketManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketManagerService, deps: [{ token: SocketService }, { token: OfflineManagerService }, { token: AlertService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+SocketManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SocketService }, { type: OfflineManagerService }, { type: AlertService }, { type: i1$2.Router }]; } });
 
@@ -1422,9 +1466,9 @@ class TokenManagerService {
         this._storage.remove(tokenKey);
     }
 }
-TokenManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenManagerService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
-TokenManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenManagerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TokenManagerService, decorators: [{
+TokenManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TokenManagerService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+TokenManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TokenManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TokenManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalStorageService }]; } });
 
@@ -1628,9 +1672,9 @@ class AccountManagerService {
         });
     }
 }
-AccountManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AccountManagerService, deps: [{ token: i1$2.Router }, { token: SocketManagerService }, { token: TokenManagerService }, { token: i4.HttpClient }, { token: AlertService }, { token: OfflineManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
-AccountManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AccountManagerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AccountManagerService, decorators: [{
+AccountManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AccountManagerService, deps: [{ token: i1$2.Router }, { token: SocketManagerService }, { token: TokenManagerService }, { token: i4.HttpClient }, { token: AlertService }, { token: OfflineManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
+AccountManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AccountManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AccountManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: SocketManagerService }, { type: TokenManagerService }, { type: i4.HttpClient }, { type: AlertService }, { type: OfflineManagerService }]; } });
 
@@ -1784,6 +1828,14 @@ class ValidationService {
             return { 'minLengthArray': { valid: false } };
         };
     }
+    maxLengthArray(max) {
+        return (c) => {
+            if (c.value && c.value.length <= max) {
+                return null;
+            }
+            return { 'maxLengthArray': { valid: false } };
+        };
+    }
     validIPAddress(c) {
         let regEx = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
         if (c.value === '' || c.value === null) {
@@ -1803,9 +1855,9 @@ class ValidationService {
         };
     }
 }
-ValidationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ValidationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ValidationService, decorators: [{
+ValidationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ValidationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -1878,9 +1930,9 @@ class AwsService {
         });
     }
 }
-AwsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AwsService, deps: [{ token: SocketManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
-AwsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AwsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AwsService, decorators: [{
+AwsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AwsService, deps: [{ token: SocketManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
+AwsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AwsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AwsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SocketManagerService }]; } });
 
@@ -1901,25 +1953,25 @@ class ProviderService {
         this._fb = _fb;
     }
 }
-ProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProviderService, deps: [{ token: CoreService }, { token: i1$2.Router }, { token: SocketManagerService }, { token: AccountManagerService }, { token: AlertService }, { token: ValidationService }, { token: AwsService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-ProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProviderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProviderService, decorators: [{
+ProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProviderService, deps: [{ token: CoreService }, { token: i1$2.Router }, { token: SocketManagerService }, { token: AccountManagerService }, { token: AlertService }, { token: ValidationService }, { token: AwsService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+ProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProviderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProviderService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: CoreService }, { type: i1$2.Router }, { type: SocketManagerService }, { type: AccountManagerService }, { type: AlertService }, { type: ValidationService }, { type: AwsService }, { type: i2.FormBuilder }]; } });
 
 // tslint:disable-next-line:component-class-suffix
 class DialogNotifyContent {
-    constructor(activeModal) {
-        this.activeModal = activeModal;
-    }
     handleKeyboardEvent(event) {
         if (event.keyCode === 13) {
             this.activeModal.close();
         }
     }
+    constructor(activeModal) {
+        this.activeModal = activeModal;
+    }
 }
-DialogNotifyContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogNotifyContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-DialogNotifyContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogNotifyContent, selector: "ng-component", inputs: { title: "title", body: "body" }, host: { listeners: { "document:keypress": "handleKeyboardEvent($event)" } }, ngImport: i0, template: `
+DialogNotifyContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogNotifyContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+DialogNotifyContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogNotifyContent, selector: "ng-component", inputs: { title: "title", body: "body" }, host: { listeners: { "document:keypress": "handleKeyboardEvent($event)" } }, ngImport: i0, template: `
 		<div class="modal-header">
 			<h4 class="modal-title"><i class="fa fa-info-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
 	  		<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
@@ -1933,7 +1985,7 @@ DialogNotifyContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 	  		<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Ok</button>
 		</div>
   `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogNotifyContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogNotifyContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2003,8 +2055,8 @@ class FormButtonComponent extends BaseComponent {
         return false;
     }
 }
-FormButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormButtonComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-FormButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormButtonComponent, selector: "form-button", inputs: { form: "form", disabled: "disabled", type: "type" }, providers: [ProviderService], viewQueries: [{ propertyName: "formButton", first: true, predicate: ["formButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+FormButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormButtonComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+FormButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormButtonComponent, selector: "form-button", inputs: { form: "form", disabled: "disabled", type: "type" }, providers: [ProviderService], viewQueries: [{ propertyName: "formButton", first: true, predicate: ["formButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
 		<div style="position: relative; text-align: left; width: 100%">
 			<ng-template #tipContent>
 				<span style="font-weight: bold">Errors:<br></span>
@@ -2016,8 +2068,8 @@ FormButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 				<button [type]="type" [ngClass]="['btn', form && form.valid ? 'btn-success' : 'btn-danger']" [disabled]="!form || !form.valid || disabled" style="width: 200px" [autofocus]="true" #formButton>Submit</button>
 			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormButtonComponent, decorators: [{
+	`, isInline: true, dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormButtonComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [ProviderService],
@@ -2056,9 +2108,9 @@ class FocusDirective {
             this.element.nativeElement.focus();
     }
 }
-FocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FocusDirective, selector: "[focus]", inputs: { focus: "focus" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusDirective, decorators: [{
+FocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusDirective, selector: "[focus]", inputs: { focus: "focus" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[focus]'
@@ -2119,8 +2171,8 @@ class DialogInputContent {
         return res;
     }
 }
-DialogInputContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogInputContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogInputContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogInputContent, selector: "ng-component", inputs: { title: "title", inputFields: "inputFields" }, ngImport: i0, template: `
+DialogInputContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogInputContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DialogInputContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogInputContent, selector: "ng-component", inputs: { title: "title", inputFields: "inputFields" }, ngImport: i0, template: `
 		<form [formGroup]="formInput" novalidate (ngSubmit)="_activeModal.close(this.formInput.controls)">
 			<div class="modal-header">
 				<h4 class="modal-title"><i class="fa fa-plus-circle" style="color: green; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
@@ -2182,7 +2234,7 @@ DialogInputContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 			</div>
 		</form>
 	`, isInline: true, dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "component", type: i4$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogInputContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogInputContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2256,17 +2308,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 // tslint:disable-next-line:component-class-suffix
 class DialogErrorContent {
-    constructor(activeModal) {
-        this.activeModal = activeModal;
-    }
     handleKeyboardEvent(event) {
         if (event.keyCode === 13) {
             this.activeModal.close();
         }
     }
+    constructor(activeModal) {
+        this.activeModal = activeModal;
+    }
 }
-DialogErrorContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogErrorContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-DialogErrorContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogErrorContent, selector: "ng-component", inputs: { title: "title", body: "body" }, host: { listeners: { "document:keypress": "handleKeyboardEvent($event)" } }, ngImport: i0, template: `
+DialogErrorContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogErrorContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+DialogErrorContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogErrorContent, selector: "ng-component", inputs: { title: "title", body: "body" }, host: { listeners: { "document:keypress": "handleKeyboardEvent($event)" } }, ngImport: i0, template: `
 		<div class="modal-header">
 			<h4 class="modal-title"><i class="fa fa-times-circle" style="color: red; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
 			<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
@@ -2280,7 +2332,7 @@ DialogErrorContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 			<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Ok</button>
 		</div>
   	`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogErrorContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogErrorContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2309,17 +2361,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 // tslint:disable-next-line:component-class-suffix
 class DialogConfirmContent {
-    constructor(activeModal) {
-        this.activeModal = activeModal;
-    }
     handleKeyboardEvent(event) {
         if (event.keyCode === 13) {
             this.activeModal.close();
         }
     }
+    constructor(activeModal) {
+        this.activeModal = activeModal;
+    }
 }
-DialogConfirmContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogConfirmContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-DialogConfirmContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogConfirmContent, selector: "ng-component", inputs: { title: "title", body: "body", html: "html" }, host: { listeners: { "document:keypress": "handleKeyboardEvent($event)" } }, ngImport: i0, template: `
+DialogConfirmContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogConfirmContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+DialogConfirmContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogConfirmContent, selector: "ng-component", inputs: { title: "title", body: "body", html: "html" }, host: { listeners: { "document:keypress": "handleKeyboardEvent($event)" } }, ngImport: i0, template: `
 		<div class="modal-header">
 			<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
 			<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
@@ -2335,7 +2387,7 @@ DialogConfirmContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
 			<button type="button" class="btn btn-danger" (click)="activeModal.dismiss()">No</button>
 		</div>
   	`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogConfirmContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogConfirmContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2420,8 +2472,8 @@ class DialogSelectDateTimeContent {
         this._activeModal.close(new Date(this.form.value.date.year, parseInt(this.form.value.date.month) - 1, this.form.value.date.day, this.form.value.time.hour, this.form.value.time.minute, this.form.value.time.second, 0));
     }
 }
-DialogSelectDateTimeContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectDateTimeContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogSelectDateTimeContent, selector: "ng-component", inputs: { title: "title", date: "date", showTime: "showTime" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
+DialogSelectDateTimeContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectDateTimeContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogSelectDateTimeContent, selector: "ng-component", inputs: { title: "title", date: "date", showTime: "showTime" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
 	  	<style>
 		  	table {
 				width: 100%;
@@ -2451,8 +2503,10 @@ DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
 							<td style="border: none;">
 								<div class="input-group">
 									<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="date" ngbDatepicker [firstDayOfWeek]="7" #d="ngbDatepicker">
-									<div class="input-group-text" (click)="d.toggle()">
-										<i class="fa fa-calendar" aria-hidden="true"></i>
+									<div class="input-group-append" (click)="d.toggle()">
+										<div class="input-group-text">
+											<i class="fa fa-calendar" aria-hidden="true"></i>
+										</div>
 									</div>
 								</div>
 							</td>
@@ -2470,8 +2524,8 @@ DialogSelectDateTimeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
 				</div>
 			</form>
 		</div>
-	`, isInline: true, styles: ["\n\t\t  \ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\ttable-layout: fixed;\n\t\t\t}\n\n\t\t\ttr {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\ttd {\n\t\t\t\twidth: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i1$3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectDateTimeContent, decorators: [{
+	`, isInline: true, styles: ["\n\t\t  \ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\ttable-layout: fixed;\n\t\t\t}\n\n\t\t\ttr {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\ttd {\n\t\t\t\twidth: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i1$3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectDateTimeContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2504,8 +2558,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 							<td style="border: none;">
 								<div class="input-group">
 									<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="date" ngbDatepicker [firstDayOfWeek]="7" #d="ngbDatepicker">
-									<div class="input-group-text" (click)="d.toggle()">
-										<i class="fa fa-calendar" aria-hidden="true"></i>
+									<div class="input-group-append" (click)="d.toggle()">
+										<div class="input-group-text">
+											<i class="fa fa-calendar" aria-hidden="true"></i>
+										</div>
 									</div>
 								</div>
 							</td>
@@ -2636,8 +2692,8 @@ class DialogSelectDataLabelsContent {
         return this.dialogData;
     }
 }
-DialogSelectDataLabelsContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectDataLabelsContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogSelectDataLabelsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogSelectDataLabelsContent, selector: "ng-component", inputs: { title: "title", subtitle: "subtitle", data: "data", showArraySubData: "showArraySubData" }, ngImport: i0, template: `
+DialogSelectDataLabelsContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectDataLabelsContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectDataLabelsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogSelectDataLabelsContent, selector: "ng-component", inputs: { title: "title", subtitle: "subtitle", data: "data", showArraySubData: "showArraySubData" }, ngImport: i0, template: `
 		<div class="modal-header">
 			<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.75em" aria-hidden="true"></i> {{ title }} - {{ subtitle }}</h4>
 			<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()">
@@ -2673,7 +2729,7 @@ DialogSelectDataLabelsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
 			<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
 		</div>
 	`, isInline: true, dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectDataLabelsContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectDataLabelsContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2724,21 +2780,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class ResizeService {
+    get onResize$() {
+        return this.resizeSubject.asObservable();
+    }
     constructor(eventManager) {
         this.eventManager = eventManager;
         this.resizeSubject = new Subject();
         this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
     }
-    get onResize$() {
-        return this.resizeSubject.asObservable();
-    }
     onResize(event) {
         this.resizeSubject.next(event.target);
     }
 }
-ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeService, deps: [{ token: i1$4.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
-ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeService, decorators: [{
+ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizeService, deps: [{ token: i1$4.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$4.EventManager }]; } });
 
@@ -2764,9 +2820,9 @@ class ResponsiveButtonGroupComponent extends BaseComponent {
         this.windowSizeSubscription.unsubscribe();
     }
 }
-ResponsiveButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResponsiveButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ResizeService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-ResponsiveButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: { collapseSize: "collapseSize" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n\t@media screen and (min-width: 900px) {\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: inline-flex !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup button {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup a {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\t}\n\n\t@media screen and (max-width: 900px) {\n\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: inherit !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup button {\n\t\t\tmargin-top: 5px !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup a {\n\t\t\tmargin-top: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n</style>\n\n<div [ngClass]=\"windowSize <= collapseSize ? ['btn-group-vertical', 'xsBtnGroup'] : ['btn-group', 'lgBtnGroup']\">\n\t<ng-content></ng-content>\n</div>\n", styles: ["\n\t@media screen and (min-width: 900px) {\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: inline-flex !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup button {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup a {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\t}\n\n\t@media screen and (max-width: 900px) {\n\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: inherit !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup button {\n\t\t\tmargin-top: 5px !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup a {\n\t\t\tmargin-top: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResponsiveButtonGroupComponent, decorators: [{
+ResponsiveButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResponsiveButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ResizeService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+ResponsiveButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: { collapseSize: "collapseSize" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n\t@media screen and (min-width: 900px) {\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: inline-flex !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup button {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup a {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\t}\n\n\t@media screen and (max-width: 900px) {\n\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: inherit !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup button {\n\t\t\tmargin-top: 5px !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup a {\n\t\t\tmargin-top: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n</style>\n\n<div [ngClass]=\"windowSize <= collapseSize ? ['btn-group-vertical', 'xsBtnGroup'] : ['btn-group', 'lgBtnGroup']\">\n\t<ng-content></ng-content>\n</div>\n", styles: ["\n\t@media screen and (min-width: 900px) {\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: inline-flex !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup button {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup a {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\t}\n\n\t@media screen and (max-width: 900px) {\n\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: inherit !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup button {\n\t\t\tmargin-top: 5px !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup a {\n\t\t\tmargin-top: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResponsiveButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ providers: [ProviderService], selector: 'responsive-button-group', template: "<style>\n\t@media screen and (min-width: 900px) {\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: inline-flex !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup button {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup a {\n\t\t\tmargin-left: 5px !important;\n\t\t}\n\t}\n\n\t@media screen and (max-width: 900px) {\n\n\t\t:host /deep/ .xsBtnGroup {\n\t\t\tdisplay: inherit !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup button {\n\t\t\tmargin-top: 5px !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t:host /deep/ .xsBtnGroup a {\n\t\t\tmargin-top: 5px !important;\n\t\t}\n\n\t\t:host /deep/ .lgBtnGroup {\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n</style>\n\n<div [ngClass]=\"windowSize <= collapseSize ? ['btn-group-vertical', 'xsBtnGroup'] : ['btn-group', 'lgBtnGroup']\">\n\t<ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ResizeService }, { type: ProviderService }]; }, propDecorators: { collapseSize: [{
@@ -2808,8 +2864,8 @@ class DialogLoginContent {
         });
     }
 }
-DialogLoginContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogLoginContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogLoginContent, selector: "ng-component", inputs: { msAllowed: "msAllowed", showLoginText: "showLoginText" }, ngImport: i0, template: `
+DialogLoginContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogLoginContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogLoginContent, selector: "ng-component", inputs: { msAllowed: "msAllowed", showLoginText: "showLoginText" }, ngImport: i0, template: `
 		<style>
 			collapse-table {
 				width: 100%;
@@ -2957,7 +3013,7 @@ DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 			</div>
 		</form>
 	`, isInline: true, styles: ["\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.navbar-light .navbar-nav .nav-link {\n\t\t\t\tcolor:#333;\n\t\t\t}\n\t\t\ta.nav-link.loginreg {\n\t\t\t\tbackground-color: #0b4499;\n\t\t\t\tcolor: #fff !important;\n\t\t\t\tborder-radius: 40px;\n\t\t\t}\n\t\t\ta.nav-link.loginreg:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t\t.nav-link {\n\t\t\t\tcolor: #333333;\n\t\t\t\tfont-size: 150%\n\t\t\t}\n\t\t\t.nav-item a.nav-link.active {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.contactimg>img{\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.log-box {\n\t\t\t\tpadding-top: 26px;\n\t\t\t\tpadding-bottom: 26px;\n\t\t\t}\n\t\t\t.loginform .form-control, .register-form .form-control {\n\t\t\t\tcolor: #000;\n\t\t\t\theight: 52px;\n\t\t\t}\n\t\t\t.loginform {\n\t\t\t\tmargin-top: 35px;\n\t\t\t}\n\t\t\t.loginform label {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tfont-weight: 600;\n\t\t\t}\n\n\t\t\t.loginbtn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.login365btn {\n\t\t\t\tbackground: orange;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.contactimg {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.login-logo {\n\t\t\t\tmargin-bottom: 20px;\n\t\t\t}\n\n\t\t\t.textbox {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tcolor: #fff;\n\t\t\t\tpadding: 40px;\n\t\t\t\ttransform: translate(0%, -50%);\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t.sign-btn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 14px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\tbutton.btn.sign-btn:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogLoginContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogLoginContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3131,8 +3187,8 @@ class DialogRegisterContent {
         });
     }
 }
-DialogRegisterContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogRegisterContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogRegisterContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogRegisterContent, selector: "ng-component", ngImport: i0, template: `
+DialogRegisterContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogRegisterContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DialogRegisterContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogRegisterContent, selector: "ng-component", ngImport: i0, template: `
 		<style>
 			collapse-table {
 				width: 100%;
@@ -3281,7 +3337,7 @@ DialogRegisterContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
 			</div>
 		</form>
 	`, isInline: true, styles: ["\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.navbar-light .navbar-nav .nav-link {\n\t\t\t\tcolor:#333;\n\t\t\t}\n\t\t\ta.nav-link.loginreg {\n\t\t\t\tbackground-color: #0b4499;\n\t\t\t\tcolor: #fff !important;\n\t\t\t\tborder-radius: 40px;\n\t\t\t}\n\t\t\ta.nav-link.loginreg:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t\t.nav-link {\n\t\t\t\tcolor: #333333;\n\t\t\t\tfont-size: 150%\n\t\t\t}\n\t\t\t.nav-item a.nav-link.active {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.contactimg>img{\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.log-box {\n\t\t\t\tpadding-top: 26px;\n\t\t\t\tpadding-bottom: 26px;\n\t\t\t}\n\t\t\t.loginform .form-control, .register-form .form-control {\n\t\t\t\tcolor: #000;\n\t\t\t\theight: 52px;\n\t\t\t}\n\t\t\t.loginform {\n\t\t\t\tmargin-top: 35px;\n\t\t\t}\n\t\t\t.loginform label {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tfont-weight: 600;\n\t\t\t}\n\n\t\t\t.loginbtn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.contactimg {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.login-logo {\n\t\t\t\tmargin-bottom: 20px;\n\t\t\t}\n\n\t\t\t.textbox {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tcolor: #fff;\n\t\t\t\tpadding: 40px;\n\t\t\t\ttransform: translate(0%, -50%);\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t.sign-btn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 14px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\tbutton.btn.sign-btn:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogRegisterContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogRegisterContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3514,8 +3570,8 @@ class DialogSelectWithButtonsURLContent {
         this._activeModal.close();
     }
 }
-DialogSelectWithButtonsURLContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectWithButtonsURLContent, deps: [{ token: i1$3.NgbActiveModal }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
-DialogSelectWithButtonsURLContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogSelectWithButtonsURLContent, selector: "ng-component", inputs: { url: "url" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
+DialogSelectWithButtonsURLContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectWithButtonsURLContent, deps: [{ token: i1$3.NgbActiveModal }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectWithButtonsURLContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogSelectWithButtonsURLContent, selector: "ng-component", inputs: { url: "url" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
 		<style>
 			collapse-table tr:hover {
 				background-color: lightblue;
@@ -3546,7 +3602,7 @@ DialogSelectWithButtonsURLContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
 			</div>
 		</div>
 	`, isInline: true, styles: ["\n\t\t\tcollapse-table tr:hover {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.selected {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t}\n\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectWithButtonsURLContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectWithButtonsURLContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3646,11 +3702,11 @@ class CollapseTableComponent {
         return this._account.getUser() ? this._account.getUser().settings.table_color : '#3b3ee3';
     }
 }
-CollapseTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapseTableComponent, deps: [{ token: ResizeService }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
-CollapseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CollapseTableComponent, selector: "collapse-table", inputs: { collapseSize: "collapseSize", tableFixed: "tableFixed", headerFixed: "headerFixed", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor" }, ngImport: i0, template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: white;\n        --font-size: 14px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --transition-duration: 0.3s;\n    }\n\n    :host /deep/ .collapseTable,\n    :host /deep/ .collapseTable-sec,\n    :host /deep/ .collapseTable-tert {\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        overflow: hidden;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-shadow: 0 0 10px rgba(0,0,0,0.15);\n        animation: popIn var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable tr,\n    :host /deep/ .collapseTable-sec tr,\n    :host /deep/ .collapseTable-tert tr {\n        border: none;\n        padding: 0.35em;\n        transition: background-color var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable tr:hover,\n    :host /deep/ .collapseTable-sec tr:hover,\n    :host /deep/ .collapseTable-tert tr:hover {\n        background-color: rgba(0,0,0,0.05);\n    }\n\n    :host /deep/ .collapseTable th,\n    :host /deep/ .collapseTable td,\n    :host /deep/ .collapseTable-sec th,\n    :host /deep/ .collapseTable-sec td,\n    :host /deep/ .collapseTable-tert th,\n    :host /deep/ .collapseTable-tert td {\n        padding: 0.625em;\n        text-align: center;\n        vertical-align: middle;\n    }\n\n    :host /deep/ .collapseTable th,\n    :host /deep/ .collapseTable-sec th,\n    :host /deep/ .collapseTable-tert th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n        transition: background-color var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n    }\n\n    :host /deep/ .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n    }\n\n    :host /deep/ .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n    }\n\n    .fixed {\n        table-layout: fixed;\n    }\n\n    :host /deep/ .headerFixed thead,\n    :host /deep/ .headerFixed tbody tr {\n        display:table;\n        width:100%;\n        table-layout:fixed;\n    }\n\n    .hide {\n        display: none;\n    }\n\n    @keyframes popIn {\n        from {\n            opacity: 0;\n            transform: translateY(-20px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n</style>\n\n<div class=\"table-responsive-xl\">\n    <table [ngClass]=\"getCollapseClass()\" [style.border]=\"secondaryColor || tertiaryColor ? '3px solid black' : 'none'\" cellspacing=\"0\" cellpadding=\"0\">\n        <ng-content></ng-content>\n    </table>\n</div>", styles: ["\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: white;\n        --font-size: 14px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --transition-duration: 0.3s;\n    }\n\n    :host /deep/ .collapseTable,\n    :host /deep/ .collapseTable-sec,\n    :host /deep/ .collapseTable-tert {\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        overflow: hidden;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-shadow: 0 0 10px rgba(0,0,0,0.15);\n        animation: popIn var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable tr,\n    :host /deep/ .collapseTable-sec tr,\n    :host /deep/ .collapseTable-tert tr {\n        border: none;\n        padding: 0.35em;\n        transition: background-color var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable tr:hover,\n    :host /deep/ .collapseTable-sec tr:hover,\n    :host /deep/ .collapseTable-tert tr:hover {\n        background-color: rgba(0,0,0,0.05);\n    }\n\n    :host /deep/ .collapseTable th,\n    :host /deep/ .collapseTable td,\n    :host /deep/ .collapseTable-sec th,\n    :host /deep/ .collapseTable-sec td,\n    :host /deep/ .collapseTable-tert th,\n    :host /deep/ .collapseTable-tert td {\n        padding: 0.625em;\n        text-align: center;\n        vertical-align: middle;\n    }\n\n    :host /deep/ .collapseTable th,\n    :host /deep/ .collapseTable-sec th,\n    :host /deep/ .collapseTable-tert th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n        transition: background-color var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n    }\n\n    :host /deep/ .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n    }\n\n    :host /deep/ .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n    }\n\n    .fixed {\n        table-layout: fixed;\n    }\n\n    :host /deep/ .headerFixed thead,\n    :host /deep/ .headerFixed tbody tr {\n        display:table;\n        width:100%;\n        table-layout:fixed;\n    }\n\n    .hide {\n        display: none;\n    }\n\n    @keyframes popIn {\n        from {\n            opacity: 0;\n            transform: translateY(-20px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapseTableComponent, decorators: [{
+CollapseTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollapseTableComponent, deps: [{ token: ResizeService }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
+CollapseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CollapseTableComponent, selector: "collapse-table", inputs: { collapseSize: "collapseSize", tableFixed: "tableFixed", headerFixed: "headerFixed", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor" }, ngImport: i0, template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: white;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n    }\n\n\t:host /deep/ .collapseTable {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        /*table-layout: fixed;*/ \n    }\n    :host /deep/ .collapseTable tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n        padding: 0.625em;\n        text-align: center;\n        vertical-align: middle;\n    }\n    :host /deep/ .collapseTable th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }        \n    :host /deep/ .collapseTable-sec {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n    }\n    :host /deep/ .collapseTable-sec tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n        padding: 0.625em;\n        text-align: center;\n    }\n    :host /deep/ .collapseTable-sec th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }  \n    :host /deep/ .collapseTable-tert {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n    }\n    :host /deep/ .collapseTable-tert tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n        padding: 0.625em;\n        text-align: center;\n    }\n    :host /deep/ .collapseTable-tert th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }\n    \n    .fixed {\n        table-layout: fixed;\n    }\n\n    :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n        display:table;\n        width:100%;\n        table-layout:fixed;\n    }\n\n    :host /deep/ .collapseTable,\n    :host /deep/ .collapseTable-sec,\n    :host /deep/ .collapseTable-tert {\n        box-shadow: 0 0 15px rgba(0,0,0,0.25); \n    }\n    \n    :host /deep/ .collapseTable > thead:first-of-type > tr:first-child > th:first-child,\n    :host /deep/ .collapseTable-sec > thead:first-of-type > tr:first-child > th:first-child,\n    :host /deep/ .collapseTable-tert > thead:first-of-type > tr:first-child > th:first-child {\n        border-top-left-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > thead:first-of-type > tr:first-child > th:last-child,\n    :host /deep/ .collapseTable-sec > thead:first-of-type > tr:first-child > th:last-child,\n    :host /deep/ .collapseTable-tert > thead:first-of-type > tr:first-child > th:last-child {\n        border-top-right-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > tbody:last-of-type > tr:last-child > td:first-child,\n    :host /deep/ .collapseTable-sec > tbody:last-of-type > tr:last-child > td:first-child,\n    :host /deep/ .collapseTable-tert > tbody:last-of-type > tr:last-child > td:first-child {\n        border-bottom-left-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > tbody:last-of-type > tr:last-child > td:last-child,\n    :host /deep/ .collapseTable-sec > tbody:last-of-type > tr:last-child > td:last-child,\n    :host /deep/ .collapseTable-tert > tbody:last-of-type > tr:last-child > td:last-child {\n        border-bottom-right-radius: 10px;\n    }\n\n    .hide {\n        display: none;\n    }\n</style>\n\n<div class=\"table-responsive-xl\">\n    <table [ngClass]=\"getCollapseClass()\" style=\"border: none\" cellspacing=\"0\" cellpadding=\"0\">\n        <ng-content></ng-content>\n    </table>\n</div>", styles: ["\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: white;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n    }\n\n\t:host /deep/ .collapseTable {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        /*table-layout: fixed;*/ \n    }\n    :host /deep/ .collapseTable tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n        padding: 0.625em;\n        text-align: center;\n        vertical-align: middle;\n    }\n    :host /deep/ .collapseTable th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }        \n    :host /deep/ .collapseTable-sec {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n    }\n    :host /deep/ .collapseTable-sec tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n        padding: 0.625em;\n        text-align: center;\n    }\n    :host /deep/ .collapseTable-sec th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }  \n    :host /deep/ .collapseTable-tert {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n    }\n    :host /deep/ .collapseTable-tert tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n        padding: 0.625em;\n        text-align: center;\n    }\n    :host /deep/ .collapseTable-tert th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }\n    \n    .fixed {\n        table-layout: fixed;\n    }\n\n    :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n        display:table;\n        width:100%;\n        table-layout:fixed;\n    }\n\n    :host /deep/ .collapseTable,\n    :host /deep/ .collapseTable-sec,\n    :host /deep/ .collapseTable-tert {\n        box-shadow: 0 0 15px rgba(0,0,0,0.25); \n    }\n    \n    :host /deep/ .collapseTable > thead:first-of-type > tr:first-child > th:first-child,\n    :host /deep/ .collapseTable-sec > thead:first-of-type > tr:first-child > th:first-child,\n    :host /deep/ .collapseTable-tert > thead:first-of-type > tr:first-child > th:first-child {\n        border-top-left-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > thead:first-of-type > tr:first-child > th:last-child,\n    :host /deep/ .collapseTable-sec > thead:first-of-type > tr:first-child > th:last-child,\n    :host /deep/ .collapseTable-tert > thead:first-of-type > tr:first-child > th:last-child {\n        border-top-right-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > tbody:last-of-type > tr:last-child > td:first-child,\n    :host /deep/ .collapseTable-sec > tbody:last-of-type > tr:last-child > td:first-child,\n    :host /deep/ .collapseTable-tert > tbody:last-of-type > tr:last-child > td:first-child {\n        border-bottom-left-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > tbody:last-of-type > tr:last-child > td:last-child,\n    :host /deep/ .collapseTable-sec > tbody:last-of-type > tr:last-child > td:last-child,\n    :host /deep/ .collapseTable-tert > tbody:last-of-type > tr:last-child > td:last-child {\n        border-bottom-right-radius: 10px;\n    }\n\n    .hide {\n        display: none;\n    }\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollapseTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'collapse-table', template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: white;\n        --font-size: 14px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --transition-duration: 0.3s;\n    }\n\n    :host /deep/ .collapseTable,\n    :host /deep/ .collapseTable-sec,\n    :host /deep/ .collapseTable-tert {\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        overflow: hidden;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        box-shadow: 0 0 10px rgba(0,0,0,0.15);\n        animation: popIn var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable tr,\n    :host /deep/ .collapseTable-sec tr,\n    :host /deep/ .collapseTable-tert tr {\n        border: none;\n        padding: 0.35em;\n        transition: background-color var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable tr:hover,\n    :host /deep/ .collapseTable-sec tr:hover,\n    :host /deep/ .collapseTable-tert tr:hover {\n        background-color: rgba(0,0,0,0.05);\n    }\n\n    :host /deep/ .collapseTable th,\n    :host /deep/ .collapseTable td,\n    :host /deep/ .collapseTable-sec th,\n    :host /deep/ .collapseTable-sec td,\n    :host /deep/ .collapseTable-tert th,\n    :host /deep/ .collapseTable-tert td {\n        padding: 0.625em;\n        text-align: center;\n        vertical-align: middle;\n    }\n\n    :host /deep/ .collapseTable th,\n    :host /deep/ .collapseTable-sec th,\n    :host /deep/ .collapseTable-tert th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n        transition: background-color var(--transition-duration) ease-out;\n    }\n\n    :host /deep/ .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n    }\n\n    :host /deep/ .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n    }\n\n    :host /deep/ .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n    }\n\n    .fixed {\n        table-layout: fixed;\n    }\n\n    :host /deep/ .headerFixed thead,\n    :host /deep/ .headerFixed tbody tr {\n        display:table;\n        width:100%;\n        table-layout:fixed;\n    }\n\n    .hide {\n        display: none;\n    }\n\n    @keyframes popIn {\n        from {\n            opacity: 0;\n            transform: translateY(-20px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n</style>\n\n<div class=\"table-responsive-xl\">\n    <table [ngClass]=\"getCollapseClass()\" [style.border]=\"secondaryColor || tertiaryColor ? '3px solid black' : 'none'\" cellspacing=\"0\" cellpadding=\"0\">\n        <ng-content></ng-content>\n    </table>\n</div>" }]
+            args: [{ selector: 'collapse-table', template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: white;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n    }\n\n\t:host /deep/ .collapseTable {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        /*table-layout: fixed;*/ \n    }\n    :host /deep/ .collapseTable tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n        padding: 0.625em;\n        text-align: center;\n        vertical-align: middle;\n    }\n    :host /deep/ .collapseTable th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }        \n    :host /deep/ .collapseTable-sec {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n    }\n    :host /deep/ .collapseTable-sec tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n        padding: 0.625em;\n        text-align: center;\n    }\n    :host /deep/ .collapseTable-sec th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }  \n    :host /deep/ .collapseTable-tert {\n        border: 1px solid #ccc;\n        margin: 0;\n        padding: 0;\n        width: 100%;\n    }\n    :host /deep/ .collapseTable-tert tr {\n        border: 1px solid #ddd;\n        padding: 0.35em;\n    }\n    :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n        padding: 0.625em;\n        text-align: center;\n    }\n    :host /deep/ .collapseTable-tert th {\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n        position: sticky;\n        z-index: 10;\n        top: 0;\n    }\n    \n    .fixed {\n        table-layout: fixed;\n    }\n\n    :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n        display:table;\n        width:100%;\n        table-layout:fixed;\n    }\n\n    :host /deep/ .collapseTable,\n    :host /deep/ .collapseTable-sec,\n    :host /deep/ .collapseTable-tert {\n        box-shadow: 0 0 15px rgba(0,0,0,0.25); \n    }\n    \n    :host /deep/ .collapseTable > thead:first-of-type > tr:first-child > th:first-child,\n    :host /deep/ .collapseTable-sec > thead:first-of-type > tr:first-child > th:first-child,\n    :host /deep/ .collapseTable-tert > thead:first-of-type > tr:first-child > th:first-child {\n        border-top-left-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > thead:first-of-type > tr:first-child > th:last-child,\n    :host /deep/ .collapseTable-sec > thead:first-of-type > tr:first-child > th:last-child,\n    :host /deep/ .collapseTable-tert > thead:first-of-type > tr:first-child > th:last-child {\n        border-top-right-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > tbody:last-of-type > tr:last-child > td:first-child,\n    :host /deep/ .collapseTable-sec > tbody:last-of-type > tr:last-child > td:first-child,\n    :host /deep/ .collapseTable-tert > tbody:last-of-type > tr:last-child > td:first-child {\n        border-bottom-left-radius: 10px;\n    }\n\n    :host /deep/ .collapseTable > tbody:last-of-type > tr:last-child > td:last-child,\n    :host /deep/ .collapseTable-sec > tbody:last-of-type > tr:last-child > td:last-child,\n    :host /deep/ .collapseTable-tert > tbody:last-of-type > tr:last-child > td:last-child {\n        border-bottom-right-radius: 10px;\n    }\n\n    .hide {\n        display: none;\n    }\n</style>\n\n<div class=\"table-responsive-xl\">\n    <table [ngClass]=\"getCollapseClass()\" style=\"border: none\" cellspacing=\"0\" cellpadding=\"0\">\n        <ng-content></ng-content>\n    </table>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ResizeService }, { type: AccountManagerService }]; }, propDecorators: { collapseSize: [{
                 type: Input
             }], tableFixed: [{
@@ -3738,8 +3794,8 @@ class DialogSelectArrayObjsContent {
         }
     }
 }
-DialogSelectArrayObjsContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectArrayObjsContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-DialogSelectArrayObjsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogSelectArrayObjsContent, selector: "ng-component", inputs: { title: "title", objects: "objects", multiple: "multiple", allowNone: "allowNone" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
+DialogSelectArrayObjsContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectArrayObjsContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectArrayObjsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogSelectArrayObjsContent, selector: "ng-component", inputs: { title: "title", objects: "objects", multiple: "multiple", allowNone: "allowNone" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
 		<style>
 			collapse-table tr:hover {
 				background-color: lightblue;
@@ -3788,7 +3844,7 @@ DialogSelectArrayObjsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
 			</div>
 		</div>
 	`, isInline: true, styles: ["\n\t\t\tcollapse-table tr:hover {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.selected {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t}\n\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectArrayObjsContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectArrayObjsContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3977,8 +4033,8 @@ class DialogSelectArrayContent {
         this.selectIndexes = [];
     }
 }
-DialogSelectArrayContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectArrayContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogSelectArrayContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DialogSelectArrayContent, selector: "ng-component", inputs: { title: "title", array: "array", multiple: "multiple", selectedIndexes: "selectedIndexes" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
+DialogSelectArrayContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectArrayContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectArrayContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogSelectArrayContent, selector: "ng-component", inputs: { title: "title", array: "array", multiple: "multiple", selectedIndexes: "selectedIndexes" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
 		<style>
 			collapse-table tr:hover {
 				background-color: lightblue;
@@ -4055,7 +4111,7 @@ DialogSelectArrayContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
 			</div>
 		</div>
 	`, isInline: true, styles: ["\n\t\t\tcollapse-table tr:hover {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.selected {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t}\n\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "component", type: i4$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogSelectArrayContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogSelectArrayContent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -4229,9 +4285,9 @@ class DialogService {
         return modalRef.result;
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, deps: [{ token: i1$3.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable });
-DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, decorators: [{
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogService, deps: [{ token: i1$3.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.NgbModal }]; } });
 
@@ -4311,8 +4367,8 @@ class AuthService {
             }
             this._ds.input('Register New User', inputProps).then(close => {
                 let user = {
-                    username: close.username.value.trim(),
-                    email: close.email.value.trim(),
+                    username: close.username.value.trim().toLowerCase(),
+                    email: close.email.value.trim().toLowerCase(),
                     fullname: close.fullname.value.trim(),
                     roles: {
                         super_admin: false,
@@ -4394,7 +4450,7 @@ class AuthService {
                     user['phonenumber'] = '';
                 }
                 user.email = close.email.value.trim();
-                this._socket.call('editUser', user._id, close.username.value.trim(), close.fullname.value.trim(), close.email.value.trim(), user['phonenumber'], (err, res) => {
+                this._socket.call('editUser', user._id, close.username.value.trim().toLowerCase(), close.fullname.value.trim(), close.email.value.trim().toLowerCase(), user['phonenumber'], (err, res) => {
                     if (err) {
                         this._socket.call('insertErrorLog', 'AuthService - edituser', [
                             user,
@@ -4459,9 +4515,9 @@ class AuthService {
         });
     }
 }
-AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthService, deps: [{ token: DialogService }, { token: ValidationService }, { token: AlertService }, { token: AccountManagerService }, { token: SocketManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
-AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthService, decorators: [{
+AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthService, deps: [{ token: DialogService }, { token: ValidationService }, { token: AlertService }, { token: AccountManagerService }, { token: SocketManagerService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DialogService }, { type: ValidationService }, { type: AlertService }, { type: AccountManagerService }, { type: SocketManagerService }]; } });
 
@@ -4481,9 +4537,9 @@ class AuthPermissionService {
         return this.modules;
     }
 }
-AuthPermissionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthPermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AuthPermissionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthPermissionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthPermissionService, decorators: [{
+AuthPermissionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthPermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AuthPermissionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthPermissionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthPermissionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -4519,9 +4575,9 @@ class ScrollDirective {
         this.onScroll.emit(emitValue);
     }
 }
-ScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ScrollDirective, selector: "[detect-scroll]", inputs: { bottomOffset: "bottomOffset", topOffset: "topOffset" }, outputs: { onScroll: "onScroll" }, host: { listeners: { "scroll": "scrolled($event)", "window:scroll": "windowScrolled($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ScrollDirective, decorators: [{
+ScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ScrollDirective, selector: "[detect-scroll]", inputs: { bottomOffset: "bottomOffset", topOffset: "topOffset" }, outputs: { onScroll: "onScroll" }, host: { listeners: { "scroll": "scrolled($event)", "window:scroll": "windowScrolled($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[detect-scroll]'
@@ -4718,11 +4774,11 @@ class NavbarMainComponent extends BaseComponent {
         return window.innerWidth;
     }
 }
-NavbarMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarMainComponent, deps: [{ token: ProviderService }, { token: AuthService }, { token: DialogService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
-NavbarMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NavbarMainComponent, selector: "navbar-main", inputs: { logo: "logo", navTabs: "navTabs", fontSize: "fontSize", publicProgram: "publicProgram" }, providers: [ProviderService], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }, { propertyName: "dropdowns", predicate: ["dropdowns"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<style>\n\t:root {\n        --font-size: 12;\n    }\n\n\t:host /deep/ * {\n\t\tfont-size: var(--font-size);\n\t}\n\n    @media (max-width: 1200px) {\n        .navbarMain a {\n            font-size: 18px !important;\n        }\n    }\n    @media (min-width: 1200px) {\n        .scrollable-x {\n            max-width: 60vw;\n            overflow-x: auto;\n            overflow-y: visible;\n            align-items: center;\n        }\n\n        ::-webkit-scrollbar {\n           display: none;\n        }\n\n        .verticalAlign {\n            display: flex;\n            align-items: center;\n        }\n\n        .dropdown {\n            position: static;\n        }\n    }\n\n    .navbar li {\n        cursor: pointer;\n        text-align: center;\n    }\n\n    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n        color: gray;\n    }\n</style>\n\n<div class=\"row\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark navbarMain\" style=\"width: 100%\">\n        <a class=\"navbar-brand\" href=\"#\">\n            <img [src]=\"logo\" style=\"width: auto; height: 36px;\" *ngIf=\"!isDemo\">\n        </a>\n        <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" aria-controls=\"navbarMainNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarMainNav\">\n            <ul class=\"navbar-nav\">\n                <li class=\"nav-item\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" *ngIf=\"!standardProgram\" [style.border-end]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\">\n                    <a class=\"nav-link\" routerLink=\"home\" [class.disabled]=\"tourStarted ? true : null\" routerLinkActive=\"active\">Home</a>\n                </li>\n            </ul>\n            <div *ngIf=\"hasScrolled()\" (mouseover)=\"startScrollRight()\" (mouseout)=\"stopScrollRight()\" (click)=\"scrollRightOnce()\">\n                <i class=\"fa fa-arrow-left\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <ul [ngClass]=\"['navbar-nav', 'scrollable-x']\" #scrollable detect-scroll (onScroll)=\"calculateDropdownsLeft()\">\n                <ng-container *ngFor=\"let tab of navTabs; let i = index;\">\n                    <ng-container *ngIf=\"tab.type === 'link'\">\n                        <li class=\"nav-item\" *ngIf=\"(publicProgram || user) && isInRole(tab.links[0].role)\" data-bs-toggle=\"collapse\" [tourAnchor]=\"tab.tourAnchor\" data-bs-target=\"#navbarMainNav\">\n                            <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"tab.links[0].routerLink\" routerLinkActive=\"active\">{{tab.links[0].label}}</a>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.type === 'dropdown'\">\n                        <li #dropdowns class=\"nav-item dropdown\" *ngIf=\"(publicProgram || user) && isInOneRole(tab.roles)\">\n                            <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"tourStarted ? true : null\" id=\"navbarDropdownAsset\" role=\"button\" [tourAnchor]=\"tab.tourAnchor\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                {{tab.label}}\n                            </a>\n                            <div class=\"dropdown-menu bg-dark\" aria-labelledby=\"navbarDropdownAsset\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" [style.left.px]=\"tab.left || 0\">\n                                <ng-container *ngFor=\"let link of tab.links\">\n                                    <a class=\"dropdown-item nav-link\" *ngIf=\"(publicProgram || user) && isInRole(link.role)\" [routerLink]=\"link.routerLink\">{{link.label}}</a>\n                                </ng-container>\n                            </div>\n                        </li>\n                    </ng-container>\n                </ng-container>\n            </ul>\n            <div *ngIf=\"hasMoreScroll()\" (mouseover)=\"startScrollLeft()\" (mouseout)=\"stopScrollLeft()\" (click)=\"scrollLeftOnce()\">\n                <i class=\"fa fa-arrow-right\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\">\n                <!-- <li class=\"nav-item\" *ngIf=\"user\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" [style.border-start]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\" style=\"height: 30px;\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" (click)=\"print()\" style=\"cursor: pointer;\"><i style=\"font-size:20px; color: white;\" class=\"fa fa-print\" aria-hidden=\"true\"></i></a>\n                </li> -->\n                <li class=\"nav-item\" *ngIf=\"user && client\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" style=\"height: 30px;\" tourAnchor=\"supportSection\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"support-ticket\" routerLinkActive=\"active\">Support</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"logs\" routerLinkActive=\"active\">Logs</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"super-admin\" routerLinkActive=\"active\">Super Admin</a>\n                </li>\n            </ul>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\" *ngIf=\"!publicProgram\">\n                <li class=\"nav-item\" *ngIf=\"!user\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" (click)=\"login()\" style=\"cursor: pointer;\" routerLinkActive=\"active\">Login</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" tourAnchor=\"userSettings\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"user-settings\">Hello {{user.fullname}}!</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" style=\"cursor: pointer\" (click)=\"logout()\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\">Logout</a>\n                <li>\n            </ul>\n        </div>\n    </nav>\n</div>", styles: ["\n\t:root {\n        --font-size: 12;\n    }\n\n\t:host /deep/ * {\n\t\tfont-size: var(--font-size);\n\t}\n\n    @media (max-width: 1200px) {\n        .navbarMain a {\n            font-size: 18px !important;\n        }\n    }\n    @media (min-width: 1200px) {\n        .scrollable-x {\n            max-width: 60vw;\n            overflow-x: auto;\n            overflow-y: visible;\n            align-items: center;\n        }\n\n        ::-webkit-scrollbar {\n           display: none;\n        }\n\n        .verticalAlign {\n            display: flex;\n            align-items: center;\n        }\n\n        .dropdown {\n            position: static;\n        }\n    }\n\n    .navbar li {\n        cursor: pointer;\n        text-align: center;\n    }\n\n    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n        color: gray;\n    }\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$3.NgbNavbar, selector: ".navbar" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ScrollDirective, selector: "[detect-scroll]", inputs: ["bottomOffset", "topOffset"], outputs: ["onScroll"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarMainComponent, decorators: [{
+NavbarMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavbarMainComponent, deps: [{ token: ProviderService }, { token: AuthService }, { token: DialogService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+NavbarMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NavbarMainComponent, selector: "navbar-main", inputs: { logo: "logo", navTabs: "navTabs", fontSize: "fontSize", publicProgram: "publicProgram" }, providers: [ProviderService], viewQueries: [{ propertyName: "scrollable", first: true, predicate: ["scrollable"], descendants: true, static: true }, { propertyName: "dropdowns", predicate: ["dropdowns"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<style>\n\t:root {\n        --font-size: 12;\n    }\n\n\t:host /deep/ * {\n\t\tfont-size: var(--font-size);\n\t}\n\n    @media (max-width: 1200px) {\n        .navbarMain a {\n            font-size: 18px !important;\n        }\n    }\n    @media (min-width: 1200px) {\n        .scrollable-x {\n            max-width: 60vw;\n            overflow-x: auto;\n            overflow-y: visible;\n            align-items: center;\n        }\n\n        ::-webkit-scrollbar {\n           display: none;\n        }\n\n        .verticalAlign {\n            display: flex;\n            align-items: center;\n        }\n\n        .dropdown {\n            position: static;\n        }\n    }\n\n    .navbar li {\n        cursor: pointer;\n        text-align: center;\n    }\n\n    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n        color: gray;\n    }\n</style>\n\n<div class=\"row\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark navbarMain\" style=\"width: 100%\">\n        <a class=\"navbar-brand\" href=\"#\">\n            <img [src]=\"logo\" style=\"width: auto; height: 36px;\" *ngIf=\"!isDemo\">\n        </a>\n        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" aria-controls=\"navbarMainNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarMainNav\">\n            <ul class=\"navbar-nav\">\n                <li class=\"nav-item\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" *ngIf=\"!standardProgram\" [style.border-right]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\">\n                    <a class=\"nav-link\" routerLink=\"home\" [class.disabled]=\"tourStarted ? true : null\" routerLinkActive=\"active\">Home</a>\n                </li>\n            </ul>\n            <div *ngIf=\"hasScrolled()\" (mouseover)=\"startScrollRight()\" (mouseout)=\"stopScrollRight()\" (click)=\"scrollRightOnce()\">\n                <i class=\"fa fa-arrow-left\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <ul [ngClass]=\"['navbar-nav', 'scrollable-x']\" #scrollable detect-scroll (onScroll)=\"calculateDropdownsLeft()\">\n                <ng-container *ngFor=\"let tab of navTabs; let i = index;\">\n                    <ng-container *ngIf=\"tab.type === 'link'\">\n                        <li class=\"nav-item\" *ngIf=\"(publicProgram || user) && isInRole(tab.links[0].role)\" data-toggle=\"collapse\" [tourAnchor]=\"tab.tourAnchor\" data-target=\"#navbarMainNav\">\n                            <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"tab.links[0].routerLink\" routerLinkActive=\"active\">{{tab.links[0].label}}</a>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.type === 'dropdown'\">\n                        <li #dropdowns class=\"nav-item dropdown\" *ngIf=\"(publicProgram || user) && isInOneRole(tab.roles)\">\n                            <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"tourStarted ? true : null\" id=\"navbarDropdownAsset\" role=\"button\" [tourAnchor]=\"tab.tourAnchor\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                {{tab.label}}\n                            </a>\n                            <div class=\"dropdown-menu bg-dark\" aria-labelledby=\"navbarDropdownAsset\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" [style.left.px]=\"tab.left || 0\">\n                                <ng-container *ngFor=\"let link of tab.links\">\n                                    <a class=\"dropdown-item nav-link\" *ngIf=\"(publicProgram || user) && isInRole(link.role)\" [routerLink]=\"link.routerLink\">{{link.label}}</a>\n                                </ng-container>\n                            </div>\n                        </li>\n                    </ng-container>\n                </ng-container>\n            </ul>\n            <div *ngIf=\"hasMoreScroll()\" (mouseover)=\"startScrollLeft()\" (mouseout)=\"stopScrollLeft()\" (click)=\"scrollLeftOnce()\">\n                <i class=\"fa fa-arrow-right\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\">\n                <!-- <li class=\"nav-item\" *ngIf=\"user\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" [style.border-left]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\" style=\"height: 30px;\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" (click)=\"print()\" style=\"cursor: pointer;\"><i style=\"font-size:20px; color: white;\" class=\"fa fa-print\" aria-hidden=\"true\"></i></a>\n                </li> -->\n                <li class=\"nav-item\" *ngIf=\"user && client\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" style=\"height: 30px;\" tourAnchor=\"supportSection\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"support-ticket\" routerLinkActive=\"active\">Support</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"logs\" routerLinkActive=\"active\">Logs</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"super-admin\" routerLinkActive=\"active\">Super Admin</a>\n                </li>\n            </ul>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\" *ngIf=\"!publicProgram\">\n                <li class=\"nav-item\" *ngIf=\"!user\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" (click)=\"login()\" style=\"cursor: pointer;\" routerLinkActive=\"active\">Login</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" tourAnchor=\"userSettings\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"user-settings\">Hello {{user.fullname}}!</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" style=\"cursor: pointer\" (click)=\"logout()\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\">Logout</a>\n                <li>\n            </ul>\n        </div>\n    </nav>\n</div>", styles: ["\n\t:root {\n        --font-size: 12;\n    }\n\n\t:host /deep/ * {\n\t\tfont-size: var(--font-size);\n\t}\n\n    @media (max-width: 1200px) {\n        .navbarMain a {\n            font-size: 18px !important;\n        }\n    }\n    @media (min-width: 1200px) {\n        .scrollable-x {\n            max-width: 60vw;\n            overflow-x: auto;\n            overflow-y: visible;\n            align-items: center;\n        }\n\n        ::-webkit-scrollbar {\n           display: none;\n        }\n\n        .verticalAlign {\n            display: flex;\n            align-items: center;\n        }\n\n        .dropdown {\n            position: static;\n        }\n    }\n\n    .navbar li {\n        cursor: pointer;\n        text-align: center;\n    }\n\n    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n        color: gray;\n    }\n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$3.NgbNavbar, selector: ".navbar" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ScrollDirective, selector: "[detect-scroll]", inputs: ["bottomOffset", "topOffset"], outputs: ["onScroll"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavbarMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'navbar-main', providers: [ProviderService], template: "<style>\n\t:root {\n        --font-size: 12;\n    }\n\n\t:host /deep/ * {\n\t\tfont-size: var(--font-size);\n\t}\n\n    @media (max-width: 1200px) {\n        .navbarMain a {\n            font-size: 18px !important;\n        }\n    }\n    @media (min-width: 1200px) {\n        .scrollable-x {\n            max-width: 60vw;\n            overflow-x: auto;\n            overflow-y: visible;\n            align-items: center;\n        }\n\n        ::-webkit-scrollbar {\n           display: none;\n        }\n\n        .verticalAlign {\n            display: flex;\n            align-items: center;\n        }\n\n        .dropdown {\n            position: static;\n        }\n    }\n\n    .navbar li {\n        cursor: pointer;\n        text-align: center;\n    }\n\n    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n        color: gray;\n    }\n</style>\n\n<div class=\"row\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark navbarMain\" style=\"width: 100%\">\n        <a class=\"navbar-brand\" href=\"#\">\n            <img [src]=\"logo\" style=\"width: auto; height: 36px;\" *ngIf=\"!isDemo\">\n        </a>\n        <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" aria-controls=\"navbarMainNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarMainNav\">\n            <ul class=\"navbar-nav\">\n                <li class=\"nav-item\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" *ngIf=\"!standardProgram\" [style.border-end]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\">\n                    <a class=\"nav-link\" routerLink=\"home\" [class.disabled]=\"tourStarted ? true : null\" routerLinkActive=\"active\">Home</a>\n                </li>\n            </ul>\n            <div *ngIf=\"hasScrolled()\" (mouseover)=\"startScrollRight()\" (mouseout)=\"stopScrollRight()\" (click)=\"scrollRightOnce()\">\n                <i class=\"fa fa-arrow-left\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <ul [ngClass]=\"['navbar-nav', 'scrollable-x']\" #scrollable detect-scroll (onScroll)=\"calculateDropdownsLeft()\">\n                <ng-container *ngFor=\"let tab of navTabs; let i = index;\">\n                    <ng-container *ngIf=\"tab.type === 'link'\">\n                        <li class=\"nav-item\" *ngIf=\"(publicProgram || user) && isInRole(tab.links[0].role)\" data-bs-toggle=\"collapse\" [tourAnchor]=\"tab.tourAnchor\" data-bs-target=\"#navbarMainNav\">\n                            <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"tab.links[0].routerLink\" routerLinkActive=\"active\">{{tab.links[0].label}}</a>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.type === 'dropdown'\">\n                        <li #dropdowns class=\"nav-item dropdown\" *ngIf=\"(publicProgram || user) && isInOneRole(tab.roles)\">\n                            <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"tourStarted ? true : null\" id=\"navbarDropdownAsset\" role=\"button\" [tourAnchor]=\"tab.tourAnchor\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                {{tab.label}}\n                            </a>\n                            <div class=\"dropdown-menu bg-dark\" aria-labelledby=\"navbarDropdownAsset\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" [style.left.px]=\"tab.left || 0\">\n                                <ng-container *ngFor=\"let link of tab.links\">\n                                    <a class=\"dropdown-item nav-link\" *ngIf=\"(publicProgram || user) && isInRole(link.role)\" [routerLink]=\"link.routerLink\">{{link.label}}</a>\n                                </ng-container>\n                            </div>\n                        </li>\n                    </ng-container>\n                </ng-container>\n            </ul>\n            <div *ngIf=\"hasMoreScroll()\" (mouseover)=\"startScrollLeft()\" (mouseout)=\"stopScrollLeft()\" (click)=\"scrollLeftOnce()\">\n                <i class=\"fa fa-arrow-right\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\">\n                <!-- <li class=\"nav-item\" *ngIf=\"user\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" [style.border-start]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\" style=\"height: 30px;\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" (click)=\"print()\" style=\"cursor: pointer;\"><i style=\"font-size:20px; color: white;\" class=\"fa fa-print\" aria-hidden=\"true\"></i></a>\n                </li> -->\n                <li class=\"nav-item\" *ngIf=\"user && client\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\" style=\"height: 30px;\" tourAnchor=\"supportSection\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"support-ticket\" routerLinkActive=\"active\">Support</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"logs\" routerLinkActive=\"active\">Logs</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"super-admin\" routerLinkActive=\"active\">Super Admin</a>\n                </li>\n            </ul>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\" *ngIf=\"!publicProgram\">\n                <li class=\"nav-item\" *ngIf=\"!user\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" (click)=\"login()\" style=\"cursor: pointer;\" routerLinkActive=\"active\">Login</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" tourAnchor=\"userSettings\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"user-settings\">Hello {{user.fullname}}!</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" style=\"cursor: pointer\" (click)=\"logout()\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\">Logout</a>\n                <li>\n            </ul>\n        </div>\n    </nav>\n</div>" }]
+            args: [{ selector: 'navbar-main', providers: [ProviderService], template: "<style>\n\t:root {\n        --font-size: 12;\n    }\n\n\t:host /deep/ * {\n\t\tfont-size: var(--font-size);\n\t}\n\n    @media (max-width: 1200px) {\n        .navbarMain a {\n            font-size: 18px !important;\n        }\n    }\n    @media (min-width: 1200px) {\n        .scrollable-x {\n            max-width: 60vw;\n            overflow-x: auto;\n            overflow-y: visible;\n            align-items: center;\n        }\n\n        ::-webkit-scrollbar {\n           display: none;\n        }\n\n        .verticalAlign {\n            display: flex;\n            align-items: center;\n        }\n\n        .dropdown {\n            position: static;\n        }\n    }\n\n    .navbar li {\n        cursor: pointer;\n        text-align: center;\n    }\n\n    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n        color: gray;\n    }\n</style>\n\n<div class=\"row\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark navbarMain\" style=\"width: 100%\">\n        <a class=\"navbar-brand\" href=\"#\">\n            <img [src]=\"logo\" style=\"width: auto; height: 36px;\" *ngIf=\"!isDemo\">\n        </a>\n        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" aria-controls=\"navbarMainNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarMainNav\">\n            <ul class=\"navbar-nav\">\n                <li class=\"nav-item\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" *ngIf=\"!standardProgram\" [style.border-right]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\">\n                    <a class=\"nav-link\" routerLink=\"home\" [class.disabled]=\"tourStarted ? true : null\" routerLinkActive=\"active\">Home</a>\n                </li>\n            </ul>\n            <div *ngIf=\"hasScrolled()\" (mouseover)=\"startScrollRight()\" (mouseout)=\"stopScrollRight()\" (click)=\"scrollRightOnce()\">\n                <i class=\"fa fa-arrow-left\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <ul [ngClass]=\"['navbar-nav', 'scrollable-x']\" #scrollable detect-scroll (onScroll)=\"calculateDropdownsLeft()\">\n                <ng-container *ngFor=\"let tab of navTabs; let i = index;\">\n                    <ng-container *ngIf=\"tab.type === 'link'\">\n                        <li class=\"nav-item\" *ngIf=\"(publicProgram || user) && isInRole(tab.links[0].role)\" data-toggle=\"collapse\" [tourAnchor]=\"tab.tourAnchor\" data-target=\"#navbarMainNav\">\n                            <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"tab.links[0].routerLink\" routerLinkActive=\"active\">{{tab.links[0].label}}</a>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"tab.type === 'dropdown'\">\n                        <li #dropdowns class=\"nav-item dropdown\" *ngIf=\"(publicProgram || user) && isInOneRole(tab.roles)\">\n                            <a class=\"nav-link dropdown-toggle\" [class.disabled]=\"tourStarted ? true : null\" id=\"navbarDropdownAsset\" role=\"button\" [tourAnchor]=\"tab.tourAnchor\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                {{tab.label}}\n                            </a>\n                            <div class=\"dropdown-menu bg-dark\" aria-labelledby=\"navbarDropdownAsset\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" [style.left.px]=\"tab.left || 0\">\n                                <ng-container *ngFor=\"let link of tab.links\">\n                                    <a class=\"dropdown-item nav-link\" *ngIf=\"(publicProgram || user) && isInRole(link.role)\" [routerLink]=\"link.routerLink\">{{link.label}}</a>\n                                </ng-container>\n                            </div>\n                        </li>\n                    </ng-container>\n                </ng-container>\n            </ul>\n            <div *ngIf=\"hasMoreScroll()\" (mouseover)=\"startScrollLeft()\" (mouseout)=\"stopScrollLeft()\" (click)=\"scrollLeftOnce()\">\n                <i class=\"fa fa-arrow-right\" style=\"color: white; font-size: 20px\"></i>\n            </div>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\">\n                <!-- <li class=\"nav-item\" *ngIf=\"user\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" [style.border-left]=\"getWindowWidth() > 1200 ? '1px solid white' : ''\" style=\"height: 30px;\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" (click)=\"print()\" style=\"cursor: pointer;\"><i style=\"font-size:20px; color: white;\" class=\"fa fa-print\" aria-hidden=\"true\"></i></a>\n                </li> -->\n                <li class=\"nav-item\" *ngIf=\"user && client\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\" style=\"height: 30px;\" tourAnchor=\"supportSection\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"support-ticket\" routerLinkActive=\"active\">Support</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"logs\" routerLinkActive=\"active\">Logs</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user && isInRole('super-admin')\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" routerLink=\"super-admin\" routerLinkActive=\"active\">Super Admin</a>\n                </li>\n            </ul>\n            <hr />\n            <ul [ngClass]=\"['navbar-nav', getWindowWidth() > 1200 ? 'float-lg-right' : '']\" *ngIf=\"!publicProgram\">\n                <li class=\"nav-item\" *ngIf=\"!user\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" (click)=\"login()\" style=\"cursor: pointer;\" routerLinkActive=\"active\">Login</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" tourAnchor=\"userSettings\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" routerLink=\"user-settings\">Hello {{user.fullname}}!</a>\n                </li>\n                <li class=\"nav-item\" *ngIf=\"user\" style=\"cursor: pointer\" (click)=\"logout()\" data-toggle=\"collapse\" data-target=\"#navbarMainNav\">\n                    <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\">Logout</a>\n                <li>\n            </ul>\n        </div>\n    </nav>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ProviderService }, { type: AuthService }, { type: DialogService }, { type: CoreService }]; }, propDecorators: { dropdowns: [{
                 type: ViewChildren,
                 args: ['dropdowns']
@@ -4751,9 +4807,9 @@ class FilterEqualPipe {
         return items.filter(it => it[field] === value);
     }
 }
-FilterEqualPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterEqualPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FilterEqualPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterEqualPipe, name: "filterEqual", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterEqualPipe, decorators: [{
+FilterEqualPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterEqualPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterEqualPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FilterEqualPipe, name: "filterEqual", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterEqualPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterEqual',
@@ -4768,9 +4824,9 @@ class FilterNotEqualPipe {
         return items.filter(it => it[field] !== value);
     }
 }
-FilterNotEqualPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterNotEqualPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FilterNotEqualPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterNotEqualPipe, name: "filterNotEqual" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterNotEqualPipe, decorators: [{
+FilterNotEqualPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterNotEqualPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterNotEqualPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FilterNotEqualPipe, name: "filterNotEqual" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterNotEqualPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filterNotEqual'
@@ -4799,35 +4855,14 @@ class NavbarModuleComponent extends BaseComponent {
         this.routerEvents$.push(this._services._router.events
             //.filter(event => event instanceof NavigationEnd)
             .subscribe((event) => {
-            this.selectTabFromRouter();
-        }));
-        this.routerEvents$.push(this._services._router.events
-            //.filter(event => event instanceof NavigationCancel)
-            .subscribe((event) => {
-            this.selectTabFromRouter();
+            if (this._services._router.url.replace(/\/[a-f0-9]{24}$/, '').replace(/\?.+$/, '') !== this.currentRoute || !this.selectedTab) {
+                this.selectTabFromRouter();
+            }
         }));
         this.routerEvents$.push(this._services._app.navbarModuleData.subscribe(data => {
             this.menuData = data;
-            if (!this.selectedTab && this.menuData.tabs.length) {
-                this.selectedTab = this.menuData.tabs[0];
-            }
-            if (this.selectedTab) {
-                for (let i = 0; i < this.menuData.tabs.length; i++) {
-                    let tabLink = '';
-                    if (this.menuData.tabs[i].link.startsWith('/customer-portal/frac') || this.menuData.tabs[i].link.startsWith('/customer-portal/production')) {
-                        tabLink = this.menuData.tabs[i].link;
-                    }
-                    else {
-                        tabLink = this.menuData.tabs[i].link.replace(/^(\/[-a-z]+\/[^\/]+)\/.*$/, '$1');
-                    }
-                    if (tabLink === this.currentRoute) {
-                        this.selectedTab = this.menuData.tabs[i];
-                        break;
-                    }
-                }
-                if (this.selectedTab === null) {
-                    this.selectedTab = this.menuData.tabs[0];
-                }
+            if (this._services._router.url.replace(/\/[a-f0-9]{24}$/, '').replace(/\?.+$/, '') !== this.currentRoute || !this.selectedTab) {
+                this.selectTabFromRouter();
             }
         }));
         this.routerEvents$.push(this._services._app.tourStarted.subscribe(tourStarted => {
@@ -4840,38 +4875,27 @@ class NavbarModuleComponent extends BaseComponent {
         });
     }
     selectTabFromRouter() {
-        if (this._services._router.url === '/') {
-            this.selectedTab = this.menuData.tabs[0];
-        }
-        else {
-            this.selectedTab = null;
-            let routerLink = '';
-            if (this._services._router.url.startsWith('/customer-portal/frac') || this._services._router.url.startsWith('/customer-portal/production')) {
-                routerLink = this._services._router.url;
+        if (this.menuData) {
+            if (this._services._router.url === '/') {
+                this.selectedTab = this.menuData.tabs[0];
             }
             else {
-                routerLink = this._services._router.url.replace(/^(\/[-a-z]+\/[^\/]+)\/.*$/, '$1');
-            }
-            if (routerLink.includes('?')) {
-                routerLink = routerLink.substring(0, routerLink.indexOf('?'));
-            }
-            this.currentRoute = routerLink;
-            for (let i = 0; i < this.menuData.tabs.length; i++) {
-                let tabLink = '';
-                if (this.menuData.tabs[i].link.startsWith('/customer-portal/frac') || this.menuData.tabs[i].link.startsWith('/customer-portal/production')) {
-                    tabLink = this.menuData.tabs[i].link;
-                }
-                else {
-                    tabLink = this.menuData.tabs[i].link.replace(/^(\/[-a-z]+\/[^\/]+)\/.*$/, '$1');
+                this.currentRoute = this._services._router.url.replace(/\/[a-f0-9]{24}$/, '').replace(/\?.+$/, '');
+                this.selectedTab = null;
+                while (!this.selectedTab && this.currentRoute.split('/').length > 2) {
+                    for (let i = 0; i < this.menuData.tabs.length; i++) {
+                        let tab = this.menuData.tabs[i];
+                        if (tab.link === this.currentRoute) {
+                            this.selectedTab = tab;
+                            break;
+                        }
+                    }
+                    this.currentRoute = this.currentRoute.replace(/(\/[^\/]+$)/, '');
                 }
-                if (tabLink === routerLink) {
-                    this.selectedTab = this.menuData.tabs[i];
-                    break;
+                if (!this.selectedTab) {
+                    this.selectedTab = this.menuData.tabs[0];
                 }
             }
-            if (this.selectedTab === null) {
-                this.selectedTab = this.menuData.tabs.filter(a => a.link === routerLink)[0] ? this.menuData.tabs.filter(a => a.link === routerLink)[0] : this.menuData.tabs[0];
-            }
         }
     }
     tabClass(tab) {
@@ -4879,10 +4903,8 @@ class NavbarModuleComponent extends BaseComponent {
             if (this.selectedTab.label === tab.label) {
                 return 'active';
             }
-            else {
-                return '';
-            }
         }
+        return '';
     }
     navigateTo(tab) {
         if (this.selectedTab !== tab) {
@@ -4896,11 +4918,11 @@ class NavbarModuleComponent extends BaseComponent {
         }
     }
 }
-NavbarModuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarModuleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-NavbarModuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NavbarModuleComponent, selector: "navbar-module", inputs: { sideNavHeight: "sideNavHeight", sideNavWidth: "sideNavWidth" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    .navbarModule li {\n        cursor: pointer;\n    }\n    .navbarModule li.active {\n        border-start: 3px solid #d19b3d;\n    }\n    .navbarModule nav {\n        width: 100%;\n    }\n\n    @media (min-width: 1200px) {\n        .navbarModule {\n            height: 95vh;\n            margin-left: -10px;\n        }\n\n        hr {\n            border-top: white 1px solid;\n        }\n    }\n\n    @media (max-width: 1200px) {\n        hr {\n            display: none;\n        }\n\n        .navbarModule a {\n            font-size: 18px !important;\n        }\n    }\n\n    \n</style> \n\n<div style=\"margin-left: -15px; margin-right: -15px;\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark flex-xl-column navbarModule\" [style.height]=\"sideNavHeight ? sideNavHeight + 'px' : ''\" [style.width]=\"sideNavWidth ? sideNavWidth : ''\">\n        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n            {{ menuData.title }}\n        </div>\n        <button class=\"navbar-toggler\" type=\"button\" aria-controls=\"#navbarModuleNav\" data-bs-target=\"#navbarModuleNav\" data-bs-toggle=\"collapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarModuleNav\" style=\"align-items:baseline; width: 100%; overflow-y: auto; overflow-x: hidden;\">\n            <ul class=\"navbar-nav\" style=\"display: block; float: left; width: 100%;\">\n                <div *ngFor=\"let tab of (menuData.tabs | filterNotEqual : 'params' : '0'); let i = index\">\n                    <div *ngIf=\"tab.params !== null && menuData.tabs[i - 1] && menuData.tabs[i - 1].params === null\">\n                        <hr>\n                        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n                            Selected {{ menuData.module }}\n                        </div>\n                        <hr>\n                        <div style=\"color:white; margin-left: 5px; text-decoration: underline; font-size: 14px\">{{menuData.description_name}}:</div>\n                        <div style=\"color:white; margin-left: 8px;  font-size: 12px\">{{menuData.description}}</div>\n                        <br />\n                    </div>\n                    <li [ngClass]=\"['nav-item', tabClass(tab)]\"data-bs-toggle=\"collapse\" data-bs-target=\"#navbarModuleNav\" [tourAnchor]=\"tab.tourAnchor\">\n                        <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"[tab.params ? tab.link + '/' + tab.params : tab.link]\" routerLinkActive=\"active\">{{ tab.label }}</a>\n                    </li>\n                </div>\n            </ul>\n        </div>\n    </nav>\n</div>\n", styles: ["\n    .navbarModule li {\n        cursor: pointer;\n    }\n    .navbarModule li.active {\n        border-start: 3px solid #d19b3d;\n    }\n    .navbarModule nav {\n        width: 100%;\n    }\n\n    @media (min-width: 1200px) {\n        .navbarModule {\n            height: 95vh;\n            margin-left: -10px;\n        }\n\n        hr {\n            border-top: white 1px solid;\n        }\n    }\n\n    @media (max-width: 1200px) {\n        hr {\n            display: none;\n        }\n\n        .navbarModule a {\n            font-size: 18px !important;\n        }\n    }\n\n    \n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$3.NgbNavbar, selector: ".navbar" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FilterNotEqualPipe, name: "filterNotEqual" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NavbarModuleComponent, decorators: [{
+NavbarModuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavbarModuleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+NavbarModuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NavbarModuleComponent, selector: "navbar-module", inputs: { sideNavHeight: "sideNavHeight", sideNavWidth: "sideNavWidth" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    .navbarModule li {\n        cursor: pointer;\n    }\n    .navbarModule li.active {\n        border-left: 3px solid #d19b3d;\n    }\n    .navbarModule nav {\n        width: 100%;\n    }\n\n    @media (min-width: 1200px) {\n        .navbarModule {\n            height: 95vh;\n            margin-left: -10px;\n        }\n\n        hr {\n            border-top: white 1px solid;\n        }\n    }\n\n    @media (max-width: 1200px) {\n        hr {\n            display: none;\n        }\n\n        .navbarModule a {\n            font-size: 18px !important;\n        }\n    }\n\n    \n</style> \n\n<div style=\"margin-left: -15px; margin-right: -15px;\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark flex-xl-column navbarModule\" [style.height]=\"sideNavHeight ? sideNavHeight + 'px' : ''\" [style.width]=\"sideNavWidth ? sideNavWidth : ''\">\n        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n            {{ menuData.title }}\n        </div>\n        <button class=\"navbar-toggler\" type=\"button\" aria-controls=\"#navbarModuleNav\" data-target=\"#navbarModuleNav\" data-toggle=\"collapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarModuleNav\" style=\"align-items:baseline; width: 100%; overflow-y: auto; overflow-x: hidden;\">\n            <ul class=\"navbar-nav\" style=\"display: block; float: left; width: 100%;\">\n                <div *ngFor=\"let tab of (menuData.tabs | filterNotEqual : 'params' : '0'); let i = index\">\n                    <div *ngIf=\"tab.params !== null && menuData.tabs[i - 1] && menuData.tabs[i - 1].params === null\">\n                        <hr>\n                        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n                            Selected {{ menuData.module }}\n                        </div>\n                        <hr>\n                        <div style=\"color:white; margin-left: 5px; text-decoration: underline; font-size: 14px\">{{menuData.description_name}}:</div>\n                        <div style=\"color:white; margin-left: 8px;  font-size: 12px\">{{menuData.description}}</div>\n                        <br />\n                    </div>\n                    <li [ngClass]=\"['nav-item', tabClass(tab)]\"data-toggle=\"collapse\" data-target=\"#navbarModuleNav\" [tourAnchor]=\"tab.tourAnchor\">\n                        <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"[tab.params ? tab.link + '/' + tab.params : tab.link]\" routerLinkActive=\"active\">{{ tab.label }}</a>\n                    </li>\n                </div>\n            </ul>\n        </div>\n    </nav>\n</div>\n", styles: ["\n    .navbarModule li {\n        cursor: pointer;\n    }\n    .navbarModule li.active {\n        border-left: 3px solid #d19b3d;\n    }\n    .navbarModule nav {\n        width: 100%;\n    }\n\n    @media (min-width: 1200px) {\n        .navbarModule {\n            height: 95vh;\n            margin-left: -10px;\n        }\n\n        hr {\n            border-top: white 1px solid;\n        }\n    }\n\n    @media (max-width: 1200px) {\n        hr {\n            display: none;\n        }\n\n        .navbarModule a {\n            font-size: 18px !important;\n        }\n    }\n\n    \n"], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1$3.NgbNavbar, selector: ".navbar" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FilterNotEqualPipe, name: "filterNotEqual" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavbarModuleComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], selector: 'navbar-module', template: "<style>\n    .navbarModule li {\n        cursor: pointer;\n    }\n    .navbarModule li.active {\n        border-start: 3px solid #d19b3d;\n    }\n    .navbarModule nav {\n        width: 100%;\n    }\n\n    @media (min-width: 1200px) {\n        .navbarModule {\n            height: 95vh;\n            margin-left: -10px;\n        }\n\n        hr {\n            border-top: white 1px solid;\n        }\n    }\n\n    @media (max-width: 1200px) {\n        hr {\n            display: none;\n        }\n\n        .navbarModule a {\n            font-size: 18px !important;\n        }\n    }\n\n    \n</style> \n\n<div style=\"margin-left: -15px; margin-right: -15px;\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark flex-xl-column navbarModule\" [style.height]=\"sideNavHeight ? sideNavHeight + 'px' : ''\" [style.width]=\"sideNavWidth ? sideNavWidth : ''\">\n        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n            {{ menuData.title }}\n        </div>\n        <button class=\"navbar-toggler\" type=\"button\" aria-controls=\"#navbarModuleNav\" data-bs-target=\"#navbarModuleNav\" data-bs-toggle=\"collapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarModuleNav\" style=\"align-items:baseline; width: 100%; overflow-y: auto; overflow-x: hidden;\">\n            <ul class=\"navbar-nav\" style=\"display: block; float: left; width: 100%;\">\n                <div *ngFor=\"let tab of (menuData.tabs | filterNotEqual : 'params' : '0'); let i = index\">\n                    <div *ngIf=\"tab.params !== null && menuData.tabs[i - 1] && menuData.tabs[i - 1].params === null\">\n                        <hr>\n                        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n                            Selected {{ menuData.module }}\n                        </div>\n                        <hr>\n                        <div style=\"color:white; margin-left: 5px; text-decoration: underline; font-size: 14px\">{{menuData.description_name}}:</div>\n                        <div style=\"color:white; margin-left: 8px;  font-size: 12px\">{{menuData.description}}</div>\n                        <br />\n                    </div>\n                    <li [ngClass]=\"['nav-item', tabClass(tab)]\"data-bs-toggle=\"collapse\" data-bs-target=\"#navbarModuleNav\" [tourAnchor]=\"tab.tourAnchor\">\n                        <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"[tab.params ? tab.link + '/' + tab.params : tab.link]\" routerLinkActive=\"active\">{{ tab.label }}</a>\n                    </li>\n                </div>\n            </ul>\n        </div>\n    </nav>\n</div>\n" }]
+            args: [{ providers: [ProviderService], selector: 'navbar-module', template: "<style>\n    .navbarModule li {\n        cursor: pointer;\n    }\n    .navbarModule li.active {\n        border-left: 3px solid #d19b3d;\n    }\n    .navbarModule nav {\n        width: 100%;\n    }\n\n    @media (min-width: 1200px) {\n        .navbarModule {\n            height: 95vh;\n            margin-left: -10px;\n        }\n\n        hr {\n            border-top: white 1px solid;\n        }\n    }\n\n    @media (max-width: 1200px) {\n        hr {\n            display: none;\n        }\n\n        .navbarModule a {\n            font-size: 18px !important;\n        }\n    }\n\n    \n</style> \n\n<div style=\"margin-left: -15px; margin-right: -15px;\">\n    <nav class=\"navbar navbar-expand-xl navbar-dark bg-dark flex-xl-column navbarModule\" [style.height]=\"sideNavHeight ? sideNavHeight + 'px' : ''\" [style.width]=\"sideNavWidth ? sideNavWidth : ''\">\n        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n            {{ menuData.title }}\n        </div>\n        <button class=\"navbar-toggler\" type=\"button\" aria-controls=\"#navbarModuleNav\" data-target=\"#navbarModuleNav\" data-toggle=\"collapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"></span>\n        </button>\n        <div class=\"navbar-collapse collapse\" id=\"navbarModuleNav\" style=\"align-items:baseline; width: 100%; overflow-y: auto; overflow-x: hidden;\">\n            <ul class=\"navbar-nav\" style=\"display: block; float: left; width: 100%;\">\n                <div *ngFor=\"let tab of (menuData.tabs | filterNotEqual : 'params' : '0'); let i = index\">\n                    <div *ngIf=\"tab.params !== null && menuData.tabs[i - 1] && menuData.tabs[i - 1].params === null\">\n                        <hr>\n                        <div href=\"#\" style=\"color: white; font-size: 16px;\">\n                            Selected {{ menuData.module }}\n                        </div>\n                        <hr>\n                        <div style=\"color:white; margin-left: 5px; text-decoration: underline; font-size: 14px\">{{menuData.description_name}}:</div>\n                        <div style=\"color:white; margin-left: 8px;  font-size: 12px\">{{menuData.description}}</div>\n                        <br />\n                    </div>\n                    <li [ngClass]=\"['nav-item', tabClass(tab)]\"data-toggle=\"collapse\" data-target=\"#navbarModuleNav\" [tourAnchor]=\"tab.tourAnchor\">\n                        <a class=\"nav-link\" [class.disabled]=\"tourStarted ? true : null\" [routerLink]=\"[tab.params ? tab.link + '/' + tab.params : tab.link]\" routerLinkActive=\"active\">{{ tab.label }}</a>\n                    </li>\n                </div>\n            </ul>\n        </div>\n    </nav>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ProviderService }]; }, propDecorators: { sideNavHeight: [{
                 type: Input
             }], sideNavWidth: [{
@@ -5215,25 +5237,25 @@ class CoreComponent extends BaseComponent {
     openNav() {
         let x = document.getElementById('navSid');
         let y = document.getElementById('main_cont');
-        if (x.style.width === '40px' && y.style.paddingLeft === '55px') {
+        if (x.style.width === '40px' && y.style.paddingLeft === '45px') {
             x.style.width = '195px';
             y.style.paddingLeft = '210px';
         }
         else {
             x.style.width = '40px';
-            y.style.paddingLeft = '55px';
+            y.style.paddingLeft = '45px';
         }
     }
     closeNav() {
         document.getElementById('navSid').style.width = '40px';
-        document.getElementById('main_cont').style.paddingLeft = '55px';
+        document.getElementById('main_cont').style.paddingLeft = '45px';
     }
 }
-CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreComponent, deps: [{ token: i1$5.DeviceDetectorService }, { token: DialogService }, { token: ResizeService }, { token: ProviderService }, { token: OfflineManagerService }, { token: i1.LocalStorageService }, { token: AuthService }, { token: AuthPermissionService }], target: i0.ɵɵFactoryTarget.Component });
-CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CoreComponent, selector: "resolveio-client-lib-core", inputs: { environment: "environment", logo: "logo", navTabs: "navTabs", userHasPhoneNumber: "userHasPhoneNumber", client: "client", showNavbarModule: "showNavbarModule", publicProgram: "publicProgram" }, providers: [ProviderService], viewQueries: [{ propertyName: "el_navBarMain", first: true, predicate: ["navBarMain"], descendants: true, read: ElementRef, static: true }, { propertyName: "el_navBarModule", first: true, predicate: ["navBarModule"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n\t:root {\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n\t:host /deep/ .btn-warning {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-color);\n\t\tborder-color: var(--warning-color);\n\t}\n\t:host /deep/ .btn-warning:focus, .btn-warning.focus {\n\t\tbox-shadow: var(--warning-shadow-color);\n\t}\n\t:host /deep/ .btn-warning:hover {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-hover-color);\n\t\tborder-color: var(--warning-hover-color);\n\t}\n\n\t:host /deep/ .btn-success {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-color);\n\t\tborder-color: var(--success-color);\n\t}\n\t:host /deep/ .btn-success:focus, .btn-success.focus {\n\t\tbox-shadow: var(--success-shadow-color);\n\t}\n\t:host /deep/ .btn-success:hover {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-hover-color);\n\t\tborder-color: var(--success-hover-color);\n\t}\n\n\t:host /deep/ .btn-danger {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-color);\n\t\tborder-color: var(--danger-color);\n\t}\n\t:host /deep/ .btn-danger:focus, .btn-danger.focus {\n\t\tbox-shadow: var(--danger-shadow-color);\n\t}\n\t:host /deep/ .btn-danger:hover {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-hover-color);\n\t\tborder-color: var(--danger-hover-color);\n\t}\n\n\t:host /deep/ .btn-info {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-color);\n\t\tborder-color: var(--info-color);\n\t}\n\t:host /deep/ .btn-info:focus, .btn-info.focus {\n\t\tbox-shadow: var(--info-shadow-color);\n\t}\n\t:host /deep/ .btn-info:hover {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-hover-color);\n\t\tborder-color: var(--info-hover-color);\n\t}\n\n\t:host /deep/ .btn-primary {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-color);\n\t\tborder-color: var(--primary-color);\n\t}\n\t:host /deep/ .btn-primary:focus, .btn-primary.focus {\n\t\tbox-shadow: var(--primary-shadow-color);\n\t}\n\t:host /deep/ .btn-primary:hover {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-hover-color);\n\t\tborder-color: var(--primary-hover-color);\n\t}\n\n\t:host /deep/ .btn-secondary {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-color);\n\t\tborder-color: var(--secondary-color);\n\t}\n\t:host /deep/ .btn-secondary:focus, .btn-secondary.focus {\n\t\tbox-shadow: var(--secondary-shadow-color);\n\t}\n\t:host /deep/ .btn-secondary:hover {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-hover-color);\n\t\tborder-color: var(--secondary-hover-color);\n\t}\n\t\n  \t@media print {\n\t  \t.dontPrint * {\n\t\t  \tdisplay: none !important;\n\t  \t}\n\n\t\t.myDivToPrintCs {\n\t\t\tbackground-color: white;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 12px;\n\t\t\tpage-break-after: avoid;\n\t\t\tdisplay: initial;\n\t\t}\n\n\t\t.removeOverflow {\n\t\t\toverflow-y: hidden !important; \n\t\t\theight: 100% !important;\n\t\t}\n  \t}\n\n  \t.hideThis {\n\t\tdisplay: none !important;\n\t}\n\n\t.navSidbar {\n\t\twidth: 0px;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: #343a40;\n\t\toverflow: hidden;\n\t\ttransition: 0.5s;\n\t\tpadding-top: 0px;\n\t}\n\n\t.navSidbar a {\n\t\tpadding: 8px 8px 8px 32px;\n\t\ttext-decoration: none;\n\t\tfont-size: 25px;\n\t\tcolor: #818181;\n\t\tdisplay: block;\n\t\ttransition: 0.3s;\n\t}\n\n\t.navSidbar a:hover {\n\t\tcolor: #f1f1f1;\n\t}\n\n\t.openbtn {\n\t\tbackground-color: #343a40;\n\t\tborder: none;\n\t\tcolor: #fff;\n\t\tpadding: 5px 20px;\n\t\tfont-size: 18px;\n\t\tright: 0;\n\t\ttop: 0px;\n\t\tposition: absolute;\n\t\tz-index: 999999;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\theight: 100%;\n\t}\n\n\t.openbtn span {\n\t\tfont-size: 20px;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\twidth: auto;\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%) rotate(-90deg);\n\t\tmargin-top: -55px;\n\t\tletter-spacing: 30px;\n\t}\n\t#main_cont {\n\t\ttransition: padding-left .5s;\n\t}\n\n\t.sid_inr {\n\t\tpadding-left: 25px;\n\t}\n\n</style>\n<div *ngIf=\"isDevice\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/css/tablet.css\">\n</div>\n<div #shell>\n\t<div *ngIf=\"user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\">*** OFFLINE MODE ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"!user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\">*** PLEASE LOGIN ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"status\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\">*** {{ status.message }} ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"fullScreen\">\n\t\t<router-outlet name=\"jobboardfsoutlet\"></router-outlet>\n\t</div>\n\t<div [ngClass]=\"['container-fluid', fullScreen ? 'hideThis' : '']\" [style.font-size.px]=\"fontSize\">\n\t\t<div class=\"dontPrint\">\n\t\t\t<navbar-main style=\"width: 100%\" tourAnchor=\"navBarMain\" #navBarMain [logo]=\"logo\" [navTabs]=\"navTabs\" [fontSize]=\"fontSize\" [publicProgram]=\"publicProgram\"></navbar-main>\n\t\t</div>\n\t\t<ng-template ngbModalContainer></ng-template>\n\t\t<div class=\"row\">\n\t\t\t<div id=\"navSid\" *ngIf=\"showNavbarModule\" [ngClass]=\"['dontPrint', windowSizeWidth > 1200 && collapsableMenu ? 'navSidbar' : 'col-xl-1']\" [style.width]=\"windowSizeWidth > 1200 && collapsableMenu ? 40 + 'px' : 100 + '%'\" [style.margin-top.px]=\"windowSizeWidth > 1200 && collapsableMenu ? navbarMainHeight + statusHeight + connectedHeight : 0\" >\n\t\t\t\t<div class=\"openbtn\" *ngIf=\"windowSizeWidth > 1200 && collapsableMenu\" (mouseenter)=\"openNav()\"><span>MENU</span></div>\n\t\t\t\t<div [ngClass]=\"windowSizeWidth > 1200 && collapsableMenu ? 'sid_inr' : ''\">\n\t\t\t\t\t<navbar-module #navBarModule tourAnchor=\"navBarModule\" [sideNavWidth]=\"windowSizeWidth > 1200 && collapsableMenu ? '90%' : 'auto'\" [sideNavHeight]=\"windowSizeWidth > 1200 && collapsableMenu ? windowSizeHeight - navbarMainHeight - statusHeight - connectedHeight - (showNavigationMenu ? (54 + getNavbarModuleHeight()) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0) : ''\"></navbar-module>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div [id]=\"windowSizeWidth > 1200 ? 'main_cont' : 'main_cont_mobile'\" [ngClass]=\"[windowSizeWidth > 1200 && collapsableMenu ? 'col-xl-12' : 'col-xl-11']\" [style.padding-left]=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? 55 + 'px' : null\" [style.padding]=\"((isDevice && windowSizeWidth <= 1200) || !showNavbarModule) ? 0 + 'px' : null\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? closeNav() : null\">\n\t\t\t\t<div style=\"-webkit-overflow-scrolling: touch\" [style.padding-top.px]=\"publicProgram ? 0 : 15\" [style.overflow-y]=\"(isDevice && !showNavigationMenu) ? 'initial' : 'scroll'\" [style.height.px]=\"windowSizeHeight - ((isDevice && windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - (!publicProgram ? statusHeight : 0) - (!publicProgram ? connectedHeight : 0) - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"isDevice && showNavigationMenu\" style=\"height: 54px; background-color: lightgray; margin-left: -15px; margin-right: -15px;\" class=\"dontPrint\">\n\t\t\t<table style=\"width: 100%\">\n\t\t\t\t<tr>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushBackButton()\"><i class=\"fa fa-arrow-left\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushReloadButton()\"><i class=\"fa fa-refresh\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushForwardButton()\"><i class=\"fa fa-arrow-right\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div *ngIf=\"!isDevice\" style=\"text-align: center; height: 20px; font-style: italic; font-weight: bold; background-color: lightgray; margin-left: -15px; margin-right: -15px;\">&copy; {{year}} RESOLVEIO ALL RIGHTS RESERVED</div>\n\t</div>\n</div>\n", styles: ["\n\t:root {\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n\t:host /deep/ .btn-warning {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-color);\n\t\tborder-color: var(--warning-color);\n\t}\n\t:host /deep/ .btn-warning:focus, .btn-warning.focus {\n\t\tbox-shadow: var(--warning-shadow-color);\n\t}\n\t:host /deep/ .btn-warning:hover {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-hover-color);\n\t\tborder-color: var(--warning-hover-color);\n\t}\n\n\t:host /deep/ .btn-success {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-color);\n\t\tborder-color: var(--success-color);\n\t}\n\t:host /deep/ .btn-success:focus, .btn-success.focus {\n\t\tbox-shadow: var(--success-shadow-color);\n\t}\n\t:host /deep/ .btn-success:hover {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-hover-color);\n\t\tborder-color: var(--success-hover-color);\n\t}\n\n\t:host /deep/ .btn-danger {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-color);\n\t\tborder-color: var(--danger-color);\n\t}\n\t:host /deep/ .btn-danger:focus, .btn-danger.focus {\n\t\tbox-shadow: var(--danger-shadow-color);\n\t}\n\t:host /deep/ .btn-danger:hover {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-hover-color);\n\t\tborder-color: var(--danger-hover-color);\n\t}\n\n\t:host /deep/ .btn-info {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-color);\n\t\tborder-color: var(--info-color);\n\t}\n\t:host /deep/ .btn-info:focus, .btn-info.focus {\n\t\tbox-shadow: var(--info-shadow-color);\n\t}\n\t:host /deep/ .btn-info:hover {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-hover-color);\n\t\tborder-color: var(--info-hover-color);\n\t}\n\n\t:host /deep/ .btn-primary {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-color);\n\t\tborder-color: var(--primary-color);\n\t}\n\t:host /deep/ .btn-primary:focus, .btn-primary.focus {\n\t\tbox-shadow: var(--primary-shadow-color);\n\t}\n\t:host /deep/ .btn-primary:hover {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-hover-color);\n\t\tborder-color: var(--primary-hover-color);\n\t}\n\n\t:host /deep/ .btn-secondary {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-color);\n\t\tborder-color: var(--secondary-color);\n\t}\n\t:host /deep/ .btn-secondary:focus, .btn-secondary.focus {\n\t\tbox-shadow: var(--secondary-shadow-color);\n\t}\n\t:host /deep/ .btn-secondary:hover {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-hover-color);\n\t\tborder-color: var(--secondary-hover-color);\n\t}\n\t\n  \t@media print {\n\t  \t.dontPrint * {\n\t\t  \tdisplay: none !important;\n\t  \t}\n\n\t\t.myDivToPrintCs {\n\t\t\tbackground-color: white;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 12px;\n\t\t\tpage-break-after: avoid;\n\t\t\tdisplay: initial;\n\t\t}\n\n\t\t.removeOverflow {\n\t\t\toverflow-y: hidden !important; \n\t\t\theight: 100% !important;\n\t\t}\n  \t}\n\n  \t.hideThis {\n\t\tdisplay: none !important;\n\t}\n\n\t.navSidbar {\n\t\twidth: 0px;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: #343a40;\n\t\toverflow: hidden;\n\t\ttransition: 0.5s;\n\t\tpadding-top: 0px;\n\t}\n\n\t.navSidbar a {\n\t\tpadding: 8px 8px 8px 32px;\n\t\ttext-decoration: none;\n\t\tfont-size: 25px;\n\t\tcolor: #818181;\n\t\tdisplay: block;\n\t\ttransition: 0.3s;\n\t}\n\n\t.navSidbar a:hover {\n\t\tcolor: #f1f1f1;\n\t}\n\n\t.openbtn {\n\t\tbackground-color: #343a40;\n\t\tborder: none;\n\t\tcolor: #fff;\n\t\tpadding: 5px 20px;\n\t\tfont-size: 18px;\n\t\tright: 0;\n\t\ttop: 0px;\n\t\tposition: absolute;\n\t\tz-index: 999999;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\theight: 100%;\n\t}\n\n\t.openbtn span {\n\t\tfont-size: 20px;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\twidth: auto;\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%) rotate(-90deg);\n\t\tmargin-top: -55px;\n\t\tletter-spacing: 30px;\n\t}\n\t#main_cont {\n\t\ttransition: padding-left .5s;\n\t}\n\n\t.sid_inr {\n\t\tpadding-left: 25px;\n\t}\n\n"], dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NavbarMainComponent, selector: "navbar-main", inputs: ["logo", "navTabs", "fontSize", "publicProgram"] }, { kind: "component", type: NavbarModuleComponent, selector: "navbar-module", inputs: ["sideNavHeight", "sideNavWidth"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreComponent, decorators: [{
+CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreComponent, deps: [{ token: i1$5.DeviceDetectorService }, { token: DialogService }, { token: ResizeService }, { token: ProviderService }, { token: OfflineManagerService }, { token: i1.LocalStorageService }, { token: AuthService }, { token: AuthPermissionService }], target: i0.ɵɵFactoryTarget.Component });
+CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CoreComponent, selector: "resolveio-client-lib-core", inputs: { environment: "environment", logo: "logo", navTabs: "navTabs", userHasPhoneNumber: "userHasPhoneNumber", client: "client", showNavbarModule: "showNavbarModule", publicProgram: "publicProgram" }, providers: [ProviderService], viewQueries: [{ propertyName: "el_navBarMain", first: true, predicate: ["navBarMain"], descendants: true, read: ElementRef, static: true }, { propertyName: "el_navBarModule", first: true, predicate: ["navBarModule"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n\t:root {\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n\t:host /deep/ .btn-warning {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-color);\n\t\tborder-color: var(--warning-color);\n\t}\n\t:host /deep/ .btn-warning:focus, .btn-warning.focus {\n\t\tbox-shadow: var(--warning-shadow-color);\n\t}\n\t:host /deep/ .btn-warning:hover {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-hover-color);\n\t\tborder-color: var(--warning-hover-color);\n\t}\n\n\t:host /deep/ .btn-success {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-color);\n\t\tborder-color: var(--success-color);\n\t}\n\t:host /deep/ .btn-success:focus, .btn-success.focus {\n\t\tbox-shadow: var(--success-shadow-color);\n\t}\n\t:host /deep/ .btn-success:hover {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-hover-color);\n\t\tborder-color: var(--success-hover-color);\n\t}\n\n\t:host /deep/ .btn-danger {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-color);\n\t\tborder-color: var(--danger-color);\n\t}\n\t:host /deep/ .btn-danger:focus, .btn-danger.focus {\n\t\tbox-shadow: var(--danger-shadow-color);\n\t}\n\t:host /deep/ .btn-danger:hover {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-hover-color);\n\t\tborder-color: var(--danger-hover-color);\n\t}\n\n\t:host /deep/ .btn-info {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-color);\n\t\tborder-color: var(--info-color);\n\t}\n\t:host /deep/ .btn-info:focus, .btn-info.focus {\n\t\tbox-shadow: var(--info-shadow-color);\n\t}\n\t:host /deep/ .btn-info:hover {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-hover-color);\n\t\tborder-color: var(--info-hover-color);\n\t}\n\n\t:host /deep/ .btn-primary {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-color);\n\t\tborder-color: var(--primary-color);\n\t}\n\t:host /deep/ .btn-primary:focus, .btn-primary.focus {\n\t\tbox-shadow: var(--primary-shadow-color);\n\t}\n\t:host /deep/ .btn-primary:hover {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-hover-color);\n\t\tborder-color: var(--primary-hover-color);\n\t}\n\n\t:host /deep/ .btn-secondary {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-color);\n\t\tborder-color: var(--secondary-color);\n\t}\n\t:host /deep/ .btn-secondary:focus, .btn-secondary.focus {\n\t\tbox-shadow: var(--secondary-shadow-color);\n\t}\n\t:host /deep/ .btn-secondary:hover {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-hover-color);\n\t\tborder-color: var(--secondary-hover-color);\n\t}\n\t\n  \t@media print {\n\t  \t.dontPrint * {\n\t\t  \tdisplay: none !important;\n\t  \t}\n\n\t\t.myDivToPrintCs {\n\t\t\tbackground-color: white;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 12px;\n\t\t\tpage-break-after: avoid;\n\t\t\tdisplay: initial;\n\t\t}\n\n\t\t.removeOverflow {\n\t\t\toverflow-y: hidden !important; \n\t\t\theight: 100% !important;\n\t\t}\n  \t}\n\n  \t.hideThis {\n\t\tdisplay: none !important;\n\t}\n\n\t.navSidbar {\n\t\twidth: 0px;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: #343a40;\n\t\toverflow: hidden;\n\t\ttransition: 0.5s;\n\t\tpadding-top: 0px;\n\t}\n\n\t.navSidbar a {\n\t\tpadding: 8px 8px 8px 32px;\n\t\ttext-decoration: none;\n\t\tfont-size: 25px;\n\t\tcolor: #818181;\n\t\tdisplay: block;\n\t\ttransition: 0.3s;\n\t}\n\n\t.navSidbar a:hover {\n\t\tcolor: #f1f1f1;\n\t}\n\n\t.openbtn {\n\t\tbackground-color: #343a40;\n\t\tborder: none;\n\t\tcolor: #fff;\n\t\tpadding: 5px 20px;\n\t\tfont-size: 18px;\n\t\tright: 0;\n\t\ttop: 0px;\n\t\tposition: absolute;\n\t\tz-index: 999999;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\theight: 100%;\n\t}\n\n\t.openbtn span {\n\t\tfont-size: 20px;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\twidth: auto;\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%) rotate(-90deg);\n\t\tmargin-top: -55px;\n\t\tletter-spacing: 30px;\n\t}\n\t#main_cont {\n\t\ttransition: padding-left .5s;\n\t}\n\n\t.sid_inr {\n\t\tpadding-left: 25px;\n\t}\n\n\t@keyframes shimmer {\n        0%, 50% {\n            background-position: 120% 0;\n        }\n        100% {\n            background-position: -80% 0;\n        }\n    }\n\n    .shimmer::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: linear-gradient(\n            -75deg,\n            rgba(255, 255, 255, 0) 40%, \n            rgba(255, 255, 255, 0.7) 50%, \n            rgba(255, 255, 255, 0) 60%\n        );\n        background-size: 200% 100%;\n        animation: shimmer 5s linear infinite;\n        animation-fill-mode: forwards;\n        z-index: 11;\n    }\n</style>\n<div *ngIf=\"isDevice\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/css/tablet.css\">\n</div>\n<div #shell>\n\t<div *ngIf=\"user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\" class=\"shimmer\">*** OFFLINE MODE ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"!user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\" class=\"shimmer\">*** PLEASE LOGIN ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"status\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\" class=\"shimmer\">*** {{ status.message }} ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"fullScreen\">\n\t\t<router-outlet name=\"jobboardfsoutlet\"></router-outlet>\n\t</div>\n\t<div [ngClass]=\"['container-fluid', fullScreen ? 'hideThis' : '']\" [style.font-size.px]=\"fontSize\">\n\t\t<div class=\"dontPrint\">\n\t\t\t<navbar-main style=\"width: 100%\" tourAnchor=\"navBarMain\" #navBarMain [logo]=\"logo\" [navTabs]=\"navTabs\" [fontSize]=\"fontSize\" [publicProgram]=\"publicProgram\"></navbar-main>\n\t\t</div>\n\t\t<ng-template ngbModalContainer></ng-template>\n\t\t<div class=\"row\">\n\t\t\t<div id=\"navSid\" *ngIf=\"showNavbarModule\" [ngClass]=\"['dontPrint', windowSizeWidth > 1200 && collapsableMenu ? 'navSidbar' : 'col-xl-1']\" [style.width]=\"windowSizeWidth > 1200 && collapsableMenu ? 40 + 'px' : 100 + '%'\" [style.margin-top.px]=\"windowSizeWidth > 1200 && collapsableMenu ? navbarMainHeight + statusHeight + connectedHeight : 0\" >\n\t\t\t\t<div class=\"openbtn\" *ngIf=\"windowSizeWidth > 1200 && collapsableMenu\" (mouseenter)=\"openNav()\"><span>MENU</span></div>\n\t\t\t\t<div [ngClass]=\"windowSizeWidth > 1200 && collapsableMenu ? 'sid_inr' : ''\">\n\t\t\t\t\t<navbar-module #navBarModule tourAnchor=\"navBarModule\" [sideNavWidth]=\"windowSizeWidth > 1200 && collapsableMenu ? '90%' : 'auto'\" [sideNavHeight]=\"windowSizeWidth > 1200 && collapsableMenu ? windowSizeHeight - navbarMainHeight - statusHeight - connectedHeight - (showNavigationMenu ? (54 + getNavbarModuleHeight()) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0) : ''\"></navbar-module>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div [id]=\"windowSizeWidth > 1200 ? 'main_cont' : 'main_cont_mobile'\" [ngClass]=\"[windowSizeWidth > 1200 && collapsableMenu ? 'col-xl-12' : 'col-xl-11']\" [style.padding-left]=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? 45 + 'px' : null\" [style.padding]=\"((isDevice && windowSizeWidth <= 1200) || !showNavbarModule) ? 0 + 'px' : null\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? closeNav() : null\" style=\"padding-right: 5px\">\n\t\t\t\t<div style=\"-webkit-overflow-scrolling: touch\" [style.overflow-y]=\"(isDevice && !showNavigationMenu) ? 'initial' : 'scroll'\" [style.height.px]=\"windowSizeHeight - ((isDevice && windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - (!publicProgram ? statusHeight : 0) - (!publicProgram ? connectedHeight : 0) - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"isDevice && showNavigationMenu\" style=\"height: 54px; background-color: lightgray; margin-left: -15px; margin-right: -15px;\" class=\"dontPrint\">\n\t\t\t<table style=\"width: 100%\">\n\t\t\t\t<tr>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushBackButton()\"><i class=\"fa fa-arrow-left\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushReloadButton()\"><i class=\"fa fa-refresh\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushForwardButton()\"><i class=\"fa fa-arrow-right\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div *ngIf=\"!isDevice\" style=\"text-align: center; height: 20px; font-style: italic; font-weight: bold; background-color: lightgray; margin-left: -15px; margin-right: -15px;\">&copy; {{year}} RESOLVEIO ALL RIGHTS RESERVED</div>\n\t</div>\n</div>\n", styles: ["\n\t:root {\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n\t:host /deep/ .btn-warning {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-color);\n\t\tborder-color: var(--warning-color);\n\t}\n\t:host /deep/ .btn-warning:focus, .btn-warning.focus {\n\t\tbox-shadow: var(--warning-shadow-color);\n\t}\n\t:host /deep/ .btn-warning:hover {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-hover-color);\n\t\tborder-color: var(--warning-hover-color);\n\t}\n\n\t:host /deep/ .btn-success {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-color);\n\t\tborder-color: var(--success-color);\n\t}\n\t:host /deep/ .btn-success:focus, .btn-success.focus {\n\t\tbox-shadow: var(--success-shadow-color);\n\t}\n\t:host /deep/ .btn-success:hover {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-hover-color);\n\t\tborder-color: var(--success-hover-color);\n\t}\n\n\t:host /deep/ .btn-danger {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-color);\n\t\tborder-color: var(--danger-color);\n\t}\n\t:host /deep/ .btn-danger:focus, .btn-danger.focus {\n\t\tbox-shadow: var(--danger-shadow-color);\n\t}\n\t:host /deep/ .btn-danger:hover {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-hover-color);\n\t\tborder-color: var(--danger-hover-color);\n\t}\n\n\t:host /deep/ .btn-info {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-color);\n\t\tborder-color: var(--info-color);\n\t}\n\t:host /deep/ .btn-info:focus, .btn-info.focus {\n\t\tbox-shadow: var(--info-shadow-color);\n\t}\n\t:host /deep/ .btn-info:hover {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-hover-color);\n\t\tborder-color: var(--info-hover-color);\n\t}\n\n\t:host /deep/ .btn-primary {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-color);\n\t\tborder-color: var(--primary-color);\n\t}\n\t:host /deep/ .btn-primary:focus, .btn-primary.focus {\n\t\tbox-shadow: var(--primary-shadow-color);\n\t}\n\t:host /deep/ .btn-primary:hover {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-hover-color);\n\t\tborder-color: var(--primary-hover-color);\n\t}\n\n\t:host /deep/ .btn-secondary {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-color);\n\t\tborder-color: var(--secondary-color);\n\t}\n\t:host /deep/ .btn-secondary:focus, .btn-secondary.focus {\n\t\tbox-shadow: var(--secondary-shadow-color);\n\t}\n\t:host /deep/ .btn-secondary:hover {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-hover-color);\n\t\tborder-color: var(--secondary-hover-color);\n\t}\n\t\n  \t@media print {\n\t  \t.dontPrint * {\n\t\t  \tdisplay: none !important;\n\t  \t}\n\n\t\t.myDivToPrintCs {\n\t\t\tbackground-color: white;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 12px;\n\t\t\tpage-break-after: avoid;\n\t\t\tdisplay: initial;\n\t\t}\n\n\t\t.removeOverflow {\n\t\t\toverflow-y: hidden !important; \n\t\t\theight: 100% !important;\n\t\t}\n  \t}\n\n  \t.hideThis {\n\t\tdisplay: none !important;\n\t}\n\n\t.navSidbar {\n\t\twidth: 0px;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: #343a40;\n\t\toverflow: hidden;\n\t\ttransition: 0.5s;\n\t\tpadding-top: 0px;\n\t}\n\n\t.navSidbar a {\n\t\tpadding: 8px 8px 8px 32px;\n\t\ttext-decoration: none;\n\t\tfont-size: 25px;\n\t\tcolor: #818181;\n\t\tdisplay: block;\n\t\ttransition: 0.3s;\n\t}\n\n\t.navSidbar a:hover {\n\t\tcolor: #f1f1f1;\n\t}\n\n\t.openbtn {\n\t\tbackground-color: #343a40;\n\t\tborder: none;\n\t\tcolor: #fff;\n\t\tpadding: 5px 20px;\n\t\tfont-size: 18px;\n\t\tright: 0;\n\t\ttop: 0px;\n\t\tposition: absolute;\n\t\tz-index: 999999;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\theight: 100%;\n\t}\n\n\t.openbtn span {\n\t\tfont-size: 20px;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\twidth: auto;\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%) rotate(-90deg);\n\t\tmargin-top: -55px;\n\t\tletter-spacing: 30px;\n\t}\n\t#main_cont {\n\t\ttransition: padding-left .5s;\n\t}\n\n\t.sid_inr {\n\t\tpadding-left: 25px;\n\t}\n\n\t@keyframes shimmer {\n        0%, 50% {\n            background-position: 120% 0;\n        }\n        100% {\n            background-position: -80% 0;\n        }\n    }\n\n    .shimmer::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: linear-gradient(\n            -75deg,\n            rgba(255, 255, 255, 0) 40%, \n            rgba(255, 255, 255, 0.7) 50%, \n            rgba(255, 255, 255, 0) 60%\n        );\n        background-size: 200% 100%;\n        animation: shimmer 5s linear infinite;\n        animation-fill-mode: forwards;\n        z-index: 11;\n    }\n"], dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NavbarMainComponent, selector: "navbar-main", inputs: ["logo", "navTabs", "fontSize", "publicProgram"] }, { kind: "component", type: NavbarModuleComponent, selector: "navbar-module", inputs: ["sideNavHeight", "sideNavWidth"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], selector: 'resolveio-client-lib-core', template: "<style>\n\t:root {\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n\t:host /deep/ .btn-warning {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-color);\n\t\tborder-color: var(--warning-color);\n\t}\n\t:host /deep/ .btn-warning:focus, .btn-warning.focus {\n\t\tbox-shadow: var(--warning-shadow-color);\n\t}\n\t:host /deep/ .btn-warning:hover {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-hover-color);\n\t\tborder-color: var(--warning-hover-color);\n\t}\n\n\t:host /deep/ .btn-success {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-color);\n\t\tborder-color: var(--success-color);\n\t}\n\t:host /deep/ .btn-success:focus, .btn-success.focus {\n\t\tbox-shadow: var(--success-shadow-color);\n\t}\n\t:host /deep/ .btn-success:hover {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-hover-color);\n\t\tborder-color: var(--success-hover-color);\n\t}\n\n\t:host /deep/ .btn-danger {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-color);\n\t\tborder-color: var(--danger-color);\n\t}\n\t:host /deep/ .btn-danger:focus, .btn-danger.focus {\n\t\tbox-shadow: var(--danger-shadow-color);\n\t}\n\t:host /deep/ .btn-danger:hover {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-hover-color);\n\t\tborder-color: var(--danger-hover-color);\n\t}\n\n\t:host /deep/ .btn-info {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-color);\n\t\tborder-color: var(--info-color);\n\t}\n\t:host /deep/ .btn-info:focus, .btn-info.focus {\n\t\tbox-shadow: var(--info-shadow-color);\n\t}\n\t:host /deep/ .btn-info:hover {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-hover-color);\n\t\tborder-color: var(--info-hover-color);\n\t}\n\n\t:host /deep/ .btn-primary {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-color);\n\t\tborder-color: var(--primary-color);\n\t}\n\t:host /deep/ .btn-primary:focus, .btn-primary.focus {\n\t\tbox-shadow: var(--primary-shadow-color);\n\t}\n\t:host /deep/ .btn-primary:hover {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-hover-color);\n\t\tborder-color: var(--primary-hover-color);\n\t}\n\n\t:host /deep/ .btn-secondary {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-color);\n\t\tborder-color: var(--secondary-color);\n\t}\n\t:host /deep/ .btn-secondary:focus, .btn-secondary.focus {\n\t\tbox-shadow: var(--secondary-shadow-color);\n\t}\n\t:host /deep/ .btn-secondary:hover {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-hover-color);\n\t\tborder-color: var(--secondary-hover-color);\n\t}\n\t\n  \t@media print {\n\t  \t.dontPrint * {\n\t\t  \tdisplay: none !important;\n\t  \t}\n\n\t\t.myDivToPrintCs {\n\t\t\tbackground-color: white;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 12px;\n\t\t\tpage-break-after: avoid;\n\t\t\tdisplay: initial;\n\t\t}\n\n\t\t.removeOverflow {\n\t\t\toverflow-y: hidden !important; \n\t\t\theight: 100% !important;\n\t\t}\n  \t}\n\n  \t.hideThis {\n\t\tdisplay: none !important;\n\t}\n\n\t.navSidbar {\n\t\twidth: 0px;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: #343a40;\n\t\toverflow: hidden;\n\t\ttransition: 0.5s;\n\t\tpadding-top: 0px;\n\t}\n\n\t.navSidbar a {\n\t\tpadding: 8px 8px 8px 32px;\n\t\ttext-decoration: none;\n\t\tfont-size: 25px;\n\t\tcolor: #818181;\n\t\tdisplay: block;\n\t\ttransition: 0.3s;\n\t}\n\n\t.navSidbar a:hover {\n\t\tcolor: #f1f1f1;\n\t}\n\n\t.openbtn {\n\t\tbackground-color: #343a40;\n\t\tborder: none;\n\t\tcolor: #fff;\n\t\tpadding: 5px 20px;\n\t\tfont-size: 18px;\n\t\tright: 0;\n\t\ttop: 0px;\n\t\tposition: absolute;\n\t\tz-index: 999999;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\theight: 100%;\n\t}\n\n\t.openbtn span {\n\t\tfont-size: 20px;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\twidth: auto;\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%) rotate(-90deg);\n\t\tmargin-top: -55px;\n\t\tletter-spacing: 30px;\n\t}\n\t#main_cont {\n\t\ttransition: padding-left .5s;\n\t}\n\n\t.sid_inr {\n\t\tpadding-left: 25px;\n\t}\n\n</style>\n<div *ngIf=\"isDevice\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/css/tablet.css\">\n</div>\n<div #shell>\n\t<div *ngIf=\"user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\">*** OFFLINE MODE ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"!user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\">*** PLEASE LOGIN ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"status\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\">*** {{ status.message }} ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"fullScreen\">\n\t\t<router-outlet name=\"jobboardfsoutlet\"></router-outlet>\n\t</div>\n\t<div [ngClass]=\"['container-fluid', fullScreen ? 'hideThis' : '']\" [style.font-size.px]=\"fontSize\">\n\t\t<div class=\"dontPrint\">\n\t\t\t<navbar-main style=\"width: 100%\" tourAnchor=\"navBarMain\" #navBarMain [logo]=\"logo\" [navTabs]=\"navTabs\" [fontSize]=\"fontSize\" [publicProgram]=\"publicProgram\"></navbar-main>\n\t\t</div>\n\t\t<ng-template ngbModalContainer></ng-template>\n\t\t<div class=\"row\">\n\t\t\t<div id=\"navSid\" *ngIf=\"showNavbarModule\" [ngClass]=\"['dontPrint', windowSizeWidth > 1200 && collapsableMenu ? 'navSidbar' : 'col-xl-1']\" [style.width]=\"windowSizeWidth > 1200 && collapsableMenu ? 40 + 'px' : 100 + '%'\" [style.margin-top.px]=\"windowSizeWidth > 1200 && collapsableMenu ? navbarMainHeight + statusHeight + connectedHeight : 0\" >\n\t\t\t\t<div class=\"openbtn\" *ngIf=\"windowSizeWidth > 1200 && collapsableMenu\" (mouseenter)=\"openNav()\"><span>MENU</span></div>\n\t\t\t\t<div [ngClass]=\"windowSizeWidth > 1200 && collapsableMenu ? 'sid_inr' : ''\">\n\t\t\t\t\t<navbar-module #navBarModule tourAnchor=\"navBarModule\" [sideNavWidth]=\"windowSizeWidth > 1200 && collapsableMenu ? '90%' : 'auto'\" [sideNavHeight]=\"windowSizeWidth > 1200 && collapsableMenu ? windowSizeHeight - navbarMainHeight - statusHeight - connectedHeight - (showNavigationMenu ? (54 + getNavbarModuleHeight()) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0) : ''\"></navbar-module>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div [id]=\"windowSizeWidth > 1200 ? 'main_cont' : 'main_cont_mobile'\" [ngClass]=\"[windowSizeWidth > 1200 && collapsableMenu ? 'col-xl-12' : 'col-xl-11']\" [style.padding-left]=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? 55 + 'px' : null\" [style.padding]=\"((isDevice && windowSizeWidth <= 1200) || !showNavbarModule) ? 0 + 'px' : null\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? closeNav() : null\">\n\t\t\t\t<div style=\"-webkit-overflow-scrolling: touch\" [style.padding-top.px]=\"publicProgram ? 0 : 15\" [style.overflow-y]=\"(isDevice && !showNavigationMenu) ? 'initial' : 'scroll'\" [style.height.px]=\"windowSizeHeight - ((isDevice && windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - (!publicProgram ? statusHeight : 0) - (!publicProgram ? connectedHeight : 0) - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"isDevice && showNavigationMenu\" style=\"height: 54px; background-color: lightgray; margin-left: -15px; margin-right: -15px;\" class=\"dontPrint\">\n\t\t\t<table style=\"width: 100%\">\n\t\t\t\t<tr>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushBackButton()\"><i class=\"fa fa-arrow-left\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushReloadButton()\"><i class=\"fa fa-refresh\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushForwardButton()\"><i class=\"fa fa-arrow-right\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div *ngIf=\"!isDevice\" style=\"text-align: center; height: 20px; font-style: italic; font-weight: bold; background-color: lightgray; margin-left: -15px; margin-right: -15px;\">&copy; {{year}} RESOLVEIO ALL RIGHTS RESERVED</div>\n\t</div>\n</div>\n" }]
+            args: [{ providers: [ProviderService], selector: 'resolveio-client-lib-core', template: "<style>\n\t:root {\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n\t:host /deep/ .btn-warning {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-color);\n\t\tborder-color: var(--warning-color);\n\t}\n\t:host /deep/ .btn-warning:focus, .btn-warning.focus {\n\t\tbox-shadow: var(--warning-shadow-color);\n\t}\n\t:host /deep/ .btn-warning:hover {\n\t\tcolor: var(--warning-font-color);\n\t\tbackground-color: var(--warning-hover-color);\n\t\tborder-color: var(--warning-hover-color);\n\t}\n\n\t:host /deep/ .btn-success {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-color);\n\t\tborder-color: var(--success-color);\n\t}\n\t:host /deep/ .btn-success:focus, .btn-success.focus {\n\t\tbox-shadow: var(--success-shadow-color);\n\t}\n\t:host /deep/ .btn-success:hover {\n\t\tcolor: var(--success-font-color);\n\t\tbackground-color: var(--success-hover-color);\n\t\tborder-color: var(--success-hover-color);\n\t}\n\n\t:host /deep/ .btn-danger {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-color);\n\t\tborder-color: var(--danger-color);\n\t}\n\t:host /deep/ .btn-danger:focus, .btn-danger.focus {\n\t\tbox-shadow: var(--danger-shadow-color);\n\t}\n\t:host /deep/ .btn-danger:hover {\n\t\tcolor: var(--danger-font-color);\n\t\tbackground-color: var(--danger-hover-color);\n\t\tborder-color: var(--danger-hover-color);\n\t}\n\n\t:host /deep/ .btn-info {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-color);\n\t\tborder-color: var(--info-color);\n\t}\n\t:host /deep/ .btn-info:focus, .btn-info.focus {\n\t\tbox-shadow: var(--info-shadow-color);\n\t}\n\t:host /deep/ .btn-info:hover {\n\t\tcolor: var(--info-font-color);\n\t\tbackground-color: var(--info-hover-color);\n\t\tborder-color: var(--info-hover-color);\n\t}\n\n\t:host /deep/ .btn-primary {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-color);\n\t\tborder-color: var(--primary-color);\n\t}\n\t:host /deep/ .btn-primary:focus, .btn-primary.focus {\n\t\tbox-shadow: var(--primary-shadow-color);\n\t}\n\t:host /deep/ .btn-primary:hover {\n\t\tcolor: var(--primary-font-color);\n\t\tbackground-color: var(--primary-hover-color);\n\t\tborder-color: var(--primary-hover-color);\n\t}\n\n\t:host /deep/ .btn-secondary {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-color);\n\t\tborder-color: var(--secondary-color);\n\t}\n\t:host /deep/ .btn-secondary:focus, .btn-secondary.focus {\n\t\tbox-shadow: var(--secondary-shadow-color);\n\t}\n\t:host /deep/ .btn-secondary:hover {\n\t\tcolor: var(--secondary-font-color);\n\t\tbackground-color: var(--secondary-hover-color);\n\t\tborder-color: var(--secondary-hover-color);\n\t}\n\t\n  \t@media print {\n\t  \t.dontPrint * {\n\t\t  \tdisplay: none !important;\n\t  \t}\n\n\t\t.myDivToPrintCs {\n\t\t\tbackground-color: white;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 12px;\n\t\t\tpage-break-after: avoid;\n\t\t\tdisplay: initial;\n\t\t}\n\n\t\t.removeOverflow {\n\t\t\toverflow-y: hidden !important; \n\t\t\theight: 100% !important;\n\t\t}\n  \t}\n\n  \t.hideThis {\n\t\tdisplay: none !important;\n\t}\n\n\t.navSidbar {\n\t\twidth: 0px;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: #343a40;\n\t\toverflow: hidden;\n\t\ttransition: 0.5s;\n\t\tpadding-top: 0px;\n\t}\n\n\t.navSidbar a {\n\t\tpadding: 8px 8px 8px 32px;\n\t\ttext-decoration: none;\n\t\tfont-size: 25px;\n\t\tcolor: #818181;\n\t\tdisplay: block;\n\t\ttransition: 0.3s;\n\t}\n\n\t.navSidbar a:hover {\n\t\tcolor: #f1f1f1;\n\t}\n\n\t.openbtn {\n\t\tbackground-color: #343a40;\n\t\tborder: none;\n\t\tcolor: #fff;\n\t\tpadding: 5px 20px;\n\t\tfont-size: 18px;\n\t\tright: 0;\n\t\ttop: 0px;\n\t\tposition: absolute;\n\t\tz-index: 999999;\n\t\tcursor: pointer;\n\t\tfloat: right;\n\t\theight: 100%;\n\t}\n\n\t.openbtn span {\n\t\tfont-size: 20px;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\twidth: auto;\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%) rotate(-90deg);\n\t\tmargin-top: -55px;\n\t\tletter-spacing: 30px;\n\t}\n\t#main_cont {\n\t\ttransition: padding-left .5s;\n\t}\n\n\t.sid_inr {\n\t\tpadding-left: 25px;\n\t}\n\n\t@keyframes shimmer {\n        0%, 50% {\n            background-position: 120% 0;\n        }\n        100% {\n            background-position: -80% 0;\n        }\n    }\n\n    .shimmer::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: linear-gradient(\n            -75deg,\n            rgba(255, 255, 255, 0) 40%, \n            rgba(255, 255, 255, 0.7) 50%, \n            rgba(255, 255, 255, 0) 60%\n        );\n        background-size: 200% 100%;\n        animation: shimmer 5s linear infinite;\n        animation-fill-mode: forwards;\n        z-index: 11;\n    }\n</style>\n<div *ngIf=\"isDevice\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/css/tablet.css\">\n</div>\n<div #shell>\n\t<div *ngIf=\"user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\" class=\"shimmer\">*** OFFLINE MODE ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"!user && (!isConnected || isOffline) && !publicProgram\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\" class=\"shimmer\">*** PLEASE LOGIN ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"status\">\n\t\t<div style=\"height: 40px; text-align: center; vertical-align: middle; background-color: red; color: white;\">\n\t\t\t<div style=\"padding-top: 9px; padding-bottom: 9px;\" class=\"shimmer\">*** {{ status.message }} ***</div>\n\t\t</div>\n\t</div>\n\t<div *ngIf=\"fullScreen\">\n\t\t<router-outlet name=\"jobboardfsoutlet\"></router-outlet>\n\t</div>\n\t<div [ngClass]=\"['container-fluid', fullScreen ? 'hideThis' : '']\" [style.font-size.px]=\"fontSize\">\n\t\t<div class=\"dontPrint\">\n\t\t\t<navbar-main style=\"width: 100%\" tourAnchor=\"navBarMain\" #navBarMain [logo]=\"logo\" [navTabs]=\"navTabs\" [fontSize]=\"fontSize\" [publicProgram]=\"publicProgram\"></navbar-main>\n\t\t</div>\n\t\t<ng-template ngbModalContainer></ng-template>\n\t\t<div class=\"row\">\n\t\t\t<div id=\"navSid\" *ngIf=\"showNavbarModule\" [ngClass]=\"['dontPrint', windowSizeWidth > 1200 && collapsableMenu ? 'navSidbar' : 'col-xl-1']\" [style.width]=\"windowSizeWidth > 1200 && collapsableMenu ? 40 + 'px' : 100 + '%'\" [style.margin-top.px]=\"windowSizeWidth > 1200 && collapsableMenu ? navbarMainHeight + statusHeight + connectedHeight : 0\" >\n\t\t\t\t<div class=\"openbtn\" *ngIf=\"windowSizeWidth > 1200 && collapsableMenu\" (mouseenter)=\"openNav()\"><span>MENU</span></div>\n\t\t\t\t<div [ngClass]=\"windowSizeWidth > 1200 && collapsableMenu ? 'sid_inr' : ''\">\n\t\t\t\t\t<navbar-module #navBarModule tourAnchor=\"navBarModule\" [sideNavWidth]=\"windowSizeWidth > 1200 && collapsableMenu ? '90%' : 'auto'\" [sideNavHeight]=\"windowSizeWidth > 1200 && collapsableMenu ? windowSizeHeight - navbarMainHeight - statusHeight - connectedHeight - (showNavigationMenu ? (54 + getNavbarModuleHeight()) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0) : ''\"></navbar-module>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div [id]=\"windowSizeWidth > 1200 ? 'main_cont' : 'main_cont_mobile'\" [ngClass]=\"[windowSizeWidth > 1200 && collapsableMenu ? 'col-xl-12' : 'col-xl-11']\" [style.padding-left]=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? 45 + 'px' : null\" [style.padding]=\"((isDevice && windowSizeWidth <= 1200) || !showNavbarModule) ? 0 + 'px' : null\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu && showNavbarModule ? closeNav() : null\" style=\"padding-right: 5px\">\n\t\t\t\t<div style=\"-webkit-overflow-scrolling: touch\" [style.overflow-y]=\"(isDevice && !showNavigationMenu) ? 'initial' : 'scroll'\" [style.height.px]=\"windowSizeHeight - ((isDevice && windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - (!publicProgram ? statusHeight : 0) - (!publicProgram ? connectedHeight : 0) - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"isDevice && showNavigationMenu\" style=\"height: 54px; background-color: lightgray; margin-left: -15px; margin-right: -15px;\" class=\"dontPrint\">\n\t\t\t<table style=\"width: 100%\">\n\t\t\t\t<tr>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushBackButton()\"><i class=\"fa fa-arrow-left\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushReloadButton()\"><i class=\"fa fa-refresh\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td style=\"text-align: center\">\n\t\t\t\t\t\t<button type=\"button\" class=\"btn\" style=\"background-color: lightgray\" (click)=\"onPushForwardButton()\"><i class=\"fa fa-arrow-right\" style=\"color: black; font-size: 20px\"></i></button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div *ngIf=\"!isDevice\" style=\"text-align: center; height: 20px; font-style: italic; font-weight: bold; background-color: lightgray; margin-left: -15px; margin-right: -15px;\">&copy; {{year}} RESOLVEIO ALL RIGHTS RESERVED</div>\n\t</div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$5.DeviceDetectorService }, { type: DialogService }, { type: ResizeService }, { type: ProviderService }, { type: OfflineManagerService }, { type: i1.LocalStorageService }, { type: AuthService }, { type: AuthPermissionService }]; }, propDecorators: { environment: [{
                 type: Input,
                 args: ['environment']
@@ -5291,9 +5313,9 @@ class JsonParsePipe {
         return JSON.stringify(parse, null, 2);
     }
 }
-JsonParsePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: JsonParsePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-JsonParsePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: JsonParsePipe, name: "jsonParse", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: JsonParsePipe, decorators: [{
+JsonParsePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: JsonParsePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+JsonParsePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: JsonParsePipe, name: "jsonParse", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: JsonParsePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'jsonParse',
@@ -5501,13 +5523,170 @@ class LoggerComponent extends BaseComponent {
         }, () => { });
     }
 }
-LoggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoggerComponent, deps: [{ token: ProviderService }, { token: DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LoggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LoggerComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n\t.label-accordion {\n\t\tfont-weight: bold;\n\t\tcolor: black;\n\t\tmargin-bottom: 0px;\n\t}\n\tngb-accordion {\n\t\twidth: 100%;\n\t}\n\t.hoverThis:hover {\n\t\tbackground: lightblue;\n\t\tcursor: pointer;\n\t}\n\t\n\t.fa-plus {\n\t\tcolor: black;\n\t}\n\t.fa-minus {\n\t\tcolor: black;\n\t}\n\t\n\t.selected {\n\t\tbackground-color: orange;\n\t}\n\t.selected:hover {\n\t\tcursor: pointer;\n\t}\n\t.card {\n\t\twidth: 100%;\n\t}\n</style>\n\n<div class=\"row\">\n\t<div class=\"col-lg-12\">\n\t\t<div class=\"card\">\n\t\t\t<div class=\"card-header\"><b>Filters</b></div>\n\t\t\t<div class=\"card-body\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t\t\t<responsive-button-group collapseSize=\"900\">\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') && selectedTypes.includes('document') && selectedTypes.includes('query') && selectedTypes.includes('client-request') && selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('all')\">All</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('error')\">Errors</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('document') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('document')\">Document</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('query') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('query')\">Query</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('queryResponse') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('queryResponse')\">Query Response</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-request') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-request')\">Client Requests</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-response')\">Client Responses</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('callMethodInternal') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('callMethodInternal')\">Call Method Internal</button>\n\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" (click)=\"removeAllLogs()\">REMOVE ALL LOGS</button>\n\t\t\t\t\t\t</responsive-button-group>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">User</label>\n\t\t\t\t\t\t<ng-select [(ngModel)]=\"user\" (change)=\"getLogData()\" placeholder=\"Select User\">\n\t\t\t\t\t\t\t<ng-option *ngFor=\"let user of users\" [value]=\"user.fullname\">{{user.fullname}}</ng-option>\n\t\t\t\t\t\t</ng-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Collection</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"collection\" (change)=\"getLogData()\" placeholder=\"Input Colls Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Method</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"method\" (change)=\"getLogData()\" placeholder=\"Input Methods Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Route</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"route\" (change)=\"getLogData()\" placeholder=\"Input Routes Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Document</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"id_document\" (change)=\"getLogData()\" placeholder=\"Input Ids Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date Start</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateStartElem\" ngbDatepicker #dStart=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-text\" (click)=\"dStart.toggle()\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time Start</label>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeStartElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date End</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateEndElem\" ngbDatepicker #dEnd=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-text\" (click)=\"dEnd.toggle()\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time End</label><br>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeEndElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-lg-8\">\n\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t<option value=\"10\">10</option>\n\t\t\t<option value=\"25\">25</option>\n\t\t\t<option value=\"50\">50</option>\n\t\t\t<option value=\"100\">100</option>\n\t\t\t<option value=\"250\">250</option>\n\t\t\t<option value=\"500\">500</option>\n\t\t\t<option value=\"1000\">1000</option>\n\t\t\t<option value=\"5000\">5000</option>\n\t\t</select>\n\t</div>\n\t<div class=\"col-lg-4\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<ngb-accordion #acc=\"ngbAccordion\" activeIds=\"\">\n\t\t<ngb-panel *ngFor=\"let log of logs; let i = index\" [id]=\"'log_' + i\">\n\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t<div> \n\t\t\t\t\t<label class=\"label-accordion\" style=\"width: 90%; height: 22px\">\n\t\t\t\t\t\t<strong class=\"pull-left\">Type: {{ log.type }}{{log.method ? ' - Method: ' + log.method : '' }}{{log.collection ? ' - Collection: ' + log.collection : '' }}{{log.user ? ' - User: ' + log.user : '' }}{{log.route ? ' - Route: ' + log.route : '' }}{{log.id_document ? ' - id_document: ' + log.id_document : '' }}{{log.messageId ? ' - messageId: ' + log.messageId : '' }}</strong>\n\t\t\t\t\t\t<p class=\"pull-right\">{{ log.createdAt | date : 'medium' }}</p>\n\t\t\t\t\t</label>\n\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('log_' + i)\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('log_' + i)\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t<div *ngIf=\"log.payload\">\n\t\t\t\t\t<pre>{{ log.payload | jsonParse }}</pre>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!log.payload\">\n\t\t\t\t\tNo Data\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</ngb-panel>\n\t</ngb-accordion>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<div class=\"col-lg-4\">\n\t\t<div class=\"row\"> \n\t\t\t<div class=\"col-lg-8\">\n\t\t\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t\t\t<option value=\"10\">10</option>\n\t\t\t\t\t<option value=\"25\">25</option>\n\t\t\t\t\t<option value=\"50\">50</option>\n\t\t\t\t\t<option value=\"100\">100</option>\n\t\t\t\t\t<option value=\"250\">250</option>\n\t\t\t\t\t<option value=\"500\">500</option>\n\t\t\t\t\t<option value=\"1000\">1000</option>\n\t\t\t\t\t<option value=\"5000\">5000</option>\n\t\t\t\t</select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"col-lg-8\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>", styles: ["\n\t.label-accordion {\n\t\tfont-weight: bold;\n\t\tcolor: black;\n\t\tmargin-bottom: 0px;\n\t}\n\tngb-accordion {\n\t\twidth: 100%;\n\t}\n\t.hoverThis:hover {\n\t\tbackground: lightblue;\n\t\tcursor: pointer;\n\t}\n\t\n\t.fa-plus {\n\t\tcolor: black;\n\t}\n\t.fa-minus {\n\t\tcolor: black;\n\t}\n\t\n\t.selected {\n\t\tbackground-color: orange;\n\t}\n\t.selected:hover {\n\t\tcursor: pointer;\n\t}\n\t.card {\n\t\twidth: 100%;\n\t}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "directive", type: i1$3.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "component", type: i1$3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "component", type: i4$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: JsonParsePipe, name: "jsonParse" }, { kind: "pipe", type: i7.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoggerComponent, decorators: [{
+LoggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoggerComponent, deps: [{ token: ProviderService }, { token: DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LoggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LoggerComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n\t.label-accordion {\n\t\tfont-weight: bold;\n\t\tcolor: black;\n\t\tmargin-bottom: 0px;\n\t}\n\tngb-accordion {\n\t\twidth: 100%;\n\t}\n\t.hoverThis:hover {\n\t\tbackground: lightblue;\n\t\tcursor: pointer;\n\t}\n\t\n\t.fa-plus {\n\t\tcolor: black;\n\t}\n\t.fa-minus {\n\t\tcolor: black;\n\t}\n\t\n\t.selected {\n\t\tbackground-color: orange;\n\t}\n\t.selected:hover {\n\t\tcursor: pointer;\n\t}\n\t.card {\n\t\twidth: 100%;\n\t}\n</style>\n\n<div class=\"row\">\n\t<div class=\"col-lg-12\">\n\t\t<div class=\"card\">\n\t\t\t<div class=\"card-header\"><b>Filters</b></div>\n\t\t\t<div class=\"card-body\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t\t\t<responsive-button-group collapseSize=\"900\">\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') && selectedTypes.includes('document') && selectedTypes.includes('query') && selectedTypes.includes('client-request') && selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('all')\">All</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('error')\">Errors</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('document') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('document')\">Document</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('query') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('query')\">Query</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('queryResponse') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('queryResponse')\">Query Response</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-request') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-request')\">Client Requests</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-response')\">Client Responses</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('callMethodInternal') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('callMethodInternal')\">Call Method Internal</button>\n\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" (click)=\"removeAllLogs()\">REMOVE ALL LOGS</button>\n\t\t\t\t\t\t</responsive-button-group>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">User</label>\n\t\t\t\t\t\t<ng-select [(ngModel)]=\"user\" (change)=\"getLogData()\" placeholder=\"Select User\">\n\t\t\t\t\t\t\t<ng-option *ngFor=\"let user of users\" [value]=\"user.fullname\">{{user.fullname}}</ng-option>\n\t\t\t\t\t\t</ng-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Collection</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"collection\" (change)=\"getLogData()\" placeholder=\"Input Colls Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Method</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"method\" (change)=\"getLogData()\" placeholder=\"Input Methods Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Route</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"route\" (change)=\"getLogData()\" placeholder=\"Input Routes Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Document</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"id_document\" (change)=\"getLogData()\" placeholder=\"Input Ids Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date Start</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateStartElem\" ngbDatepicker #dStart=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-append\" (click)=\"dStart.toggle()\">\n\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time Start</label>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeStartElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date End</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateEndElem\" ngbDatepicker #dEnd=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-append\" (click)=\"dEnd.toggle()\">\n\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time End</label><br>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeEndElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-lg-8\">\n\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t<option value=\"10\">10</option>\n\t\t\t<option value=\"25\">25</option>\n\t\t\t<option value=\"50\">50</option>\n\t\t\t<option value=\"100\">100</option>\n\t\t\t<option value=\"250\">250</option>\n\t\t\t<option value=\"500\">500</option>\n\t\t\t<option value=\"1000\">1000</option>\n\t\t\t<option value=\"5000\">5000</option>\n\t\t</select>\n\t</div>\n\t<div class=\"col-lg-4\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<ngb-accordion #acc=\"ngbAccordion\" activeIds=\"\">\n\t\t<ngb-panel *ngFor=\"let log of logs; let i = index\" [id]=\"'log_' + i\">\n\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t<div> \n\t\t\t\t\t<label class=\"label-accordion\" style=\"width: 90%; height: 22px\">\n\t\t\t\t\t\t<strong class=\"pull-left\">Type: {{ log.type }}{{log.method ? ' - Method: ' + log.method : '' }}{{log.collection ? ' - Collection: ' + log.collection : '' }}{{log.user ? ' - User: ' + log.user : '' }}{{log.route ? ' - Route: ' + log.route : '' }}{{log.id_document ? ' - id_document: ' + log.id_document : '' }}{{log.messageId ? ' - messageId: ' + log.messageId : '' }}</strong>\n\t\t\t\t\t\t<p class=\"pull-right\">{{ log.createdAt | date : 'medium' }}</p>\n\t\t\t\t\t</label>\n\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('log_' + i)\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('log_' + i)\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t<div *ngIf=\"log.payload\">\n\t\t\t\t\t<pre>{{ log.payload | jsonParse }}</pre>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!log.payload\">\n\t\t\t\t\tNo Data\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</ngb-panel>\n\t</ngb-accordion>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<div class=\"col-lg-4\">\n\t\t<div class=\"row\"> \n\t\t\t<div class=\"col-lg-8\">\n\t\t\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t\t\t<option value=\"10\">10</option>\n\t\t\t\t\t<option value=\"25\">25</option>\n\t\t\t\t\t<option value=\"50\">50</option>\n\t\t\t\t\t<option value=\"100\">100</option>\n\t\t\t\t\t<option value=\"250\">250</option>\n\t\t\t\t\t<option value=\"500\">500</option>\n\t\t\t\t\t<option value=\"1000\">1000</option>\n\t\t\t\t\t<option value=\"5000\">5000</option>\n\t\t\t\t</select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"col-lg-8\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>", styles: ["\n\t.label-accordion {\n\t\tfont-weight: bold;\n\t\tcolor: black;\n\t\tmargin-bottom: 0px;\n\t}\n\tngb-accordion {\n\t\twidth: 100%;\n\t}\n\t.hoverThis:hover {\n\t\tbackground: lightblue;\n\t\tcursor: pointer;\n\t}\n\t\n\t.fa-plus {\n\t\tcolor: black;\n\t}\n\t.fa-minus {\n\t\tcolor: black;\n\t}\n\t\n\t.selected {\n\t\tbackground-color: orange;\n\t}\n\t.selected:hover {\n\t\tcursor: pointer;\n\t}\n\t.card {\n\t\twidth: 100%;\n\t}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "directive", type: i1$3.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "component", type: i1$3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "component", type: i4$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: JsonParsePipe, name: "jsonParse" }, { kind: "pipe", type: i7.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoggerComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n\t.label-accordion {\n\t\tfont-weight: bold;\n\t\tcolor: black;\n\t\tmargin-bottom: 0px;\n\t}\n\tngb-accordion {\n\t\twidth: 100%;\n\t}\n\t.hoverThis:hover {\n\t\tbackground: lightblue;\n\t\tcursor: pointer;\n\t}\n\t\n\t.fa-plus {\n\t\tcolor: black;\n\t}\n\t.fa-minus {\n\t\tcolor: black;\n\t}\n\t\n\t.selected {\n\t\tbackground-color: orange;\n\t}\n\t.selected:hover {\n\t\tcursor: pointer;\n\t}\n\t.card {\n\t\twidth: 100%;\n\t}\n</style>\n\n<div class=\"row\">\n\t<div class=\"col-lg-12\">\n\t\t<div class=\"card\">\n\t\t\t<div class=\"card-header\"><b>Filters</b></div>\n\t\t\t<div class=\"card-body\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t\t\t<responsive-button-group collapseSize=\"900\">\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') && selectedTypes.includes('document') && selectedTypes.includes('query') && selectedTypes.includes('client-request') && selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('all')\">All</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('error')\">Errors</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('document') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('document')\">Document</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('query') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('query')\">Query</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('queryResponse') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('queryResponse')\">Query Response</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-request') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-request')\">Client Requests</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-response')\">Client Responses</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('callMethodInternal') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('callMethodInternal')\">Call Method Internal</button>\n\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" (click)=\"removeAllLogs()\">REMOVE ALL LOGS</button>\n\t\t\t\t\t\t</responsive-button-group>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">User</label>\n\t\t\t\t\t\t<ng-select [(ngModel)]=\"user\" (change)=\"getLogData()\" placeholder=\"Select User\">\n\t\t\t\t\t\t\t<ng-option *ngFor=\"let user of users\" [value]=\"user.fullname\">{{user.fullname}}</ng-option>\n\t\t\t\t\t\t</ng-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Collection</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"collection\" (change)=\"getLogData()\" placeholder=\"Input Colls Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Method</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"method\" (change)=\"getLogData()\" placeholder=\"Input Methods Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Route</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"route\" (change)=\"getLogData()\" placeholder=\"Input Routes Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Document</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"id_document\" (change)=\"getLogData()\" placeholder=\"Input Ids Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date Start</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateStartElem\" ngbDatepicker #dStart=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-text\" (click)=\"dStart.toggle()\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time Start</label>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeStartElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date End</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateEndElem\" ngbDatepicker #dEnd=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-text\" (click)=\"dEnd.toggle()\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time End</label><br>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeEndElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-lg-8\">\n\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t<option value=\"10\">10</option>\n\t\t\t<option value=\"25\">25</option>\n\t\t\t<option value=\"50\">50</option>\n\t\t\t<option value=\"100\">100</option>\n\t\t\t<option value=\"250\">250</option>\n\t\t\t<option value=\"500\">500</option>\n\t\t\t<option value=\"1000\">1000</option>\n\t\t\t<option value=\"5000\">5000</option>\n\t\t</select>\n\t</div>\n\t<div class=\"col-lg-4\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<ngb-accordion #acc=\"ngbAccordion\" activeIds=\"\">\n\t\t<ngb-panel *ngFor=\"let log of logs; let i = index\" [id]=\"'log_' + i\">\n\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t<div> \n\t\t\t\t\t<label class=\"label-accordion\" style=\"width: 90%; height: 22px\">\n\t\t\t\t\t\t<strong class=\"pull-left\">Type: {{ log.type }}{{log.method ? ' - Method: ' + log.method : '' }}{{log.collection ? ' - Collection: ' + log.collection : '' }}{{log.user ? ' - User: ' + log.user : '' }}{{log.route ? ' - Route: ' + log.route : '' }}{{log.id_document ? ' - id_document: ' + log.id_document : '' }}{{log.messageId ? ' - messageId: ' + log.messageId : '' }}</strong>\n\t\t\t\t\t\t<p class=\"pull-right\">{{ log.createdAt | date : 'medium' }}</p>\n\t\t\t\t\t</label>\n\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('log_' + i)\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('log_' + i)\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t<div *ngIf=\"log.payload\">\n\t\t\t\t\t<pre>{{ log.payload | jsonParse }}</pre>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!log.payload\">\n\t\t\t\t\tNo Data\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</ngb-panel>\n\t</ngb-accordion>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<div class=\"col-lg-4\">\n\t\t<div class=\"row\"> \n\t\t\t<div class=\"col-lg-8\">\n\t\t\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t\t\t<option value=\"10\">10</option>\n\t\t\t\t\t<option value=\"25\">25</option>\n\t\t\t\t\t<option value=\"50\">50</option>\n\t\t\t\t\t<option value=\"100\">100</option>\n\t\t\t\t\t<option value=\"250\">250</option>\n\t\t\t\t\t<option value=\"500\">500</option>\n\t\t\t\t\t<option value=\"1000\">1000</option>\n\t\t\t\t\t<option value=\"5000\">5000</option>\n\t\t\t\t</select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"col-lg-8\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>" }]
+            args: [{ providers: [ProviderService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n\t.label-accordion {\n\t\tfont-weight: bold;\n\t\tcolor: black;\n\t\tmargin-bottom: 0px;\n\t}\n\tngb-accordion {\n\t\twidth: 100%;\n\t}\n\t.hoverThis:hover {\n\t\tbackground: lightblue;\n\t\tcursor: pointer;\n\t}\n\t\n\t.fa-plus {\n\t\tcolor: black;\n\t}\n\t.fa-minus {\n\t\tcolor: black;\n\t}\n\t\n\t.selected {\n\t\tbackground-color: orange;\n\t}\n\t.selected:hover {\n\t\tcursor: pointer;\n\t}\n\t.card {\n\t\twidth: 100%;\n\t}\n</style>\n\n<div class=\"row\">\n\t<div class=\"col-lg-12\">\n\t\t<div class=\"card\">\n\t\t\t<div class=\"card-header\"><b>Filters</b></div>\n\t\t\t<div class=\"card-body\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t\t\t<responsive-button-group collapseSize=\"900\">\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') && selectedTypes.includes('document') && selectedTypes.includes('query') && selectedTypes.includes('client-request') && selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('all')\">All</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('error') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('error')\">Errors</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('document') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('document')\">Document</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('query') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('query')\">Query</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('queryResponse') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('queryResponse')\">Query Response</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-request') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-request')\">Client Requests</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('client-response') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('client-response')\">Client Responses</button>\n\t\t\t\t\t\t\t<button type=\"button\" [ngClass]=\"['btn', selectedTypes.includes('callMethodInternal') ? 'btn-success' : 'btn-warning']\" (click)=\"selectType('callMethodInternal')\">Call Method Internal</button>\n\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" (click)=\"removeAllLogs()\">REMOVE ALL LOGS</button>\n\t\t\t\t\t\t</responsive-button-group>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">User</label>\n\t\t\t\t\t\t<ng-select [(ngModel)]=\"user\" (change)=\"getLogData()\" placeholder=\"Select User\">\n\t\t\t\t\t\t\t<ng-option *ngFor=\"let user of users\" [value]=\"user.fullname\">{{user.fullname}}</ng-option>\n\t\t\t\t\t\t</ng-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Collection</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"collection\" (change)=\"getLogData()\" placeholder=\"Input Colls Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Method</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"method\" (change)=\"getLogData()\" placeholder=\"Input Methods Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Route</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"route\" (change)=\"getLogData()\" placeholder=\"Input Routes Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-2\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Document</label>\n\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"id_document\" (change)=\"getLogData()\" placeholder=\"Input Ids Sep By , & ! for !Not\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"row\" style=\"margin-top: 10px;\">\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date Start</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateStartElem\" ngbDatepicker #dStart=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-append\" (click)=\"dStart.toggle()\">\n\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time Start</label>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeStartElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Date End</label>\n\t\t\t\t\t\t<div class=\"input-group\">\n\t\t\t\t\t\t\t<input class=\"form-control\" [(ngModel)]=\"dateEndElem\" ngbDatepicker #dEnd=\"ngbDatepicker\" (change)=\"getLogData()\">\n\t\t\t\t\t\t\t<div class=\"input-group-append\" (click)=\"dEnd.toggle()\">\n\t\t\t\t\t\t\t\t<div class=\"input-group-text\">\n\t\t\t\t\t\t\t\t\t<i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-lg-3\">\n\t\t\t\t\t\t<label class=\"form-control-label\">Time End</label><br>\n\t\t\t\t\t\t<ngb-timepicker [(ngModel)]=\"timeEndElem\" meridian=\"ON\" [seconds]=\"true\" (change)=\"getLogData()\"></ngb-timepicker>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-lg-8\">\n\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t<option value=\"10\">10</option>\n\t\t\t<option value=\"25\">25</option>\n\t\t\t<option value=\"50\">50</option>\n\t\t\t<option value=\"100\">100</option>\n\t\t\t<option value=\"250\">250</option>\n\t\t\t<option value=\"500\">500</option>\n\t\t\t<option value=\"1000\">1000</option>\n\t\t\t<option value=\"5000\">5000</option>\n\t\t</select>\n\t</div>\n\t<div class=\"col-lg-4\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<ngb-accordion #acc=\"ngbAccordion\" activeIds=\"\">\n\t\t<ngb-panel *ngFor=\"let log of logs; let i = index\" [id]=\"'log_' + i\">\n\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t<div> \n\t\t\t\t\t<label class=\"label-accordion\" style=\"width: 90%; height: 22px\">\n\t\t\t\t\t\t<strong class=\"pull-left\">Type: {{ log.type }}{{log.method ? ' - Method: ' + log.method : '' }}{{log.collection ? ' - Collection: ' + log.collection : '' }}{{log.user ? ' - User: ' + log.user : '' }}{{log.route ? ' - Route: ' + log.route : '' }}{{log.id_document ? ' - id_document: ' + log.id_document : '' }}{{log.messageId ? ' - messageId: ' + log.messageId : '' }}</strong>\n\t\t\t\t\t\t<p class=\"pull-right\">{{ log.createdAt | date : 'medium' }}</p>\n\t\t\t\t\t</label>\n\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('log_' + i)\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('log_' + i)\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t<div *ngIf=\"log.payload\">\n\t\t\t\t\t<pre>{{ log.payload | jsonParse }}</pre>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!log.payload\">\n\t\t\t\t\tNo Data\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</ngb-panel>\n\t</ngb-accordion>\n</div>\n<div class=\"row\" style=\"margin-top: 10px\">\n\t<div class=\"col-lg-4\">\n\t\t<div class=\"row\"> \n\t\t\t<div class=\"col-lg-8\">\n\t\t\t\t<label class=\"form-control-label\">Entries Per Page</label>\n\t\t\t\t<select class=\"form-control\" [(ngModel)]=\"entries_per_page\" (change)=\"getLogData()\">\n\t\t\t\t\t<option value=\"10\">10</option>\n\t\t\t\t\t<option value=\"25\">25</option>\n\t\t\t\t\t<option value=\"50\">50</option>\n\t\t\t\t\t<option value=\"100\">100</option>\n\t\t\t\t\t<option value=\"250\">250</option>\n\t\t\t\t\t<option value=\"500\">500</option>\n\t\t\t\t\t<option value=\"1000\">1000</option>\n\t\t\t\t\t<option value=\"5000\">5000</option>\n\t\t\t\t</select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"col-lg-8\">\n\t\t<ngb-pagination class=\"float-right\"\n\t\tboundaryLinks=\"true\"\n\t\t[collectionSize]=\"log_cnt\"\n\t\tdirectionLinks=\"true\"\n\t\tellipses=\"false\"\n\t\t[(page)]=\"page_num\"\n\t\tmaxSize=\"6\"\n\t\t[pageSize]=\"entries_per_page\"\n\t\trotate=\"true\"\n\t\t(pageChange)=\"getLogData()\"\n\t\t>\n\t\t</ngb-pagination>\n\t</div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ProviderService }, { type: DialogService }, { type: i0.ChangeDetectorRef }]; } });
 
+class AuthGuard {
+    constructor(_router, _auth, _ds, _account, _app, _offline, _aps, _alert) {
+        this._router = _router;
+        this._auth = _auth;
+        this._ds = _ds;
+        this._account = _account;
+        this._app = _app;
+        this._offline = _offline;
+        this._aps = _aps;
+        this._alert = _alert;
+    }
+    canActivate(route, state) {
+        return new Promise((resolve) => {
+            this._account.isInitCompleted().then(() => {
+                let user = this._account.getUser();
+                if (!user) {
+                    user = JSON.parse(this._offline.getUser(), dateReviver);
+                    if (user) {
+                        this._account.setUser(user);
+                    }
+                }
+                if (!user) {
+                    if (navigator.onLine) {
+                        this._auth.loginUser().then(newUser => {
+                            this._account.isLoginCompleted().then(() => {
+                                user = this._account.getUser();
+                                if (!user.active) {
+                                    this._router.navigateByUrl('/home');
+                                    resolve(false);
+                                }
+                                else {
+                                    let pageView = state.url.replace(/\/[a-f0-9]{24}$/, '').replace(/\?.+$/, ''); //All but ID and Query String
+                                    let moduleView = pageView.replace(/([^\/]+\/?$)/, '');
+                                    if (user.roles.super_admin) {
+                                        resolve(true);
+                                    }
+                                    else {
+                                        let done = false;
+                                        while (!done && pageView.split('/').length > 2) {
+                                            if (!this.isLinkFakeRoute(pageView)) {
+                                                if (!user.roles.groups.some(a => a.views.some(b => b === pageView))) {
+                                                    if (user.roles.groups.some(a => a.views.some(b => b.startsWith(moduleView) && !this.doesLinkHaveParameter(b) && !this.isLinkFakeRoute(b)))) {
+                                                        let link = user.roles.groups.filter(a => a.views.some(b => b.startsWith(moduleView) && !this.doesLinkHaveParameter(b) && !this.isLinkFakeRoute(b)))[0].views.filter(a => a.startsWith(moduleView) && !this.doesLinkHaveParameter(a) && !this.isLinkFakeRoute(a))[0];
+                                                        done = true;
+                                                        this._router.navigateByUrl(link);
+                                                        resolve(false);
+                                                    }
+                                                }
+                                                else {
+                                                    done = true;
+                                                    resolve(true);
+                                                }
+                                            }
+                                            moduleView = moduleView.replace(/([^\/]+\/?$)/, '');
+                                            pageView = pageView.replace(/(\/[^\/]+$)/, '');
+                                        }
+                                        if (!done) {
+                                            this._router.navigateByUrl('/home');
+                                            resolve(false);
+                                        }
+                                    }
+                                }
+                            });
+                        }, () => {
+                            this._router.navigateByUrl('/home');
+                            resolve(false);
+                        });
+                    }
+                    else {
+                        resolve(true);
+                    }
+                }
+                else {
+                    if (!user.active) {
+                        this._router.navigateByUrl('/home');
+                        resolve(false);
+                    }
+                    else {
+                        let pageView = state.url.replace(/\/[a-f0-9]{24}$/, '').replace(/\?.+$/, ''); //All but ID and Query String
+                        let moduleView = pageView.replace(/([^\/]+\/?$)/, '');
+                        if (user.roles.super_admin) {
+                            resolve(true);
+                        }
+                        else {
+                            let done = false;
+                            while (!done && pageView.split('/').length > 2) {
+                                if (!this.isLinkFakeRoute(pageView)) {
+                                    if (!user.roles.groups.some(a => a.views.some(b => b === pageView))) {
+                                        if (user.roles.groups.some(a => a.views.some(b => b.startsWith(moduleView) && !this.doesLinkHaveParameter(b) && !this.isLinkFakeRoute(b)))) {
+                                            let link = user.roles.groups.filter(a => a.views.some(b => b.startsWith(moduleView) && !this.doesLinkHaveParameter(b) && !this.isLinkFakeRoute(b)))[0].views.filter(a => a.startsWith(moduleView) && !this.doesLinkHaveParameter(a) && !this.isLinkFakeRoute(a))[0];
+                                            done = true;
+                                            this._router.navigateByUrl(link);
+                                            resolve(false);
+                                        }
+                                    }
+                                    else {
+                                        done = true;
+                                        resolve(true);
+                                    }
+                                }
+                                moduleView = moduleView.replace(/([^\/]+\/?$)/, '');
+                                pageView = pageView.replace(/(\/[^\/]+$)/, '');
+                            }
+                            if (!done) {
+                                this._router.navigateByUrl('/home');
+                                resolve(false);
+                            }
+                        }
+                    }
+                }
+            }, () => { });
+        });
+    }
+    doesLinkHaveParameter(link) {
+        let permissions = this._aps.getAllModulePermissions();
+        for (let i = 0; i < permissions.length; i++) {
+            let permission = permissions[i];
+            for (let j = 0; j < permission.views.length; j++) {
+                let view = permission.views[j];
+                if (view.link === link) {
+                    return !!view.has_parameter;
+                }
+            }
+        }
+        return false;
+    }
+    isLinkFakeRoute(link) {
+        let permissions = this._aps.getAllModulePermissions();
+        for (let i = 0; i < permissions.length; i++) {
+            let permission = permissions[i];
+            for (let j = 0; j < permission.views.length; j++) {
+                let view = permission.views[j];
+                if (view.link === link) {
+                    return !!view.fake_route;
+                }
+            }
+        }
+        return true;
+    }
+}
+AuthGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuard, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: DialogService }, { token: AccountManagerService }, { token: CoreService }, { token: OfflineManagerService }, { token: AuthPermissionService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuard });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AuthGuard, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: AuthService }, { type: DialogService }, { type: AccountManagerService }, { type: CoreService }, { type: OfflineManagerService }, { type: AuthPermissionService }, { type: AlertService }]; } });
+
+class CanDeactivateGuard {
+    canDeactivate(component) {
+        return component.canDeactivate ? component.canDeactivate() : true;
+    }
+}
+CanDeactivateGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CanDeactivateGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CanDeactivateGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CanDeactivateGuard });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CanDeactivateGuard, decorators: [{
+            type: Injectable
+        }] });
+
 function getWindow() {
     return window;
 }
@@ -5516,9 +5695,9 @@ class WindowRefService {
         return getWindow();
     }
 }
-WindowRefService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-WindowRefService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRefService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WindowRefService, decorators: [{
+WindowRefService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WindowRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WindowRefService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WindowRefService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WindowRefService, decorators: [{
             type: Injectable
         }] });
 
@@ -5531,9 +5710,9 @@ class UserRoleComponent extends BaseComponent {
         return this._services._account.isUserInView(this.role);
     }
 }
-UserRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserRoleComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-UserRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: UserRoleComponent, selector: "user-role", inputs: { role: "role" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<ng-container *ngIf="userInRole()"><ng-content></ng-content></ng-container>', isInline: true, dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserRoleComponent, decorators: [{
+UserRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserRoleComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+UserRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserRoleComponent, selector: "user-role", inputs: { role: "role" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<ng-container *ngIf="userInRole()"><ng-content></ng-content></ng-container>', isInline: true, dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserRoleComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [ProviderService],
@@ -5546,10 +5725,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class UserRoleModule {
 }
-UserRoleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserRoleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UserRoleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UserRoleModule, declarations: [UserRoleComponent], imports: [CommonModule], exports: [UserRoleComponent] });
-UserRoleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserRoleModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserRoleModule, decorators: [{
+UserRoleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserRoleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UserRoleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserRoleModule, declarations: [UserRoleComponent], imports: [CommonModule], exports: [UserRoleComponent] });
+UserRoleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserRoleModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserRoleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5566,12 +5745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class FormButtonModule {
 }
-FormButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FormButtonModule, declarations: [FormButtonComponent], imports: [CommonModule,
+FormButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FormButtonModule, declarations: [FormButtonComponent], imports: [CommonModule,
         NgbTooltipModule], exports: [FormButtonComponent] });
-FormButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormButtonModule, imports: [CommonModule,
+FormButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormButtonModule, imports: [CommonModule,
         NgbTooltipModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5589,10 +5768,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class ResponsiveButtonGroupModule {
 }
-ResponsiveButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResponsiveButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ResponsiveButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ResponsiveButtonGroupModule, declarations: [ResponsiveButtonGroupComponent], imports: [CommonModule], exports: [ResponsiveButtonGroupComponent] });
-ResponsiveButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResponsiveButtonGroupModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResponsiveButtonGroupModule, decorators: [{
+ResponsiveButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResponsiveButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ResponsiveButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ResponsiveButtonGroupModule, declarations: [ResponsiveButtonGroupComponent], imports: [CommonModule], exports: [ResponsiveButtonGroupComponent] });
+ResponsiveButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResponsiveButtonGroupModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResponsiveButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5609,14 +5788,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class CollapseTableModule {
 }
-CollapseTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapseTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CollapseTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CollapseTableModule, declarations: [CollapseTableComponent], imports: [FormsModule,
+CollapseTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollapseTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CollapseTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CollapseTableModule, declarations: [CollapseTableComponent], imports: [FormsModule,
         CommonModule], exports: [CollapseTableComponent] });
-CollapseTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapseTableModule, providers: [
+CollapseTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollapseTableModule, providers: [
         ResizeService
     ], imports: [FormsModule,
         CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapseTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CollapseTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5671,9 +5850,9 @@ class PhonePipe {
         return (country + ' (' + city + ') ' + number).trim();
     }
 }
-PhonePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PhonePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, name: "phone" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, decorators: [{
+PhonePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhonePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PhonePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PhonePipe, name: "phone" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhonePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'phone'
@@ -5686,9 +5865,9 @@ class ReversePipe {
         return value.slice(0).reverse();
     }
 }
-ReversePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ReversePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ReversePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ReversePipe, name: "reverse" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ReversePipe, decorators: [{
+ReversePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReversePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ReversePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ReversePipe, name: "reverse" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReversePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'reverse'
@@ -5700,9 +5879,9 @@ class MinusCurrencyPipe {
         return value.charAt(0) === '-' ? '(' + value.substring(1, value.length) + ')' : value;
     }
 }
-MinusCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MinusCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MinusCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MinusCurrencyPipe, name: "minusCurrency" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MinusCurrencyPipe, decorators: [{
+MinusCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinusCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MinusCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MinusCurrencyPipe, name: "minusCurrency" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MinusCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'minusCurrency'
@@ -5724,9 +5903,9 @@ class DomSanitizorPipe {
         }
     }
 }
-DomSanitizorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DomSanitizorPipe, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-DomSanitizorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DomSanitizorPipe, name: "safe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DomSanitizorPipe, decorators: [{
+DomSanitizorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DomSanitizorPipe, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+DomSanitizorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DomSanitizorPipe, name: "safe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DomSanitizorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safe'
@@ -5743,9 +5922,9 @@ class TitleCaseAndUnderscorePipe {
         return strArray.join(' ');
     }
 }
-TitleCaseAndUnderscorePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleCaseAndUnderscorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TitleCaseAndUnderscorePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TitleCaseAndUnderscorePipe, name: "titleCase", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleCaseAndUnderscorePipe, decorators: [{
+TitleCaseAndUnderscorePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TitleCaseAndUnderscorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TitleCaseAndUnderscorePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TitleCaseAndUnderscorePipe, name: "titleCase", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TitleCaseAndUnderscorePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'titleCase',
@@ -5755,8 +5934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class PipeModule {
 }
-PipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PipeModule, declarations: [FilterEqualPipe,
+PipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PipeModule, declarations: [FilterEqualPipe,
         FilterNotEqualPipe,
         PhonePipe,
         ReversePipe,
@@ -5771,8 +5950,8 @@ PipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         DomSanitizorPipe,
         TitleCaseAndUnderscorePipe,
         JsonParsePipe] });
-PipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PipeModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PipeModule, decorators: [{
+PipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PipeModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5799,6 +5978,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class SortTableDirective {
+    get direction() { return this._direction; }
+    set direction(direction) {
+        if (direction && direction !== -1 && direction !== 1) {
+            throw Error(direction + ' is not a valid sort direction (0 or 1).');
+        }
+        this._direction = direction;
+    }
     // @HostBinding('class') elementClass = '';
     constructor(element) {
         this.element = element;
@@ -5824,13 +6010,6 @@ class SortTableDirective {
         // 	this.elementClass = 'collapseTable';
         // }
     }
-    get direction() { return this._direction; }
-    set direction(direction) {
-        if (direction && direction !== -1 && direction !== 1) {
-            throw Error(direction + ' is not a valid sort direction (0 or 1).');
-        }
-        this._direction = direction;
-    }
     register(sortable) {
         if (!sortable.id) {
             throw Error('CTSortHeader must be provided with a unique id');
@@ -5940,9 +6119,9 @@ class SortTableDirective {
         this._stateChanges.complete();
     }
 }
-SortTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SortTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SortTableDirective, selector: "[sortable]", inputs: { active: ["sortActive", "active"], start: ["sortStart", "start"], disabled: ["sortDisabled", "disabled"], tableFixed: "tableFixed", headerFixed: "headerFixed", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor" }, outputs: { sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableDirective, decorators: [{
+SortTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SortTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SortTableDirective, selector: "[sortable]", inputs: { active: ["sortActive", "active"], start: ["sortStart", "start"], disabled: ["sortDisabled", "disabled"], tableFixed: "tableFixed", headerFixed: "headerFixed", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor" }, outputs: { sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sortable]'
@@ -6012,9 +6191,9 @@ class SortTableHeaderComponent {
         this._sort.sort(this);
     }
 }
-SortTableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SortTableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SortTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SortTableHeaderComponent, selector: "[sort-table-header]", inputs: { disabled: "disabled", id: ["sort-table-header", "id"], arrowPosition: "arrowPosition", start: "start" }, ngImport: i0, template: "<div (click)=\"onClick($event)\">\n    <ng-content></ng-content>\n    <i *ngIf=\"_isSorted() && _getSortDirection() === -1\" class=\"fa fa-arrow-down\" style=\"margin-left: 10px; font-size: 14px\"></i>\n    <i *ngIf=\"_isSorted() && _getSortDirection() === 1\" class=\"fa fa-arrow-up\" style=\"margin-left: 10px; font-size: 14px\"></i>\n</div>", dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableHeaderComponent, decorators: [{
+SortTableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SortTableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SortTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SortTableHeaderComponent, selector: "[sort-table-header]", inputs: { disabled: "disabled", id: ["sort-table-header", "id"], arrowPosition: "arrowPosition", start: "start" }, ngImport: i0, template: "<div (click)=\"onClick($event)\">\n    <ng-content></ng-content>\n    <i *ngIf=\"_isSorted() && _getSortDirection() === -1\" class=\"fa fa-arrow-down\" style=\"margin-left: 10px; font-size: 14px\"></i>\n    <i *ngIf=\"_isSorted() && _getSortDirection() === 1\" class=\"fa fa-arrow-up\" style=\"margin-left: 10px; font-size: 14px\"></i>\n</div>", dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: '[sort-table-header]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], template: "<div (click)=\"onClick($event)\">\n    <ng-content></ng-content>\n    <i *ngIf=\"_isSorted() && _getSortDirection() === -1\" class=\"fa fa-arrow-down\" style=\"margin-left: 10px; font-size: 14px\"></i>\n    <i *ngIf=\"_isSorted() && _getSortDirection() === 1\" class=\"fa fa-arrow-up\" style=\"margin-left: 10px; font-size: 14px\"></i>\n</div>" }]
         }], ctorParameters: function () {
@@ -6059,9 +6238,9 @@ class SortTableNgForComponent {
         this.sortSub$.unsubscribe();
     }
 }
-SortTableNgForComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableNgForComponent, deps: [{ token: SortTableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SortTableNgForComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SortTableNgForComponent, selector: "[sort-table-ngfor]", inputs: { data: ["sort-table-ngfor", "data"] }, outputs: { dataChanged: "dataChanged" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableNgForComponent, decorators: [{
+SortTableNgForComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableNgForComponent, deps: [{ token: SortTableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SortTableNgForComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SortTableNgForComponent, selector: "[sort-table-ngfor]", inputs: { data: ["sort-table-ngfor", "data"] }, outputs: { dataChanged: "dataChanged" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableNgForComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[sort-table-ngfor]',
@@ -6080,16 +6259,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SortTableModule {
 }
-SortTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SortTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SortTableModule, declarations: [SortTableDirective,
+SortTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SortTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SortTableModule, declarations: [SortTableDirective,
         SortTableHeaderComponent,
         SortTableNgForComponent], imports: [FormsModule,
         CommonModule], exports: [SortTableDirective,
         SortTableHeaderComponent,
         SortTableNgForComponent] });
-SortTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableModule, imports: [FormsModule,
+SortTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableModule, imports: [FormsModule,
         CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SortTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6111,8 +6290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SharedModule {
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SharedModule, imports: [ReactiveFormsModule,
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [ReactiveFormsModule,
         FormsModule,
         CollapseTableModule,
         RouterModule,
@@ -6135,7 +6314,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         NgSelectModule,
         SortTableModule,
         CommonModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SharedModule, imports: [ReactiveFormsModule,
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [ReactiveFormsModule,
         FormsModule,
         CollapseTableModule,
         RouterModule,
@@ -6158,7 +6337,7 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         NgSelectModule,
         SortTableModule,
         CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6252,11 +6431,11 @@ class ForgotPasswordComponent extends BaseComponent {
         this._services._router.navigateByUrl('/home');
     }
 }
-ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ProviderService }, { token: i4.HttpClient }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ForgotPasswordComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', (form.controls.password.valid && form.valid) ? 'is-valid'  : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid ? 'is-valid'  : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>", styles: ["\n    input {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
+ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ProviderService }, { token: i4.HttpClient }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ForgotPasswordComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', (form.controls.password.valid && form.valid) ? 'is-valid'  : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid ? 'is-valid'  : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>", styles: ["\n    input {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', (form.controls.password.valid && form.valid) ? 'is-valid'  : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid ? 'is-valid'  : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>" }]
+            args: [{ providers: [ProviderService], template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', (form.controls.password.valid && form.valid) ? 'is-valid'  : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid ? 'is-valid'  : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: ProviderService }, { type: i4.HttpClient }, { type: DialogService }]; } });
 
 class EnrollComponent extends BaseComponent {
@@ -6318,11 +6497,11 @@ class EnrollComponent extends BaseComponent {
         });
     }
 }
-EnrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EnrollComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ProviderService }, { token: i4.HttpClient }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-EnrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: EnrollComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>", styles: ["\n    input {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EnrollComponent, decorators: [{
+EnrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EnrollComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ProviderService }, { token: i4.HttpClient }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+EnrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EnrollComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>", styles: ["\n    input {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EnrollComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>" }]
+            args: [{ providers: [ProviderService], template: "<style>\n    input {\n        width: 100%;\n    }\n</style>\n\n<div *ngIf=\"user\">\n\t<h4>Welcome to ResolveIO.<br><br>Your username will be {{user.username}}. Please create a password for your account.</h4>\n\t<form [formGroup]=\"form\" novalidate (ngSubmit)=\"submit()\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Username</label>\n\t\t\t\t\t<div>{{user.username}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.controls.password.hasError('minlength') || form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.password.hasError('minlength')\">Password must be 6 or more characters</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"!form.controls.password.hasError('minlength') && form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label class=\"form-control-label\">Confirm Password</label>\n\t\t\t\t\t<em *ngIf=\"form.controls.confirm_password.hasError('required')\">- Required</em>\n\t\t\t\t\t<em *ngIf=\"form.hasError('matchPassword')\">- Invalid</em>\n\t\t\t\t\t<input type=\"text\" [ngClass]=\"['form-control', form.controls.confirm_password.valid && !form.hasError('matchPassword') ? 'is-valid' : 'is-invalid']\" formControlName=\"confirm_password\" type=\"password\" autocomplete=\"new-password\">\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.controls.confirm_password.hasError('required')\">Password is required</div>\n\t\t\t\t\t<div class=\"invalid-feedback\" *ngIf=\"form.hasError('matchPassword')\" align=\"start\">Passwords do not match</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\" style=\"margin-top: 30px;\">\n\t\t\t<div class=\"col-lg-12\">\n\t\t\t\t<form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: ProviderService }, { type: i4.HttpClient }, { type: DialogService }]; } });
 
 class Auth365Component extends BaseComponent {
@@ -6344,9 +6523,9 @@ class Auth365Component extends BaseComponent {
         }
     }
 }
-Auth365Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Auth365Component, deps: [{ token: CoreService }, { token: i1$2.ActivatedRoute }, { token: ProviderService }, { token: i4.HttpClient }, { token: DialogService }, { token: SocketManagerService }], target: i0.ɵɵFactoryTarget.Component });
-Auth365Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Auth365Component, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Auth365Component, decorators: [{
+Auth365Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Auth365Component, deps: [{ token: CoreService }, { token: i1$2.ActivatedRoute }, { token: ProviderService }, { token: i4.HttpClient }, { token: DialogService }, { token: SocketManagerService }], target: i0.ɵɵFactoryTarget.Component });
+Auth365Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: Auth365Component, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Auth365Component, decorators: [{
             type: Component,
             args: [{
                     providers: [ProviderService],
@@ -6357,7 +6536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 const UserSettingsModulePermission = {
     name: 'user-settings',
     views: [
-        { link: '/user-settings/settings', label: 'Settings', has_parameter: false }
+        { link: '/user-settings/settings', label: 'Settings' }
     ],
     approval: {
         type: 'user-settings'
@@ -6372,9 +6551,9 @@ class UserSettingsService {
         this.selectedUser.next(id);
     }
 }
-UserSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UserSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsService, decorators: [{
+UserSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UserSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -6417,9 +6596,9 @@ class UserSettingsComponent extends BaseComponent {
         this._services._app.setNavbarModuleData(this.menuData);
     }
 }
-UserSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsComponent, deps: [{ token: UserSettingsService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-UserSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: UserSettingsComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsComponent, decorators: [{
+UserSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsComponent, deps: [{ token: UserSettingsService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+UserSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserSettingsComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [ProviderService],
@@ -6688,11 +6867,11 @@ class UsersSettingsComponent extends BaseComponent {
         });
     }
 }
-UsersSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UsersSettingsComponent, deps: [{ token: AuthPermissionService }, { token: UserSettingsService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-UsersSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: UsersSettingsComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: #ffffff;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    .btn-warning {\n        color: var(--warning-font-color);\n        background-color: var(--warning-color);\n        border-color: var(--warning-color);\n    }\n    .btn-warning:focus, .btn-warning.focus {\n        box-shadow: var(--warning-shadow-color);\n    }\n    .btn-warning:hover {\n        color: var(--warning-font-color);\n        background-color: var(--warning-hover-color);\n        border-color: var(--warning-hover-color);\n    }\n\n    .btn-success {\n        color: var(--success-font-color);\n        background-color: var(--success-color);\n        border-color: var(--success-color);\n    }\n    .btn-success:focus, .btn-success.focus {\n        box-shadow: var(--success-shadow-color);\n    }\n    .btn-success:hover {\n        color: var(--success-font-color);\n        background-color: var(--success-hover-color);\n        border-color: var(--success-hover-color);\n    }\n\n    .btn-danger {\n        color: var(--danger-font-color);\n        background-color: var(--danger-color);\n        border-color: var(--danger-color);\n    }\n    .btn-danger:focus, .btn-danger.focus {\n        box-shadow: var(--danger-shadow-color);\n    }\n    .btn-danger:hover {\n        color: var(--danger-font-color);\n        background-color: var(--danger-hover-color);\n        border-color: var(--danger-hover-color);\n    }\n\n    .btn-info {\n        color: var(--info-font-color);\n        background-color: var(--info-color);\n        border-color: var(--info-color);\n    }\n    .btn-info:focus, .btn-info.focus {\n        box-shadow: var(--info-shadow-color);\n    }\n    .btn-info:hover {\n        color: var(--info-font-color);\n        background-color: var(--info-hover-color);\n        border-color: var(--info-hover-color);\n    }\n\n    .btn-primary {\n        color: var(--primary-font-color);\n        background-color: var(--primary-color);\n        border-color: var(--primary-color);\n    }\n    .btn-primary:focus, .btn-primary.focus {\n        box-shadow: var(--primary-shadow-color);\n    }\n    .btn-primary:hover {\n        color: var(--primary-font-color);\n        background-color: var(--primary-hover-color);\n        border-color: var(--primary-hover-color);\n    }\n\n    .btn-secondary {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-color);\n        border-color: var(--secondary-color);\n    }\n    .btn-secondary:focus, .btn-secondary.focus {\n        box-shadow: var(--secondary-shadow-color);\n    }\n    .btn-secondary:hover {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-hover-color);\n        border-color: var(--secondary-hover-color);\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    :host /deep/ .card .card-body .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"miscOptions, tableOptions, buttonOptions\">\n                <ngb-panel id=\"miscOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Misc. Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('miscOptions')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('miscOptions')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <responsive-button-group>\n                                    <button type=\"button\" class=\"btn btn-success\" (click)=\"reset()\">Reset Default Settings</button>\n                                </responsive-button-group>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n\t\t\t\t\t\t\t\t<b>Collapsable Menu</b><br>\n\t\t\t\t\t\t\t\t<div class=\"form-check\">\n\t\t\t\t\t\t\t\t\t<label class=\"form-check-label\">\n\t\t\t\t\t\t\t\t\t\t<input class=\"form-check-input\" type=\"checkbox\" hidden formControlName=\"collapsable_menu\">\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"form.controls.collapsable_menu.value\" class=\"fa fa-check\" style=\"color: green; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"!form.controls.collapsable_menu.value\" class=\"fa fa-times\" style=\"color: red; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Default Entries Per Page</label>\n                                    <em *ngIf=\"!form.controls.entries_per_page.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.entries_per_page.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"entries_per_page\">\n                                            <option value=\"25\">25</option>\n                                            <option value=\"50\">50</option>\n                                            <option value=\"100\">100</option>\n                                            <option value=\"250\">250</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.entries_per_page.valid\">Entries per page is required</div>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Font Size (Recommended 11-14)</label>\n                                    <em *ngIf=\"form.controls.font_size.hasError('required')\">- Required</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('maxValue')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('minValue')\">- Invalid</em>\n                                    <input [ngClass]=\"['form-control', form.controls.font_size.valid ? 'is-valid' : 'is-invalid']\" type=\"number\" formControlName=\"font_size\" (keyup)=\"changePrimaryFontSize()\">\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('required')\">Font size is required</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">Font size is invalid</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('maxValue')\">Font size can not exceed 18</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('minValue')\">Font size can not be less than 8</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Starting Page</label>\n                                    <select [ngClass]=\"['form-control', form.controls.opening_route.valid ? 'is-valid' : '']\" formControlName=\"opening_route\">\n                                        <option value=\"/home\">Home</option>\n                                        <option *ngFor=\"let view of views\" [value]=\"view.value\">{{view.display | titleCase}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-6\" *ngIf=\"client === 'Ace Completions'\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Routing Preference</label>\n                                    <select [ngClass]=\"['form-control', form.controls.routing_preference.valid ? 'is-valid' : '']\" formControlName=\"routing_preference\">\n                                        <option value=\"alwaysAsk\">Always Ask</option>\n                                        <option value=\"sameTab\">Same Tab</option>\n                                        <option value=\"newTab\">New Tab</option>\n                                        <option value=\"newWindow\">New Window</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"tableOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Table Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('tableOptions')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('tableOptions')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table>        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Primary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_color\" (ngModelChange)=\"changePrimaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_font_color\" (ngModelChange)=\"changePrimaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table secondaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Secondary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_color\" (ngModelChange)=\"changeSecondaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <br>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_font_color\" (ngModelChange)=\"changeSecondaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table tertiaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Tertiary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_color\" (ngModelChange)=\"changeTertiaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_font_color\" (ngModelChange)=\"changeTertiaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"buttonOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Button Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('buttonOptions')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('buttonOptions')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-success\">Success</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Success Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_color\" (ngModelChange)=\"changeSuccessColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Success Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_font_color\" (ngModelChange)=\"changeSuccessFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Success Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_hover_color\" (ngModelChange)=\"changeSuccessHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-warning\">Warning</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Warning Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_color\" (ngModelChange)=\"changeWarningColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Warning Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_font_color\" (ngModelChange)=\"changeWarningFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Warning Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_hover_color\" (ngModelChange)=\"changeWarningHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-danger\">Danger</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Danger Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_color\" (ngModelChange)=\"changeDangerColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Danger Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_font_color\" (ngModelChange)=\"changeDangerFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Danger Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_hover_color\" (ngModelChange)=\"changeDangerHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-info\">Info</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Info Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_color\" (ngModelChange)=\"changeInfoColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Info Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_font_color\" (ngModelChange)=\"changeInfoFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Info Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_hover_color\" (ngModelChange)=\"changeInfoHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-primary\">Primary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Primary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_color\" (ngModelChange)=\"changePrimaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Primary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_font_color\" (ngModelChange)=\"changePrimaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Primary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_hover_color\" (ngModelChange)=\"changePrimaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-secondary\">Secondary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Secondary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_color\" (ngModelChange)=\"changeSecondaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Secondary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_font_color\" (ngModelChange)=\"changeSecondaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Secondary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_hover_color\" (ngModelChange)=\"changeSecondaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>", styles: ["\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: #ffffff;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    .btn-warning {\n        color: var(--warning-font-color);\n        background-color: var(--warning-color);\n        border-color: var(--warning-color);\n    }\n    .btn-warning:focus, .btn-warning.focus {\n        box-shadow: var(--warning-shadow-color);\n    }\n    .btn-warning:hover {\n        color: var(--warning-font-color);\n        background-color: var(--warning-hover-color);\n        border-color: var(--warning-hover-color);\n    }\n\n    .btn-success {\n        color: var(--success-font-color);\n        background-color: var(--success-color);\n        border-color: var(--success-color);\n    }\n    .btn-success:focus, .btn-success.focus {\n        box-shadow: var(--success-shadow-color);\n    }\n    .btn-success:hover {\n        color: var(--success-font-color);\n        background-color: var(--success-hover-color);\n        border-color: var(--success-hover-color);\n    }\n\n    .btn-danger {\n        color: var(--danger-font-color);\n        background-color: var(--danger-color);\n        border-color: var(--danger-color);\n    }\n    .btn-danger:focus, .btn-danger.focus {\n        box-shadow: var(--danger-shadow-color);\n    }\n    .btn-danger:hover {\n        color: var(--danger-font-color);\n        background-color: var(--danger-hover-color);\n        border-color: var(--danger-hover-color);\n    }\n\n    .btn-info {\n        color: var(--info-font-color);\n        background-color: var(--info-color);\n        border-color: var(--info-color);\n    }\n    .btn-info:focus, .btn-info.focus {\n        box-shadow: var(--info-shadow-color);\n    }\n    .btn-info:hover {\n        color: var(--info-font-color);\n        background-color: var(--info-hover-color);\n        border-color: var(--info-hover-color);\n    }\n\n    .btn-primary {\n        color: var(--primary-font-color);\n        background-color: var(--primary-color);\n        border-color: var(--primary-color);\n    }\n    .btn-primary:focus, .btn-primary.focus {\n        box-shadow: var(--primary-shadow-color);\n    }\n    .btn-primary:hover {\n        color: var(--primary-font-color);\n        background-color: var(--primary-hover-color);\n        border-color: var(--primary-hover-color);\n    }\n\n    .btn-secondary {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-color);\n        border-color: var(--secondary-color);\n    }\n    .btn-secondary:focus, .btn-secondary.focus {\n        box-shadow: var(--secondary-shadow-color);\n    }\n    .btn-secondary:hover {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-hover-color);\n        border-color: var(--secondary-hover-color);\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    :host /deep/ .card .card-body .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TitleCaseAndUnderscorePipe, name: "titleCase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UsersSettingsComponent, decorators: [{
+UsersSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersSettingsComponent, deps: [{ token: AuthPermissionService }, { token: UserSettingsService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+UsersSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersSettingsComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: #ffffff;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    .btn-warning {\n        color: var(--warning-font-color);\n        background-color: var(--warning-color);\n        border-color: var(--warning-color);\n    }\n    .btn-warning:focus, .btn-warning.focus {\n        box-shadow: var(--warning-shadow-color);\n    }\n    .btn-warning:hover {\n        color: var(--warning-font-color);\n        background-color: var(--warning-hover-color);\n        border-color: var(--warning-hover-color);\n    }\n\n    .btn-success {\n        color: var(--success-font-color);\n        background-color: var(--success-color);\n        border-color: var(--success-color);\n    }\n    .btn-success:focus, .btn-success.focus {\n        box-shadow: var(--success-shadow-color);\n    }\n    .btn-success:hover {\n        color: var(--success-font-color);\n        background-color: var(--success-hover-color);\n        border-color: var(--success-hover-color);\n    }\n\n    .btn-danger {\n        color: var(--danger-font-color);\n        background-color: var(--danger-color);\n        border-color: var(--danger-color);\n    }\n    .btn-danger:focus, .btn-danger.focus {\n        box-shadow: var(--danger-shadow-color);\n    }\n    .btn-danger:hover {\n        color: var(--danger-font-color);\n        background-color: var(--danger-hover-color);\n        border-color: var(--danger-hover-color);\n    }\n\n    .btn-info {\n        color: var(--info-font-color);\n        background-color: var(--info-color);\n        border-color: var(--info-color);\n    }\n    .btn-info:focus, .btn-info.focus {\n        box-shadow: var(--info-shadow-color);\n    }\n    .btn-info:hover {\n        color: var(--info-font-color);\n        background-color: var(--info-hover-color);\n        border-color: var(--info-hover-color);\n    }\n\n    .btn-primary {\n        color: var(--primary-font-color);\n        background-color: var(--primary-color);\n        border-color: var(--primary-color);\n    }\n    .btn-primary:focus, .btn-primary.focus {\n        box-shadow: var(--primary-shadow-color);\n    }\n    .btn-primary:hover {\n        color: var(--primary-font-color);\n        background-color: var(--primary-hover-color);\n        border-color: var(--primary-hover-color);\n    }\n\n    .btn-secondary {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-color);\n        border-color: var(--secondary-color);\n    }\n    .btn-secondary:focus, .btn-secondary.focus {\n        box-shadow: var(--secondary-shadow-color);\n    }\n    .btn-secondary:hover {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-hover-color);\n        border-color: var(--secondary-hover-color);\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    :host /deep/ .card .card-body .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"miscOptions, tableOptions, buttonOptions\">\n                <ngb-panel id=\"miscOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Misc. Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('miscOptions')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('miscOptions')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <responsive-button-group>\n                                    <button type=\"button\" class=\"btn btn-success\" (click)=\"reset()\">Reset Default Settings</button>\n                                </responsive-button-group>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n\t\t\t\t\t\t\t\t<b>Collapsable Menu</b><br>\n\t\t\t\t\t\t\t\t<div class=\"form-check\">\n\t\t\t\t\t\t\t\t\t<label class=\"form-check-label\">\n\t\t\t\t\t\t\t\t\t\t<input class=\"form-check-input\" type=\"checkbox\" hidden formControlName=\"collapsable_menu\">\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"form.controls.collapsable_menu.value\" class=\"fa fa-check\" style=\"color: green; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"!form.controls.collapsable_menu.value\" class=\"fa fa-times\" style=\"color: red; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Default Entries Per Page</label>\n                                    <em *ngIf=\"!form.controls.entries_per_page.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.entries_per_page.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"entries_per_page\">\n                                            <option value=\"25\">25</option>\n                                            <option value=\"50\">50</option>\n                                            <option value=\"100\">100</option>\n                                            <option value=\"250\">250</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.entries_per_page.valid\">Entries per page is required</div>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Font Size (Recommended 11-14)</label>\n                                    <em *ngIf=\"form.controls.font_size.hasError('required')\">- Required</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('maxValue')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('minValue')\">- Invalid</em>\n                                    <input [ngClass]=\"['form-control', form.controls.font_size.valid ? 'is-valid' : 'is-invalid']\" type=\"number\" formControlName=\"font_size\" (keyup)=\"changePrimaryFontSize()\">\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('required')\">Font size is required</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">Font size is invalid</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('maxValue')\">Font size can not exceed 18</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('minValue')\">Font size can not be less than 8</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Starting Page</label>\n                                    <select [ngClass]=\"['form-control', form.controls.opening_route.valid ? 'is-valid' : '']\" formControlName=\"opening_route\">\n                                        <option value=\"/home\">Home</option>\n                                        <option *ngFor=\"let view of views\" [value]=\"view.value\">{{view.display | titleCase}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-6\" *ngIf=\"client === 'Ace Completions'\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Routing Preference</label>\n                                    <select [ngClass]=\"['form-control', form.controls.routing_preference.valid ? 'is-valid' : '']\" formControlName=\"routing_preference\">\n                                        <option value=\"alwaysAsk\">Always Ask</option>\n                                        <option value=\"sameTab\">Same Tab</option>\n                                        <option value=\"newTab\">New Tab</option>\n                                        <option value=\"newWindow\">New Window</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"tableOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Table Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('tableOptions')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('tableOptions')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table>        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Primary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_color\" (ngModelChange)=\"changePrimaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_font_color\" (ngModelChange)=\"changePrimaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table secondaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Secondary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_color\" (ngModelChange)=\"changeSecondaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <br>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_font_color\" (ngModelChange)=\"changeSecondaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table tertiaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Tertiary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_color\" (ngModelChange)=\"changeTertiaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_font_color\" (ngModelChange)=\"changeTertiaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"buttonOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Button Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('buttonOptions')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('buttonOptions')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-success\">Success</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Success Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_color\" (ngModelChange)=\"changeSuccessColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Success Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_font_color\" (ngModelChange)=\"changeSuccessFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Success Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_hover_color\" (ngModelChange)=\"changeSuccessHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-warning\">Warning</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Warning Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_color\" (ngModelChange)=\"changeWarningColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Warning Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_font_color\" (ngModelChange)=\"changeWarningFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Warning Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_hover_color\" (ngModelChange)=\"changeWarningHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-danger\">Danger</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Danger Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_color\" (ngModelChange)=\"changeDangerColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Danger Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_font_color\" (ngModelChange)=\"changeDangerFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Danger Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_hover_color\" (ngModelChange)=\"changeDangerHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-info\">Info</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Info Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_color\" (ngModelChange)=\"changeInfoColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Info Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_font_color\" (ngModelChange)=\"changeInfoFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Info Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_hover_color\" (ngModelChange)=\"changeInfoHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-primary\">Primary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Primary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_color\" (ngModelChange)=\"changePrimaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Primary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_font_color\" (ngModelChange)=\"changePrimaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Primary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_hover_color\" (ngModelChange)=\"changePrimaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-secondary\">Secondary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Secondary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_color\" (ngModelChange)=\"changeSecondaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Secondary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_font_color\" (ngModelChange)=\"changeSecondaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Secondary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_hover_color\" (ngModelChange)=\"changeSecondaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>", styles: ["\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: #ffffff;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    .btn-warning {\n        color: var(--warning-font-color);\n        background-color: var(--warning-color);\n        border-color: var(--warning-color);\n    }\n    .btn-warning:focus, .btn-warning.focus {\n        box-shadow: var(--warning-shadow-color);\n    }\n    .btn-warning:hover {\n        color: var(--warning-font-color);\n        background-color: var(--warning-hover-color);\n        border-color: var(--warning-hover-color);\n    }\n\n    .btn-success {\n        color: var(--success-font-color);\n        background-color: var(--success-color);\n        border-color: var(--success-color);\n    }\n    .btn-success:focus, .btn-success.focus {\n        box-shadow: var(--success-shadow-color);\n    }\n    .btn-success:hover {\n        color: var(--success-font-color);\n        background-color: var(--success-hover-color);\n        border-color: var(--success-hover-color);\n    }\n\n    .btn-danger {\n        color: var(--danger-font-color);\n        background-color: var(--danger-color);\n        border-color: var(--danger-color);\n    }\n    .btn-danger:focus, .btn-danger.focus {\n        box-shadow: var(--danger-shadow-color);\n    }\n    .btn-danger:hover {\n        color: var(--danger-font-color);\n        background-color: var(--danger-hover-color);\n        border-color: var(--danger-hover-color);\n    }\n\n    .btn-info {\n        color: var(--info-font-color);\n        background-color: var(--info-color);\n        border-color: var(--info-color);\n    }\n    .btn-info:focus, .btn-info.focus {\n        box-shadow: var(--info-shadow-color);\n    }\n    .btn-info:hover {\n        color: var(--info-font-color);\n        background-color: var(--info-hover-color);\n        border-color: var(--info-hover-color);\n    }\n\n    .btn-primary {\n        color: var(--primary-font-color);\n        background-color: var(--primary-color);\n        border-color: var(--primary-color);\n    }\n    .btn-primary:focus, .btn-primary.focus {\n        box-shadow: var(--primary-shadow-color);\n    }\n    .btn-primary:hover {\n        color: var(--primary-font-color);\n        background-color: var(--primary-hover-color);\n        border-color: var(--primary-hover-color);\n    }\n\n    .btn-secondary {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-color);\n        border-color: var(--secondary-color);\n    }\n    .btn-secondary:focus, .btn-secondary.focus {\n        box-shadow: var(--secondary-shadow-color);\n    }\n    .btn-secondary:hover {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-hover-color);\n        border-color: var(--secondary-hover-color);\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    :host /deep/ .card .card-body .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TitleCaseAndUnderscorePipe, name: "titleCase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersSettingsComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: #ffffff;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    .btn-warning {\n        color: var(--warning-font-color);\n        background-color: var(--warning-color);\n        border-color: var(--warning-color);\n    }\n    .btn-warning:focus, .btn-warning.focus {\n        box-shadow: var(--warning-shadow-color);\n    }\n    .btn-warning:hover {\n        color: var(--warning-font-color);\n        background-color: var(--warning-hover-color);\n        border-color: var(--warning-hover-color);\n    }\n\n    .btn-success {\n        color: var(--success-font-color);\n        background-color: var(--success-color);\n        border-color: var(--success-color);\n    }\n    .btn-success:focus, .btn-success.focus {\n        box-shadow: var(--success-shadow-color);\n    }\n    .btn-success:hover {\n        color: var(--success-font-color);\n        background-color: var(--success-hover-color);\n        border-color: var(--success-hover-color);\n    }\n\n    .btn-danger {\n        color: var(--danger-font-color);\n        background-color: var(--danger-color);\n        border-color: var(--danger-color);\n    }\n    .btn-danger:focus, .btn-danger.focus {\n        box-shadow: var(--danger-shadow-color);\n    }\n    .btn-danger:hover {\n        color: var(--danger-font-color);\n        background-color: var(--danger-hover-color);\n        border-color: var(--danger-hover-color);\n    }\n\n    .btn-info {\n        color: var(--info-font-color);\n        background-color: var(--info-color);\n        border-color: var(--info-color);\n    }\n    .btn-info:focus, .btn-info.focus {\n        box-shadow: var(--info-shadow-color);\n    }\n    .btn-info:hover {\n        color: var(--info-font-color);\n        background-color: var(--info-hover-color);\n        border-color: var(--info-hover-color);\n    }\n\n    .btn-primary {\n        color: var(--primary-font-color);\n        background-color: var(--primary-color);\n        border-color: var(--primary-color);\n    }\n    .btn-primary:focus, .btn-primary.focus {\n        box-shadow: var(--primary-shadow-color);\n    }\n    .btn-primary:hover {\n        color: var(--primary-font-color);\n        background-color: var(--primary-hover-color);\n        border-color: var(--primary-hover-color);\n    }\n\n    .btn-secondary {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-color);\n        border-color: var(--secondary-color);\n    }\n    .btn-secondary:focus, .btn-secondary.focus {\n        box-shadow: var(--secondary-shadow-color);\n    }\n    .btn-secondary:hover {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-hover-color);\n        border-color: var(--secondary-hover-color);\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    :host /deep/ .card .card-body .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"miscOptions, tableOptions, buttonOptions\">\n                <ngb-panel id=\"miscOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Misc. Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('miscOptions')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('miscOptions')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <responsive-button-group>\n                                    <button type=\"button\" class=\"btn btn-success\" (click)=\"reset()\">Reset Default Settings</button>\n                                </responsive-button-group>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n\t\t\t\t\t\t\t\t<b>Collapsable Menu</b><br>\n\t\t\t\t\t\t\t\t<div class=\"form-check\">\n\t\t\t\t\t\t\t\t\t<label class=\"form-check-label\">\n\t\t\t\t\t\t\t\t\t\t<input class=\"form-check-input\" type=\"checkbox\" hidden formControlName=\"collapsable_menu\">\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"form.controls.collapsable_menu.value\" class=\"fa fa-check\" style=\"color: green; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"!form.controls.collapsable_menu.value\" class=\"fa fa-times\" style=\"color: red; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Default Entries Per Page</label>\n                                    <em *ngIf=\"!form.controls.entries_per_page.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.entries_per_page.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"entries_per_page\">\n                                            <option value=\"25\">25</option>\n                                            <option value=\"50\">50</option>\n                                            <option value=\"100\">100</option>\n                                            <option value=\"250\">250</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.entries_per_page.valid\">Entries per page is required</div>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Font Size (Recommended 11-14)</label>\n                                    <em *ngIf=\"form.controls.font_size.hasError('required')\">- Required</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('maxValue')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('minValue')\">- Invalid</em>\n                                    <input [ngClass]=\"['form-control', form.controls.font_size.valid ? 'is-valid' : 'is-invalid']\" type=\"number\" formControlName=\"font_size\" (keyup)=\"changePrimaryFontSize()\">\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('required')\">Font size is required</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">Font size is invalid</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('maxValue')\">Font size can not exceed 18</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('minValue')\">Font size can not be less than 8</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Starting Page</label>\n                                    <select [ngClass]=\"['form-control', form.controls.opening_route.valid ? 'is-valid' : '']\" formControlName=\"opening_route\">\n                                        <option value=\"/home\">Home</option>\n                                        <option *ngFor=\"let view of views\" [value]=\"view.value\">{{view.display | titleCase}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-6\" *ngIf=\"client === 'Ace Completions'\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Routing Preference</label>\n                                    <select [ngClass]=\"['form-control', form.controls.routing_preference.valid ? 'is-valid' : '']\" formControlName=\"routing_preference\">\n                                        <option value=\"alwaysAsk\">Always Ask</option>\n                                        <option value=\"sameTab\">Same Tab</option>\n                                        <option value=\"newTab\">New Tab</option>\n                                        <option value=\"newWindow\">New Window</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"tableOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Table Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('tableOptions')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('tableOptions')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table>        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Primary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_color\" (ngModelChange)=\"changePrimaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_font_color\" (ngModelChange)=\"changePrimaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table secondaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Secondary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_color\" (ngModelChange)=\"changeSecondaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <br>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_font_color\" (ngModelChange)=\"changeSecondaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table tertiaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Tertiary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_color\" (ngModelChange)=\"changeTertiaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"mb-3\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_font_color\" (ngModelChange)=\"changeTertiaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"buttonOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Button Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('buttonOptions')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('buttonOptions')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-success\">Success</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Success Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_color\" (ngModelChange)=\"changeSuccessColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Success Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_font_color\" (ngModelChange)=\"changeSuccessFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Success Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_hover_color\" (ngModelChange)=\"changeSuccessHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-warning\">Warning</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Warning Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_color\" (ngModelChange)=\"changeWarningColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Warning Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_font_color\" (ngModelChange)=\"changeWarningFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Warning Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_hover_color\" (ngModelChange)=\"changeWarningHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-danger\">Danger</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Danger Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_color\" (ngModelChange)=\"changeDangerColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Danger Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_font_color\" (ngModelChange)=\"changeDangerFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Danger Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_hover_color\" (ngModelChange)=\"changeDangerHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-info\">Info</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Info Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_color\" (ngModelChange)=\"changeInfoColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Info Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_font_color\" (ngModelChange)=\"changeInfoFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Info Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_hover_color\" (ngModelChange)=\"changeInfoHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-primary\">Primary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Primary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_color\" (ngModelChange)=\"changePrimaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Primary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_font_color\" (ngModelChange)=\"changePrimaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Primary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_hover_color\" (ngModelChange)=\"changePrimaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-secondary\">Secondary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Secondary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_color\" (ngModelChange)=\"changeSecondaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Secondary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_font_color\" (ngModelChange)=\"changeSecondaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Secondary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_hover_color\" (ngModelChange)=\"changeSecondaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>" }]
+            args: [{ providers: [ProviderService], template: "<style>\n    ::ng-deep :root {\n        --primary-table-color: #3b3ee3;\n        --primary-table-font-color: #ffffff;\n        --font-size: 12px;\n        --secondary-table-color: #87ceeb;\n        --secondary-table-font-color: #000000;\n        --tertiary-table-color: #ff4500;\n        --tertiary-table-font-color: #000000;\n        --warning-color: #ffc107;\n        --warning-font-color: #000000;\n        --warning-hover-color: #e0a800;\n        --warning-shadow-color: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);\n        --success-color: #28a745;\n        --success-font-color: #ffffff;\n        --success-hover-color: #218838;\n        --success-shadow-color: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);\n        --danger-color: #dc3545;\n        --danger-font-color: #ffffff;\n        --danger-hover-color: #c82333;\n        --danger-shadow-color: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);\n        --info-color: #17a2b8;\n        --info-font-color: #ffffff;\n        --info-hover-color: #138496;\n        --info-shadow-color: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);\n        --primary-color: #007bff;\n        --primary-font-color: #ffffff;\n        --primary-hover-color: #0069d9;\n        --primary-shadow-color: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);\n        --secondary-color: #868e96;\n        --secondary-font-color: #ffffff;\n        --secondary-hover-color: #5a6268;\n        --secondary-shadow-color: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);\n    }\n\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    .btn-warning {\n        color: var(--warning-font-color);\n        background-color: var(--warning-color);\n        border-color: var(--warning-color);\n    }\n    .btn-warning:focus, .btn-warning.focus {\n        box-shadow: var(--warning-shadow-color);\n    }\n    .btn-warning:hover {\n        color: var(--warning-font-color);\n        background-color: var(--warning-hover-color);\n        border-color: var(--warning-hover-color);\n    }\n\n    .btn-success {\n        color: var(--success-font-color);\n        background-color: var(--success-color);\n        border-color: var(--success-color);\n    }\n    .btn-success:focus, .btn-success.focus {\n        box-shadow: var(--success-shadow-color);\n    }\n    .btn-success:hover {\n        color: var(--success-font-color);\n        background-color: var(--success-hover-color);\n        border-color: var(--success-hover-color);\n    }\n\n    .btn-danger {\n        color: var(--danger-font-color);\n        background-color: var(--danger-color);\n        border-color: var(--danger-color);\n    }\n    .btn-danger:focus, .btn-danger.focus {\n        box-shadow: var(--danger-shadow-color);\n    }\n    .btn-danger:hover {\n        color: var(--danger-font-color);\n        background-color: var(--danger-hover-color);\n        border-color: var(--danger-hover-color);\n    }\n\n    .btn-info {\n        color: var(--info-font-color);\n        background-color: var(--info-color);\n        border-color: var(--info-color);\n    }\n    .btn-info:focus, .btn-info.focus {\n        box-shadow: var(--info-shadow-color);\n    }\n    .btn-info:hover {\n        color: var(--info-font-color);\n        background-color: var(--info-hover-color);\n        border-color: var(--info-hover-color);\n    }\n\n    .btn-primary {\n        color: var(--primary-font-color);\n        background-color: var(--primary-color);\n        border-color: var(--primary-color);\n    }\n    .btn-primary:focus, .btn-primary.focus {\n        box-shadow: var(--primary-shadow-color);\n    }\n    .btn-primary:hover {\n        color: var(--primary-font-color);\n        background-color: var(--primary-hover-color);\n        border-color: var(--primary-hover-color);\n    }\n\n    .btn-secondary {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-color);\n        border-color: var(--secondary-color);\n    }\n    .btn-secondary:focus, .btn-secondary.focus {\n        box-shadow: var(--secondary-shadow-color);\n    }\n    .btn-secondary:hover {\n        color: var(--secondary-font-color);\n        background-color: var(--secondary-hover-color);\n        border-color: var(--secondary-hover-color);\n    }\n\n    .fa-minus {\n        color: black;\n    } \n\n    :host /deep/ .card .card-body .collapseTable th {\n        background-color: var(--primary-table-color);\n        color: var(--primary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-sec th {\n        background-color: var(--secondary-table-color);\n        color: var(--secondary-table-font-color);\n        font-size: var(--font-size);\n    }\n\n    :host /deep/ .card .card-body .collapseTable-tert th {\n        background-color: var(--tertiary-table-color);\n        color: var(--tertiary-table-font-color);\n        font-size: var(--font-size);\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"miscOptions, tableOptions, buttonOptions\">\n                <ngb-panel id=\"miscOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Misc. Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('miscOptions')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('miscOptions')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <responsive-button-group>\n                                    <button type=\"button\" class=\"btn btn-success\" (click)=\"reset()\">Reset Default Settings</button>\n                                </responsive-button-group>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n\t\t\t\t\t\t\t\t<b>Collapsable Menu</b><br>\n\t\t\t\t\t\t\t\t<div class=\"form-check\">\n\t\t\t\t\t\t\t\t\t<label class=\"form-check-label\">\n\t\t\t\t\t\t\t\t\t\t<input class=\"form-check-input\" type=\"checkbox\" hidden formControlName=\"collapsable_menu\">\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"form.controls.collapsable_menu.value\" class=\"fa fa-check\" style=\"color: green; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t\t<i *ngIf=\"!form.controls.collapsable_menu.value\" class=\"fa fa-times\" style=\"color: red; font-size: 24px;\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Default Entries Per Page</label>\n                                    <em *ngIf=\"!form.controls.entries_per_page.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.entries_per_page.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"entries_per_page\">\n                                            <option value=\"25\">25</option>\n                                            <option value=\"50\">50</option>\n                                            <option value=\"100\">100</option>\n                                            <option value=\"250\">250</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.entries_per_page.valid\">Entries per page is required</div>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Font Size (Recommended 11-14)</label>\n                                    <em *ngIf=\"form.controls.font_size.hasError('required')\">- Required</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('maxValue')\">- Invalid</em>\n                                    <em *ngIf=\"form.controls.font_size.hasError('minValue')\">- Invalid</em>\n                                    <input [ngClass]=\"['form-control', form.controls.font_size.valid ? 'is-valid' : 'is-invalid']\" type=\"number\" formControlName=\"font_size\" (keyup)=\"changePrimaryFontSize()\">\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('required')\">Font size is required</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('wholeNumbersGreaterThanZero')\">Font size is invalid</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('maxValue')\">Font size can not exceed 18</div>\n                                    <div class=\"invalid-feedback\" *ngIf=\"form.controls.font_size.hasError('minValue')\">Font size can not be less than 8</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Starting Page</label>\n                                    <select [ngClass]=\"['form-control', form.controls.opening_route.valid ? 'is-valid' : '']\" formControlName=\"opening_route\">\n                                        <option value=\"/home\">Home</option>\n                                        <option *ngFor=\"let view of views\" [value]=\"view.value\">{{view.display | titleCase}}</option>\n                                    </select>\n                                </div>\n                            </div>\n                            <div class=\"col-lg-6\" *ngIf=\"client === 'Ace Completions'\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Routing Preference</label>\n                                    <select [ngClass]=\"['form-control', form.controls.routing_preference.valid ? 'is-valid' : '']\" formControlName=\"routing_preference\">\n                                        <option value=\"alwaysAsk\">Always Ask</option>\n                                        <option value=\"sameTab\">Same Tab</option>\n                                        <option value=\"newTab\">New Tab</option>\n                                        <option value=\"newWindow\">New Window</option>\n                                    </select>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"tableOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Table Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('tableOptions')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('tableOptions')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table>        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Primary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_color\" (ngModelChange)=\"changePrimaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Primary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"table_font_color\" (ngModelChange)=\"changePrimaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table secondaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Secondary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_color\" (ngModelChange)=\"changeSecondaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <br>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Secondary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_table_font_color\" (ngModelChange)=\"changeSecondaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <collapse-table tertiaryColor=\"true\">        \n                                    <thead>\n                                        <tr>\n                                            <th>\n                                                Tertiary Table\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                </collapse-table>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Background:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_color\" (ngModelChange)=\"changeTertiaryColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                            <div class=\"col-lg-6\">\n                                <dl>\n                                    <dt>Tertiary Table Font:</dt>\n                                    <dd>\n                                        <div class=\"form-group\">\n                                            <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.tertiary_table_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"tertiary_table_font_color\" (ngModelChange)=\"changeTertiaryFontColor()\">\n                                        </div>\n                                    </dd>\n                                </dl>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n                <ngb-panel id=\"buttonOptions\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Button Options</label>\n                            <i *ngIf=\"!acc.activeIds.includes('buttonOptions')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('buttonOptions')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-success\">Success</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Success Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_color\" (ngModelChange)=\"changeSuccessColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Success Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_font_color\" (ngModelChange)=\"changeSuccessFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Success Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.success_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"success_hover_color\" (ngModelChange)=\"changeSuccessHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-warning\">Warning</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Warning Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_color\" (ngModelChange)=\"changeWarningColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Warning Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_font_color\" (ngModelChange)=\"changeWarningFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Warning Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.warning_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"warning_hover_color\" (ngModelChange)=\"changeWarningHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-danger\">Danger</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Danger Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_color\" (ngModelChange)=\"changeDangerColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Danger Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_font_color\" (ngModelChange)=\"changeDangerFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Danger Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.danger_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"danger_hover_color\" (ngModelChange)=\"changeDangerHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-info\">Info</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Info Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_color\" (ngModelChange)=\"changeInfoColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Info Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_font_color\" (ngModelChange)=\"changeInfoFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Info Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.info_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"info_hover_color\" (ngModelChange)=\"changeInfoHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-primary\">Primary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Primary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_color\" (ngModelChange)=\"changePrimaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Primary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_font_color\" (ngModelChange)=\"changePrimaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Primary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.primary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"primary_hover_color\" (ngModelChange)=\"changePrimaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <button type=\"button\" class=\"btn btn-secondary\">Secondary</button>\n                            </div>\n                        </div>\n                        <br>\n                        <div class=\"row\">\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Secondary Button Background:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_color\" (ngModelChange)=\"changeSecondaryButtonColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Secondary Button Font:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_font_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_font_color\" (ngModelChange)=\"changeSecondaryButtonFontColor()\">\n                                </div>\n                            </div>\n                            <div class=\"col-lg-4\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Secondary Button Hover:</label>\n                                    <input type=\"color\" style=\"height: 40px\" [ngClass]=\"['form-control', form.controls.secondary_hover_color.value ? 'is-valid' : 'is-invalid']\" formControlName=\"secondary_hover_color\" (ngModelChange)=\"changeSecondaryHoverColor()\">\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>" }]
         }], ctorParameters: function () { return [{ type: AuthPermissionService }, { type: UserSettingsService }, { type: ProviderService }, { type: DialogService }]; } });
 function hexToRGB(hex, alpha) {
     let r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
@@ -6761,11 +6940,11 @@ class DatatableComponent extends BaseComponent {
         return typeof (data);
     }
 }
-DatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-DatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DatatableComponent, selector: "data-table", inputs: { urlClick: "urlClick", columns: "columns", data: "data", collapseSize: "collapseSize", searchTitle: "searchTitle", totalItems: "totalItems", tableData: "tableData" }, outputs: { onChangeTableData: "onChangeTableData" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    .orangeRow { \n        background-color: orangered;\n    }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n</style>\n\n<div class=\"row\">\n    <div class=\"input-group\">\n      <span class=\"input-group-btn\">\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"changeTableData()\">Search!</button>\n      </span>\n      <input type=\"text\" class=\"form-control\" placeholder=\"{{searchTitle}}\" [(ngModel)]=\"tableData.searchString\" (keyup.enter)=\"changeTableData()\" style=\"z-index: 0\">\n    </div>\n</div>\n<div class=\"row\" style=\"padding-top: 20px;\">\n    <collapse-table [collapseSize]=\"collapseSize\" headerFixed=\"true\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let column of columns\" (click)=\"sortColumn(column.data)\" style=\"cursor:pointer\">\n                    {{column.name}}\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'desc'\" class=\"fa fa-caret-down\"></i>\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'asc'\" class=\"fa fa-caret-up\"></i>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let item of data\" [ngClass]=\"{'orangeRow': item['color_red']}\">\n                <td *ngFor=\"let column of columns\" (click)=\"navigateTo(item['_id'], column.data)\" [attr.data-bs-label]=\"column.name\">\n                    <span *ngIf=\"typeOf(item[column.data]) !== 'boolean' && column.data !== 'cost' && column.data !== 'wells' && column.data !== 'cost_total' && column.data !== 'price' && column.data !== 'date' && column.data !== 'date_created' && column.data !== 'date_delivered' && column.data !== 'quantity' && column.data !== 'quantity_string' && column.data !== 'min_stock' && column.data !== 'max_stock' && column.data !== 'file_key' && column.data !== 'date_in'\">{{column.subData ? item[column.data][column.subData] : item[column.data]}}</span>\n                    <span *ngIf=\"column.data === 'cost' || column.data === 'price' || column.data === 'cost_total'\">{{item[column.data] | currency:'USD':'symbol':\"1.2-2\"}}</span>\n                    <span *ngIf=\"column.data === 'date' || column.data === 'date_created' || column.data === 'date_delivered'\">{{item[column.data] | date:'short'}}</span>\n                    <span *ngIf=\"column.data === 'quantity' || column.data === 'min_stock' || column.data === 'max_stock'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'quantity_string'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'wells'\"><pre>{{item[column.data]}}</pre></span>\n                    <span *ngIf=\"column.data === 'file_key'\">\n                        <button type=\"button\" (click)=\"openFile(item[column.data])\" class=\"btn btn-secondary\">Open File</button>\n                        <!-- <button type=\"button\" class=\"btn btn-warning\" (click)=\"viewDeletedReason(item)\" *ngIf=\"item.deleted.is_deleted\">View Deleted Reason</button> -->\n                    </span>\n                    <span *ngIf=\"typeOf(item[column.data]) === 'boolean'\">\n                        <i *ngIf=\"item[column.data]\" class=\"fa fa-check\" style=\"color: green; font-size: 18px;\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"!item[column.data]\" class=\"fa fa-times\" style=\"color: red; font-size: 18px;\" aria-hidden=\"true\"></i>\n                    </span>\n                </td>\n            </tr>\n        </tbody>\n    </collapse-table> \n</div>\n<hr />\n<div class=\"row\">\n    <div class=\"col-lg-4\">\n        <div class=\"row\"> \n            <div class=\"col-lg-8\">\n                <label class=\"form-control-label\">Entries Per Page</label>\n                <select class=\"form-control\" [(ngModel)]=\"tableData.entriesPerPage\" (ngModelChange)=\"changeTableData()\">\n                    <option value=\"25\">25</option>\n                    <option value=\"50\">50</option>\n                    <option value=\"100\">100</option>\n                    <option value=\"250\">250</option>\n                </select>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-lg-8\" style=\"margin-top: 16px;\">\n        <ngb-pagination class=\"float-right\"\n                    boundaryLinks=\"true\"\n                    [collectionSize]=\"totalItems\"\n                    directionLinks=\"true\"\n                    ellipses=\"false\"\n                    [(page)]=\"tableData.pageNum\"\n                    maxSize=\"6\"\n                    [pageSize]=\"tableData.entriesPerPage\"\n                    rotate=\"true\"\n                    (pageChange)=\"changeTableData()\"\n                    >\n        </ngb-pagination>\n    </div>\n</div>\n", styles: ["\n    .orangeRow { \n        background-color: orangered;\n    }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "component", type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableComponent, decorators: [{
+DatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatatableComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+DatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatatableComponent, selector: "data-table", inputs: { urlClick: "urlClick", columns: "columns", data: "data", collapseSize: "collapseSize", searchTitle: "searchTitle", totalItems: "totalItems", tableData: "tableData" }, outputs: { onChangeTableData: "onChangeTableData" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<style>\n    .orangeRow { \n        background-color: orangered;\n    }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n</style>\n\n<div class=\"row\">\n    <div class=\"input-group\">\n      <span class=\"input-group-btn\">\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"changeTableData()\">Search!</button>\n      </span>\n      <input type=\"text\" class=\"form-control\" placeholder=\"{{searchTitle}}\" [(ngModel)]=\"tableData.searchString\" (keyup.enter)=\"changeTableData()\" style=\"z-index: 0\">\n    </div>\n</div>\n<div class=\"row\" style=\"padding-top: 20px;\">\n    <collapse-table [collapseSize]=\"collapseSize\" headerFixed=\"true\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let column of columns\" (click)=\"sortColumn(column.data)\" style=\"cursor:pointer\">\n                    {{column.name}}\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'desc'\" class=\"fa fa-caret-down\"></i>\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'asc'\" class=\"fa fa-caret-up\"></i>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let item of data\" [ngClass]=\"{'orangeRow': item['color_red']}\">\n                <td *ngFor=\"let column of columns\" (click)=\"navigateTo(item['_id'], column.data)\" [attr.data-label]=\"column.name\">\n                    <span *ngIf=\"typeOf(item[column.data]) !== 'boolean' && column.data !== 'cost' && column.data !== 'wells' && column.data !== 'cost_total' && column.data !== 'price' && column.data !== 'date' && column.data !== 'date_created' && column.data !== 'date_delivered' && column.data !== 'quantity' && column.data !== 'quantity_string' && column.data !== 'min_stock' && column.data !== 'max_stock' && column.data !== 'file_key' && column.data !== 'date_in'\">{{column.subData ? item[column.data][column.subData] : item[column.data]}}</span>\n                    <span *ngIf=\"column.data === 'cost' || column.data === 'price' || column.data === 'cost_total'\">{{item[column.data] | currency:'USD':'symbol':\"1.2-2\"}}</span>\n                    <span *ngIf=\"column.data === 'date' || column.data === 'date_created' || column.data === 'date_delivered'\">{{item[column.data] | date:'short'}}</span>\n                    <span *ngIf=\"column.data === 'quantity' || column.data === 'min_stock' || column.data === 'max_stock'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'quantity_string'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'wells'\"><pre>{{item[column.data]}}</pre></span>\n                    <span *ngIf=\"column.data === 'file_key'\">\n                        <button type=\"button\" (click)=\"openFile(item[column.data])\" class=\"btn btn-secondary\">Open File</button>\n                        <!-- <button type=\"button\" class=\"btn btn-warning\" (click)=\"viewDeletedReason(item)\" *ngIf=\"item.deleted.is_deleted\">View Deleted Reason</button> -->\n                    </span>\n                    <span *ngIf=\"typeOf(item[column.data]) === 'boolean'\">\n                        <i *ngIf=\"item[column.data]\" class=\"fa fa-check\" style=\"color: green; font-size: 18px;\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"!item[column.data]\" class=\"fa fa-times\" style=\"color: red; font-size: 18px;\" aria-hidden=\"true\"></i>\n                    </span>\n                </td>\n            </tr>\n        </tbody>\n    </collapse-table> \n</div>\n<hr />\n<div class=\"row\">\n    <div class=\"col-lg-4\">\n        <div class=\"row\"> \n            <div class=\"col-lg-8\">\n                <label class=\"form-control-label\">Entries Per Page</label>\n                <select class=\"form-control\" [(ngModel)]=\"tableData.entriesPerPage\" (ngModelChange)=\"changeTableData()\">\n                    <option value=\"25\">25</option>\n                    <option value=\"50\">50</option>\n                    <option value=\"100\">100</option>\n                    <option value=\"250\">250</option>\n                </select>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-lg-8\" style=\"margin-top: 16px;\">\n        <ngb-pagination class=\"float-right\"\n                    boundaryLinks=\"true\"\n                    [collectionSize]=\"totalItems\"\n                    directionLinks=\"true\"\n                    ellipses=\"false\"\n                    [(page)]=\"tableData.pageNum\"\n                    maxSize=\"6\"\n                    [pageSize]=\"tableData.entriesPerPage\"\n                    rotate=\"true\"\n                    (pageChange)=\"changeTableData()\"\n                    >\n        </ngb-pagination>\n    </div>\n</div>\n", styles: ["\n    .orangeRow { \n        background-color: orangered;\n    }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "component", type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatatableComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], selector: 'data-table', template: "<style>\n    .orangeRow { \n        background-color: orangered;\n    }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n</style>\n\n<div class=\"row\">\n    <div class=\"input-group\">\n      <span class=\"input-group-btn\">\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"changeTableData()\">Search!</button>\n      </span>\n      <input type=\"text\" class=\"form-control\" placeholder=\"{{searchTitle}}\" [(ngModel)]=\"tableData.searchString\" (keyup.enter)=\"changeTableData()\" style=\"z-index: 0\">\n    </div>\n</div>\n<div class=\"row\" style=\"padding-top: 20px;\">\n    <collapse-table [collapseSize]=\"collapseSize\" headerFixed=\"true\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let column of columns\" (click)=\"sortColumn(column.data)\" style=\"cursor:pointer\">\n                    {{column.name}}\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'desc'\" class=\"fa fa-caret-down\"></i>\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'asc'\" class=\"fa fa-caret-up\"></i>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let item of data\" [ngClass]=\"{'orangeRow': item['color_red']}\">\n                <td *ngFor=\"let column of columns\" (click)=\"navigateTo(item['_id'], column.data)\" [attr.data-bs-label]=\"column.name\">\n                    <span *ngIf=\"typeOf(item[column.data]) !== 'boolean' && column.data !== 'cost' && column.data !== 'wells' && column.data !== 'cost_total' && column.data !== 'price' && column.data !== 'date' && column.data !== 'date_created' && column.data !== 'date_delivered' && column.data !== 'quantity' && column.data !== 'quantity_string' && column.data !== 'min_stock' && column.data !== 'max_stock' && column.data !== 'file_key' && column.data !== 'date_in'\">{{column.subData ? item[column.data][column.subData] : item[column.data]}}</span>\n                    <span *ngIf=\"column.data === 'cost' || column.data === 'price' || column.data === 'cost_total'\">{{item[column.data] | currency:'USD':'symbol':\"1.2-2\"}}</span>\n                    <span *ngIf=\"column.data === 'date' || column.data === 'date_created' || column.data === 'date_delivered'\">{{item[column.data] | date:'short'}}</span>\n                    <span *ngIf=\"column.data === 'quantity' || column.data === 'min_stock' || column.data === 'max_stock'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'quantity_string'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'wells'\"><pre>{{item[column.data]}}</pre></span>\n                    <span *ngIf=\"column.data === 'file_key'\">\n                        <button type=\"button\" (click)=\"openFile(item[column.data])\" class=\"btn btn-secondary\">Open File</button>\n                        <!-- <button type=\"button\" class=\"btn btn-warning\" (click)=\"viewDeletedReason(item)\" *ngIf=\"item.deleted.is_deleted\">View Deleted Reason</button> -->\n                    </span>\n                    <span *ngIf=\"typeOf(item[column.data]) === 'boolean'\">\n                        <i *ngIf=\"item[column.data]\" class=\"fa fa-check\" style=\"color: green; font-size: 18px;\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"!item[column.data]\" class=\"fa fa-times\" style=\"color: red; font-size: 18px;\" aria-hidden=\"true\"></i>\n                    </span>\n                </td>\n            </tr>\n        </tbody>\n    </collapse-table> \n</div>\n<hr />\n<div class=\"row\">\n    <div class=\"col-lg-4\">\n        <div class=\"row\"> \n            <div class=\"col-lg-8\">\n                <label class=\"form-control-label\">Entries Per Page</label>\n                <select class=\"form-control\" [(ngModel)]=\"tableData.entriesPerPage\" (ngModelChange)=\"changeTableData()\">\n                    <option value=\"25\">25</option>\n                    <option value=\"50\">50</option>\n                    <option value=\"100\">100</option>\n                    <option value=\"250\">250</option>\n                </select>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-lg-8\" style=\"margin-top: 16px;\">\n        <ngb-pagination class=\"float-right\"\n                    boundaryLinks=\"true\"\n                    [collectionSize]=\"totalItems\"\n                    directionLinks=\"true\"\n                    ellipses=\"false\"\n                    [(page)]=\"tableData.pageNum\"\n                    maxSize=\"6\"\n                    [pageSize]=\"tableData.entriesPerPage\"\n                    rotate=\"true\"\n                    (pageChange)=\"changeTableData()\"\n                    >\n        </ngb-pagination>\n    </div>\n</div>\n" }]
+            args: [{ providers: [ProviderService], selector: 'data-table', template: "<style>\n    .orangeRow { \n        background-color: orangered;\n    }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n</style>\n\n<div class=\"row\">\n    <div class=\"input-group\">\n      <span class=\"input-group-btn\">\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"changeTableData()\">Search!</button>\n      </span>\n      <input type=\"text\" class=\"form-control\" placeholder=\"{{searchTitle}}\" [(ngModel)]=\"tableData.searchString\" (keyup.enter)=\"changeTableData()\" style=\"z-index: 0\">\n    </div>\n</div>\n<div class=\"row\" style=\"padding-top: 20px;\">\n    <collapse-table [collapseSize]=\"collapseSize\" headerFixed=\"true\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let column of columns\" (click)=\"sortColumn(column.data)\" style=\"cursor:pointer\">\n                    {{column.name}}\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'desc'\" class=\"fa fa-caret-down\"></i>\n                    <i *ngIf=\"tableData.sortColumn == column.data && tableData.sortOrder === 'asc'\" class=\"fa fa-caret-up\"></i>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let item of data\" [ngClass]=\"{'orangeRow': item['color_red']}\">\n                <td *ngFor=\"let column of columns\" (click)=\"navigateTo(item['_id'], column.data)\" [attr.data-label]=\"column.name\">\n                    <span *ngIf=\"typeOf(item[column.data]) !== 'boolean' && column.data !== 'cost' && column.data !== 'wells' && column.data !== 'cost_total' && column.data !== 'price' && column.data !== 'date' && column.data !== 'date_created' && column.data !== 'date_delivered' && column.data !== 'quantity' && column.data !== 'quantity_string' && column.data !== 'min_stock' && column.data !== 'max_stock' && column.data !== 'file_key' && column.data !== 'date_in'\">{{column.subData ? item[column.data][column.subData] : item[column.data]}}</span>\n                    <span *ngIf=\"column.data === 'cost' || column.data === 'price' || column.data === 'cost_total'\">{{item[column.data] | currency:'USD':'symbol':\"1.2-2\"}}</span>\n                    <span *ngIf=\"column.data === 'date' || column.data === 'date_created' || column.data === 'date_delivered'\">{{item[column.data] | date:'short'}}</span>\n                    <span *ngIf=\"column.data === 'quantity' || column.data === 'min_stock' || column.data === 'max_stock'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'quantity_string'\">{{item[column.data] | number}}</span>\n                    <span *ngIf=\"column.data === 'wells'\"><pre>{{item[column.data]}}</pre></span>\n                    <span *ngIf=\"column.data === 'file_key'\">\n                        <button type=\"button\" (click)=\"openFile(item[column.data])\" class=\"btn btn-secondary\">Open File</button>\n                        <!-- <button type=\"button\" class=\"btn btn-warning\" (click)=\"viewDeletedReason(item)\" *ngIf=\"item.deleted.is_deleted\">View Deleted Reason</button> -->\n                    </span>\n                    <span *ngIf=\"typeOf(item[column.data]) === 'boolean'\">\n                        <i *ngIf=\"item[column.data]\" class=\"fa fa-check\" style=\"color: green; font-size: 18px;\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"!item[column.data]\" class=\"fa fa-times\" style=\"color: red; font-size: 18px;\" aria-hidden=\"true\"></i>\n                    </span>\n                </td>\n            </tr>\n        </tbody>\n    </collapse-table> \n</div>\n<hr />\n<div class=\"row\">\n    <div class=\"col-lg-4\">\n        <div class=\"row\"> \n            <div class=\"col-lg-8\">\n                <label class=\"form-control-label\">Entries Per Page</label>\n                <select class=\"form-control\" [(ngModel)]=\"tableData.entriesPerPage\" (ngModelChange)=\"changeTableData()\">\n                    <option value=\"25\">25</option>\n                    <option value=\"50\">50</option>\n                    <option value=\"100\">100</option>\n                    <option value=\"250\">250</option>\n                </select>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-lg-8\" style=\"margin-top: 16px;\">\n        <ngb-pagination class=\"float-right\"\n                    boundaryLinks=\"true\"\n                    [collectionSize]=\"totalItems\"\n                    directionLinks=\"true\"\n                    ellipses=\"false\"\n                    [(page)]=\"tableData.pageNum\"\n                    maxSize=\"6\"\n                    [pageSize]=\"tableData.entriesPerPage\"\n                    rotate=\"true\"\n                    (pageChange)=\"changeTableData()\"\n                    >\n        </ngb-pagination>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ProviderService }]; }, propDecorators: { urlClick: [{
                 type: Input
             }], columns: [{
@@ -6786,18 +6965,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class DatatableModule {
 }
-DatatableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DatatableModule, declarations: [DatatableComponent], imports: [NgbModule,
+DatatableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DatatableModule, declarations: [DatatableComponent], imports: [NgbModule,
         FormsModule,
         CommonModule,
         RouterModule,
         CollapseTableModule], exports: [DatatableComponent] });
-DatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableModule, imports: [NgbModule,
+DatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatatableModule, imports: [NgbModule,
         FormsModule,
         CommonModule,
         RouterModule,
         CollapseTableModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatatableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatatableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7201,11 +7380,11 @@ class FileUploadComponent extends BaseComponent {
         }, cancelled => { });
     }
 }
-FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, deps: [{ token: ResizeService }, { token: ProviderService }, { token: DialogService }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "file-upload", inputs: { files: "files", allowDelete: "allowDelete", allowReplace: "allowReplace", showFileUpload: "showFileUpload", fileType: "fileType" }, outputs: { filesChanged: "filesChanged", fileAdded: "fileAdded", fileRemoved: "fileRemoved" }, viewQueries: [{ propertyName: "download_link", first: true, predicate: ["download_link"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n \n    html, body { height: 100%; }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n        \n    /* Label container: */\n    .file {\n        display: inline-block;\n        padding: 0 0 0 0.5em;\n        cursor: pointer;\n        position: relative;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n    }\n    \n    /* The pseudo input field: */\n    .file::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: -1;\n        \n        /* Bootstrap appearance: */\n        background-color: #fff;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n        -webkit-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n        box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n    }\n    \n    /* The pseudo button: */\n    .file::after {\n        content: \"Browse\";\n        display: inline-block;\n        \n        /* Bootstrap appearance: */\n        background-color: #eee;\n        border: .075rem solid #ddd;\n        border-radius: 0 .25rem .25rem 0;\n        padding: .5rem 1rem;\n        line-height: 1.5;\n        color: #555;\n    }\n    \n    .file input[type=file] {\n        cursor: pointer;\n        border: 0 none;\n        width: 12em;\n    }\n    \n    /* -webkit hide the button: */\n    .file input[type=file]::-webkit-file-upload-button {\n        border: 0;\n        padding: 0;\n        margin: 0 ;\n        width: 0;\n        background: transparent;\n    }      \n    \n    /* IE10+ hide the button: */\n    .file input[type=file]::-ms-browse {\n        padding: 0;\n        margin: -1px;\n        width: 0;\n        border: 0;\n        background: transparent;\n    }\n    \n    .file input[type=file]::-ms-value {\n        background: #fff;\n        border: 0;\n    }\n\n    card {\n        width: 100%;\n    }\n</style>\n\n<a style=\"display: none\" #download_link></a>\n<input hidden type=\"file\" #fileInputReplace (change)=\"onFileSelectReplace($event)\" />\n \n<div class=\"card\">\n    <div class=\"card-header\">\n        <strong class=\"pull-left\">Files</strong>\n    </div>\n    <div class=\"card-block\">\n        <div class=\"row\">\n            <div class=\"col-lg-6\">\n                <div class=\"row\" *ngIf=\"showFileUpload\">\n                    <div class=\"col-lg-6\">\n                        <div class=\"container\">\n                            <div style=\"margin: 10px 0px; font-weight: bold;\">Upload File</div>\n                            <label class=\"file\">\n                                <input type=\"file\" #fileInput (change)=\"onFileSelect($event)\" />\n                            </label>\n                            <br>\n                            <ngx-file-drop dropZoneLabel=\"Drop files here\" style=\"width: 223px; height: 112px; border: 1px black dashed; border-radius: 5px; justify-content: center;\" class=\"vertical-align\" (onFileDrop)=\"dragFileAccepted($event)\"></ngx-file-drop>\n                        </div>\n                    </div>\n                    <div class=\"col-lg-6\">\n                        <div *ngIf=\"isUploading\">\n                            <b>{{progressMsg || 'N/A'}}</b>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\" style=\"margin-top: 10px;\">\n                    <div class=\"col-lg-12\" *ngIf=\"windowSize > 980\">\n                        <div style=\"text-align: center;\" *ngIf=\"pdfSrc\">\n                            <ngx-doc-viewer [url]=\"pdfSrc\" style=\"display: block;\"></ngx-doc-viewer>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-lg-6\">\n                <div *ngIf=\"files && files.length\">\n                    <b>Uploaded Files</b>\n                    <div [style.max-height]=\"windowSize > 900 ? '300px' : ''\" [style.overflow-y]=\"windowSize > 900 ? 'auto' : ''\">\n                        <collapse-table collapseSize=\"900\">\n                            <thead>\n                                <tr>\n                                    <th>File Name</th>\n                                    <th>Size</th>\n                                    <th>Type</th>\n                                    <th>Actions</th>\n                                </tr>\n                            </thead>    \n                            <tbody>\n                                <tr *ngFor=\"let file of files; let i = index\">\n                                    <td data-bs-label=\"File Name\" (click)=\"setPDFViewerSrc(file)\">{{file.name}}</td>\n                                    <td data-bs-label=\"Size\" (click)=\"setPDFViewerSrc(file)\">{{ file.size/1024/1024 | number:'.2' }} MB</td>\n                                    <td data-bs-label=\"Type\" (click)=\"setPDFViewerSrc(file)\">{{file.type}}</td>\n                                    <td data-bs-label=\"Actions\">\n                                        <responsive-button-group collapseSize=\"900\">\n                                            <button type=\"button\" class=\"btn btn-success\" (click)=\"open(file)\">Open</button>\n                                            <button type=\"button\" class=\"btn btn-primary\" (click)=\"download(file)\">Download</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"deleteWithEmit(i)\">Delete</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"fileInputReplace.click(); replaceFileIndex = i;\">Replace</button>\n                                            <button type=\"button\" class=\"btn btn-warning\" (click)=\"email(file)\">Email</button>\n                                        </responsive-button-group>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </collapse-table>\n                    </div>\n                </div>\n                <div *ngIf=\"!files || !files.length\">\n                    <b>No Uploaded Files</b>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["\n \n    html, body { height: 100%; }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n        \n    /* Label container: */\n    .file {\n        display: inline-block;\n        padding: 0 0 0 0.5em;\n        cursor: pointer;\n        position: relative;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n    }\n    \n    /* The pseudo input field: */\n    .file::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: -1;\n        \n        /* Bootstrap appearance: */\n        background-color: #fff;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n        -webkit-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n        box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n    }\n    \n    /* The pseudo button: */\n    .file::after {\n        content: \"Browse\";\n        display: inline-block;\n        \n        /* Bootstrap appearance: */\n        background-color: #eee;\n        border: .075rem solid #ddd;\n        border-radius: 0 .25rem .25rem 0;\n        padding: .5rem 1rem;\n        line-height: 1.5;\n        color: #555;\n    }\n    \n    .file input[type=file] {\n        cursor: pointer;\n        border: 0 none;\n        width: 12em;\n    }\n    \n    /* -webkit hide the button: */\n    .file input[type=file]::-webkit-file-upload-button {\n        border: 0;\n        padding: 0;\n        margin: 0 ;\n        width: 0;\n        background: transparent;\n    }      \n    \n    /* IE10+ hide the button: */\n    .file input[type=file]::-ms-browse {\n        padding: 0;\n        margin: -1px;\n        width: 0;\n        border: 0;\n        background: transparent;\n    }\n    \n    .file input[type=file]::-ms-value {\n        background: #fff;\n        border: 0;\n    }\n\n    card {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "component", type: i8.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "component", type: i9.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileUploadComponent, deps: [{ token: ResizeService }, { token: ProviderService }, { token: DialogService }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileUploadComponent, selector: "file-upload", inputs: { files: "files", allowDelete: "allowDelete", allowReplace: "allowReplace", showFileUpload: "showFileUpload", fileType: "fileType" }, outputs: { filesChanged: "filesChanged", fileAdded: "fileAdded", fileRemoved: "fileRemoved" }, viewQueries: [{ propertyName: "download_link", first: true, predicate: ["download_link"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n \n    html, body { height: 100%; }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n        \n    /* Label container: */\n    .file {\n        display: inline-block;\n        padding: 0 0 0 0.5em;\n        cursor: pointer;\n        position: relative;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n    }\n    \n    /* The pseudo input field: */\n    .file::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: -1;\n        \n        /* Bootstrap appearance: */\n        background-color: #fff;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n        -webkit-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n        box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n    }\n    \n    /* The pseudo button: */\n    .file::after {\n        content: \"Browse\";\n        display: inline-block;\n        \n        /* Bootstrap appearance: */\n        background-color: #eee;\n        border: .075rem solid #ddd;\n        border-radius: 0 .25rem .25rem 0;\n        padding: .5rem 1rem;\n        line-height: 1.5;\n        color: #555;\n    }\n    \n    .file input[type=file] {\n        cursor: pointer;\n        border: 0 none;\n        width: 12em;\n    }\n    \n    /* -webkit hide the button: */\n    .file input[type=file]::-webkit-file-upload-button {\n        border: 0;\n        padding: 0;\n        margin: 0 ;\n        width: 0;\n        background: transparent;\n    }      \n    \n    /* IE10+ hide the button: */\n    .file input[type=file]::-ms-browse {\n        padding: 0;\n        margin: -1px;\n        width: 0;\n        border: 0;\n        background: transparent;\n    }\n    \n    .file input[type=file]::-ms-value {\n        background: #fff;\n        border: 0;\n    }\n\n    card {\n        width: 100%;\n    }\n</style>\n\n<a style=\"display: none\" #download_link></a>\n<input hidden type=\"file\" #fileInputReplace (change)=\"onFileSelectReplace($event)\" />\n \n<div class=\"card\">\n    <div class=\"card-header\">\n        <strong class=\"pull-left\">Files</strong>\n    </div>\n    <div class=\"card-block\">\n        <div class=\"row\">\n            <div class=\"col-lg-6\">\n                <div class=\"row\" *ngIf=\"showFileUpload\">\n                    <div class=\"col-lg-6\">\n                        <div class=\"container\">\n                            <div style=\"margin: 10px 0px; font-weight: bold;\">Upload File</div>\n                            <label class=\"file\">\n                                <input type=\"file\" #fileInput (change)=\"onFileSelect($event)\" />\n                            </label>\n                            <br>\n                            <ngx-file-drop dropZoneLabel=\"Drop files here\" style=\"width: 223px; height: 112px; border: 1px black dashed; border-radius: 5px; justify-content: center;\" class=\"vertical-align\" (onFileDrop)=\"dragFileAccepted($event)\"></ngx-file-drop>\n                        </div>\n                    </div>\n                    <div class=\"col-lg-6\">\n                        <div *ngIf=\"isUploading\">\n                            <b>{{progressMsg || 'N/A'}}</b>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\" style=\"margin-top: 10px;\">\n                    <div class=\"col-lg-12\" *ngIf=\"windowSize > 980\">\n                        <div style=\"text-align: center;\" *ngIf=\"pdfSrc\">\n                            <ngx-doc-viewer [url]=\"pdfSrc\" style=\"display: block;\"></ngx-doc-viewer>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-lg-6\">\n                <div *ngIf=\"files && files.length\">\n                    <b>Uploaded Files</b>\n                    <div [style.max-height]=\"windowSize > 900 ? '300px' : ''\" [style.overflow-y]=\"windowSize > 900 ? 'auto' : ''\">\n                        <collapse-table collapseSize=\"900\">\n                            <thead>\n                                <tr>\n                                    <th>File Name</th>\n                                    <th>Size</th>\n                                    <th>Type</th>\n                                    <th>Actions</th>\n                                </tr>\n                            </thead>    \n                            <tbody>\n                                <tr *ngFor=\"let file of files; let i = index\">\n                                    <td data-label=\"File Name\" (click)=\"setPDFViewerSrc(file)\">{{file.name}}</td>\n                                    <td data-label=\"Size\" (click)=\"setPDFViewerSrc(file)\">{{ file.size/1024/1024 | number:'.2' }} MB</td>\n                                    <td data-label=\"Type\" (click)=\"setPDFViewerSrc(file)\">{{file.type}}</td>\n                                    <td data-label=\"Actions\">\n                                        <responsive-button-group collapseSize=\"900\">\n                                            <button type=\"button\" class=\"btn btn-success\" (click)=\"open(file)\">Open</button>\n                                            <button type=\"button\" class=\"btn btn-primary\" (click)=\"download(file)\">Download</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"deleteWithEmit(i)\">Delete</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"fileInputReplace.click(); replaceFileIndex = i;\">Replace</button>\n                                            <button type=\"button\" class=\"btn btn-warning\" (click)=\"email(file)\">Email</button>\n                                        </responsive-button-group>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </collapse-table>\n                    </div>\n                </div>\n                <div *ngIf=\"!files || !files.length\">\n                    <b>No Uploaded Files</b>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["\n \n    html, body { height: 100%; }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n        \n    /* Label container: */\n    .file {\n        display: inline-block;\n        padding: 0 0 0 0.5em;\n        cursor: pointer;\n        position: relative;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n    }\n    \n    /* The pseudo input field: */\n    .file::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: -1;\n        \n        /* Bootstrap appearance: */\n        background-color: #fff;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n        -webkit-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n        box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n    }\n    \n    /* The pseudo button: */\n    .file::after {\n        content: \"Browse\";\n        display: inline-block;\n        \n        /* Bootstrap appearance: */\n        background-color: #eee;\n        border: .075rem solid #ddd;\n        border-radius: 0 .25rem .25rem 0;\n        padding: .5rem 1rem;\n        line-height: 1.5;\n        color: #555;\n    }\n    \n    .file input[type=file] {\n        cursor: pointer;\n        border: 0 none;\n        width: 12em;\n    }\n    \n    /* -webkit hide the button: */\n    .file input[type=file]::-webkit-file-upload-button {\n        border: 0;\n        padding: 0;\n        margin: 0 ;\n        width: 0;\n        background: transparent;\n    }      \n    \n    /* IE10+ hide the button: */\n    .file input[type=file]::-ms-browse {\n        padding: 0;\n        margin: -1px;\n        width: 0;\n        border: 0;\n        background: transparent;\n    }\n    \n    .file input[type=file]::-ms-value {\n        background: #fff;\n        border: 0;\n    }\n\n    card {\n        width: 100%;\n    }\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "component", type: i8.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "component", type: i9.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-upload', template: "<style>\n \n    html, body { height: 100%; }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n        \n    /* Label container: */\n    .file {\n        display: inline-block;\n        padding: 0 0 0 0.5em;\n        cursor: pointer;\n        position: relative;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n    }\n    \n    /* The pseudo input field: */\n    .file::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: -1;\n        \n        /* Bootstrap appearance: */\n        background-color: #fff;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n        -webkit-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n        box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n    }\n    \n    /* The pseudo button: */\n    .file::after {\n        content: \"Browse\";\n        display: inline-block;\n        \n        /* Bootstrap appearance: */\n        background-color: #eee;\n        border: .075rem solid #ddd;\n        border-radius: 0 .25rem .25rem 0;\n        padding: .5rem 1rem;\n        line-height: 1.5;\n        color: #555;\n    }\n    \n    .file input[type=file] {\n        cursor: pointer;\n        border: 0 none;\n        width: 12em;\n    }\n    \n    /* -webkit hide the button: */\n    .file input[type=file]::-webkit-file-upload-button {\n        border: 0;\n        padding: 0;\n        margin: 0 ;\n        width: 0;\n        background: transparent;\n    }      \n    \n    /* IE10+ hide the button: */\n    .file input[type=file]::-ms-browse {\n        padding: 0;\n        margin: -1px;\n        width: 0;\n        border: 0;\n        background: transparent;\n    }\n    \n    .file input[type=file]::-ms-value {\n        background: #fff;\n        border: 0;\n    }\n\n    card {\n        width: 100%;\n    }\n</style>\n\n<a style=\"display: none\" #download_link></a>\n<input hidden type=\"file\" #fileInputReplace (change)=\"onFileSelectReplace($event)\" />\n \n<div class=\"card\">\n    <div class=\"card-header\">\n        <strong class=\"pull-left\">Files</strong>\n    </div>\n    <div class=\"card-block\">\n        <div class=\"row\">\n            <div class=\"col-lg-6\">\n                <div class=\"row\" *ngIf=\"showFileUpload\">\n                    <div class=\"col-lg-6\">\n                        <div class=\"container\">\n                            <div style=\"margin: 10px 0px; font-weight: bold;\">Upload File</div>\n                            <label class=\"file\">\n                                <input type=\"file\" #fileInput (change)=\"onFileSelect($event)\" />\n                            </label>\n                            <br>\n                            <ngx-file-drop dropZoneLabel=\"Drop files here\" style=\"width: 223px; height: 112px; border: 1px black dashed; border-radius: 5px; justify-content: center;\" class=\"vertical-align\" (onFileDrop)=\"dragFileAccepted($event)\"></ngx-file-drop>\n                        </div>\n                    </div>\n                    <div class=\"col-lg-6\">\n                        <div *ngIf=\"isUploading\">\n                            <b>{{progressMsg || 'N/A'}}</b>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\" style=\"margin-top: 10px;\">\n                    <div class=\"col-lg-12\" *ngIf=\"windowSize > 980\">\n                        <div style=\"text-align: center;\" *ngIf=\"pdfSrc\">\n                            <ngx-doc-viewer [url]=\"pdfSrc\" style=\"display: block;\"></ngx-doc-viewer>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-lg-6\">\n                <div *ngIf=\"files && files.length\">\n                    <b>Uploaded Files</b>\n                    <div [style.max-height]=\"windowSize > 900 ? '300px' : ''\" [style.overflow-y]=\"windowSize > 900 ? 'auto' : ''\">\n                        <collapse-table collapseSize=\"900\">\n                            <thead>\n                                <tr>\n                                    <th>File Name</th>\n                                    <th>Size</th>\n                                    <th>Type</th>\n                                    <th>Actions</th>\n                                </tr>\n                            </thead>    \n                            <tbody>\n                                <tr *ngFor=\"let file of files; let i = index\">\n                                    <td data-bs-label=\"File Name\" (click)=\"setPDFViewerSrc(file)\">{{file.name}}</td>\n                                    <td data-bs-label=\"Size\" (click)=\"setPDFViewerSrc(file)\">{{ file.size/1024/1024 | number:'.2' }} MB</td>\n                                    <td data-bs-label=\"Type\" (click)=\"setPDFViewerSrc(file)\">{{file.type}}</td>\n                                    <td data-bs-label=\"Actions\">\n                                        <responsive-button-group collapseSize=\"900\">\n                                            <button type=\"button\" class=\"btn btn-success\" (click)=\"open(file)\">Open</button>\n                                            <button type=\"button\" class=\"btn btn-primary\" (click)=\"download(file)\">Download</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"deleteWithEmit(i)\">Delete</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"fileInputReplace.click(); replaceFileIndex = i;\">Replace</button>\n                                            <button type=\"button\" class=\"btn btn-warning\" (click)=\"email(file)\">Email</button>\n                                        </responsive-button-group>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </collapse-table>\n                    </div>\n                </div>\n                <div *ngIf=\"!files || !files.length\">\n                    <b>No Uploaded Files</b>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'file-upload', template: "<style>\n \n    html, body { height: 100%; }\n\n    collapse-table tr:hover {\n        background-color: lightblue;\n        cursor: pointer;\n    }\n\n    collapse-table {\n        width: 100%;\n    }\n        \n    /* Label container: */\n    .file {\n        display: inline-block;\n        padding: 0 0 0 0.5em;\n        cursor: pointer;\n        position: relative;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n    }\n    \n    /* The pseudo input field: */\n    .file::before {\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: -1;\n        \n        /* Bootstrap appearance: */\n        background-color: #fff;\n        border: .075rem solid #ddd;\n        border-radius: .25rem;\n        -webkit-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n        box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);\n    }\n    \n    /* The pseudo button: */\n    .file::after {\n        content: \"Browse\";\n        display: inline-block;\n        \n        /* Bootstrap appearance: */\n        background-color: #eee;\n        border: .075rem solid #ddd;\n        border-radius: 0 .25rem .25rem 0;\n        padding: .5rem 1rem;\n        line-height: 1.5;\n        color: #555;\n    }\n    \n    .file input[type=file] {\n        cursor: pointer;\n        border: 0 none;\n        width: 12em;\n    }\n    \n    /* -webkit hide the button: */\n    .file input[type=file]::-webkit-file-upload-button {\n        border: 0;\n        padding: 0;\n        margin: 0 ;\n        width: 0;\n        background: transparent;\n    }      \n    \n    /* IE10+ hide the button: */\n    .file input[type=file]::-ms-browse {\n        padding: 0;\n        margin: -1px;\n        width: 0;\n        border: 0;\n        background: transparent;\n    }\n    \n    .file input[type=file]::-ms-value {\n        background: #fff;\n        border: 0;\n    }\n\n    card {\n        width: 100%;\n    }\n</style>\n\n<a style=\"display: none\" #download_link></a>\n<input hidden type=\"file\" #fileInputReplace (change)=\"onFileSelectReplace($event)\" />\n \n<div class=\"card\">\n    <div class=\"card-header\">\n        <strong class=\"pull-left\">Files</strong>\n    </div>\n    <div class=\"card-block\">\n        <div class=\"row\">\n            <div class=\"col-lg-6\">\n                <div class=\"row\" *ngIf=\"showFileUpload\">\n                    <div class=\"col-lg-6\">\n                        <div class=\"container\">\n                            <div style=\"margin: 10px 0px; font-weight: bold;\">Upload File</div>\n                            <label class=\"file\">\n                                <input type=\"file\" #fileInput (change)=\"onFileSelect($event)\" />\n                            </label>\n                            <br>\n                            <ngx-file-drop dropZoneLabel=\"Drop files here\" style=\"width: 223px; height: 112px; border: 1px black dashed; border-radius: 5px; justify-content: center;\" class=\"vertical-align\" (onFileDrop)=\"dragFileAccepted($event)\"></ngx-file-drop>\n                        </div>\n                    </div>\n                    <div class=\"col-lg-6\">\n                        <div *ngIf=\"isUploading\">\n                            <b>{{progressMsg || 'N/A'}}</b>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"row\" style=\"margin-top: 10px;\">\n                    <div class=\"col-lg-12\" *ngIf=\"windowSize > 980\">\n                        <div style=\"text-align: center;\" *ngIf=\"pdfSrc\">\n                            <ngx-doc-viewer [url]=\"pdfSrc\" style=\"display: block;\"></ngx-doc-viewer>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-lg-6\">\n                <div *ngIf=\"files && files.length\">\n                    <b>Uploaded Files</b>\n                    <div [style.max-height]=\"windowSize > 900 ? '300px' : ''\" [style.overflow-y]=\"windowSize > 900 ? 'auto' : ''\">\n                        <collapse-table collapseSize=\"900\">\n                            <thead>\n                                <tr>\n                                    <th>File Name</th>\n                                    <th>Size</th>\n                                    <th>Type</th>\n                                    <th>Actions</th>\n                                </tr>\n                            </thead>    \n                            <tbody>\n                                <tr *ngFor=\"let file of files; let i = index\">\n                                    <td data-label=\"File Name\" (click)=\"setPDFViewerSrc(file)\">{{file.name}}</td>\n                                    <td data-label=\"Size\" (click)=\"setPDFViewerSrc(file)\">{{ file.size/1024/1024 | number:'.2' }} MB</td>\n                                    <td data-label=\"Type\" (click)=\"setPDFViewerSrc(file)\">{{file.type}}</td>\n                                    <td data-label=\"Actions\">\n                                        <responsive-button-group collapseSize=\"900\">\n                                            <button type=\"button\" class=\"btn btn-success\" (click)=\"open(file)\">Open</button>\n                                            <button type=\"button\" class=\"btn btn-primary\" (click)=\"download(file)\">Download</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"deleteWithEmit(i)\">Delete</button>\n                                            <button [hidden]=\"!allowDelete || (file.type !== 'misc' && !userIsInRole('super-admin'))\" type=\"button\" class=\"btn btn-danger\" (click)=\"fileInputReplace.click(); replaceFileIndex = i;\">Replace</button>\n                                            <button type=\"button\" class=\"btn btn-warning\" (click)=\"email(file)\">Email</button>\n                                        </responsive-button-group>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </collapse-table>\n                    </div>\n                </div>\n                <div *ngIf=\"!files || !files.length\">\n                    <b>No Uploaded Files</b>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ResizeService }, { type: ProviderService }, { type: DialogService }, { type: i4.HttpClient }]; }, propDecorators: { files: [{
                 type: Input
             }], allowDelete: [{
@@ -7229,22 +7408,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class FileModule {
 }
-FileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FileModule, declarations: [FileUploadComponent], imports: [CommonModule,
+FileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FileModule, declarations: [FileUploadComponent], imports: [CommonModule,
         FormsModule,
         CollapseTableModule,
         NgbModule,
         ResponsiveButtonGroupModule,
         NgxFileDropModule,
         NgxDocViewerModule], exports: [FileUploadComponent] });
-FileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileModule, imports: [CommonModule,
+FileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileModule, imports: [CommonModule,
         FormsModule,
         CollapseTableModule,
         NgbModule,
         ResponsiveButtonGroupModule,
         NgxFileDropModule,
         NgxDocViewerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7267,17 +7446,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class UserSettingsModule {
 }
-UserSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UserSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsModule, declarations: [UserSettingsComponent,
+UserSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UserSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsModule, declarations: [UserSettingsComponent,
         UsersSettingsComponent], imports: [SharedModule, i1$2.RouterModule, DatatableModule,
         FileModule] });
-UserSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsModule, providers: [
+UserSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsModule, providers: [
         UserSettingsService
     ], imports: [SharedModule,
         UserSettingsRouting,
         DatatableModule,
         FileModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UserSettingsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserSettingsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7354,17 +7533,17 @@ class HomeComponent extends BaseComponent {
         }
     }
 }
-HomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HomeComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: AuthService }, { token: ProviderService }, { token: i4.HttpClient }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
-HomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HomeComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<div style=\"height: 100%\">\n    <div class=\"row\" style=\"margin-left: 0px; margin-right: 0px; height: 100%;\">\n        <div class=\"col-lg-12\" style=\"height: 100%\">\n            <div class=\"bg-light p-3\" style=\"height: 100%; padding-bottom: 0px;\">\n                <div class=\"container text-center\" style=\"height: 100%\">\n                    <img src=\"/assets/images/ResolveIO.png\" class=\"img-fluid\" alt=\"Responsive image\" style=\"height: 100%; width: auto; max-width: 750px; max-height: 525px;\">\n                    <p style=\"font-size: 24px; font-style: italic\">The All-in-One Solution for Tracking Inventory, Ordering, POs, Management, and Much More!</p>\n                </div>\n            </div>\n        </div>\n    </div>            \n</div>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HomeComponent, decorators: [{
+HomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HomeComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: AuthService }, { token: ProviderService }, { token: i4.HttpClient }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+HomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HomeComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<div style=\"height: 100%\">\n    <div class=\"row\" style=\"margin-left: 0px; margin-right: 0px; height: 100%;\">\n        <div class=\"col-lg-12\" style=\"height: 100%\">\n            <div class=\"jumbotron jumbotron-fluid\" style=\"height: 100%; padding-bottom: 0px;\">\n                <div class=\"container text-center\" style=\"height: 100%\">\n                    <img src=\"/assets/images/ResolveIO.png\" class=\"img-fluid\" alt=\"Responsive image\" style=\"height: 100%; width: auto; max-width: 750px; max-height: 525px;\">\n                    <p style=\"font-size: 24px; font-style: italic\">The All-in-One Solution for Tracking Inventory, Ordering, POs, Management, and Much More!</p>\n                </div>\n            </div>\n        </div>\n    </div>            \n</div>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HomeComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<div style=\"height: 100%\">\n    <div class=\"row\" style=\"margin-left: 0px; margin-right: 0px; height: 100%;\">\n        <div class=\"col-lg-12\" style=\"height: 100%\">\n            <div class=\"bg-light p-3\" style=\"height: 100%; padding-bottom: 0px;\">\n                <div class=\"container text-center\" style=\"height: 100%\">\n                    <img src=\"/assets/images/ResolveIO.png\" class=\"img-fluid\" alt=\"Responsive image\" style=\"height: 100%; width: auto; max-width: 750px; max-height: 525px;\">\n                    <p style=\"font-size: 24px; font-style: italic\">The All-in-One Solution for Tracking Inventory, Ordering, POs, Management, and Much More!</p>\n                </div>\n            </div>\n        </div>\n    </div>            \n</div>" }]
+            args: [{ providers: [ProviderService], template: "<div style=\"height: 100%\">\n    <div class=\"row\" style=\"margin-left: 0px; margin-right: 0px; height: 100%;\">\n        <div class=\"col-lg-12\" style=\"height: 100%\">\n            <div class=\"jumbotron jumbotron-fluid\" style=\"height: 100%; padding-bottom: 0px;\">\n                <div class=\"container text-center\" style=\"height: 100%\">\n                    <img src=\"/assets/images/ResolveIO.png\" class=\"img-fluid\" alt=\"Responsive image\" style=\"height: 100%; width: auto; max-width: 750px; max-height: 525px;\">\n                    <p style=\"font-size: 24px; font-style: italic\">The All-in-One Solution for Tracking Inventory, Ordering, POs, Management, and Much More!</p>\n                </div>\n            </div>\n        </div>\n    </div>            \n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: AuthService }, { type: ProviderService }, { type: i4.HttpClient }, { type: CoreService }]; } });
 
 class CoreModule {
 }
-CoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CoreModule, declarations: [CoreComponent,
+CoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CoreModule, declarations: [CoreComponent,
         HomeComponent,
         LoggerComponent,
         NavbarMainComponent,
@@ -7398,9 +7577,11 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         Auth365Component,
         FocusDirective,
         ScrollDirective] });
-CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreModule, providers: [
+CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreModule, providers: [
         CoreService,
         AuthService,
+        AuthGuard,
+        CanDeactivateGuard,
         DialogService,
         ValidationService,
         AwsService,
@@ -7423,7 +7604,7 @@ CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
         UserSettingsModule,
         BrowserAnimationsModule,
         CollapseTableModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7464,6 +7645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     providers: [
                         CoreService,
                         AuthService,
+                        AuthGuard,
+                        CanDeactivateGuard,
                         DialogService,
                         ValidationService,
                         AwsService,
@@ -7492,119 +7675,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-const AuthGuard = (next) => {
-    let _router = inject(Router);
-    let _auth = inject(AuthService);
-    let _account = inject(AccountManagerService);
-    // let _ds = inject(DialogService);
-    // let _app = inject(CoreService);
-    let _offline = inject(OfflineManagerService);
-    let _aps = inject(AuthPermissionService);
-    // let _alert = inject(AlertService);
-    return new Promise((resolve) => {
-        _account.isInitCompleted().then(() => {
-            let user = _account.getUser();
-            if (!user) {
-                user = JSON.parse(_offline.getUser(), dateReviver);
-                if (user) {
-                    _account.setUser(user);
-                }
-            }
-            if (!user) {
-                if (navigator.onLine) {
-                    _auth.loginUser().then(newUser => {
-                        _account.isLoginCompleted().then(() => {
-                            user = _account.getUser();
-                            if (!user.active) {
-                                _router.navigateByUrl('/home');
-                                resolve(false);
-                            }
-                            else {
-                                let view = next.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/');
-                                let moduleView = view.replace(/^(\/.*\/).*/, '$1');
-                                console.log(view);
-                                console.log(moduleView);
-                                if (user.roles.super_admin) {
-                                    resolve(true);
-                                }
-                                else if (!user.roles.groups.filter(a => a.views.filter(b => b.startsWith(view)).length).length) {
-                                    if (user.roles.groups.filter(a => a.views.filter(b => b.startsWith(moduleView) && !doesLinkHaveParameter(_aps, b)).length).length) {
-                                        let link = user.roles.groups.filter(a => a.views.filter(b => b.startsWith(moduleView) && !doesLinkHaveParameter(_aps, b)).length)[0].views.filter(a => a.startsWith(moduleView) && !doesLinkHaveParameter(_aps, a))[0];
-                                        _router.navigateByUrl(link);
-                                    }
-                                    else {
-                                        _router.navigateByUrl('/home');
-                                    }
-                                    resolve(false);
-                                }
-                                else {
-                                    resolve(true);
-                                }
-                            }
-                        });
-                    }, () => {
-                        _router.navigateByUrl('/home');
-                        resolve(false);
-                    });
-                }
-                else {
-                    resolve(true);
-                }
-            }
-            else {
-                if (!user.active) {
-                    _router.navigateByUrl('/home');
-                    resolve(false);
-                }
-                else {
-                    let view = next.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/');
-                    let moduleView = view.replace(/^(\/.*\/).*/, '$1');
-                    console.log(view);
-                    console.log(moduleView);
-                    if (user.roles.super_admin) {
-                        resolve(true);
-                    }
-                    else if (!user.roles.groups.filter(a => a.views.filter(b => b.startsWith(view)).length).length) {
-                        if (user.roles.groups.filter(a => a.views.filter(b => b.startsWith(moduleView) && !doesLinkHaveParameter(_aps, b)).length).length) {
-                            let link = user.roles.groups.filter(a => a.views.filter(b => b.startsWith(moduleView) && !doesLinkHaveParameter(_aps, b)).length)[0].views.filter(a => a.startsWith(moduleView) && !doesLinkHaveParameter(_aps, a))[0];
-                            _router.navigateByUrl(link);
-                        }
-                        else {
-                            _router.navigateByUrl('/home');
-                        }
-                        resolve(false);
-                    }
-                    else {
-                        resolve(true);
-                    }
-                }
-            }
-        }, () => { });
-    });
-};
-function doesLinkHaveParameter(_aps, link) {
-    let permissions = _aps.getAllModulePermissions();
-    for (let i = 0; i < permissions.length; i++) {
-        let permission = permissions[i];
-        for (let j = 0; j < permission.views.length; j++) {
-            let view = permission.views[j];
-            if (view.link === link) {
-                if (view.has_parameter) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            }
-        }
-    }
-    return false;
-}
-
-const CanDeactivateGuard = (component) => {
-    return component.canDeactivate ? component.canDeactivate() : true;
-};
-
 class SupportTicketService {
     constructor() {
         this.selectedSupportTicket = new BehaviorSubject('0');
@@ -7613,9 +7683,9 @@ class SupportTicketService {
         this.selectedSupportTicket.next(id);
     }
 }
-SupportTicketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SupportTicketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketService, decorators: [{
+SupportTicketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SupportTicketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -7665,9 +7735,9 @@ class SupportTicketComponent extends BaseComponent {
         this._services._app.setNavbarModuleData(this.menuData);
     }
 }
-SupportTicketComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketComponent, deps: [{ token: SupportTicketService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SupportTicketComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketComponent, decorators: [{
+SupportTicketComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketComponent, deps: [{ token: SupportTicketService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+SupportTicketComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SupportTicketComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [ProviderService],
@@ -7795,9 +7865,9 @@ class SupportTicketListComponent extends BaseComponent {
         });
     }
 }
-SupportTicketListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketListComponent, deps: [{ token: SupportTicketService }, { token: i1$2.ActivatedRoute }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SupportTicketListComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n    <div class=\"col-sm-6\">\n        <b>Filter Support Ticket By Status</b><br>\n        <select class=\"form-control\" [(ngModel)]=\"tableData.filters['status']\" (change)=\"onQueryDataChanged()\" tourAnchor=\"supportListFilter\">\n            <option value=\"All\">All</option>\n            <option value=\"Opened\">Opened</option>\n            <option value=\"Resolved\">Resolved</option>\n        </select>\n    </div>\n    <div class=\"col-sm-6\">\n        <b>Filter Support Ticket By Sub-Status</b><br>\n        <select class=\"form-control\" [(ngModel)]=\"tableData.filters['substatus']\" (change)=\"onQueryDataChanged()\">\n            <option value=\"All\">All</option>\n            <option value=\"Investigating\">Investigating</option>\n            <option value=\"Awaiting Customer Interaction\">Awaiting Customer Interaction</option>\n            <option value=\"Resolved\">Resolved</option>\n        </select>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col-md-12\">\n        <div style=\"padding-left: 15px; padding-right: 15px; padding-top: 15px;\">\n            <data-table #dataTable\n                [urlClick]=\"'/support-ticket/detail/'\"\n                [columns]=\"columns\"\n                [data]=\"support_tickets\"\n                [collapseSize]=\"990\"\n                [searchTitle]=\"'Search For Support Ticket...'\"\n                [totalItems]=\"totalItems\"\n                (onChangeTableData)=\"onQueryDataChanged()\"\n                [tableData]=\"tableData\"\n                tourAnchor=\"supportListDatatable\">\n            </data-table>\n        </div>\n    </div>\n</div>\n    ", dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatatableComponent, selector: "data-table", inputs: ["urlClick", "columns", "data", "collapseSize", "searchTitle", "totalItems", "tableData"], outputs: ["onChangeTableData"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketListComponent, decorators: [{
+SupportTicketListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketListComponent, deps: [{ token: SupportTicketService }, { token: i1$2.ActivatedRoute }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+SupportTicketListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SupportTicketListComponent, selector: "ng-component", providers: [ProviderService], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n    <div class=\"col-sm-6\">\n        <b>Filter Support Ticket By Status</b><br>\n        <select class=\"form-control\" [(ngModel)]=\"tableData.filters['status']\" (change)=\"onQueryDataChanged()\" tourAnchor=\"supportListFilter\">\n            <option value=\"All\">All</option>\n            <option value=\"Opened\">Opened</option>\n            <option value=\"Resolved\">Resolved</option>\n        </select>\n    </div>\n    <div class=\"col-sm-6\">\n        <b>Filter Support Ticket By Sub-Status</b><br>\n        <select class=\"form-control\" [(ngModel)]=\"tableData.filters['substatus']\" (change)=\"onQueryDataChanged()\">\n            <option value=\"All\">All</option>\n            <option value=\"Investigating\">Investigating</option>\n            <option value=\"Awaiting Customer Interaction\">Awaiting Customer Interaction</option>\n            <option value=\"Resolved\">Resolved</option>\n        </select>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col-md-12\">\n        <div style=\"padding-left: 15px; padding-right: 15px; padding-top: 15px;\">\n            <data-table #dataTable\n                [urlClick]=\"'/support-ticket/detail/'\"\n                [columns]=\"columns\"\n                [data]=\"support_tickets\"\n                [collapseSize]=\"990\"\n                [searchTitle]=\"'Search For Support Ticket...'\"\n                [totalItems]=\"totalItems\"\n                (onChangeTableData)=\"onQueryDataChanged()\"\n                [tableData]=\"tableData\"\n                tourAnchor=\"supportListDatatable\">\n            </data-table>\n        </div>\n    </div>\n</div>\n    ", dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatatableComponent, selector: "data-table", inputs: ["urlClick", "columns", "data", "collapseSize", "searchTitle", "totalItems", "tableData"], outputs: ["onChangeTableData"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketListComponent, decorators: [{
             type: Component,
             args: [{ providers: [ProviderService], template: "<div class=\"row\">\n    <div class=\"col-sm-6\">\n        <b>Filter Support Ticket By Status</b><br>\n        <select class=\"form-control\" [(ngModel)]=\"tableData.filters['status']\" (change)=\"onQueryDataChanged()\" tourAnchor=\"supportListFilter\">\n            <option value=\"All\">All</option>\n            <option value=\"Opened\">Opened</option>\n            <option value=\"Resolved\">Resolved</option>\n        </select>\n    </div>\n    <div class=\"col-sm-6\">\n        <b>Filter Support Ticket By Sub-Status</b><br>\n        <select class=\"form-control\" [(ngModel)]=\"tableData.filters['substatus']\" (change)=\"onQueryDataChanged()\">\n            <option value=\"All\">All</option>\n            <option value=\"Investigating\">Investigating</option>\n            <option value=\"Awaiting Customer Interaction\">Awaiting Customer Interaction</option>\n            <option value=\"Resolved\">Resolved</option>\n        </select>\n    </div>\n</div>\n<div class=\"row\">\n    <div class=\"col-md-12\">\n        <div style=\"padding-left: 15px; padding-right: 15px; padding-top: 15px;\">\n            <data-table #dataTable\n                [urlClick]=\"'/support-ticket/detail/'\"\n                [columns]=\"columns\"\n                [data]=\"support_tickets\"\n                [collapseSize]=\"990\"\n                [searchTitle]=\"'Search For Support Ticket...'\"\n                [totalItems]=\"totalItems\"\n                (onChangeTableData)=\"onQueryDataChanged()\"\n                [tableData]=\"tableData\"\n                tourAnchor=\"supportListDatatable\">\n            </data-table>\n        </div>\n    </div>\n</div>\n    " }]
         }], ctorParameters: function () { return [{ type: SupportTicketService }, { type: i1$2.ActivatedRoute }, { type: ProviderService }]; } });
@@ -7894,11 +7964,11 @@ class SupportTicketNewComponent extends BaseComponent {
         });
     }
 }
-SupportTicketNewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketNewComponent, deps: [{ token: SupportTicketService }, { token: i0.ChangeDetectorRef }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SupportTicketNewComponent, selector: "ng-component", providers: [ProviderService], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\" tourAnchor=\"supportNewSelect\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Problem/Feature Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\" tourAnchor=\"supportNewInput\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\" tourAnchor=\"supportNewSubmit\"></form-button>\n        </div>\n    </form>\n</div>\n", styles: ["\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketNewComponent, decorators: [{
+SupportTicketNewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketNewComponent, deps: [{ token: SupportTicketService }, { token: i0.ChangeDetectorRef }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+SupportTicketNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SupportTicketNewComponent, selector: "ng-component", providers: [ProviderService], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\" tourAnchor=\"supportNewSelect\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Problem/Feature Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\" tourAnchor=\"supportNewInput\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\" tourAnchor=\"supportNewSubmit\"></form-button>\n        </div>\n    </form>\n</div>\n", styles: ["\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketNewComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\" tourAnchor=\"supportNewSelect\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Problem/Feature Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\" tourAnchor=\"supportNewInput\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\" tourAnchor=\"supportNewSubmit\"></form-button>\n        </div>\n    </form>\n</div>\n" }]
+            args: [{ providers: [ProviderService], template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\" tourAnchor=\"supportNewSelect\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Problem/Feature Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\" tourAnchor=\"supportNewInput\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\" tourAnchor=\"supportNewSubmit\"></form-button>\n        </div>\n    </form>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SupportTicketService }, { type: i0.ChangeDetectorRef }, { type: ProviderService }, { type: DialogService }]; }, propDecorators: { fileUpload: [{
                 type: ViewChild,
                 args: ['fileUpload', { static: true }]
@@ -8083,11 +8153,11 @@ class SupportTicketDetailComponent extends BaseComponent {
         return this._services._account.getUser()._id === message.id_user;
     }
 }
-SupportTicketDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketDetailComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SupportTicketService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SupportTicketDetailComponent, selector: "ng-component", providers: [ProviderService], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n\n    ngb-accordion {\n        width: 100%;\n    }\n\n    dl {\n        margin-bottom: 0px;\n    }\n\n    .selected {\n        background-color: lightblue;\n    }\n</style>\n\n<div class=\"col-lg-12\" *ngIf=\"data\">\n    <div class=\"row\">\n        <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo, supportTicketMessages, files\">\n            <ngb-panel id=\"supportTicketInfo\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Support Ticket Info</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>General Info</b></div>\n                        <div class=\"card-body\">\n                            <div class=\"row\">\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Support Ticket #</dt>\n                                        <dd>{{data.support_ticket_number | number}}</dd>\n                                        <dt>Date Created</dt>\n                                        <dd>{{data.date_created | date: 'short'}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Type</dt>\n                                        <dd>{{data.type}}</dd>\n                                        <dt>User</dt>\n                                        <dd>{{data.user_created}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Status</dt>\n                                        <dd>{{ data.status }}</dd>\n                                    </dl>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>Problem Description</b></div>\n                        <div class=\"card-body\">\n                            <pre>{{data.issue}}</pre>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"supportTicketMessages\" *ngIf=\"data\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Messages</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"row\">\n                        <div class=\"col-lg-12\">\n                            <div class=\"card\" *ngFor=\"let message of data.messages; let i = index;\">\n                                <div class=\"card-header\"><b>User: {{message.user}} - Date: {{message.date | date : 'short'}}</b></div>\n                                <div class=\"card-body\" [ngClass]=\"[message.type === 'ResolveIO' ? 'selected' : '']\">\n                                    <div class=\"row\"  style=\"width: 100%\">\n                                        <div class=\"col-lg-10\">\n                                            <pre>{{message.message}}</pre>\n                                        </div>\n                                        <div class=\"col-lg-2\">\n                                            <responsive-button-group collapseSize=\"900\">\n                                                <button type=\"button\" class=\"btn btn-warning\" (click)=\"editMessage(i)\" *ngIf=\"isMyMessage(message)\">Edit</button>\n                                                <button type=\"button\" class=\"btn btn-danger\" (click)=\"deleteMessage(i)\" *ngIf=\"isMyMessage(message)\">Delete</button>\n                                            </responsive-button-group>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px;\">\n                        <div class=\"col-lg-12\">\n                            <button type=\"button\" class=\"btn btn-success\" (click)=\"newMessage()\">New Message</button>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"files\">\n\t\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t\t<div> \n\t\t\t\t\t\t<label class=\"label-accordion\">Support Ticket Files</label>\n\t\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('files')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('files')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t\t<file-upload #fileUpload (fileAdded)=\"onFileAdded($event)\" (fileRemoved)=\"onFilesRemoved($event)\" [files]=\"files\" [allowDelete]=\"true\" [allowReplace]=\"true\"></file-upload>\n\t\t\t\t</ng-template>\n\t\t\t</ngb-panel>\n        </ngb-accordion>\n    </div>\n    <div class=\"row\" style=\"padding-top: 15px;\">\n        <responsive-button-group collapseSize=\"900\">\n            <button class=\"btn btn-warning\" type=\"button\" (click)=\"edit()\">Edit Support Ticket</button>\n        </responsive-button-group>\n    </div>\n</div>\n    ", styles: ["\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n\n    ngb-accordion {\n        width: 100%;\n    }\n\n    dl {\n        margin-bottom: 0px;\n    }\n\n    .selected {\n        background-color: lightblue;\n    }\n"], dependencies: [{ kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileUploadComponent, selector: "file-upload", inputs: ["files", "allowDelete", "allowReplace", "showFileUpload", "fileType"], outputs: ["filesChanged", "fileAdded", "fileRemoved"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketDetailComponent, decorators: [{
+SupportTicketDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketDetailComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SupportTicketService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+SupportTicketDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SupportTicketDetailComponent, selector: "ng-component", providers: [ProviderService], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n\n    ngb-accordion {\n        width: 100%;\n    }\n\n    dl {\n        margin-bottom: 0px;\n    }\n\n    .selected {\n        background-color: lightblue;\n    }\n</style>\n\n<div class=\"col-lg-12\" *ngIf=\"data\">\n    <div class=\"row\">\n        <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo, supportTicketMessages, files\">\n            <ngb-panel id=\"supportTicketInfo\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Support Ticket Info</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>General Info</b></div>\n                        <div class=\"card-body\">\n                            <div class=\"row\">\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Support Ticket #</dt>\n                                        <dd>{{data.support_ticket_number | number}}</dd>\n                                        <dt>Date Created</dt>\n                                        <dd>{{data.date_created | date: 'short'}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Type</dt>\n                                        <dd>{{data.type}}</dd>\n                                        <dt>User</dt>\n                                        <dd>{{data.user_created}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Status</dt>\n                                        <dd>{{ data.status }}</dd>\n                                    </dl>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>Problem Description</b></div>\n                        <div class=\"card-body\">\n                            <pre>{{data.issue}}</pre>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"supportTicketMessages\" *ngIf=\"data\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Messages</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"row\">\n                        <div class=\"col-lg-12\">\n                            <div class=\"card\" *ngFor=\"let message of data.messages; let i = index;\">\n                                <div class=\"card-header\"><b>User: {{message.user}} - Date: {{message.date | date : 'short'}}</b></div>\n                                <div class=\"card-body\" [ngClass]=\"[message.type === 'ResolveIO' ? 'selected' : '']\">\n                                    <div class=\"row\"  style=\"width: 100%\">\n                                        <div class=\"col-lg-10\">\n                                            <pre>{{message.message}}</pre>\n                                        </div>\n                                        <div class=\"col-lg-2\">\n                                            <responsive-button-group collapseSize=\"900\">\n                                                <button type=\"button\" class=\"btn btn-warning\" (click)=\"editMessage(i)\" *ngIf=\"isMyMessage(message)\">Edit</button>\n                                                <button type=\"button\" class=\"btn btn-danger\" (click)=\"deleteMessage(i)\" *ngIf=\"isMyMessage(message)\">Delete</button>\n                                            </responsive-button-group>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px;\">\n                        <div class=\"col-lg-12\">\n                            <button type=\"button\" class=\"btn btn-success\" (click)=\"newMessage()\">New Message</button>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"files\">\n\t\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t\t<div> \n\t\t\t\t\t\t<label class=\"label-accordion\">Support Ticket Files</label>\n\t\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('files')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('files')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t\t<file-upload #fileUpload (fileAdded)=\"onFileAdded($event)\" (fileRemoved)=\"onFilesRemoved($event)\" [files]=\"files\" [allowDelete]=\"true\" [allowReplace]=\"true\"></file-upload>\n\t\t\t\t</ng-template>\n\t\t\t</ngb-panel>\n        </ngb-accordion>\n    </div>\n    <div class=\"row\" style=\"padding-top: 15px;\">\n        <responsive-button-group collapseSize=\"900\">\n            <button class=\"btn btn-warning\" type=\"button\" (click)=\"edit()\">Edit Support Ticket</button>\n        </responsive-button-group>\n    </div>\n</div>\n    ", styles: ["\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n\n    ngb-accordion {\n        width: 100%;\n    }\n\n    dl {\n        margin-bottom: 0px;\n    }\n\n    .selected {\n        background-color: lightblue;\n    }\n"], dependencies: [{ kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileUploadComponent, selector: "file-upload", inputs: ["files", "allowDelete", "allowReplace", "showFileUpload", "fileType"], outputs: ["filesChanged", "fileAdded", "fileRemoved"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketDetailComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n\n    ngb-accordion {\n        width: 100%;\n    }\n\n    dl {\n        margin-bottom: 0px;\n    }\n\n    .selected {\n        background-color: lightblue;\n    }\n</style>\n\n<div class=\"col-lg-12\" *ngIf=\"data\">\n    <div class=\"row\">\n        <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo, supportTicketMessages, files\">\n            <ngb-panel id=\"supportTicketInfo\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Support Ticket Info</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>General Info</b></div>\n                        <div class=\"card-body\">\n                            <div class=\"row\">\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Support Ticket #</dt>\n                                        <dd>{{data.support_ticket_number | number}}</dd>\n                                        <dt>Date Created</dt>\n                                        <dd>{{data.date_created | date: 'short'}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Type</dt>\n                                        <dd>{{data.type}}</dd>\n                                        <dt>User</dt>\n                                        <dd>{{data.user_created}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Status</dt>\n                                        <dd>{{ data.status }}</dd>\n                                    </dl>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>Problem Description</b></div>\n                        <div class=\"card-body\">\n                            <pre>{{data.issue}}</pre>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"supportTicketMessages\" *ngIf=\"data\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Messages</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"row\">\n                        <div class=\"col-lg-12\">\n                            <div class=\"card\" *ngFor=\"let message of data.messages; let i = index;\">\n                                <div class=\"card-header\"><b>User: {{message.user}} - Date: {{message.date | date : 'short'}}</b></div>\n                                <div class=\"card-body\" [ngClass]=\"[message.type === 'ResolveIO' ? 'selected' : '']\">\n                                    <div class=\"row\"  style=\"width: 100%\">\n                                        <div class=\"col-lg-10\">\n                                            <pre>{{message.message}}</pre>\n                                        </div>\n                                        <div class=\"col-lg-2\">\n                                            <responsive-button-group collapseSize=\"900\">\n                                                <button type=\"button\" class=\"btn btn-warning\" (click)=\"editMessage(i)\" *ngIf=\"isMyMessage(message)\">Edit</button>\n                                                <button type=\"button\" class=\"btn btn-danger\" (click)=\"deleteMessage(i)\" *ngIf=\"isMyMessage(message)\">Delete</button>\n                                            </responsive-button-group>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px;\">\n                        <div class=\"col-lg-12\">\n                            <button type=\"button\" class=\"btn btn-success\" (click)=\"newMessage()\">New Message</button>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"files\">\n\t\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t\t<div> \n\t\t\t\t\t\t<label class=\"label-accordion\">Support Ticket Files</label>\n\t\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('files')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('files')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t\t<file-upload #fileUpload (fileAdded)=\"onFileAdded($event)\" (fileRemoved)=\"onFilesRemoved($event)\" [files]=\"files\" [allowDelete]=\"true\" [allowReplace]=\"true\"></file-upload>\n\t\t\t\t</ng-template>\n\t\t\t</ngb-panel>\n        </ngb-accordion>\n    </div>\n    <div class=\"row\" style=\"padding-top: 15px;\">\n        <responsive-button-group collapseSize=\"900\">\n            <button class=\"btn btn-warning\" type=\"button\" (click)=\"edit()\">Edit Support Ticket</button>\n        </responsive-button-group>\n    </div>\n</div>\n    " }]
+            args: [{ providers: [ProviderService], template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n\n    ngb-accordion {\n        width: 100%;\n    }\n\n    dl {\n        margin-bottom: 0px;\n    }\n\n    .selected {\n        background-color: lightblue;\n    }\n</style>\n\n<div class=\"col-lg-12\" *ngIf=\"data\">\n    <div class=\"row\">\n        <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo, supportTicketMessages, files\">\n            <ngb-panel id=\"supportTicketInfo\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Support Ticket Info</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>General Info</b></div>\n                        <div class=\"card-body\">\n                            <div class=\"row\">\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Support Ticket #</dt>\n                                        <dd>{{data.support_ticket_number | number}}</dd>\n                                        <dt>Date Created</dt>\n                                        <dd>{{data.date_created | date: 'short'}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Type</dt>\n                                        <dd>{{data.type}}</dd>\n                                        <dt>User</dt>\n                                        <dd>{{data.user_created}}</dd>\n                                    </dl>\n                                </div>\n                                <div class=\"col-lg-4\">\n                                    <dl>\n                                        <dt>Status</dt>\n                                        <dd>{{ data.status }}</dd>\n                                    </dl>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"card\">\n                        <div class=\"card-header\"><b>Problem Description</b></div>\n                        <div class=\"card-body\">\n                            <pre>{{data.issue}}</pre>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"supportTicketMessages\" *ngIf=\"data\">\n                <ng-template ngbPanelTitle>\n                    <div> \n                        <label class=\"label-accordion\">Messages</label>\n                        <i *ngIf=\"!acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                        <i *ngIf=\"acc.activeIds.includes('supportTicketMessages')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                    </div>\n                </ng-template>\n                <ng-template ngbPanelContent>\n                    <div class=\"row\">\n                        <div class=\"col-lg-12\">\n                            <div class=\"card\" *ngFor=\"let message of data.messages; let i = index;\">\n                                <div class=\"card-header\"><b>User: {{message.user}} - Date: {{message.date | date : 'short'}}</b></div>\n                                <div class=\"card-body\" [ngClass]=\"[message.type === 'ResolveIO' ? 'selected' : '']\">\n                                    <div class=\"row\"  style=\"width: 100%\">\n                                        <div class=\"col-lg-10\">\n                                            <pre>{{message.message}}</pre>\n                                        </div>\n                                        <div class=\"col-lg-2\">\n                                            <responsive-button-group collapseSize=\"900\">\n                                                <button type=\"button\" class=\"btn btn-warning\" (click)=\"editMessage(i)\" *ngIf=\"isMyMessage(message)\">Edit</button>\n                                                <button type=\"button\" class=\"btn btn-danger\" (click)=\"deleteMessage(i)\" *ngIf=\"isMyMessage(message)\">Delete</button>\n                                            </responsive-button-group>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\" style=\"margin-top: 10px;\">\n                        <div class=\"col-lg-12\">\n                            <button type=\"button\" class=\"btn btn-success\" (click)=\"newMessage()\">New Message</button>\n                        </div>\n                    </div>\n                </ng-template>\n            </ngb-panel>\n            <ngb-panel id=\"files\">\n\t\t\t\t<ng-template ngbPanelTitle>\n\t\t\t\t\t<div> \n\t\t\t\t\t\t<label class=\"label-accordion\">Support Ticket Files</label>\n\t\t\t\t\t\t<i *ngIf=\"!acc.activeIds.includes('files')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t<i *ngIf=\"acc.activeIds.includes('files')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t\t<ng-template ngbPanelContent>\n\t\t\t\t\t<file-upload #fileUpload (fileAdded)=\"onFileAdded($event)\" (fileRemoved)=\"onFilesRemoved($event)\" [files]=\"files\" [allowDelete]=\"true\" [allowReplace]=\"true\"></file-upload>\n\t\t\t\t</ng-template>\n\t\t\t</ngb-panel>\n        </ngb-accordion>\n    </div>\n    <div class=\"row\" style=\"padding-top: 15px;\">\n        <responsive-button-group collapseSize=\"900\">\n            <button class=\"btn btn-warning\" type=\"button\" (click)=\"edit()\">Edit Support Ticket</button>\n        </responsive-button-group>\n    </div>\n</div>\n    " }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: SupportTicketService }, { type: ProviderService }, { type: DialogService }]; }, propDecorators: { fileUpload: [{
                 type: ViewChild,
                 args: ['fileUpload', { static: true }]
@@ -8187,11 +8257,11 @@ class SupportTicketEditComponent extends BaseComponent {
         });
     }
 }
-SupportTicketEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketEditComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SupportTicketService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SupportTicketEditComponent, selector: "ng-component", providers: [ProviderService], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }, { propertyName: "selectType", first: true, predicate: ["selectType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Problem Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Problem Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>\n    ", styles: ["\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketEditComponent, decorators: [{
+SupportTicketEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketEditComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SupportTicketService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+SupportTicketEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SupportTicketEditComponent, selector: "ng-component", providers: [ProviderService], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }, { propertyName: "selectType", first: true, predicate: ["selectType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Problem Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Problem Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>\n    ", styles: ["\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { kind: "directive", type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { kind: "component", type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled", "type"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketEditComponent, decorators: [{
             type: Component,
-            args: [{ providers: [ProviderService], template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus pull-right\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus pull-right\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"mb-3\">\n                                    <label class=\"form-control-label\">Problem Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Problem Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>\n    " }]
+            args: [{ providers: [ProviderService], template: "<style>\n    .label-accordion {\n        font-weight: bold;\n        color: black;\n        margin-bottom: 0px;\n    }\n\n    .fa-plus {\n        color: black;\n    }\n\n    .fa-minus {\n        color: black;\n    }\n</style>\n\n<div class=\"col-lg-12\">\n    <form [formGroup]=\"form\" novalidate (ngSubmit)=\"submitForm(form)\">\n        <div class=\"row\">\n            <ngb-accordion #acc=\"ngbAccordion\" activeIds=\"supportTicketInfo\">\n                <ngb-panel id=\"supportTicketInfo\">\n                    <ng-template ngbPanelTitle>\n                        <div> \n                            <label class=\"label-accordion\">Support Ticket Info</label>\n                            <i *ngIf=\"!acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-plus float-end\" aria-hidden=\"true\"></i>\n                            <i *ngIf=\"acc.activeIds.includes('supportTicketInfo')\" class=\"fa fa-minus float-end\" aria-hidden=\"true\"></i>\n                        </div>\n                    </ng-template>\n                    <ng-template ngbPanelContent>\n                        <div class=\"row\">\n                            <div class=\"col-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Support Ticket Type</label>\n                                    <em *ngIf=\"!form.controls.type.valid\">- Required</em>\n                                        <select [ngClass]=\"['form-control', form.controls.type.valid ? 'is-valid' : 'is-invalid']\" formControlName=\"type\" (change)=\"onTypeChange()\">\n                                            <option value=\"\">Select Type</option>\n                                            <option value=\"General Inquery\">General Inquery</option>\n                                            <option value=\"System Impairment\">System Impairment</option>\n                                            <option value=\"Request New Feature\">Request New Feature</option>\n                                        </select>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.type.valid\">Type is required</div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-lg-12\">\n                                <div class=\"form-group\">\n                                    <label class=\"form-control-label\">Problem Description</label>\n                                    <em *ngIf=\"!form.controls.issue.valid\">- Required</em>\n                                    <textarea formControlName=\"issue\" [ngClass]=\"['form-control', form.controls.issue.valid ? 'is-valid' : 'is-invalid' ]\" [rows]=\"5\" style=\"overflow-x: hidden\"></textarea>\n                                    <div class=\"invalid-feedback\" *ngIf=\"!form.controls.issue.valid\">Problem Description is required</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </ngb-panel>\n            </ngb-accordion>\n        </div>\n        <div class=\"row\" style=\"padding-top: 15px;\">\n            <form-button [form]=\"form\" [disabled]=\"disableFormButton\"></form-button>\n        </div>\n    </form>\n</div>\n    " }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: SupportTicketService }, { type: ProviderService }, { type: DialogService }]; }, propDecorators: { fileUpload: [{
                 type: ViewChild,
                 args: ['fileUpload', { static: true }]
@@ -8216,20 +8286,20 @@ const SupportTicketRouting = RouterModule.forChild(routes);
 
 class SupportTicketModule {
 }
-SupportTicketModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SupportTicketModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketModule, declarations: [SupportTicketComponent,
+SupportTicketModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SupportTicketModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketModule, declarations: [SupportTicketComponent,
         SupportTicketListComponent,
         SupportTicketNewComponent,
         SupportTicketDetailComponent,
         SupportTicketEditComponent], imports: [SharedModule, i1$2.RouterModule, DatatableModule,
         FileModule] });
-SupportTicketModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketModule, providers: [
+SupportTicketModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketModule, providers: [
         SupportTicketService
     ], imports: [SharedModule,
         SupportTicketRouting,
         DatatableModule,
         FileModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SupportTicketModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SupportTicketModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -8373,8 +8443,8 @@ class DateShortcutComponent extends BaseComponent {
         this._cd.detectChanges();
     }
 }
-DateShortcutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateShortcutComponent, deps: [{ token: ProviderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateShortcutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DateShortcutComponent, selector: "date-shortcut", inputs: { startDateObj: "startDateObj", endDateObj: "endDateObj", shortcutValue: "shortcutValue" }, outputs: { startDateObjChange: "startDateObjChange", endDateObjChange: "endDateObjChange", datesChanged: "datesChanged", shortcutValueChange: "shortcutValueChange" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: `
+DateShortcutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateShortcutComponent, deps: [{ token: ProviderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateShortcutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateShortcutComponent, selector: "date-shortcut", inputs: { startDateObj: "startDateObj", endDateObj: "endDateObj", shortcutValue: "shortcutValue" }, outputs: { startDateObjChange: "startDateObjChange", endDateObjChange: "endDateObjChange", datesChanged: "datesChanged", shortcutValueChange: "shortcutValueChange" }, providers: [ProviderService], usesInheritance: true, ngImport: i0, template: `
 		<label class="form-control-label">Date Shortcuts</label>
 		<ng-select [(ngModel)]="shortcutValue" (change)="onSelectShortcut()" placeholder="Select Shortcut" [clearable]="false">
 			<ng-option value="Today">Today</ng-option>
@@ -8399,7 +8469,7 @@ DateShortcutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
 			<ng-option value="All">All</ng-option>
 		</ng-select>
 	`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateShortcutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateShortcutComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [ProviderService],
@@ -8449,14 +8519,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class DateShortcutModule {
 }
-DateShortcutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateShortcutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateShortcutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DateShortcutModule, declarations: [DateShortcutComponent], imports: [FormsModule,
+DateShortcutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateShortcutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateShortcutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateShortcutModule, declarations: [DateShortcutComponent], imports: [FormsModule,
         CommonModule,
         NgSelectModule], exports: [DateShortcutComponent] });
-DateShortcutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateShortcutModule, imports: [FormsModule,
+DateShortcutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateShortcutModule, imports: [FormsModule,
         CommonModule,
         NgSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DateShortcutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateShortcutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -8629,9 +8699,9 @@ class SchedulerComponent extends BaseComponent {
         this.size_cell.width += 10;
     }
 }
-SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SchedulerComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SchedulerComponent, selector: "scheduler", host: { listeners: { "mouseup": "onMouseup()", "mousedown": "onMousedown($event)", "mousemove": "onMousemove($event)", "mouseleave": "onMouseLeave($event)" } }, providers: [ProviderService], viewQueries: [{ propertyName: "svgChart", first: true, predicate: ["svgChart"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n\t.bar {\n\t\tfill: red; /* changes the background */\n\t\theight: 21px;\n\t\ttransition: fill .3s ease;\n\t\tcursor: pointer;\n\t\tfont-family: Helvetica, sans-serif;\n\t}\n\n\t.bar text {\n\t\tcolor: black;\n\t}\n\n\t.bar:hover,\n\t.bar:focus {\n\t\tfill: black;\n\t}\n\n\t.bar:hover text,\n\t.bar:focus text {\n\t\tfill: red;\n\t}\n\n\t.year {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.month {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.day {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.smallText {\n\t\tfont-size: 4px;\n\t}\n</style>\n\n<div class=\"scheduler\">\n\n\t<button class=\"btn btn-warning\" type=\"button\" (mouseenter)=\"overBackwards()\" (mouseleave)=\"leftBackwards()\">Go Backwards</button>\n\t<button class=\"btn btn-success\" type=\"button\" (mouseenter)=\"overForward()\" (mouseleave)=\"leftForward()\">Go Forward</button>\n\n\t<button style=\"margin-left: 20px;\" class=\"btn btn-warning\" type=\"button\" (click)=\"zoomOut()\">Zoom Out</button>\n\t<button class=\"btn btn-success\" type=\"button\" (click)=\"zoomIn()\">Zoom In</button>\n\n\t<svg class=\"chart\" width=\"100%\" height=\"100%\" aria-labelledby=\"title desc\" role=\"img\" #svgChart>\n\t\t<title id=\"title\">Scheduler</title>\n\t\t<desc id=\"desc\">Scheduler</desc>\n\n\t\t<g class=\"year\">\n\t\t\t<ng-container *ngFor=\"let year of buildYears()\">\n\t\t\t\t<rect [attr.width]=\"(year.index_end - year.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"year.index_start * size_cell.width\"></rect>\n\t\t\t\t<svg [attr.width]=\"(year.index_end - year.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"year.index_start * size_cell.width\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\">{{year.year}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\t\t<g class=\"month\">\n\t\t\t<ng-container *ngFor=\"let month of buildMonths()\">\n\t\t\t\t<rect [attr.width]=\"(month.index_end - month.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"month.index_start * size_cell.width\" [attr.y]=\"size_cell.height\"></rect>\n\t\t\t\t<svg [attr.width]=\"(month.index_end - month.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"month.index_start * size_cell.width\" [attr.y]=\"size_cell.height\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\">{{month.month}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\t\t<g class=\"day\">\n\t\t\t<ng-container *ngFor=\"let day of buildDays()\">\n\t\t\t\t<rect [attr.width]=\"size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"day.index * size_cell.width\" [attr.y]=\"size_cell.height * 2\"></rect>\n\t\t\t\t<svg [attr.width]=\"size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"day.index * size_cell.width\" [attr.y]=\"size_cell.height * 2\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\" [style.font-size.px]=\"[size_cell.width > 10 ? 12 : 6]\">{{day.day}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\n\n\t\t<!-- <g class=\"bar\">\n\t\t\t<rect width=\"40\" height=\"19\"></rect>\n\t\t\t<text x=\"45\" y=\"9.5\" dy=\".35em\">4 apples</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"80\" height=\"19\" y=\"20\"></rect>\n\t\t\t<text x=\"85\" y=\"28\" dy=\".35em\">8 bananas</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"150\" height=\"19\" y=\"40\"></rect>\n\t\t\t<text x=\"150\" y=\"48\" dy=\".35em\">15 kiwis</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"160\" height=\"19\" y=\"60\"></rect>\n\t\t\t<text x=\"161\" y=\"68\" dy=\".35em\">16 oranges</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"230\" height=\"19\" y=\"80\"></rect>\n\t\t\t<text x=\"235\" y=\"88\" dy=\".35em\">23 lemons</text>\n\t\t</g> -->\n\t</svg>\n</div>\n", styles: ["\n\t.bar {\n\t\tfill: red; /* changes the background */\n\t\theight: 21px;\n\t\ttransition: fill .3s ease;\n\t\tcursor: pointer;\n\t\tfont-family: Helvetica, sans-serif;\n\t}\n\n\t.bar text {\n\t\tcolor: black;\n\t}\n\n\t.bar:hover,\n\t.bar:focus {\n\t\tfill: black;\n\t}\n\n\t.bar:hover text,\n\t.bar:focus text {\n\t\tfill: red;\n\t}\n\n\t.year {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.month {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.day {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.smallText {\n\t\tfont-size: 4px;\n\t}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SchedulerComponent, decorators: [{
+SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SchedulerComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SchedulerComponent, selector: "scheduler", host: { listeners: { "mouseup": "onMouseup()", "mousedown": "onMousedown($event)", "mousemove": "onMousemove($event)", "mouseleave": "onMouseLeave($event)" } }, providers: [ProviderService], viewQueries: [{ propertyName: "svgChart", first: true, predicate: ["svgChart"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<style>\n\t.bar {\n\t\tfill: red; /* changes the background */\n\t\theight: 21px;\n\t\ttransition: fill .3s ease;\n\t\tcursor: pointer;\n\t\tfont-family: Helvetica, sans-serif;\n\t}\n\n\t.bar text {\n\t\tcolor: black;\n\t}\n\n\t.bar:hover,\n\t.bar:focus {\n\t\tfill: black;\n\t}\n\n\t.bar:hover text,\n\t.bar:focus text {\n\t\tfill: red;\n\t}\n\n\t.year {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.month {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.day {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.smallText {\n\t\tfont-size: 4px;\n\t}\n</style>\n\n<div class=\"scheduler\">\n\n\t<button class=\"btn btn-warning\" type=\"button\" (mouseenter)=\"overBackwards()\" (mouseleave)=\"leftBackwards()\">Go Backwards</button>\n\t<button class=\"btn btn-success\" type=\"button\" (mouseenter)=\"overForward()\" (mouseleave)=\"leftForward()\">Go Forward</button>\n\n\t<button style=\"margin-left: 20px;\" class=\"btn btn-warning\" type=\"button\" (click)=\"zoomOut()\">Zoom Out</button>\n\t<button class=\"btn btn-success\" type=\"button\" (click)=\"zoomIn()\">Zoom In</button>\n\n\t<svg class=\"chart\" width=\"100%\" height=\"100%\" aria-labelledby=\"title desc\" role=\"img\" #svgChart>\n\t\t<title id=\"title\">Scheduler</title>\n\t\t<desc id=\"desc\">Scheduler</desc>\n\n\t\t<g class=\"year\">\n\t\t\t<ng-container *ngFor=\"let year of buildYears()\">\n\t\t\t\t<rect [attr.width]=\"(year.index_end - year.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"year.index_start * size_cell.width\"></rect>\n\t\t\t\t<svg [attr.width]=\"(year.index_end - year.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"year.index_start * size_cell.width\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\">{{year.year}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\t\t<g class=\"month\">\n\t\t\t<ng-container *ngFor=\"let month of buildMonths()\">\n\t\t\t\t<rect [attr.width]=\"(month.index_end - month.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"month.index_start * size_cell.width\" [attr.y]=\"size_cell.height\"></rect>\n\t\t\t\t<svg [attr.width]=\"(month.index_end - month.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"month.index_start * size_cell.width\" [attr.y]=\"size_cell.height\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\">{{month.month}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\t\t<g class=\"day\">\n\t\t\t<ng-container *ngFor=\"let day of buildDays()\">\n\t\t\t\t<rect [attr.width]=\"size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"day.index * size_cell.width\" [attr.y]=\"size_cell.height * 2\"></rect>\n\t\t\t\t<svg [attr.width]=\"size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"day.index * size_cell.width\" [attr.y]=\"size_cell.height * 2\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\" [style.font-size.px]=\"[size_cell.width > 10 ? 12 : 6]\">{{day.day}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\n\n\t\t<!-- <g class=\"bar\">\n\t\t\t<rect width=\"40\" height=\"19\"></rect>\n\t\t\t<text x=\"45\" y=\"9.5\" dy=\".35em\">4 apples</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"80\" height=\"19\" y=\"20\"></rect>\n\t\t\t<text x=\"85\" y=\"28\" dy=\".35em\">8 bananas</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"150\" height=\"19\" y=\"40\"></rect>\n\t\t\t<text x=\"150\" y=\"48\" dy=\".35em\">15 kiwis</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"160\" height=\"19\" y=\"60\"></rect>\n\t\t\t<text x=\"161\" y=\"68\" dy=\".35em\">16 oranges</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"230\" height=\"19\" y=\"80\"></rect>\n\t\t\t<text x=\"235\" y=\"88\" dy=\".35em\">23 lemons</text>\n\t\t</g> -->\n\t</svg>\n</div>\n", styles: ["\n\t.bar {\n\t\tfill: red; /* changes the background */\n\t\theight: 21px;\n\t\ttransition: fill .3s ease;\n\t\tcursor: pointer;\n\t\tfont-family: Helvetica, sans-serif;\n\t}\n\n\t.bar text {\n\t\tcolor: black;\n\t}\n\n\t.bar:hover,\n\t.bar:focus {\n\t\tfill: black;\n\t}\n\n\t.bar:hover text,\n\t.bar:focus text {\n\t\tfill: red;\n\t}\n\n\t.year {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.month {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.day {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.smallText {\n\t\tfont-size: 4px;\n\t}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SchedulerComponent, decorators: [{
             type: Component,
             args: [{ providers: [ProviderService], selector: 'scheduler', template: "<style>\n\t.bar {\n\t\tfill: red; /* changes the background */\n\t\theight: 21px;\n\t\ttransition: fill .3s ease;\n\t\tcursor: pointer;\n\t\tfont-family: Helvetica, sans-serif;\n\t}\n\n\t.bar text {\n\t\tcolor: black;\n\t}\n\n\t.bar:hover,\n\t.bar:focus {\n\t\tfill: black;\n\t}\n\n\t.bar:hover text,\n\t.bar:focus text {\n\t\tfill: red;\n\t}\n\n\t.year {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.month {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.day {\n\t\tstroke:black;\n\t\tfill: white;\n\t}\n\n\t.smallText {\n\t\tfont-size: 4px;\n\t}\n</style>\n\n<div class=\"scheduler\">\n\n\t<button class=\"btn btn-warning\" type=\"button\" (mouseenter)=\"overBackwards()\" (mouseleave)=\"leftBackwards()\">Go Backwards</button>\n\t<button class=\"btn btn-success\" type=\"button\" (mouseenter)=\"overForward()\" (mouseleave)=\"leftForward()\">Go Forward</button>\n\n\t<button style=\"margin-left: 20px;\" class=\"btn btn-warning\" type=\"button\" (click)=\"zoomOut()\">Zoom Out</button>\n\t<button class=\"btn btn-success\" type=\"button\" (click)=\"zoomIn()\">Zoom In</button>\n\n\t<svg class=\"chart\" width=\"100%\" height=\"100%\" aria-labelledby=\"title desc\" role=\"img\" #svgChart>\n\t\t<title id=\"title\">Scheduler</title>\n\t\t<desc id=\"desc\">Scheduler</desc>\n\n\t\t<g class=\"year\">\n\t\t\t<ng-container *ngFor=\"let year of buildYears()\">\n\t\t\t\t<rect [attr.width]=\"(year.index_end - year.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"year.index_start * size_cell.width\"></rect>\n\t\t\t\t<svg [attr.width]=\"(year.index_end - year.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"year.index_start * size_cell.width\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\">{{year.year}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\t\t<g class=\"month\">\n\t\t\t<ng-container *ngFor=\"let month of buildMonths()\">\n\t\t\t\t<rect [attr.width]=\"(month.index_end - month.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"month.index_start * size_cell.width\" [attr.y]=\"size_cell.height\"></rect>\n\t\t\t\t<svg [attr.width]=\"(month.index_end - month.index_start) * size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"month.index_start * size_cell.width\" [attr.y]=\"size_cell.height\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\">{{month.month}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\t\t<g class=\"day\">\n\t\t\t<ng-container *ngFor=\"let day of buildDays()\">\n\t\t\t\t<rect [attr.width]=\"size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"day.index * size_cell.width\" [attr.y]=\"size_cell.height * 2\"></rect>\n\t\t\t\t<svg [attr.width]=\"size_cell.width\" [attr.height]=\"size_cell.height\" [attr.x]=\"day.index * size_cell.width\" [attr.y]=\"size_cell.height * 2\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" alignment-baseline=\"middle\" text-anchor=\"middle\" [style.font-size.px]=\"[size_cell.width > 10 ? 12 : 6]\">{{day.day}}</text>\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t</g>\n\n\n\t\t<!-- <g class=\"bar\">\n\t\t\t<rect width=\"40\" height=\"19\"></rect>\n\t\t\t<text x=\"45\" y=\"9.5\" dy=\".35em\">4 apples</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"80\" height=\"19\" y=\"20\"></rect>\n\t\t\t<text x=\"85\" y=\"28\" dy=\".35em\">8 bananas</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"150\" height=\"19\" y=\"40\"></rect>\n\t\t\t<text x=\"150\" y=\"48\" dy=\".35em\">15 kiwis</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"160\" height=\"19\" y=\"60\"></rect>\n\t\t\t<text x=\"161\" y=\"68\" dy=\".35em\">16 oranges</text>\n\t\t</g>\n\t\t<g class=\"bar\">\n\t\t\t<rect width=\"230\" height=\"19\" y=\"80\"></rect>\n\t\t\t<text x=\"235\" y=\"88\" dy=\".35em\">23 lemons</text>\n\t\t</g> -->\n\t</svg>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ProviderService }]; }, propDecorators: { svgChart: [{
@@ -8653,16 +8723,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SchedulerModule {
 }
-SchedulerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SchedulerModule, declarations: [SchedulerComponent], imports: [NgbModule,
+SchedulerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SchedulerModule, declarations: [SchedulerComponent], imports: [NgbModule,
         FormsModule,
         CommonModule,
         RouterModule], exports: [SchedulerComponent] });
-SchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SchedulerModule, imports: [NgbModule,
+SchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SchedulerModule, imports: [NgbModule,
         FormsModule,
         CommonModule,
         RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SchedulerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SchedulerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -8684,10 +8754,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 const ReportBuilderModulePermission = {
     name: 'report-builder',
     views: [
-        { link: '/report-builder/list', label: 'List', has_parameter: false },
-        { link: '/report-builder/new', label: 'New', has_parameter: false },
-        { link: '/report-builder/scheduled-job', label: 'Scheduled Job', has_parameter: false },
-        { link: '/report-builder/dashboard-builder', label: 'Dashboard Builder', has_parameter: false },
+        { link: '/report-builder/list', label: 'List' },
+        { link: '/report-builder/new', label: 'New' },
+        { link: '/report-builder/scheduled-job', label: 'Scheduled Job' },
+        { link: '/report-builder/dashboard-builder', label: 'Dashboard Builder' },
         { link: '/report-builder/detail', label: 'Detail', has_parameter: true },
         { link: '/report-builder/edit', label: 'Edit', has_parameter: true },
         { link: '/report-builder/delete', label: 'Delete', has_parameter: true },
@@ -8697,9 +8767,9 @@ const ReportBuilderModulePermission = {
 const SuperAdminModulePermission = {
     name: 'super-admin',
     views: [
-        { link: '/super-admin/dashboard', label: 'Dashboard', has_parameter: false },
-        { link: '/super-admin/apm', label: 'APM', has_parameter: false },
-        { link: '/super-admin/monitor', label: 'Monitor', has_parameter: false }
+        { link: '/super-admin/dashboard', label: 'Dashboard' },
+        { link: '/super-admin/apm', label: 'APM' },
+        { link: '/super-admin/monitor', label: 'Monitor' }
     ]
 };