@resolveio/client-lib-core 1.0.2 → 1.0.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, HostListener, ViewChild, Directive, EventEmitter, Output, ViewChildren, Pipe, ElementRef, ChangeDetectionStrategy, NgModule, ViewEncapsulation, Optional } 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 } from '@angular/router';
@@ -18,9 +18,9 @@ import * as i1$5 from 'ngx-device-detector';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import * as i1$3 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i3 from '@ng-select/ng-select';
+import * as i4$1 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i6 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$4 from '@angular/platform-browser';
 import { UserAgentApplication } from 'msal';
@@ -28,7 +28,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __awaiter } from 'tslib';
 import * as i5 from 'ngx-file-drop';
 import { NgxFileDropModule } from 'ngx-file-drop';
-import * as i6$1 from 'ngx-doc-viewer';
+import * as i6 from 'ngx-doc-viewer';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
 
 class CoreService {
@@ -2005,7 +2005,7 @@ FormButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 				<button type="submit" [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, directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+	`, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FormButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2168,7 +2168,7 @@ DialogInputContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
 				<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
 			</div>
 		</form>
-	`, isInline: true, components: [{ type: i3.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"] }, { type: i3.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: FocusDirective, selector: "[focus]", inputs: ["focus"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }] });
+	`, isInline: true, components: [{ 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"] }, { type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: FocusDirective, selector: "[focus]", inputs: ["focus"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogInputContent, decorators: [{
             type: Component,
             args: [{
@@ -2619,7 +2619,7 @@ DialogSelectDataLabelsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
 			<button type="button" class="btn btn-success" (click)="_activeModal.close(dialogData)">Submit</button>
 			<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
 		</div>
-	`, isInline: true, directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+	`, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectDataLabelsContent, decorators: [{
             type: Component,
             args: [{
@@ -2712,7 +2712,7 @@ class ResponsiveButtonGroupComponent extends BaseComponent {
     }
 }
 ResponsiveButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ResponsiveButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ResizeService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-ResponsiveButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ResponsiveButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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" }]
@@ -2902,7 +2902,7 @@ DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
 				</responsive-button-group>
 			</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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
+	`, 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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogLoginContent, decorators: [{
             type: Component,
             args: [{
@@ -3224,7 +3224,7 @@ DialogRegisterContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 				</responsive-button-group>
 			</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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
+	`, 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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogRegisterContent, decorators: [{
             type: Component,
             args: [{
@@ -3380,6 +3380,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.NgbActiveModal }, { type: i2.FormBuilder }]; } });
 
+// tslint:disable-next-line:component-class-suffix
+class DialogSelectWithButtonsURLContent {
+    constructor(_activeModal, _account) {
+        this._activeModal = _activeModal;
+        this._account = _account;
+        this.url = '';
+        this.title = 'Select Window Type';
+        this.selectedType = '';
+        this.options = [
+            { value: 'same_tab', text: 'Same Tab' },
+            { value: 'new_tab', text: 'New Tab' },
+            { value: 'new_window', text: 'New Window' }
+        ];
+    }
+    ngOnInit() {
+        if (this._account.getUser().settings.routing_preference && this._account.getUser().settings.routing_preference !== 'alwaysAsk') {
+            if (this._account.getUser().settings.routing_preference === 'sameTab') {
+                window.open(this.url, '_self');
+            }
+            if (this._account.getUser().settings.routing_preference === 'newTab') {
+                window.open(this.url, '_blank');
+            }
+            if (this._account.getUser().settings.routing_preference === 'newWindow') {
+                window.open(this.url, '_blank', 'toolbar=1,location=1,menubar=1');
+            }
+            this._activeModal.close();
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            let foundElement = this.recursiveFindFirstElement(this.allElements.nativeElement);
+            if (foundElement) {
+                foundElement.focus();
+            }
+            else {
+                this.close.nativeElement.focus();
+                this.close.nativeElement.blur();
+            }
+        }, 100);
+    }
+    recursiveFindFirstElement(element) {
+        let foundElement = null;
+        let htmlCol = element.children;
+        for (let i = 0; i < Object.keys(htmlCol).length; i++) {
+            let key = Object.keys(htmlCol)[i];
+            let htmlElem = htmlCol[key];
+            if (htmlElem.children && htmlElem.children.length) {
+                foundElement = this.recursiveFindFirstElement(htmlElem);
+            }
+            else if (htmlElem.tagName === 'BUTTON' && htmlElem.classList.contains('close')) {
+                return null;
+            }
+            else if ((htmlElem.tagName === 'BUTTON' || htmlElem.tagName === 'INPUT' || htmlElem.tagName === 'SELECT' || htmlElem.tagName === 'TEXTAREA') && !htmlElem.hidden && !htmlElem.disabled) {
+                return htmlElem;
+            }
+            if (foundElement) {
+                break;
+            }
+        }
+        return foundElement;
+    }
+    onSelectType(type) {
+        this.selectedType = type;
+        this.submit();
+    }
+    submit() {
+        if (this.selectedType === 'same_tab') {
+            window.open(this.url, '_self');
+        }
+        if (this.selectedType === 'new_tab') {
+            window.open(this.url, '_blank');
+        }
+        if (this.selectedType === 'new_window') {
+            window.open(this.url, '_blank', 'toolbar=1,location=1,menubar=1');
+        }
+        this._activeModal.close();
+    }
+}
+DialogSelectWithButtonsURLContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectWithButtonsURLContent, deps: [{ token: i1$3.NgbActiveModal }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectWithButtonsURLContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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;
+				cursor: pointer;
+			}
+
+			.selected {
+				background-color: lightblue;
+			}
+
+			collapse-table {
+				width: 100%;
+			}
+		</style>
+		<div #allElements>
+			<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()" #close>
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body">
+				<div class="row">
+					<div class="col" *ngFor="let option of options">
+						<button style="width: 100%" type="button" [ngClass]="['btn', selectedType === option.value ? 'btn-success' : 'btn-warning']" (click)="onSelectType(option.value)">{{option.text}}</button>
+					</div>
+				</div>
+			</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"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectWithButtonsURLContent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+		<style>
+			collapse-table tr:hover {
+				background-color: lightblue;
+				cursor: pointer;
+			}
+
+			.selected {
+				background-color: lightblue;
+			}
+
+			collapse-table {
+				width: 100%;
+			}
+		</style>
+		<div #allElements>
+			<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()" #close>
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body">
+				<div class="row">
+					<div class="col" *ngFor="let option of options">
+						<button style="width: 100%" type="button" [ngClass]="['btn', selectedType === option.value ? 'btn-success' : 'btn-warning']" (click)="onSelectType(option.value)">{{option.text}}</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	`
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.NgbActiveModal }, { type: AccountManagerService }]; }, propDecorators: { url: [{
+                type: Input
+            }], close: [{
+                type: ViewChild,
+                args: ['close', { static: false }]
+            }], allElements: [{
+                type: ViewChild,
+                args: ['allElements', { static: false }]
+            }] } });
+
 class CollapseTableComponent {
     constructor(_resizeService, _account) {
         this._resizeService = _resizeService;
@@ -3436,7 +3591,7 @@ class CollapseTableComponent {
     }
 }
 CollapseTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollapseTableComponent, deps: [{ token: ResizeService }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
-CollapseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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    .hide {\n        display: none;\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: 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    .hide {\n        display: none;\n    }\n"], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+CollapseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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    .hide {\n        display: none;\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: 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    .hide {\n        display: none;\n    }\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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: 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    .hide {\n        display: none;\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>" }]
@@ -3576,7 +3731,7 @@ DialogSelectArrayObjsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 				<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
 			</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"], components: [{ type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+	`, 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"], components: [{ type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectArrayObjsContent, decorators: [{
             type: Component,
             args: [{
@@ -3646,6 +3801,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 args: ['allElements', { static: false }]
             }] } });
 
+// tslint:disable-next-line:component-class-suffix
+class DialogSelectArrayContent {
+    constructor(_activeModal, _cdRef) {
+        this._activeModal = _activeModal;
+        this._cdRef = _cdRef;
+        this.title = '';
+        this.array = [];
+        this.selectedIndexes = [];
+        this.method = 'list';
+        this.mappedArray = [];
+        this.selectIndexes = [];
+    }
+    ngOnInit() {
+        this.mappedArray = this.array.map((a, index) => {
+            return {
+                value: index,
+                text: a
+            };
+        });
+        this.selectedIndexes.forEach(index => {
+            this.selectIndexes.push(index);
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            let foundElement = this.recursiveFindFirstElement(this.allElements.nativeElement);
+            if (foundElement) {
+                foundElement.focus();
+            }
+            else {
+                this.close.nativeElement.focus();
+                this.close.nativeElement.blur();
+            }
+        }, 100);
+    }
+    recursiveFindFirstElement(element) {
+        let foundElement = null;
+        let htmlCol = element.children;
+        for (let i = 0; i < Object.keys(htmlCol).length; i++) {
+            let key = Object.keys(htmlCol)[i];
+            let htmlElem = htmlCol[key];
+            if (htmlElem.children && htmlElem.children.length) {
+                foundElement = this.recursiveFindFirstElement(htmlElem);
+            }
+            else if (htmlElem.tagName === 'BUTTON' && htmlElem.classList.contains('close')) {
+                return null;
+            }
+            else if ((htmlElem.tagName === 'BUTTON' || htmlElem.tagName === 'INPUT' || htmlElem.tagName === 'SELECT' || htmlElem.tagName === 'TEXTAREA') && !htmlElem.hidden && !htmlElem.disabled) {
+                return htmlElem;
+            }
+            if (foundElement) {
+                break;
+            }
+        }
+        return foundElement;
+    }
+    addDropDown() {
+        let firstValue = this.array.filter((a, index) => !this.selectedIndexes.includes(index))[0];
+        let firstIndex = this.array.findIndex(a => a === firstValue);
+        this.selectedIndexes.push(firstIndex);
+        this.selectIndexes.push(firstIndex);
+    }
+    onSelectDropdown(val, index) {
+        this.onSelectItem(this.selectedIndexes[index]);
+        this.onSelectItem(val);
+    }
+    availableAdd() {
+        return this.array.filter((a, index) => !this.selectedIndexes.includes(index))[0] ? true : false;
+    }
+    getFilteredArray(item) {
+        return this.mappedArray.filter(a => a.value === item || !this.selectedIndexes.includes(a.value));
+    }
+    isInSelectedIndex(index) {
+        if (this.selectedIndexes.includes(index)) {
+            return true;
+        }
+        return false;
+    }
+    onSelectItem(index) {
+        if (!this.multiple) {
+            if (this.selectedIndexes.includes(index)) {
+                this.selectedIndexes = [];
+                this.selectIndexes = [];
+            }
+            else {
+                this.selectedIndexes = [index];
+                this.selectIndexes = [index];
+            }
+        }
+        else {
+            if (this.selectedIndexes.includes(index)) {
+                this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);
+                this.selectIndexes.splice(this.selectIndexes.indexOf(index), 1);
+            }
+            else {
+                this.selectedIndexes.push(index);
+                this.selectIndexes.push(index);
+            }
+        }
+    }
+    getArray() {
+        let res = [];
+        this.selectedIndexes.forEach(index => {
+            res.push(this.array[index]);
+        });
+        return res;
+    }
+    selectAll() {
+        this.selectedIndexes = [];
+        this.selectIndexes = [];
+        this.array.forEach((data, index) => {
+            this.selectedIndexes.push(index);
+            this.selectIndexes.push(index);
+        });
+    }
+    removeAll() {
+        this.selectedIndexes = [];
+        this.selectIndexes = [];
+    }
+}
+DialogSelectArrayContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectArrayContent, deps: [{ token: i1$3.NgbActiveModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogSelectArrayContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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;
+				cursor: pointer;
+			}
+
+			.selected {
+				background-color: lightblue;
+			}
+
+			collapse-table {
+				width: 100%;
+			}
+		</style>
+		<div #allElements>
+			<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()" #close>
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body" style="height: 60vh;">
+				<responsive-button-group>
+					<ng-container *ngIf="multiple">
+						<button type="button" class="btn btn-primary" (click)="selectAll()">Select All</button>
+						<button type="button" class="btn btn-danger" (click)="removeAll()">Remove All</button>
+					</ng-container>
+					<button type="button" [ngClass]="['btn', method === 'list' ? 'btn-success' : 'btn-warning']"  (click)="method = 'list'">Use List</button>
+					<button type="button" [ngClass]="['btn', method === 'dropdown' ? 'btn-success' : 'btn-warning']" (click)="method = 'dropdown'">Use Dropdown</button>
+				</responsive-button-group>
+				<div style="height: 50vh; overflow-y: auto; margin-top: 10px">
+					<ng-container *ngIf="method === 'list'">
+						<collapse-table collapseSize="900">
+							<thead>
+								<tr>
+									<th>List</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let data of array; let i = index" (click)="onSelectItem(i)" [ngClass]="{'selected' : isInSelectedIndex(i)}">
+									<td>{{data}}</td>
+								</tr>
+							</tbody>
+						</collapse-table>
+					</ng-container>
+					<ng-container *ngIf="method === 'dropdown'">
+						<collapse-table collapseSize="900">
+							<thead>
+								<tr>
+									<th>Item</th>
+									<th>Remove</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let item of selectIndexes; let i = index">
+									<td>
+										<ng-select placeholder="Select Item" [ngModel]="item" (change)="onSelectDropdown($event, i)">
+											<ng-option *ngFor="let data of getFilteredArray(item)" [value]="data.value">{{data.text}}</ng-option>
+										</ng-select>
+									</td>
+									<td>
+										<button type="button" class="btn btn-danger" (click)="onSelectItem(item)">Remove</button>
+									</td>
+								</tr>
+							</tbody>
+						</collapse-table>
+						<button type="button" class="btn btn-success" *ngIf="multiple || !selectIndexes.length" (click)="addDropDown()" [disabled]="!availableAdd()">Add</button>
+					</ng-container>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<button type="button" [ngClass]="['btn', selectedIndexes.length ? 'btn-success' : 'btn-danger']" [disabled]="!selectedIndexes.length || this.selectedIndexes.includes(null)" (click)="_activeModal.close(this.multiple ? getArray() : array[selectedIndexes[0]])">Submit</button>
+				<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
+			</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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { 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"] }, { type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectArrayContent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+		<style>
+			collapse-table tr:hover {
+				background-color: lightblue;
+				cursor: pointer;
+			}
+
+			.selected {
+				background-color: lightblue;
+			}
+
+			collapse-table {
+				width: 100%;
+			}
+		</style>
+		<div #allElements>
+			<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()" #close>
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body" style="height: 60vh;">
+				<responsive-button-group>
+					<ng-container *ngIf="multiple">
+						<button type="button" class="btn btn-primary" (click)="selectAll()">Select All</button>
+						<button type="button" class="btn btn-danger" (click)="removeAll()">Remove All</button>
+					</ng-container>
+					<button type="button" [ngClass]="['btn', method === 'list' ? 'btn-success' : 'btn-warning']"  (click)="method = 'list'">Use List</button>
+					<button type="button" [ngClass]="['btn', method === 'dropdown' ? 'btn-success' : 'btn-warning']" (click)="method = 'dropdown'">Use Dropdown</button>
+				</responsive-button-group>
+				<div style="height: 50vh; overflow-y: auto; margin-top: 10px">
+					<ng-container *ngIf="method === 'list'">
+						<collapse-table collapseSize="900">
+							<thead>
+								<tr>
+									<th>List</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let data of array; let i = index" (click)="onSelectItem(i)" [ngClass]="{'selected' : isInSelectedIndex(i)}">
+									<td>{{data}}</td>
+								</tr>
+							</tbody>
+						</collapse-table>
+					</ng-container>
+					<ng-container *ngIf="method === 'dropdown'">
+						<collapse-table collapseSize="900">
+							<thead>
+								<tr>
+									<th>Item</th>
+									<th>Remove</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let item of selectIndexes; let i = index">
+									<td>
+										<ng-select placeholder="Select Item" [ngModel]="item" (change)="onSelectDropdown($event, i)">
+											<ng-option *ngFor="let data of getFilteredArray(item)" [value]="data.value">{{data.text}}</ng-option>
+										</ng-select>
+									</td>
+									<td>
+										<button type="button" class="btn btn-danger" (click)="onSelectItem(item)">Remove</button>
+									</td>
+								</tr>
+							</tbody>
+						</collapse-table>
+						<button type="button" class="btn btn-success" *ngIf="multiple || !selectIndexes.length" (click)="addDropDown()" [disabled]="!availableAdd()">Add</button>
+					</ng-container>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<button type="button" [ngClass]="['btn', selectedIndexes.length ? 'btn-success' : 'btn-danger']" [disabled]="!selectedIndexes.length || this.selectedIndexes.includes(null)" (click)="_activeModal.close(this.multiple ? getArray() : array[selectedIndexes[0]])">Submit</button>
+				<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
+			</div>
+		</div>
+	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.NgbActiveModal }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], array: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], selectedIndexes: [{
+                type: Input
+            }], close: [{
+                type: ViewChild,
+                args: ['close', { static: false }]
+            }], allElements: [{
+                type: ViewChild,
+                args: ['allElements', { static: false }]
+            }] } });
+
 class DialogService {
     constructor(modalService) {
         this.modalService = modalService;
@@ -3698,6 +4149,11 @@ class DialogService {
         const modalRef = this.openDialog(DialogRegisterContent);
         return modalRef.result;
     }
+    selectWithButtonsURL(url) {
+        const modalRef = this.openDialog(DialogSelectWithButtonsURLContent);
+        modalRef.componentInstance.url = url;
+        return modalRef.result;
+    }
     selectWithArrayObjs(title, objects, multiple = false, allowNone = false) {
         const modalRef = this.openDialog(DialogSelectArrayObjsContent);
         modalRef.componentInstance.title = title;
@@ -3706,6 +4162,14 @@ class DialogService {
         modalRef.componentInstance.allowNone = allowNone;
         return modalRef.result;
     }
+    selectArray(title, array, multiple = false, selectedIndexes = []) {
+        const modalRef = this.openDialog(DialogSelectArrayContent);
+        modalRef.componentInstance.title = title;
+        modalRef.componentInstance.array = array;
+        modalRef.componentInstance.multiple = multiple;
+        modalRef.componentInstance.selectedIndexes = selectedIndexes;
+        return modalRef.result;
+    }
 }
 DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogService, deps: [{ token: i1$3.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable });
 DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogService });
@@ -4188,7 +4652,7 @@ class NavbarMainComponent extends BaseComponent {
     }
 }
 NavbarMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NavbarMainComponent, deps: [{ token: ProviderService }, { token: AuthService }, { token: DialogService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
-NavbarMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NavbarMainComponent, selector: "navbar-main", inputs: { logo: "logo", navTabs: "navTabs", fontSize: "fontSize" }, 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=\"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=\"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=\"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' : '']\">\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"], directives: [{ type: i1$3.NgbNavbar, selector: ".navbar" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: ScrollDirective, selector: "[detect-scroll]", inputs: ["bottomOffset", "topOffset"], outputs: ["onScroll"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+NavbarMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NavbarMainComponent, selector: "navbar-main", inputs: { logo: "logo", navTabs: "navTabs", fontSize: "fontSize" }, 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=\"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=\"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=\"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' : '']\">\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"], directives: [{ type: i1$3.NgbNavbar, selector: ".navbar" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: ScrollDirective, selector: "[detect-scroll]", inputs: ["bottomOffset", "topOffset"], outputs: ["onScroll"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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-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=\"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=\"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=\"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' : '']\">\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>" }]
@@ -4363,7 +4827,7 @@ class NavbarModuleComponent extends BaseComponent {
     }
 }
 NavbarModuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NavbarModuleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-NavbarModuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], directives: [{ type: i1$3.NgbNavbar, selector: ".navbar" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "filterNotEqual": FilterNotEqualPipe } });
+NavbarModuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], directives: [{ type: i1$3.NgbNavbar, selector: ".navbar" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "filterNotEqual": FilterNotEqualPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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-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" }]
@@ -4666,7 +5130,7 @@ class CoreComponent extends BaseComponent {
     }
 }
 CoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", 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: "12.0.0", version: "13.2.2", type: CoreComponent, selector: "resolveio-client-lib-core", inputs: { environment: "environment", logo: "logo", navTabs: "navTabs", userHasPhoneNumber: "userHasPhoneNumber", client: "client" }, 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)\">\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)\">\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\"></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\" [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.px]=\"windowSizeWidth > 1200 && collapsableMenu ? 55 : 0\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu ? closeNav() : null\">\n\t\t\t\t<div style=\"padding-top: 15px; -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 - statusHeight - connectedHeight - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<div [style.height.px]=\"windowSizeHeight + 1 - ((isDevice || windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - statusHeight - connectedHeight - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 60 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t\t</div>\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"], components: [{ type: NavbarMainComponent, selector: "navbar-main", inputs: ["logo", "navTabs", "fontSize"] }, { type: NavbarModuleComponent, selector: "navbar-module", inputs: ["sideNavHeight", "sideNavWidth"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+CoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CoreComponent, selector: "resolveio-client-lib-core", inputs: { environment: "environment", logo: "logo", navTabs: "navTabs", userHasPhoneNumber: "userHasPhoneNumber", client: "client" }, 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)\">\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)\">\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\"></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\" [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.px]=\"windowSizeWidth > 1200 && collapsableMenu ? 55 : 0\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu ? closeNav() : null\">\n\t\t\t\t<div style=\"padding-top: 15px; -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 - statusHeight - connectedHeight - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<div [style.height.px]=\"windowSizeHeight + 1 - ((isDevice || windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - statusHeight - connectedHeight - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 60 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t\t</div>\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"], components: [{ type: NavbarMainComponent, selector: "navbar-main", inputs: ["logo", "navTabs", "fontSize"] }, { type: NavbarModuleComponent, selector: "navbar-module", inputs: ["sideNavHeight", "sideNavWidth"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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)\">\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)\">\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\"></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\" [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.px]=\"windowSizeWidth > 1200 && collapsableMenu ? 55 : 0\" (mouseenter)=\"windowSizeWidth > 1200 && collapsableMenu ? closeNav() : null\">\n\t\t\t\t<div style=\"padding-top: 15px; -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 - statusHeight - connectedHeight - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 20 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t<div [style.height.px]=\"windowSizeHeight + 1 - ((isDevice || windowSizeWidth <= 1200) && !showNavigationMenu ? (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight()) : 0) - navbarMainHeight - statusHeight - connectedHeight - (isDevice && showNavigationMenu ? (54 + (getNavbarModuleHeight() > 100 ? 0 : getNavbarModuleHeight())) : 0) - ((!isDevice || (isDevice && showNavigationMenu)) ? 60 : 0)\" class=\"removeOverflow\">\n\t\t\t\t\t\t<router-outlet></router-outlet>\n\t\t\t\t\t</div>\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" }]
@@ -4932,7 +5396,7 @@ class LoggerComponent extends BaseComponent {
     }
 }
 LoggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LoggerComponent, deps: [{ token: ProviderService }, { token: DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LoggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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 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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { type: i3.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"] }, { type: i3.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { type: i1$3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }, { 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"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }], pipes: { "date": i6.DatePipe, "jsonParse": JsonParsePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LoggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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 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"], components: [{ type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { 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"] }, { type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { type: i1$3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }, { 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"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }], pipes: { "date": i3.DatePipe, "jsonParse": JsonParsePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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-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 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>" }]
@@ -5087,7 +5551,7 @@ class UserRoleComponent extends BaseComponent {
     }
 }
 UserRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: UserRoleComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-UserRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+UserRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: UserRoleComponent, decorators: [{
             type: Component,
             args: [{
@@ -5576,7 +6040,7 @@ class SortTableHeaderComponent {
     }
 }
 SortTableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SortTableHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SortTableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SortTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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>", directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SortTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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>", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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>" }]
@@ -5820,7 +6284,7 @@ class ForgotPasswordComponent extends BaseComponent {
     }
 }
 ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", 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: "12.0.0", version: "13.2.2", 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\">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\">\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\">\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"], components: [{ type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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\">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\">\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\">\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"], components: [{ type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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=\"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\">\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\">\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>" }]
@@ -5886,7 +6350,7 @@ class EnrollComponent extends BaseComponent {
     }
 }
 EnrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", 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: "12.0.0", version: "13.2.2", 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\">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\">\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\">\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"], components: [{ type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+EnrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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\">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\">\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\">\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"], components: [{ type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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=\"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\">\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\">\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>" }]
@@ -6256,7 +6720,7 @@ class UsersSettingsComponent extends BaseComponent {
     }
 }
 UsersSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: UsersSettingsComponent, deps: [{ token: AuthPermissionService }, { token: UserSettingsService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-UsersSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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=\"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 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=\"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 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=\"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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "titleCase": TitleCaseAndUnderscorePipe } });
+UsersSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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=\"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 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=\"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 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=\"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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "titleCase": TitleCaseAndUnderscorePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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=\"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 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=\"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 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=\"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>" }]
@@ -6329,7 +6793,7 @@ class DatatableComponent extends BaseComponent {
     }
 }
 DatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatatableComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-DatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], components: [{ type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], directives: [{ 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "currency": i6.CurrencyPipe, "date": i6.DatePipe, "number": i6.DecimalPipe } });
+DatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], components: [{ type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { type: i1$3.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], directives: [{ 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]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "currency": i3.CurrencyPipe, "date": i3.DatePipe, "number": i3.DecimalPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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-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" }]
@@ -6771,7 +7235,7 @@ class FileUploadComponent extends BaseComponent {
     }
 }
 FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FileUploadComponent, deps: [{ token: ResizeService }, { token: ProviderService }, { token: DialogService }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], components: [{ type: i5.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: i6$1.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i6.DecimalPipe } });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], components: [{ type: i5.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: i6.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }, { type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i3.DecimalPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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-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>" }]
@@ -6946,7 +7410,9 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         DialogSelectDataLabelsContent,
         DialogLoginContent,
         DialogRegisterContent,
-        DialogSelectArrayObjsContent], imports: [SharedModule,
+        DialogSelectWithButtonsURLContent,
+        DialogSelectArrayObjsContent,
+        DialogSelectArrayContent], imports: [SharedModule,
         HttpClientModule,
         NgbModule, i1$1.ToastrModule, i1.NgxLocalStorageModule, UserSettingsModule,
         BrowserAnimationsModule,
@@ -7023,7 +7489,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         DialogSelectDataLabelsContent,
                         DialogLoginContent,
                         DialogRegisterContent,
-                        DialogSelectArrayObjsContent
+                        DialogSelectWithButtonsURLContent,
+                        DialogSelectArrayObjsContent,
+                        DialogSelectArrayContent
                     ],
                     providers: [
                         CoreService,
@@ -7348,7 +7816,7 @@ class SupportTicketNewComponent extends BaseComponent {
     }
 }
 SupportTicketNewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SupportTicketNewComponent, deps: [{ token: SupportTicketService }, { token: i0.ChangeDetectorRef }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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=\"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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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]" }] });
+SupportTicketNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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=\"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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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=\"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" }]
@@ -7537,7 +8005,7 @@ class SupportTicketDetailComponent extends BaseComponent {
     }
 }
 SupportTicketDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SupportTicketDetailComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SupportTicketService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { type: FileUploadComponent, selector: "file-upload", inputs: ["files", "allowDelete", "allowReplace", "showFileUpload", "fileType"], outputs: ["filesChanged", "fileAdded", "fileRemoved"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "number": i6.DecimalPipe, "date": i6.DatePipe } });
+SupportTicketDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { type: FileUploadComponent, selector: "file-upload", inputs: ["files", "allowDelete", "allowReplace", "showFileUpload", "fileType"], outputs: ["filesChanged", "fileAdded", "fileRemoved"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "number": i3.DecimalPipe, "date": i3.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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    " }]
@@ -7641,7 +8109,7 @@ class SupportTicketEditComponent extends BaseComponent {
     }
 }
 SupportTicketEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SupportTicketEditComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: SupportTicketService }, { token: ProviderService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SupportTicketEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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=\"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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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]" }] });
+SupportTicketEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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=\"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"], components: [{ type: i1$3.NgbAccordion, selector: "ngb-accordion", inputs: ["animation", "activeIds", "closeOthers", "destroyOnHide", "type"], outputs: ["panelChange", "shown", "hidden"], exportAs: ["ngbAccordion"] }, { type: FormButtonComponent, selector: "form-button", inputs: ["form", "disabled"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgbPanel, selector: "ngb-panel", inputs: ["disabled", "id", "title", "type", "cardClass"], outputs: ["shown", "hidden"] }, { type: i1$3.NgbPanelTitle, selector: "ng-template[ngbPanelTitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgbPanelContent, selector: "ng-template[ngbPanelContent]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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=\"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    " }]
@@ -7853,7 +8321,7 @@ DateShortcutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 			<ng-option value="Last Q4">Last Q4</ng-option>
 			<ng-option value="All">All</ng-option>
 		</ng-select>
-	`, isInline: true, components: [{ type: i3.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"] }, { type: i3.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, components: [{ 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"] }, { type: i4$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DateShortcutComponent, decorators: [{
             type: Component,
             args: [{
@@ -8087,7 +8555,7 @@ class SchedulerComponent extends BaseComponent {
     }
 }
 SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SchedulerComponent, deps: [{ token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", 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"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", 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" }]