tin-spa 2.6.4 → 2.6.6

package/fesm2020/tin-spa.mjs

@@ -4,13 +4,13 @@ import * as i4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import * as i2 from '@angular/common';
 import { CommonModule, DecimalPipe, LocationStrategy, HashLocationStrategy, CurrencyPipe, DatePipe } from '@angular/common';
-import * as i3 from '@angular/material/button';
+import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/form-field';
+import * as i5$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { of, BehaviorSubject, Observable, Subject } from 'rxjs';
+import { of, BehaviorSubject, tap, Observable, Subject } from 'rxjs';
 import { mergeMap, startWith, map } from 'rxjs/operators';
 import * as i1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -20,18 +20,18 @@ import * as i8 from '@abacritt/angularx-social-login';
 import { SocialLoginModule } from '@abacritt/angularx-social-login';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import * as i3$1 from '@angular/cdk/layout';
-import * as i8$1 from '@angular/material/autocomplete';
+import * as i3 from '@angular/cdk/layout';
+import * as i9 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i10$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i16 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$2 from '@angular/material/checkbox';
+import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i6$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i7$1 from '@angular/material/core';
+import * as i8$1 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i8$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -39,13 +39,13 @@ import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i13$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i9 from '@angular/material/menu';
+import * as i9$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i11 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i7$2 from '@angular/material/select';
+import * as i7$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSortModule } from '@angular/material/sort';
@@ -131,7 +131,7 @@ class messageDialog {
     }
 }
 messageDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: messageDialog, deps: [{ token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-messageDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: messageDialog, selector: "lib-app-message", ngImport: i0, template: "  <h2 mat-dialog-title>\r\n\r\n    <div class=\"tin-between\">\r\n      <mat-label *ngIf=\"messageType=='confirm'\">Confirm</mat-label>\r\n      <mat-label *ngIf=\"messageType=='info'\">Information</mat-label>\r\n      <mat-label *ngIf=\"messageType=='error'\">Error</mat-label>\r\n\r\n      <mat-icon *ngIf=\"messageType=='confirm'\" >question_mark</mat-icon>\r\n      <mat-icon *ngIf=\"messageType=='info'\" style=\"color: steelblue;\">info</mat-icon>\r\n    </div>\r\n\r\n\r\n  </h2>\r\n\r\n  <mat-dialog-content >\r\n\r\n    <!-- Confirm -->\r\n    <div *ngIf=\"messageType=='confirm'\" class=\"alert alert-secondary\" role=\"alert\">\r\n      {{_messageDetails}}\r\n    </div>\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\" class=\"alert alert-secondary\" role=\"alert\">\r\n\r\n      <h3 *ngIf=\"_messageSubject && _messageSubject != ''\">{{_messageSubject}}</h3>\r\n      {{_messageDetails}}\r\n\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      {{_messageDetails}}\r\n\r\n    </div>\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button style=\"color: green;\"  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button style=\"color: red;\" *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" color=\"primary\" (click)=\"response('ok')\" cdkFocusInitial>OK</button>\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }] });
+messageDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: messageDialog, selector: "lib-app-message", ngImport: i0, template: "  <h2 mat-dialog-title>\r\n\r\n    <div class=\"tin-between\">\r\n      <mat-label *ngIf=\"messageType=='confirm'\">Confirm</mat-label>\r\n      <mat-label *ngIf=\"messageType=='info'\">Information</mat-label>\r\n      <mat-label *ngIf=\"messageType=='error'\">Error</mat-label>\r\n\r\n      <mat-icon *ngIf=\"messageType=='confirm'\" >question_mark</mat-icon>\r\n      <mat-icon *ngIf=\"messageType=='info'\" style=\"color: steelblue;\">info</mat-icon>\r\n    </div>\r\n\r\n\r\n  </h2>\r\n\r\n  <mat-dialog-content >\r\n\r\n    <!-- Confirm -->\r\n    <div *ngIf=\"messageType=='confirm'\" class=\"alert alert-secondary\" role=\"alert\">\r\n      {{_messageDetails}}\r\n    </div>\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\" class=\"alert alert-secondary\" role=\"alert\">\r\n\r\n      <h3 *ngIf=\"_messageSubject && _messageSubject != ''\">{{_messageSubject}}</h3>\r\n      {{_messageDetails}}\r\n\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      {{_messageDetails}}\r\n\r\n    </div>\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button style=\"color: green;\"  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button style=\"color: red;\" *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" color=\"primary\" (click)=\"response('ok')\" cdkFocusInitial>OK</button>\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: messageDialog, decorators: [{
             type: Component,
             args: [{ selector: 'lib-app-message', template: "  <h2 mat-dialog-title>\r\n\r\n    <div class=\"tin-between\">\r\n      <mat-label *ngIf=\"messageType=='confirm'\">Confirm</mat-label>\r\n      <mat-label *ngIf=\"messageType=='info'\">Information</mat-label>\r\n      <mat-label *ngIf=\"messageType=='error'\">Error</mat-label>\r\n\r\n      <mat-icon *ngIf=\"messageType=='confirm'\" >question_mark</mat-icon>\r\n      <mat-icon *ngIf=\"messageType=='info'\" style=\"color: steelblue;\">info</mat-icon>\r\n    </div>\r\n\r\n\r\n  </h2>\r\n\r\n  <mat-dialog-content >\r\n\r\n    <!-- Confirm -->\r\n    <div *ngIf=\"messageType=='confirm'\" class=\"alert alert-secondary\" role=\"alert\">\r\n      {{_messageDetails}}\r\n    </div>\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\" class=\"alert alert-secondary\" role=\"alert\">\r\n\r\n      <h3 *ngIf=\"_messageSubject && _messageSubject != ''\">{{_messageSubject}}</h3>\r\n      {{_messageDetails}}\r\n\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      {{_messageDetails}}\r\n\r\n    </div>\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button style=\"color: green;\"  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button style=\"color: red;\" *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" color=\"primary\" (click)=\"response('ok')\" cdkFocusInitial>OK</button>\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n" }]
@@ -641,9 +641,6 @@ class DetailsDialogProcessor {
         let details;
         let action;
         let loadByAction = false;
-        console.log("Loading Details Data");
-        console.log(detailsConfig);
-        console.log(formConfig);
         //Choose source
         if (detailsConfig.detailsSource == DetailsSource.Row) {
             console.log("Data from Details - Row option");
@@ -655,27 +652,16 @@ class DetailsDialogProcessor {
             loadByAction = true;
         }
         else {
-            console.log("Guessing Data Source");
             //new logic
             if (formConfig.loadAction) {
+                console.log("Data from Url - Guessed");
                 action = this.loadDetailsFromUrl(detailsConfig, formConfig);
                 loadByAction = true;
             }
             else {
-                console.log("Data from Details - Default option");
-                console.log(detailsConfig);
+                console.log("Data from Details - Guessed");
                 details = detailsConfig.details;
             }
-            // if (detailsConfig.details && !detailsConfig.heroField && !detailsConfig.heroValue) {
-            //   console.log("using form data from details");
-            //   console.log(detailsConfig);
-            //   details = detailsConfig.details;
-            // } else if (formConfig.loadAction) {
-            //   action = this.loadDetailsFromUrl(detailsConfig, formConfig);
-            //   loadByAction = true;
-            // } else {
-            //   console.log("auto data source failed to pick, trying source config");
-            // }
         }
         return { details, loadByAction, action };
     }
@@ -1382,6 +1368,10 @@ class DataServiceLib {
             loadAction: { url: 'departments/all/x' },
             formConfig: this.departmentFormConfig
         };
+        //---------------------------Other code
+        this.listCache = {};
+        this.cacheDuration = 5 * 60 * 1000;
+        this.cacheTimestamps = {};
         this.appConfig.appName = "App-Name";
         this.appConfig.logo = "./assets/logo.png";
         this.appConfig.ADAuth = true;
@@ -1491,8 +1481,10 @@ class DataServiceLib {
         //   this.positionFormConfig.fields.find(x => x.name == 'departmentID').options = apiResponse.data.departments;
         // });
     }
-    //---------------------------Other code
     CallApi(action, data = '') {
+        if (action.url.includes('/list/')) {
+            return this.handleListCall(action);
+        }
         if (!action.method) {
             return this.httpService.Get(action.url);
         }
@@ -1500,7 +1492,7 @@ class DataServiceLib {
             return this.httpService.Get(action.url);
         }
         else if (action.method == 'post') {
-            if (action.isFormData) {
+            if (action.isFormData || action.url.includes('/form')) {
                 return this.httpService.Post_FormData(action.url, data);
             }
             else {
@@ -1511,6 +1503,34 @@ class DataServiceLib {
             return this.httpService.Post(action.url, data);
         }
     }
+    handleListCall(action) {
+        const cacheKey = action.url;
+        const currentTime = Date.now();
+        // Return cache if valid and not forcing refresh
+        if (!action.forceRefresh && this.listCache[cacheKey] && currentTime - this.cacheTimestamps[cacheKey] < this.cacheDuration) {
+            return of({
+                success: true,
+                data: this.listCache[cacheKey]
+            });
+        }
+        // Make API call and cache result
+        return this.httpService.Get(action.url).pipe(tap((response) => {
+            if (response.success) {
+                this.listCache[cacheKey] = response.data;
+                this.cacheTimestamps[cacheKey] = currentTime;
+            }
+        }));
+    }
+    // Method to invalidate cache on data change
+    invalidateListCache(entityUrl) {
+        Object.keys(this.listCache).forEach(key => {
+            // Invalidate any cache entries related to this entity
+            if (key.includes(entityUrl)) {
+                delete this.listCache[key];
+                delete this.cacheTimestamps[key];
+            }
+        });
+    }
     CheckWelcomed(path = 'home/admin/welcome') {
         this.CallApi({ url: 'tenant/welcome/x' }).subscribe((x) => {
             if (!x.data) {
@@ -1692,14 +1712,14 @@ class DialogService {
         });
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, deps: [{ token: i4.MatDialog }, { token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, deps: [{ token: i4.MatDialog }, { token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
 DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i4.MatDialog }, { type: i3$1.BreakpointObserver }]; } });
+        }], ctorParameters: function () { return [{ type: i4.MatDialog }, { type: i3.BreakpointObserver }]; } });
 
 class TinSpaComponent {
 }
@@ -1806,7 +1826,7 @@ class SuffixComponent {
     }
 }
 SuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuffixComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-SuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuffixComponent, selector: "spa-suffix", inputs: { label: "label", infoMessage: "infoMessage", copyContent: "copyContent", isHovered: "isHovered", clearContent: "clearContent", value: "value" }, outputs: { infoClick: "infoClick", copyClick: "copyClick", clearClick: "clearClick", valueChange: "valueChange" }, ngImport: i0, template: "<label *ngIf=\"label\">{{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+SuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuffixComponent, selector: "spa-suffix", inputs: { label: "label", infoMessage: "infoMessage", copyContent: "copyContent", isHovered: "isHovered", clearContent: "clearContent", value: "value" }, outputs: { infoClick: "infoClick", copyClick: "copyClick", clearClick: "clearClick", valueChange: "valueChange" }, ngImport: i0, template: "<label *ngIf=\"label\">{{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuffixComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-suffix', template: "<label *ngIf=\"label\">{{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n" }]
@@ -1833,7 +1853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class TextComponent {
-    constructor() {
+    constructor(dataService) {
+        this.dataService = dataService;
         this.multiDimension = false;
         // options: FormGroup;
         this.hideRequiredControl = new FormControl(true);
@@ -1854,7 +1875,8 @@ class TextComponent {
         this.clearContent = false;
         //Autocomplete items
         this.options = [];
-        this.optionValue = "";
+        this.optionDisplay = "name"; // Default to name if not provided
+        this.optionValue = "value"; // Default to value if not provided
         //validation input
         this.required = true;
         this.min = 0;
@@ -1869,8 +1891,13 @@ class TextComponent {
         if (!this.options) {
             this.options = [];
         }
-        if (this.options.length > 0) {
-            this.initFilter();
+        if (this.loadAction) {
+            this.getData(this.loadAction);
+        }
+        else {
+            if (this.options.length > 0) {
+                this.initFilter();
+            }
         }
         if (this.placeholder == "") {
             this.placeholder = "Enter " + this.display;
@@ -1891,19 +1918,16 @@ class TextComponent {
         const firstKey = objKeyList[0];
         this.multiDimension = !Core.isNumber(firstKey);
         this.filteredOptions = this.myControl.valueChanges.pipe(startWith(""), map((value) => this._filter(value)));
+        this.myControl.setValue(this.getDisplayValue(this.value));
     }
     _filter(value) {
+        if (!value)
+            return this.options;
+        const filterValue = value.toLowerCase();
         if (this.multiDimension) {
-            let filterValue = "";
-            if (value != "" && value) {
-                filterValue = value.toLowerCase();
-            }
-            return this.options.filter((option) => option[`${this.optionValue}`].toLowerCase().includes(filterValue));
-        }
-        else {
-            const filterValue = value.toLowerCase();
-            return this.options.filter(option => option.toLowerCase().includes(filterValue));
+            return this.options.filter(option => option[this.optionDisplay].toLowerCase().includes(filterValue));
         }
+        return this.options.filter(option => option.toLowerCase().includes(filterValue));
     }
     initControl(control) {
         if (this.readonly) {
@@ -1915,10 +1939,29 @@ class TextComponent {
             this.control.updateValueAndValidity();
         }
     }
+    getDisplayValue(value) {
+        if (!value || !this.options.length)
+            return '';
+        if (this.multiDimension) {
+            const option = this.options.find(opt => opt[this.optionValue] === value);
+            return option ? option[this.optionDisplay] : '';
+        }
+        return value;
+    }
     //Events
     changed() {
+        // Changed to handle both autocomplete and regular modes
         if (this.options.length > 0) {
-            this.valueChange.emit(this.myControl.value);
+            // For autocomplete, find the full option object to get proper value
+            const selectedOption = this.multiDimension ?
+                this.options.find(opt => opt[this.optionDisplay] === this.myControl.value) :
+                this.options.find(opt => opt === this.myControl.value);
+            // Emit the optionValue if available, otherwise emit the direct value
+            const valueToEmit = selectedOption ?
+                (this.multiDimension ? selectedOption[this.optionValue] : selectedOption) :
+                this.myControl.value;
+            this.value = valueToEmit;
+            this.valueChange.emit(valueToEmit);
         }
         else {
             this.valueChange.emit(this.value);
@@ -1934,6 +1977,27 @@ class TextComponent {
     enterPressed() {
         this.enterPress.emit();
     }
+    refresh(event) {
+        event.stopPropagation();
+        if (!this.loadAction) {
+            return;
+        }
+        const refreshAction = {
+            ...this.loadAction,
+            forceRefresh: true
+        };
+        this.getData(refreshAction);
+    }
+    getData(action) {
+        if (!action)
+            return;
+        this.dataService.CallApi(action).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                this.options = apiResponse.data;
+                this.initFilter();
+            }
+        });
+    }
     validate(control) {
         if ((this.required || this.min > 0) && control.hasError('required')) {
             return `Required`;
@@ -1950,12 +2014,12 @@ class TextComponent {
         return "";
     }
 }
-TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" >\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \"  [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <ng-container *ngIf=\"!multiDimension\">\r\n      <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n        {{option}}\r\n      </mat-option>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"multiDimension\">\r\n      <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n        {{row[optionValue]}}\r\n      </mat-option>\r\n    </ng-container>\r\n  </mat-autocomplete>\r\n    <div matSuffix class=\"suffix-icons\">\r\n      <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n    </div>\r\n</mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue", loadAction: "loadAction", required: "required", min: "min", max: "max", regex: "regex", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" >\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && format=='text' && options.length > 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"myControl\" matInput [matAutocomplete]=\"auto\" [required]=\"required\" [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"multiDimension ? option[optionDisplay] : option\">\r\n      {{multiDimension ? option[optionDisplay] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" >\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \"  [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <ng-container *ngIf=\"!multiDimension\">\r\n      <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n        {{option}}\r\n      </mat-option>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"multiDimension\">\r\n      <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n        {{row[optionValue]}}\r\n      </mat-option>\r\n    </ng-container>\r\n  </mat-autocomplete>\r\n    <div matSuffix class=\"suffix-icons\">\r\n      <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n    </div>\r\n</mat-form-field>\r\n\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" >\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && format=='text' && options.length > 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"myControl\" matInput [matAutocomplete]=\"auto\" [required]=\"required\" [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"multiDimension ? option[optionDisplay] : option\">\r\n      {{multiDimension ? option[optionDisplay] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }]; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -1985,8 +2049,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], options: [{
                 type: Input
+            }], optionDisplay: [{
+                type: Input
             }], optionValue: [{
                 type: Input
+            }], loadAction: [{
+                type: Input
             }], required: [{
                 type: Input
             }], min: [{
@@ -2039,7 +2107,7 @@ class CheckComponent {
     }
 }
 CheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-CheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckComponent, selector: "spa-check", inputs: { readonly: "readonly", display: "display", value: "value", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", click: "click", check: "check", uncheck: "uncheck", infoClick: "infoClick" }, ngImport: i0, template: "\r\n\r\n<mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n<!-- <div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n</div> -->\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+CheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckComponent, selector: "spa-check", inputs: { readonly: "readonly", display: "display", value: "value", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", click: "click", check: "check", uncheck: "uncheck", infoClick: "infoClick" }, ngImport: i0, template: "\r\n\r\n<mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n<!-- <div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n</div> -->\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-check', template: "\r\n\r\n<mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n<!-- <div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n</div> -->\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"] }]
@@ -2122,7 +2190,7 @@ class DateComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", infoClick: "infoClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" >\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", infoClick: "infoClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" >\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" >\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n" }]
@@ -2174,7 +2242,7 @@ class DatetimeComponent {
     }
 }
 DatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DatetimeComponent, selector: "spa-datetime", inputs: { display: "display", value: "value", readonly: "readonly", width: "width", min: "min", max: "max", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", infoClick: "infoClick" }, ngImport: i0, template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\" >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n    <div matSuffix class=\"suffix-icons\">\r\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n      </button>\r\n    </div>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DatetimeComponent, selector: "spa-datetime", inputs: { display: "display", value: "value", readonly: "readonly", width: "width", min: "min", max: "max", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", infoClick: "infoClick" }, ngImport: i0, template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\" >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n    <div matSuffix class=\"suffix-icons\">\r\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n      </button>\r\n    </div>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-datetime', template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\" >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n    <div matSuffix class=\"suffix-icons\">\r\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n      </button>\r\n    </div>\r\n</mat-form-field>\r\n" }]
@@ -2247,7 +2315,7 @@ class SelectCommonComponent {
             this.placeholder = "Select " + this.display;
         }
         if (this.options == null || this.options == undefined || this.options.length == 0) {
-            this.getData();
+            this.getData(this.loadAction);
         }
         if (this.defaultFirstValue && this.options && this.options.length > 0 && (this.value == null || this.value == undefined || (typeof (this.value) == 'string' && this.value == '') || (typeof (this.value) == 'number' && this.value == 0))) {
             this.value = this.options[0][this.optionValue];
@@ -2279,26 +2347,29 @@ class SelectCommonComponent {
         if (!this.loadAction) {
             return;
         }
-        this.getData();
+        const refreshAction = {
+            ...this.loadAction,
+            forceRefresh: true
+        };
+        this.getData(refreshAction);
     }
-    getData() {
-        if (!this.loadAction)
+    getData(loadAction) {
+        if (!loadAction)
             return;
-        this.dataService.CallApi(this.loadAction, "").subscribe((apiResponse) => {
+        if (this.masterField)
+            return; //if master field is set, then it will be loaded by the master field
+        this.dataService.CallApi(loadAction, "").subscribe((apiResponse) => {
             if (apiResponse.success) {
                 this.options = apiResponse.data;
             }
-            else {
-                this.messageService.toast("Error: " + apiResponse.message);
-            }
         });
     }
 }
 SelectCommonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectCommonComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-SelectCommonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectCommonComponent, selector: "spa-select-common", inputs: { width: "width", readonly: "readonly", required: "required", defaultFirstValue: "defaultFirstValue", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", masterOptions: "masterOptions", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra", nullable: "nullable", infoMessage: "infoMessage", copyContent: "copyContent", loadAction: "loadAction" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
+SelectCommonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectCommonComponent, selector: "spa-select-common", inputs: { width: "width", readonly: "readonly", required: "required", defaultFirstValue: "defaultFirstValue", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", masterOptions: "masterOptions", masterField: "masterField", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra", nullable: "nullable", infoMessage: "infoMessage", copyContent: "copyContent", loadAction: "loadAction" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered && !masterField\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectCommonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select-common', template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
+            args: [{ selector: 'spa-select-common', template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered && !masterField\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { width: [{
                 type: Input
             }], readonly: [{
@@ -2323,6 +2394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], masterOptions: [{
                 type: Input
+            }], masterField: [{
+                type: Input
             }], optionValue: [{
                 type: Input
             }], optionDisplay: [{
@@ -2754,7 +2827,7 @@ class MoneyComponent {
     }
 }
 MoneyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
+MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-money', template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"] }]
@@ -2854,7 +2927,7 @@ class AttachComponent {
     }
 }
 AttachComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AttachComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AttachComponent, selector: "spa-attach", inputs: { message: "message", files: "files", enableUpload: "enableUpload" }, outputs: { filesChange: "filesChange", upload: "upload" }, ngImport: i0, template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:100px;padding-top:5px;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+AttachComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AttachComponent, selector: "spa-attach", inputs: { message: "message", files: "files", enableUpload: "enableUpload" }, outputs: { filesChange: "filesChange", upload: "upload" }, ngImport: i0, template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:100px;padding-top:5px;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AttachComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-attach', template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:100px;padding-top:5px;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"] }]
@@ -2938,7 +3011,7 @@ class NumberComponent {
     }
 }
 NumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, ngImport: i0, template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n    <div matSuffix class=\"suffix-icons\">\n      <label *ngIf=\"suffix\">{{suffix}}</label>\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\n      </button>\n    </div>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, ngImport: i0, template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n    <div matSuffix class=\"suffix-icons\">\n      <label *ngIf=\"suffix\">{{suffix}}</label>\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\n      </button>\n    </div>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-number', template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n    <div matSuffix class=\"suffix-icons\">\n      <label *ngIf=\"suffix\">{{suffix}}</label>\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\n      </button>\n    </div>\n</mat-form-field>\n" }]
@@ -3104,7 +3177,7 @@ class viewerDialog {
     }
 }
 viewerDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: viewerDialog, deps: [{ token: HttpService }, { token: DataServiceLib }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-viewerDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: viewerDialog, selector: "app-editRequest", ngImport: i0, template: "\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\">\r\n\r\n    <div class=\"col\">\r\n      <ngx-doc-viewer *ngIf=\"imageDoc\"\r\n        [url]=\"currentFileUrl\"\r\n        viewer=\"url\"\r\n        style=\"width:100%;height:60vh;\">\r\n      </ngx-doc-viewer>\r\n\r\n      <div *ngIf=\"!imageDoc\" class=\"d-flex justify-content-center row align-items-center\" style=\"height:60vh;\">\r\n\r\n        This file type will be downloaded\r\n\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"col-3\">\r\n      <spa-chips [chips]=\"fileNames\" display=\"Documents\" icon=\"description\" (click)=\"change($event)\"></spa-chips>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"currIndex == 0\" (click)=\"previous()\" cdkFocusInitial>Previous</button>\r\n<button mat-button [disabled]=\"currIndex+1 == fileNames.length\" (click)=\"next()\" cdkFocusInitial>Next</button>\r\n<button mat-button mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6$2.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: ChipsComponent, selector: "spa-chips", inputs: ["icon", "removable", "addable", "chips"], outputs: ["click", "remove"] }] });
+viewerDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: viewerDialog, selector: "app-editRequest", ngImport: i0, template: "\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\">\r\n\r\n    <div class=\"col\">\r\n      <ngx-doc-viewer *ngIf=\"imageDoc\"\r\n        [url]=\"currentFileUrl\"\r\n        viewer=\"url\"\r\n        style=\"width:100%;height:60vh;\">\r\n      </ngx-doc-viewer>\r\n\r\n      <div *ngIf=\"!imageDoc\" class=\"d-flex justify-content-center row align-items-center\" style=\"height:60vh;\">\r\n\r\n        This file type will be downloaded\r\n\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"col-3\">\r\n      <spa-chips [chips]=\"fileNames\" display=\"Documents\" icon=\"description\" (click)=\"change($event)\"></spa-chips>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"currIndex == 0\" (click)=\"previous()\" cdkFocusInitial>Previous</button>\r\n<button mat-button [disabled]=\"currIndex+1 == fileNames.length\" (click)=\"next()\" cdkFocusInitial>Next</button>\r\n<button mat-button mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6$2.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: ChipsComponent, selector: "spa-chips", inputs: ["icon", "removable", "addable", "chips"], outputs: ["click", "remove"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: viewerDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-editRequest', template: "\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\">\r\n\r\n    <div class=\"col\">\r\n      <ngx-doc-viewer *ngIf=\"imageDoc\"\r\n        [url]=\"currentFileUrl\"\r\n        viewer=\"url\"\r\n        style=\"width:100%;height:60vh;\">\r\n      </ngx-doc-viewer>\r\n\r\n      <div *ngIf=\"!imageDoc\" class=\"d-flex justify-content-center row align-items-center\" style=\"height:60vh;\">\r\n\r\n        This file type will be downloaded\r\n\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"col-3\">\r\n      <spa-chips [chips]=\"fileNames\" display=\"Documents\" icon=\"description\" (click)=\"change($event)\"></spa-chips>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"currIndex == 0\" (click)=\"previous()\" cdkFocusInitial>Previous</button>\r\n<button mat-button [disabled]=\"currIndex+1 == fileNames.length\" (click)=\"next()\" cdkFocusInitial>Next</button>\r\n<button mat-button mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}\n"] }]
@@ -3166,7 +3239,7 @@ class ViewerComponent {
     }
 }
 ViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewerComponent, deps: [{ token: DataServiceLib }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewerComponent, selector: "spa-viewer", inputs: { fileAction: "fileAction", path: "path", folderName: "folderName", fileNames: "fileNames", removable: "removable", display: "display", title: "title" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n  <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n</div>\r\n\r\n<spa-chips [chips]=\"fileNames\" [title]=\"title\"  [removable]=\"removable\" icon=\"description\" (click)=\"viewDocs($event)\" (remove)=\"removed($event)\"></spa-chips>\r\n\r\n\r\n\r\n<div *ngIf=\"!fileNames || fileNames.length ==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n  No {{title.toLowerCase()}}\r\n\r\n</div>\r\n", styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: ChipsComponent, selector: "spa-chips", inputs: ["icon", "removable", "addable", "chips"], outputs: ["click", "remove"] }] });
+ViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewerComponent, selector: "spa-viewer", inputs: { fileAction: "fileAction", path: "path", folderName: "folderName", fileNames: "fileNames", removable: "removable", display: "display", title: "title" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n  <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n</div>\r\n\r\n<spa-chips [chips]=\"fileNames\" [title]=\"title\"  [removable]=\"removable\" icon=\"description\" (click)=\"viewDocs($event)\" (remove)=\"removed($event)\"></spa-chips>\r\n\r\n\r\n\r\n<div *ngIf=\"!fileNames || fileNames.length ==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n  No {{title.toLowerCase()}}\r\n\r\n</div>\r\n", styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: ChipsComponent, selector: "spa-chips", inputs: ["icon", "removable", "addable", "chips"], outputs: ["click", "remove"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-viewer', template: "<div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n  <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n</div>\r\n\r\n<spa-chips [chips]=\"fileNames\" [title]=\"title\"  [removable]=\"removable\" icon=\"description\" (click)=\"viewDocs($event)\" (remove)=\"removed($event)\"></spa-chips>\r\n\r\n\r\n\r\n<div *ngIf=\"!fileNames || fileNames.length ==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n  No {{title.toLowerCase()}}\r\n\r\n</div>\r\n", styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}\n"] }]
@@ -3278,7 +3351,7 @@ class EmailComponent {
     }
 }
 EmailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmailComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-EmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EmailComponent, selector: "spa-email", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionValue: "optionValue" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field style=\"width: 100%;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let email of emails\" [removable]=\"!readonly\" (removed)=\"removeEmail(email)\">\r\n      {{email}}\r\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\r\n    </mat-chip>\r\n    <input autocomplete=\"off\" #emailInput [placeholder]=\"readonly ? '' : 'Enter email addresses'\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"addEmail($event)\" [formControl]=\"emailControl\" (paste)=\"handlePaste($event)\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\r\n  </mat-chip-list>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"optionValue ? option[optionValue] : option\">\r\n      {{optionValue ? option[optionValue] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-error *ngIf=\"emailControl.invalid && emailControl.touched\">Invalid email format</mat-error>\r\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clearEmails()\" [isHovered]=\"true\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n", styles: [":host ::ng-deep .mat-form-field-flex{align-items:flex-start}:host ::ng-deep .mat-form-field-infix{max-height:170px;overflow-y:auto;padding-top:.25em;padding-bottom:.25em;overflow-x:hidden}:host ::ng-deep mat-chip{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+EmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EmailComponent, selector: "spa-email", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionValue: "optionValue" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field style=\"width: 100%;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let email of emails\" [removable]=\"!readonly\" (removed)=\"removeEmail(email)\">\r\n      {{email}}\r\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\r\n    </mat-chip>\r\n    <input autocomplete=\"off\" #emailInput [placeholder]=\"readonly ? '' : 'Enter email addresses'\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"addEmail($event)\" [formControl]=\"emailControl\" (paste)=\"handlePaste($event)\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\r\n  </mat-chip-list>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"optionValue ? option[optionValue] : option\">\r\n      {{optionValue ? option[optionValue] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-error *ngIf=\"emailControl.invalid && emailControl.touched\">Invalid email format</mat-error>\r\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clearEmails()\" [isHovered]=\"true\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n", styles: [":host ::ng-deep .mat-form-field-flex{align-items:flex-start}:host ::ng-deep .mat-form-field-infix{max-height:170px;overflow-y:auto;padding-top:.25em;padding-bottom:.25em;overflow-x:hidden}:host ::ng-deep mat-chip{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-email', template: "<mat-form-field style=\"width: 100%;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let email of emails\" [removable]=\"!readonly\" (removed)=\"removeEmail(email)\">\r\n      {{email}}\r\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\r\n    </mat-chip>\r\n    <input autocomplete=\"off\" #emailInput [placeholder]=\"readonly ? '' : 'Enter email addresses'\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"addEmail($event)\" [formControl]=\"emailControl\" (paste)=\"handlePaste($event)\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\r\n  </mat-chip-list>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"optionValue ? option[optionValue] : option\">\r\n      {{optionValue ? option[optionValue] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <mat-error *ngIf=\"emailControl.invalid && emailControl.touched\">Invalid email format</mat-error>\r\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clearEmails()\" [isHovered]=\"true\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n", styles: [":host ::ng-deep .mat-form-field-flex{align-items:flex-start}:host ::ng-deep .mat-form-field-infix{max-height:170px;overflow-y:auto;padding-top:.25em;padding-bottom:.25em;overflow-x:hidden}:host ::ng-deep mat-chip{flex:0 0 auto}\n"] }]
@@ -3309,8 +3382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class MultiTextComponent {
-    constructor(messageService) {
+    constructor(messageService, dataService) {
         this.messageService = messageService;
+        this.dataService = dataService;
         this.display = "";
         this.value = "";
         this.valueChange = new EventEmitter();
@@ -3327,10 +3401,13 @@ class MultiTextComponent {
         this.control = new FormControl('');
         this.errorState = false;
         this.selectedFromAutocomplete = false;
+        this.isHovered = false;
+        this.hoverChange = new EventEmitter();
     }
     ngOnInit() {
         this.values = this.value ? this.value.split(';').filter(val => val.trim() !== '') : [];
         this.setupAutoComplete();
+        this.getData(this.loadAction);
     }
     ngOnChanges() {
         if (this.options) {
@@ -3424,13 +3501,42 @@ class MultiTextComponent {
             this.messageService.toast('Copied');
         });
     }
+    onMouseEnter() {
+        this.isHovered = true;
+        this.hoverChange.emit(true);
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        this.hoverChange.emit(false);
+    }
+    refresh(event) {
+        event.stopPropagation();
+        if (!this.loadAction) {
+            return;
+        }
+        const refreshAction = {
+            ...this.loadAction,
+            forceRefresh: true
+        };
+        this.getData(refreshAction);
+    }
+    getData(action) {
+        if (!action)
+            return;
+        this.dataService.CallApi(action).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                this.options = apiResponse.data;
+                this.setupAutoComplete();
+            }
+        });
+    }
 }
-MultiTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiTextComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-MultiTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiTextComponent, selector: "spa-multi-text", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", strict: "strict", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%;\">\n  <mat-label>{{display}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let value of values\" [removable]=\"!readonly\" (removed)=\"remove(value)\">\n      {{getDisplayValue(value)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip>\n    <input #textInput autocomplete=\"off\" [placeholder]=\"readonly ? '' : display\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"add($event)\" [formControl]=\"control\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\n  </mat-chip-list>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-error *ngIf=\"errorState\">{{hint}}</mat-error>\n  <mat-hint *ngIf=\"hint && !errorState\">{{hint}}</mat-hint>\n\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+MultiTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiTextComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+MultiTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiTextComponent, selector: "spa-multi-text", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", strict: "strict", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue", loadAction: "loadAction" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <mat-label>{{display}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let value of values\" [removable]=\"!readonly\" (removed)=\"remove(value)\">\n      {{getDisplayValue(value)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip>\n    <input #textInput autocomplete=\"off\" [placeholder]=\"readonly ? '' : display\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"add($event)\" [formControl]=\"control\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\n  </mat-chip-list>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-error *ngIf=\"errorState\">{{hint}}</mat-error>\n  <mat-hint *ngIf=\"hint && !errorState\">{{hint}}</mat-hint>\n\n  <div matSuffix class=\"suffix-icons\">\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\n      <mat-icon color=\"primary\">cached</mat-icon>\n    </button>\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\"></spa-suffix>\n  </div>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-multi-text', template: "<mat-form-field style=\"width: 100%;\">\n  <mat-label>{{display}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let value of values\" [removable]=\"!readonly\" (removed)=\"remove(value)\">\n      {{getDisplayValue(value)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip>\n    <input #textInput autocomplete=\"off\" [placeholder]=\"readonly ? '' : display\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"add($event)\" [formControl]=\"control\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\n  </mat-chip-list>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-error *ngIf=\"errorState\">{{hint}}</mat-error>\n  <mat-hint *ngIf=\"hint && !errorState\">{{hint}}</mat-hint>\n\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n" }]
-        }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { textInput: [{
+            args: [{ selector: 'spa-multi-text', template: "<mat-form-field style=\"width: 100%;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <mat-label>{{display}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let value of values\" [removable]=\"!readonly\" (removed)=\"remove(value)\">\n      {{getDisplayValue(value)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip>\n    <input #textInput autocomplete=\"off\" [placeholder]=\"readonly ? '' : display\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"add($event)\" [formControl]=\"control\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\n  </mat-chip-list>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-error *ngIf=\"errorState\">{{hint}}</mat-error>\n  <mat-hint *ngIf=\"hint && !errorState\">{{hint}}</mat-hint>\n\n  <div matSuffix class=\"suffix-icons\">\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\n      <mat-icon color=\"primary\">cached</mat-icon>\n    </button>\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\"></spa-suffix>\n  </div>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { textInput: [{
                 type: ViewChild,
                 args: ['textInput']
             }], display: [{
@@ -3461,11 +3567,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], optionValue: [{
                 type: Input
+            }], loadAction: [{
+                type: Input
+            }], hoverChange: [{
+                type: Output
             }] } });
 
 class MultiSelectComponent {
-    constructor(messageService) {
+    constructor(messageService, dataService) {
         this.messageService = messageService;
+        this.dataService = dataService;
         this.display = "";
         this.value = "";
         this.valueChange = new EventEmitter();
@@ -3482,12 +3593,19 @@ class MultiSelectComponent {
         this.width = "100%";
         this.control = new FormControl([]);
         this.selectedValues = [];
+        this.isHovered = false;
+        this.hoverChange = new EventEmitter();
     }
     ngOnInit() {
         if (!this.placeholder) {
             this.placeholder = `Select ${this.display}`;
         }
-        this.initializeValues();
+        if (this.loadAction) {
+            this.getData(this.loadAction);
+        }
+        else {
+            this.initializeValues();
+        }
     }
     ngOnChanges() {
         this.initializeValues();
@@ -3533,13 +3651,42 @@ class MultiSelectComponent {
             this.messageService.toast('Copied');
         });
     }
+    onMouseEnter() {
+        this.isHovered = true;
+        this.hoverChange.emit(true);
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+        this.hoverChange.emit(false);
+    }
+    refresh(event) {
+        event.stopPropagation();
+        if (!this.loadAction) {
+            return;
+        }
+        const refreshAction = {
+            ...this.loadAction,
+            forceRefresh: true
+        };
+        this.getData(refreshAction);
+    }
+    getData(action) {
+        if (!action)
+            return;
+        this.dataService.CallApi(action).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                this.options = apiResponse.data;
+                this.initializeValues();
+            }
+        });
+    }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiSelectComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiSelectComponent, selector: "spa-multi-select", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", nullable: "nullable", placeholder: "placeholder", width: "width", suffix: "suffix" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\">\n  <mat-label>{{display}}</mat-label>\n  <mat-select [formControl]=\"control\" [required]=\"required\" [disabled]=\"readonly\" multiple [placeholder]=\"placeholder\" [compareWith]=\"compareWith\" (selectionChange)=\"selectionChange($event)\">\n    <mat-option *ngIf=\"nullable\" [value]=\"null\">None</mat-option>\n    <mat-option *ngFor=\"let option of options\" [value]=\"option[optionValue]\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiSelectComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiSelectComponent, selector: "spa-multi-select", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", nullable: "nullable", placeholder: "placeholder", width: "width", suffix: "suffix", loadAction: "loadAction" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <mat-label>{{display}}</mat-label>\n  <mat-select [formControl]=\"control\" [required]=\"required\" [disabled]=\"readonly\" multiple [placeholder]=\"placeholder\" [compareWith]=\"compareWith\" (selectionChange)=\"selectionChange($event)\">\n    <mat-option *ngIf=\"nullable\" [value]=\"null\">None</mat-option>\n    <mat-option *ngFor=\"let option of options\" [value]=\"option[optionValue]\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <div matSuffix class=\"suffix-icons\">\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\n      <mat-icon color=\"primary\">cached</mat-icon>\n    </button>\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-multi-select', template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\">\n  <mat-label>{{display}}</mat-label>\n  <mat-select [formControl]=\"control\" [required]=\"required\" [disabled]=\"readonly\" multiple [placeholder]=\"placeholder\" [compareWith]=\"compareWith\" (selectionChange)=\"selectionChange($event)\">\n    <mat-option *ngIf=\"nullable\" [value]=\"null\">None</mat-option>\n    <mat-option *ngFor=\"let option of options\" [value]=\"option[optionValue]\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n" }]
-        }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { display: [{
+            args: [{ selector: 'spa-multi-select', template: "<mat-form-field [ngStyle]=\"{'width':width ?? '100%'}\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <mat-label>{{display}}</mat-label>\n  <mat-select [formControl]=\"control\" [required]=\"required\" [disabled]=\"readonly\" multiple [placeholder]=\"placeholder\" [compareWith]=\"compareWith\" (selectionChange)=\"selectionChange($event)\">\n    <mat-option *ngIf=\"nullable\" [value]=\"null\">None</mat-option>\n    <mat-option *ngFor=\"let option of options\" [value]=\"option[optionValue]\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <div matSuffix class=\"suffix-icons\">\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\n      <mat-icon color=\"primary\">cached</mat-icon>\n    </button>\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { display: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -3571,6 +3718,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], suffix: [{
                 type: Input
+            }], loadAction: [{
+                type: Input
+            }], hoverChange: [{
+                type: Output
             }] } });
 
 class CamelToWordsPipe {
@@ -3587,8 +3738,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-// import { DialogService } from '../../services/dialog.service';
-// import { DetailsDialog } from '../table/detailsDialog.component';
 class FormComponent {
     constructor(messageService, dataService) {
         this.messageService = messageService;
@@ -3626,7 +3775,17 @@ class FormComponent {
         this.childFields = this.fields.filter(x => x.masterField);
         this.childFields.forEach(child => {
             let master = this.fields.find(x => x.name == child.masterField);
-            this.updateChildOptions(master);
+            if (child.loadAction) {
+                this.loadChildMasterOptions(child);
+            }
+            else {
+                this.updateChildOptions(master.name);
+            }
+        });
+        this.fields.forEach(field => {
+            if (field.loadAction) {
+                this.loadChildMasterOptions(field);
+            }
         });
         this.initializeCompositeFields();
     }
@@ -3644,10 +3803,6 @@ class FormComponent {
     getVisibleSubfields(field) {
         return Core.getVisibleSubfields(this.config, this.data, field);
     }
-    ngOnChanges() {
-    }
-    ngAfterViewInit() {
-    }
     getVisibleFields() {
         return this.fields?.filter(x => Core.testVisible(this.config, this.data, x));
     }
@@ -3670,7 +3825,7 @@ class FormComponent {
     }
     inputChanged(field, value) {
         this.inputChange.emit({ field: field, value: value });
-        this.updateChildOptions(field);
+        this.updateChildOptions(field.name);
         if (this.config.mode == 'create' && field.child) {
             let child = this.fields.find(x => x.name == field.child.childField);
             this.data[child.name] = field.options.find(x => x[field.optionValue] == value)[field.child.childValueField];
@@ -3684,14 +3839,28 @@ class FormComponent {
             });
         }
     }
-    updateChildOptions(masterField) {
-        let child = this.childFields.find(x => x.masterField == masterField.name);
+    updateChildOptions(masterFieldName) {
+        let child = this.childFields.find(x => x.masterField == masterFieldName);
         if (child != null) {
             //current is master
-            //filter child options based on master value
-            child.options = child.masterOptions.filter(x => x[masterField.optionValue] == this.data[masterField.name]);
+            if (child.masterOptions) {
+                child.options = child.masterOptions.filter(x => x[child.masterOptionValue] == this.data[masterFieldName]);
+            }
+            else {
+                console.log("Master Options not found");
+            }
         }
     }
+    loadChildMasterOptions(child) {
+        if (!child.loadAction)
+            return;
+        this.dataService.CallApi(child.loadAction).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                child.masterOptions = apiResponse.data;
+                this.updateChildOptions(child.masterField);
+            }
+        });
+    }
     buttonClicked() {
         this.buttonClick.emit(this.data);
         let button = this.config.button;
@@ -3758,10 +3927,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: MultiTextComponent, selector: "spa-multi-text", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: MultiSelectComponent, selector: "spa-multi-select", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix"], outputs: ["valueChange"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: true }], ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"subfield.loadAction\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: MultiTextComponent, selector: "spa-multi-text", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: MultiSelectComponent, selector: "spa-multi-select", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"] }]
+            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"subfield.loadAction\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { dynamicSelectTemplate: [{
                 type: ContentChild,
                 args: ['dynamicSelect']
@@ -3811,10 +3980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class SelectLiteComponent extends SelectCommonComponent {
 }
 SelectLiteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectLiteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectLiteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectLiteComponent, selector: "spa-select-lite", usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n", styles: [""], dependencies: [{ kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
+SelectLiteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectLiteComponent, selector: "spa-select-lite", usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n", styles: [""], dependencies: [{ kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectLiteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select-lite', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n" }]
+            args: [{ selector: 'spa-select-lite', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n" }]
         }] });
 
 class DetailsDialogLite {
@@ -4033,12 +4202,12 @@ class DetailsDialogLite {
         });
     }
 }
-DetailsDialogLite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogLite, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogLite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogLite, selector: "spa-detailsDialog-lite", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n          <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n         <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group> -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+DetailsDialogLite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogLite, deps: [{ token: i3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+DetailsDialogLite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogLite, selector: "spa-detailsDialog-lite", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n          <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n         <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group> -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogLite, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog-lite', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n          <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n         <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group> -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
+            args: [{ selector: 'spa-detailsDialog-lite', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n          <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n         <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group> -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: ButtonService }, { type: DialogService }]; }, propDecorators: { inputChange: [{
@@ -4056,11 +4225,20 @@ class SelectInternalComponent extends SelectCommonComponent {
     onHoverChange(isHovered) {
         this.isHovered = isHovered;
     }
+    canCreate() {
+        if (!this.detailsConfig.buttons)
+            return false;
+        const createButton = this.detailsConfig.buttons.find(b => b.name === 'create');
+        return createButton && (!createButton.disabled || !createButton.disabled(this.value));
+    }
     onPeekClick(event, mode) {
         event.stopPropagation();
-        if (this.peekConfig && this.peekConfig[mode]) {
-            const dynamicData = mode === 'create' ? {} : { [this.peekConfig.detailsConfig.heroField]: this.value };
-            this.dialogService.openConfiguredDetailsDialog(mode, dynamicData, this.peekConfig.detailsConfig, DetailsDialogLite).subscribe(result => {
+        if (this.detailsConfig) {
+            const dynamicData = mode === 'create' ? {} : { [this.detailsConfig.heroField]: this.value };
+            if (mode === 'view' && !this.detailsConfig.buttons.some(b => b.name === 'view')) {
+                this.detailsConfig.buttons.push({ name: 'view', dialog: true });
+            }
+            this.dialogService.openConfiguredDetailsDialog(mode, dynamicData, this.detailsConfig, DetailsDialogLite).subscribe(result => {
                 console.log(result);
                 if (result.message === 'success') {
                     this.refresh(event);
@@ -4073,11 +4251,11 @@ class SelectInternalComponent extends SelectCommonComponent {
     }
 }
 SelectInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectInternalComponent, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SelectInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectInternalComponent, selector: "spa-select-internal", inputs: { peekConfig: "peekConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.create && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.view && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
+SelectInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectInternalComponent, selector: "spa-select-internal", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectInternalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select-internal', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.create && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.view && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n" }]
-        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: DialogService }]; }, propDecorators: { peekConfig: [{
+            args: [{ selector: 'spa-select-internal', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n" }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: DialogService }]; }, propDecorators: { detailsConfig: [{
                 type: Input
             }] } });
 
@@ -4175,7 +4353,7 @@ class FilterComponent {
     }
 }
 FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { flatButtons: "flatButtons", showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"_filterText\" (click)=\"clear()\" matTooltip=\"Clear\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: black;\">close</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { flatButtons: "flatButtons", showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"_filterText\" (click)=\"clear()\" matTooltip=\"Clear\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: black;\">close</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-filter', template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"_filterText\" (click)=\"clear()\" matTooltip=\"Clear\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: black;\">close</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -4231,10 +4409,10 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show", required: "required", infoMessage: "infoMessage", copyContent: "copyContent", suffix: "suffix" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n  <mat-checkbox color=\"primary\" style=\"margin-right:0px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\" [disabled]=\"required\" >{{display}}</mat-checkbox>\r\n\r\n  <mat-form-field style=\"margin-right:1px;width: 0px;\" >\r\n  <input matInput />\r\n  </mat-form-field>\r\n\r\n  <ng-container *ngIf=\"show\" [ngSwitch]=\"type\" style=\"margin-left: 5px;\">\r\n\r\n    <spa-date class=\"opt\" *ngSwitchCase=\"'date'\" [display]=\"display\" width=\"120px\"  [(value)]=\"value\" [display]=\"display\" (valueChange)=\"dateChanged($event)\"\r\n    ></spa-date>\r\n\r\n    <spa-select-lite class=\"opt\" *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n    [copyContent]=\"copyContent\"\r\n    ></spa-select-lite>\r\n\r\n    <spa-text class=\"opt\" *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\"  [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n    [suffix]=\"suffix\" [copyContent]=\"copyContent\"\r\n    ></spa-text>\r\n\r\n  </ng-container>\r\n\r\n  <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"opacity: 1;margin: 0px;padding: 0px;\">\r\n    <mat-icon style=\"color: steelblue;font-size: 18px;\">info</mat-icon>\r\n  </button>\r\n\r\n</div>\r\n", styles: [".opt{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show", required: "required", infoMessage: "infoMessage", copyContent: "copyContent", suffix: "suffix", loadAction: "loadAction" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n  <mat-checkbox color=\"primary\" style=\"margin-right:0px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\" [disabled]=\"required\" >{{display}}</mat-checkbox>\r\n\r\n  <mat-form-field style=\"margin-right:1px;width: 0px;\" >\r\n    <input matInput />\r\n  </mat-form-field>\r\n\r\n  <ng-container *ngIf=\"show\" [ngSwitch]=\"type\" style=\"margin-left: 5px;\">\r\n\r\n    <spa-date class=\"opt\" *ngSwitchCase=\"'date'\" [display]=\"display\" width=\"120px\"  [(value)]=\"value\" [display]=\"display\" (valueChange)=\"dateChanged($event)\"\r\n    ></spa-date>\r\n\r\n    <spa-multi-select class=\"opt\" *ngSwitchCase=\"'multi-select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-multi-select>\r\n\r\n    <spa-multi-text class=\"opt\" *ngSwitchCase=\"'multi-text'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-multi-text>\r\n\r\n    <spa-select-lite class=\"opt\" *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-select-lite>\r\n\r\n    <spa-text class=\"opt\" *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [suffix]=\"suffix\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-text>\r\n\r\n  </ng-container>\r\n\r\n  <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"opacity: 1;margin: 0px;padding: 0px;\">\r\n    <mat-icon style=\"color: steelblue;font-size: 18px;\">info</mat-icon>\r\n  </button>\r\n\r\n</div>\r\n", styles: [".opt{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "component", type: MultiTextComponent, selector: "spa-multi-text", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: MultiSelectComponent, selector: "spa-multi-select", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-option', template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n  <mat-checkbox color=\"primary\" style=\"margin-right:0px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\" [disabled]=\"required\" >{{display}}</mat-checkbox>\r\n\r\n  <mat-form-field style=\"margin-right:1px;width: 0px;\" >\r\n  <input matInput />\r\n  </mat-form-field>\r\n\r\n  <ng-container *ngIf=\"show\" [ngSwitch]=\"type\" style=\"margin-left: 5px;\">\r\n\r\n    <spa-date class=\"opt\" *ngSwitchCase=\"'date'\" [display]=\"display\" width=\"120px\"  [(value)]=\"value\" [display]=\"display\" (valueChange)=\"dateChanged($event)\"\r\n    ></spa-date>\r\n\r\n    <spa-select-lite class=\"opt\" *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n    [copyContent]=\"copyContent\"\r\n    ></spa-select-lite>\r\n\r\n    <spa-text class=\"opt\" *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\"  [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n    [suffix]=\"suffix\" [copyContent]=\"copyContent\"\r\n    ></spa-text>\r\n\r\n  </ng-container>\r\n\r\n  <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"opacity: 1;margin: 0px;padding: 0px;\">\r\n    <mat-icon style=\"color: steelblue;font-size: 18px;\">info</mat-icon>\r\n  </button>\r\n\r\n</div>\r\n", styles: [".opt{margin-left:5px}\n"] }]
+            args: [{ selector: 'spa-option', template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n  <mat-checkbox color=\"primary\" style=\"margin-right:0px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\" [disabled]=\"required\" >{{display}}</mat-checkbox>\r\n\r\n  <mat-form-field style=\"margin-right:1px;width: 0px;\" >\r\n    <input matInput />\r\n  </mat-form-field>\r\n\r\n  <ng-container *ngIf=\"show\" [ngSwitch]=\"type\" style=\"margin-left: 5px;\">\r\n\r\n    <spa-date class=\"opt\" *ngSwitchCase=\"'date'\" [display]=\"display\" width=\"120px\"  [(value)]=\"value\" [display]=\"display\" (valueChange)=\"dateChanged($event)\"\r\n    ></spa-date>\r\n\r\n    <spa-multi-select class=\"opt\" *ngSwitchCase=\"'multi-select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-multi-select>\r\n\r\n    <spa-multi-text class=\"opt\" *ngSwitchCase=\"'multi-text'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-multi-text>\r\n\r\n    <spa-select-lite class=\"opt\" *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-select-lite>\r\n\r\n    <spa-text class=\"opt\" *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"\r\n      [suffix]=\"suffix\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n    ></spa-text>\r\n\r\n  </ng-container>\r\n\r\n  <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"opacity: 1;margin: 0px;padding: 0px;\">\r\n    <mat-icon style=\"color: steelblue;font-size: 18px;\">info</mat-icon>\r\n  </button>\r\n\r\n</div>\r\n", styles: [".opt{margin-left:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { options: [{
                 type: Input
             }], optionValue: [{
@@ -4259,6 +4437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], suffix: [{
                 type: Input
+            }], loadAction: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], enterPress: [{
@@ -4277,10 +4457,10 @@ class SearchComponent {
     }
 }
 SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "spa-search", inputs: { config: "config", smallScreen: "smallScreen", tableDataSource: "tableDataSource" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\r\n<div class=\"tin-between\">\r\n\r\n  <div class=\"col tin-row\">\r\n\r\n    <div *ngFor=\"let field of config.fields\">\r\n\r\n      <spa-option [type]=\"field.type\" [required]=\"field.required\"  [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"\r\n        [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\"\r\n      ></spa-option>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"col-2 tin-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"false\" [data]=\"tableDataSource\" ></spa-filter>\r\n    <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\r\n      <mat-icon>search</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".tin-row{column-gap:30px;row-gap:0px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show", "required", "infoMessage", "copyContent", "suffix"], outputs: ["valueChange", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "spa-search", inputs: { config: "config", smallScreen: "smallScreen", tableDataSource: "tableDataSource" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\r\n<div class=\"tin-between\">\r\n\r\n  <div class=\"col tin-row\">\r\n\r\n    <div *ngFor=\"let field of config.fields\">\r\n\r\n      <spa-option [type]=\"field.type\" [required]=\"field.required\"  [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"\r\n        [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [loadAction]=\"field.loadAction\"\r\n      ></spa-option>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"col-2 tin-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"false\" [data]=\"tableDataSource\" ></spa-filter>\r\n    <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\r\n      <mat-icon>search</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".tin-row{column-gap:30px;row-gap:0px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show", "required", "infoMessage", "copyContent", "suffix", "loadAction"], outputs: ["valueChange", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-search', template: "\r\n<div class=\"tin-between\">\r\n\r\n  <div class=\"col tin-row\">\r\n\r\n    <div *ngFor=\"let field of config.fields\">\r\n\r\n      <spa-option [type]=\"field.type\" [required]=\"field.required\"  [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"\r\n        [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\"\r\n      ></spa-option>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"col-2 tin-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"false\" [data]=\"tableDataSource\" ></spa-filter>\r\n    <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\r\n      <mat-icon>search</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".tin-row{column-gap:30px;row-gap:0px}\n"] }]
+            args: [{ selector: 'spa-search', template: "\r\n<div class=\"tin-between\">\r\n\r\n  <div class=\"col tin-row\">\r\n\r\n    <div *ngFor=\"let field of config.fields\">\r\n\r\n      <spa-option [type]=\"field.type\" [required]=\"field.required\"  [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"\r\n        [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [loadAction]=\"field.loadAction\"\r\n      ></spa-option>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"col-2 tin-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"false\" [data]=\"tableDataSource\" ></spa-filter>\r\n    <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\r\n      <mat-icon>search</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".tin-row{column-gap:30px;row-gap:0px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], searchClick: [{
@@ -4398,7 +4578,7 @@ class TilesComponent {
     }
 }
 TilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { config: "config", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n  <ng-container *ngFor=\"let tile of tiles\">\r\n    <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n      <!-- Number -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div style=\"text-align: center;font-size: 30px;\">\r\n          <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\r\n          <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data[tile.name] ?? 0}}</mat-label>&nbsp;\r\n          <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Info -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n          <mat-label  style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n          <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\"  style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n    </mat-card>\r\n  </ng-container>\r\n</div>\r\n", styles: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { config: "config", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n  <ng-container *ngFor=\"let tile of tiles\">\r\n    <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n      <!-- Number -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div style=\"text-align: center;font-size: 30px;\">\r\n          <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\r\n          <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data[tile.name] ?? 0}}</mat-label>&nbsp;\r\n          <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Info -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n          <mat-label  style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n          <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\"  style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n    </mat-card>\r\n  </ng-container>\r\n</div>\r\n", styles: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tiles', template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n  <ng-container *ngFor=\"let tile of tiles\">\r\n    <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n      <!-- Number -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div style=\"text-align: center;font-size: 30px;\">\r\n          <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\r\n          <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\">{{data[tile.name] ?? 0}}</mat-label>&nbsp;\r\n          <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Info -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n          <mat-label  style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n          <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\"  style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n    </mat-card>\r\n  </ng-container>\r\n</div>\r\n", styles: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\n"] }]
@@ -4516,7 +4696,7 @@ class TableHeaderComponent {
     }
 }
 TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [{ token: ButtonService }, { token: DialogService }, { token: MessageService }, { token: CsvService }], target: i0.ɵɵFactoryTarget.Component });
-TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { lastSearch: "lastSearch", config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton", data: "data", tileData: "tileData" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick", tileUnClick: "tileUnClick" }, ngImport: i0, template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { lastSearch: "lastSearch", config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton", data: "data", tileData: "tileData" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick", tileUnClick: "tileUnClick" }, ngImport: i0, template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-table-header', template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
@@ -4612,7 +4792,7 @@ class TableRowComponent {
     }
 }
 TableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableRowComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
-TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableRowComponent, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{textDisplayed(row, column)}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableRowComponent, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{textDisplayed(row, column)}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-table-row', template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{textDisplayed(row, column)}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -4655,7 +4835,7 @@ class TableActionComponent {
     }
 }
 TableActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableActionComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
-TableActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableActionComponent, selector: "app-table-action", inputs: { displayedButtons: "displayedButtons", config: "config", row: "row" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<ng-container *ngFor=\"let button of displayedButtons\">\r\n  <ng-container *ngIf=\"button.name != 'create' && testVisible(row, button.name)\">\r\n    <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color': getButtonColor(button, row)}\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon>{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon [ngStyle]=\"{'color': getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"button.name != 'create' && !testVisible(row, button.name) && !config.collapseButtons\">\r\n    <label style=\"margin-right: 35px;\"></label>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+TableActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableActionComponent, selector: "app-table-action", inputs: { displayedButtons: "displayedButtons", config: "config", row: "row" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<ng-container *ngFor=\"let button of displayedButtons\">\r\n  <ng-container *ngIf=\"button.name != 'create' && testVisible(row, button.name)\">\r\n    <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color': getButtonColor(button, row)}\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon>{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon [ngStyle]=\"{'color': getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"button.name != 'create' && !testVisible(row, button.name) && !config.collapseButtons\">\r\n    <label style=\"margin-right: 35px;\"></label>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-table-action', template: "<ng-container *ngFor=\"let button of displayedButtons\">\r\n  <ng-container *ngIf=\"button.name != 'create' && testVisible(row, button.name)\">\r\n    <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color': getButtonColor(button, row)}\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon>{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon [ngStyle]=\"{'color': getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"button.name != 'create' && !testVisible(row, button.name) && !config.collapseButtons\">\r\n    <label style=\"margin-right: 35px;\"></label>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -5005,12 +5185,12 @@ class TableLiteComponent {
         }
     }
 }
-TableLiteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableLiteComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
+TableLiteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableLiteComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
 TableLiteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableLiteComponent, selector: "spa-table-lite", inputs: { hideTitle: "hideTitle", data: "data", tileData: "tileData", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<!-- Search -->\n<spa-search\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n</spa-search>\n\n<!-- Header -->\n<app-table-header\n  [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\n  [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n  (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\n</app-table-header>\n\n\n<!-- Table -->\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n          <!-- Rows -->\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n          </app-table-row>\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n          <div class=\"action-buttons-container\">\n\n            <!-- Actions -->\n            <app-table-action\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n            </app-table-action>\n\n          </div>\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<div class=\"tin-center\">\n  <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableLiteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-table-lite', template: "\n<!-- Search -->\n<spa-search\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n</spa-search>\n\n<!-- Header -->\n<app-table-header\n  [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\n  [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n  (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\n</app-table-header>\n\n\n<!-- Table -->\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n          <!-- Rows -->\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n          </app-table-row>\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n          <div class=\"action-buttons-container\">\n\n            <!-- Actions -->\n            <app-table-action\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n            </app-table-action>\n\n          </div>\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<div class=\"tin-center\">\n  <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\n</div>\n\n\n" }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
             }], hideTitle: [{
@@ -5255,12 +5435,12 @@ class DetailsDialogInternal {
         });
     }
 }
-DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "spa-detailsDialog-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [peekConfig]=\"field.peekConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "component", type: SelectInternalComponent, selector: "spa-select-internal", inputs: ["peekConfig"] }, { kind: "component", type: TableLiteComponent, selector: "spa-table-lite", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "spa-detailsDialog-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "component", type: SelectInternalComponent, selector: "spa-select-internal", inputs: ["detailsConfig"] }, { kind: "component", type: TableLiteComponent, selector: "spa-table-lite", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [peekConfig]=\"field.peekConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
+            args: [{ selector: 'spa-detailsDialog-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: ButtonService }, { type: DialogService }]; }, propDecorators: { inputChange: [{
@@ -5278,11 +5458,20 @@ class SelectComponent extends SelectCommonComponent {
     onHoverChange(isHovered) {
         this.isHovered = isHovered;
     }
+    canCreate() {
+        if (!this.detailsConfig.buttons)
+            return false;
+        const createButton = this.detailsConfig.buttons.find(b => b.name === 'create');
+        return createButton && (!createButton.disabled || !createButton.disabled(this.value));
+    }
     onPeekClick(event, mode) {
         event.stopPropagation();
-        if (this.peekConfig && this.peekConfig[mode]) {
-            const dynamicData = mode === 'create' ? {} : { [this.peekConfig.detailsConfig.heroField]: this.value };
-            this.dialogService.openConfiguredDetailsDialog(mode, dynamicData, this.peekConfig.detailsConfig, DetailsDialogInternal).subscribe(result => {
+        if (this.detailsConfig) {
+            const dynamicData = mode === 'create' ? {} : { [this.detailsConfig.heroField]: this.value };
+            if (mode === 'view' && !this.detailsConfig.buttons.some(b => b.name === 'view')) {
+                this.detailsConfig.buttons.push({ name: 'view', dialog: true });
+            }
+            this.dialogService.openConfiguredDetailsDialog(mode, dynamicData, this.detailsConfig, DetailsDialogInternal).subscribe(result => {
                 console.log(result);
                 if (result.message === 'success') {
                     this.refresh(event);
@@ -5295,11 +5484,11 @@ class SelectComponent extends SelectCommonComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { peekConfig: "peekConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.create && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.view && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.create && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"peekConfig && peekConfig.view && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: DialogService }]; }, propDecorators: { peekConfig: [{
+            args: [{ selector: 'spa-select', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered && value\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: DialogService }]; }, propDecorators: { detailsConfig: [{
                 type: Input
             }] } });
 
@@ -5313,7 +5502,7 @@ class ActivityComponent {
     }
 }
 ActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ActivityComponent, selector: "spa-activity", inputs: { notes: "notes", title: "title" }, ngImport: i0, template: "\r\n      <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n        <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n      </div>\r\n\r\n      <ul *ngIf=\"notes && notes.length>0\" class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\r\n\r\n        <li *ngFor=\"let note of notes\" class=\"list-group-item  list-group-item-action flex-column align-items-start\">\r\n          <div class=\"d-flex w-100 justify-content-between\">\r\n            <div class=\"mb-0\">{{note.createdByName}}</div>\r\n            <!-- <small class=\"text-muted\">{{note.expr1}} ago</small> -->\r\n          </div>\r\n\r\n          <small>{{note.details}} (<em>{{note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>) </small>\r\n        </li>\r\n\r\n\r\n      </ul>\r\n\r\n      <div *ngIf=\"notes && notes.length==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n        No {{title.toLowerCase()}}\r\n\r\n      </div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+ActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ActivityComponent, selector: "spa-activity", inputs: { notes: "notes", title: "title" }, ngImport: i0, template: "\r\n      <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n        <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n      </div>\r\n\r\n      <ul *ngIf=\"notes && notes.length>0\" class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\r\n\r\n        <li *ngFor=\"let note of notes\" class=\"list-group-item  list-group-item-action flex-column align-items-start\">\r\n          <div class=\"d-flex w-100 justify-content-between\">\r\n            <div class=\"mb-0\">{{note.createdByName}}</div>\r\n            <!-- <small class=\"text-muted\">{{note.expr1}} ago</small> -->\r\n          </div>\r\n\r\n          <small>{{note.details}} (<em>{{note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>) </small>\r\n        </li>\r\n\r\n\r\n      </ul>\r\n\r\n      <div *ngIf=\"notes && notes.length==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n        No {{title.toLowerCase()}}\r\n\r\n      </div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-activity', template: "\r\n      <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n        <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n      </div>\r\n\r\n      <ul *ngIf=\"notes && notes.length>0\" class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\r\n\r\n        <li *ngFor=\"let note of notes\" class=\"list-group-item  list-group-item-action flex-column align-items-start\">\r\n          <div class=\"d-flex w-100 justify-content-between\">\r\n            <div class=\"mb-0\">{{note.createdByName}}</div>\r\n            <!-- <small class=\"text-muted\">{{note.expr1}} ago</small> -->\r\n          </div>\r\n\r\n          <small>{{note.details}} (<em>{{note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>) </small>\r\n        </li>\r\n\r\n\r\n      </ul>\r\n\r\n      <div *ngIf=\"notes && notes.length==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n        No {{title.toLowerCase()}}\r\n\r\n      </div>\r\n" }]
@@ -5428,12 +5617,12 @@ class NavMenuComponent {
         }
     }
 }
-NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: StorageService }, { token: NotificationsService }, { token: i8.SocialAuthService }, { token: i3$1.BreakpointObserver }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: StorageService }, { token: NotificationsService }, { token: i8.SocialAuthService }, { token: i3.BreakpointObserver }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: AuthService }, { type: StorageService }, { type: NotificationsService }, { type: i8.SocialAuthService }, { type: i3$1.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: AuthService }, { type: StorageService }, { type: NotificationsService }, { type: i8.SocialAuthService }, { type: i3.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
                 type: Input
             }], footer: [{
                 type: Input
@@ -5876,12 +6065,12 @@ class TableInternalComponent {
         }
     }
 }
-TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
+TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
 TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", tileData: "tileData", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n  [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\r\n  [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n  (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action\r\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search\r\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n  [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\r\n  [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n  (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action\r\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
             }], hideTitle: [{
@@ -6126,12 +6315,12 @@ class DetailsDialog {
         });
     }
 }
-DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "spa-detailsDialog", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [peekConfig]=\"field.peekConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "spa-detailsDialog", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [peekConfig]=\"field.peekConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
+            args: [{ selector: 'spa-detailsDialog', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: ButtonService }, { type: DialogService }]; }, propDecorators: { inputChange: [{
@@ -6476,12 +6665,12 @@ class TableComponent {
         }
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
 TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", tileData: "tileData", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n  [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\r\n  [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n  (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action\r\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-table', template: "\r\n<!-- Search -->\r\n<spa-search\r\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n  [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\" [hideTitle]=\"hideTitle\"\r\n  [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n  (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action\r\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
             }], hideTitle: [{
@@ -6771,7 +6960,7 @@ class TenantSettingsComponent {
     }
 }
 TenantSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
+TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
@@ -6996,7 +7185,7 @@ class quantityDialog {
     }
 }
 quantityDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: quantityDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-quantityDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: quantityDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{data.name | titlecase}} {{inv.name}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-grid\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [value]=\"inv.name\" [readonly]=\"true\"></spa-text>\r\n  <spa-text display=\"Description\" [value]=\"inv.description\" [readonly]=\"true\"></spa-text>\r\n  <spa-number display=\"Quantity\" [(value)]=\"quantity\" [hint]=\"'Quantity to ' + data.name\" ></spa-number>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+quantityDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: quantityDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{data.name | titlecase}} {{inv.name}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-grid\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [value]=\"inv.name\" [readonly]=\"true\"></spa-text>\r\n  <spa-text display=\"Description\" [value]=\"inv.description\" [readonly]=\"true\"></spa-text>\r\n  <spa-number display=\"Quantity\" [(value)]=\"quantity\" [hint]=\"'Quantity to ' + data.name\" ></spa-number>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: quantityDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{data.name | titlecase}} {{inv.name}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-grid\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [value]=\"inv.name\" [readonly]=\"true\"></spa-text>\r\n  <spa-text display=\"Description\" [value]=\"inv.description\" [readonly]=\"true\"></spa-text>\r\n  <spa-number display=\"Quantity\" [(value)]=\"quantity\" [hint]=\"'Quantity to ' + data.name\" ></spa-number>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -7056,7 +7245,7 @@ class ListDialogComponent {
     }
 }
 ListDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListDialogComponent, deps: [{ token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ListDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListDialogComponent, selector: "spa-list-dialog", ngImport: i0, template: "<div>\n\n  <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n  <div style=\" font-size: 14px;\">\n    <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n  </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
+ListDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListDialogComponent, selector: "spa-list-dialog", ngImport: i0, template: "<div>\n\n  <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n  <div style=\" font-size: 14px;\">\n    <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n  </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-list-dialog', template: "<div>\n\n  <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n  <div style=\" font-size: 14px;\">\n    <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n  </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -7145,7 +7334,7 @@ class InventoryComponent {
     }
 }
 InventoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InventoryComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-InventoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InventoryComponent, selector: "spa-inventory", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Inventory</label>\n\n  <div >\n    <button mat-mini-fab color=\"primary\"  style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
+InventoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InventoryComponent, selector: "spa-inventory", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Inventory</label>\n\n  <div >\n    <button mat-mini-fab color=\"primary\"  style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InventoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-inventory', template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Inventory</label>\n\n  <div >\n    <button mat-mini-fab color=\"primary\"  style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -7185,7 +7374,7 @@ class accountDialog {
     }
 }
 accountDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: accountDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-accountDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: accountDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-stroked-button color=\"primary\" [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+accountDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: accountDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-stroked-button color=\"primary\" [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: accountDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-stroked-button color=\"primary\" [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -7245,7 +7434,7 @@ class AccountsComponent {
     }
 }
 AccountsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, deps: [{ token: i1$2.Router }, { token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n    <div class=\"tin-row d-flex justify-content-between\">\r\n      <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n    <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n    <div *ngIf=\"account\" class=\"tin-row\">\r\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n    </div>\r\n\r\n    <mat-card-actions class=\"d-flex justify-content-between\" >\r\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n    </mat-card-actions>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
+AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n    <div class=\"tin-row d-flex justify-content-between\">\r\n      <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n    <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n    <div *ngIf=\"account\" class=\"tin-row\">\r\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n    </div>\r\n\r\n    <mat-card-actions class=\"d-flex justify-content-between\" >\r\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n    </mat-card-actions>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-accounts', template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n    <div class=\"tin-row d-flex justify-content-between\">\r\n      <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n    <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n    <div *ngIf=\"account\" class=\"tin-row\">\r\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n    </div>\r\n\r\n    <mat-card-actions class=\"d-flex justify-content-between\" >\r\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n    </mat-card-actions>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -7351,7 +7540,7 @@ class transactDialog {
     }
 }
 transactDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-transactDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: transactDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Narration\" [(value)]=\"txn.narration\"></spa-text>\r\n    <spa-select display=\"Category\" [(value)]=\"txn.categoryID\" [options]=\"categories\" optionDisplay=\"name\" optionValue=\"listItemID\" [defaultFirstValue]=\"true\"></spa-select>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+transactDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: transactDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Narration\" [(value)]=\"txn.narration\"></spa-text>\r\n    <spa-select display=\"Category\" [(value)]=\"txn.categoryID\" [options]=\"categories\" optionDisplay=\"name\" optionValue=\"listItemID\" [defaultFirstValue]=\"true\"></spa-select>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Narration\" [(value)]=\"txn.narration\"></spa-text>\r\n    <spa-select display=\"Category\" [(value)]=\"txn.categoryID\" [options]=\"categories\" optionDisplay=\"name\" optionValue=\"listItemID\" [defaultFirstValue]=\"true\"></spa-select>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -7440,12 +7629,12 @@ class TransactionsComponent {
     transfer() {
     }
 }
-TransactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
+TransactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-transactions', template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3.BreakpointObserver }, { type: i4.MatDialog }]; } });
 
 class TasksComponent {
     constructor(dataService, messageService, authService, dialog) {
@@ -7515,7 +7704,7 @@ class TasksComponent {
     }
 }
 TasksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"tasksTableConfig\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
+TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"tasksTableConfig\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tasks', template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"tasksTableConfig\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -7653,7 +7842,7 @@ class WelcomeComponent {
     }
 }
 WelcomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WelcomeComponent, deps: [{ token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-WelcomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WelcomeComponent, selector: "spa-welcome", ngImport: i0, template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
+WelcomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WelcomeComponent, selector: "spa-welcome", ngImport: i0, template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WelcomeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-welcome', template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"] }]
@@ -7689,8 +7878,8 @@ class NotificationsComponent {
                     },
                     { name: 'durationHours', type: 'number', required: true, defaultValue: 24, hint: 'How long to keep this notification active' },
                     { name: 'notifyAllUsers', type: 'checkbox', alias: 'Notify All Users', span: false },
-                    { name: 'recipients', type: 'multi-text', alias: 'Recipients', span: true, hiddenCondition: x => x.notifyAllUsers },
-                    { name: 'roleIDs', type: 'multi-select', strict: true, copyContent: true, alias: 'Roles', span: false, hiddenCondition: x => x.notifyAllUsers, },
+                    { name: 'recipients', type: 'multi-text', alias: 'Recipients', copyContent: true, clearContent: true, span: true, hiddenCondition: x => x.notifyAllUsers, loadAction: { url: 'user/list/x' } },
+                    { name: 'roleIDs', type: 'multi-select', strict: true, copyContent: true, alias: 'Roles', span: false, hiddenCondition: x => x.notifyAllUsers, loadAction: { url: 'role/list/x' } },
                     {
                         name: 'channels', type: 'select', alias: 'Notification Channels', span: false, defaultFirstValue: true, required: true,
                         options: [
@@ -7734,18 +7923,8 @@ class NotificationsComponent {
         };
     }
     ngOnInit() {
-        this.loadRoles();
         this.notificationsService.loadNotifications();
     }
-    loadRoles() {
-        this.dataService.CallApi({ url: 'role/list/x' }, "").subscribe((apiResponse) => {
-            this.createDialog.formConfig.fields.find(x => x.name == 'roleIDs').infoMessage = 'Available Roles:\n' + apiResponse.data.map(r => `${r.value} - ${r.name}`).join('\n');
-            this.createDialog.formConfig.fields.find(x => x.name == 'roleIDs').options = apiResponse.data;
-        });
-        this.dataService.CallApi({ url: 'user/list/x' }, "").subscribe((apiResponse) => {
-            this.createDialog.formConfig.fields.find(x => x.name == 'recipients').options = apiResponse.data;
-        });
-    }
     actionClicked(x) {
         this.notificationsService.loadNotifications();
     }
@@ -8248,7 +8427,7 @@ class LoginComponent {
     }
 }
 LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoginComponent, deps: [{ token: HttpService }, { token: StorageService }, { token: i1$2.Router }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: LogService }, { token: i1$2.ActivatedRoute }, { token: i8.SocialAuthService }, { token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoginComponent, selector: "spa-login", ngImport: i0, template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title style=\"font-size: 40px;margin-bottom: 10px; margin-top: 20px; font-weight: 300\">{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions style=\"margin-bottom: 10px;\">\r\n\r\n          <div class=\"button mt-0\" *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n            <button id=\"btnLogin\" mat-flat-button [disabled]=\"isProcessing\" style=\"width: 350px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"(appConfig.localAuth || appConfig.ADAuth) && appConfig.selfService\" >\r\n            <button  id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 350px;\" (click)=\"signup()\">Sign up with Email</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"appConfig.googleAuth\">\r\n            <asl-google-signin-button type='standard' width=\"350px\" size='medium' logo_alignment=\"center\" style=\"text-align: center;\"></asl-google-signin-button>\r\n          </div>\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}.button{display:flex;flex-direction:row;justify-content:center;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i16.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i16.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i16.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "directive", type: i8.GoogleSigninButtonDirective, selector: "asl-google-signin-button", inputs: ["type", "size", "text", "shape", "theme", "logo_alignment", "width", "locale"] }] });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoginComponent, selector: "spa-login", ngImport: i0, template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title style=\"font-size: 40px;margin-bottom: 10px; margin-top: 20px; font-weight: 300\">{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions style=\"margin-bottom: 10px;\">\r\n\r\n          <div class=\"button mt-0\" *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n            <button id=\"btnLogin\" mat-flat-button [disabled]=\"isProcessing\" style=\"width: 350px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"(appConfig.localAuth || appConfig.ADAuth) && appConfig.selfService\" >\r\n            <button  id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 350px;\" (click)=\"signup()\">Sign up with Email</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"appConfig.googleAuth\">\r\n            <asl-google-signin-button type='standard' width=\"350px\" size='medium' logo_alignment=\"center\" style=\"text-align: center;\"></asl-google-signin-button>\r\n          </div>\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}.button{display:flex;flex-direction:row;justify-content:center;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i16.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i16.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i16.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "directive", type: i8.GoogleSigninButtonDirective, selector: "asl-google-signin-button", inputs: ["type", "size", "text", "shape", "theme", "logo_alignment", "width", "locale"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-login", template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title style=\"font-size: 40px;margin-bottom: 10px; margin-top: 20px; font-weight: 300\">{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions style=\"margin-bottom: 10px;\">\r\n\r\n          <div class=\"button mt-0\" *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n            <button id=\"btnLogin\" mat-flat-button [disabled]=\"isProcessing\" style=\"width: 350px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"(appConfig.localAuth || appConfig.ADAuth) && appConfig.selfService\" >\r\n            <button  id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 350px;\" (click)=\"signup()\">Sign up with Email</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"appConfig.googleAuth\">\r\n            <asl-google-signin-button type='standard' width=\"350px\" size='medium' logo_alignment=\"center\" style=\"text-align: center;\"></asl-google-signin-button>\r\n          </div>\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}.button{display:flex;flex-direction:row;justify-content:center;margin-top:10px}\n"] }]
@@ -8289,7 +8468,7 @@ class SignupComponent {
     }
 }
 SignupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SignupComponent, deps: [{ token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-SignupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SignupComponent, selector: "spa-signup", ngImport: i0, template: "\r\n<h4 style=\"padding-top: 30px;\">Sign up</h4>\r\n\r\n<hr/>\r\n\r\n\r\n<div class=\"container tin-grid\"  style=\"font-size:14px;\">\r\n\r\n    <spa-text display=\"FirstName\" [(value)]=\"account.profile.firstName\" ></spa-text>\r\n\r\n    <spa-text display=\"LastName\" [(value)]=\"account.profile.lastName\" ></spa-text>\r\n\r\n    <spa-text display=\"Username\" [(value)]=\"account.profile.userName\"></spa-text>\r\n\r\n    &nbsp;\r\n\r\n    <spa-text display=\"Password\" [(value)]=\"account.profile.password\" format=\"password\" ></spa-text>\r\n\r\n    <spa-text display=\"Confirm Password\" [(value)]=\"confirmPassword\" format=\"password\" ></spa-text>\r\n\r\n    <div class=\"span-col-center\">\r\n      <button  mat-raised-button color=\"primary\" (click)=\"create()\"  cdkFocusInitial>Submit</button>\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }] });
+SignupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SignupComponent, selector: "spa-signup", ngImport: i0, template: "\r\n<h4 style=\"padding-top: 30px;\">Sign up</h4>\r\n\r\n<hr/>\r\n\r\n\r\n<div class=\"container tin-grid\"  style=\"font-size:14px;\">\r\n\r\n    <spa-text display=\"FirstName\" [(value)]=\"account.profile.firstName\" ></spa-text>\r\n\r\n    <spa-text display=\"LastName\" [(value)]=\"account.profile.lastName\" ></spa-text>\r\n\r\n    <spa-text display=\"Username\" [(value)]=\"account.profile.userName\"></spa-text>\r\n\r\n    &nbsp;\r\n\r\n    <spa-text display=\"Password\" [(value)]=\"account.profile.password\" format=\"password\" ></spa-text>\r\n\r\n    <spa-text display=\"Confirm Password\" [(value)]=\"confirmPassword\" format=\"password\" ></spa-text>\r\n\r\n    <div class=\"span-col-center\">\r\n      <button  mat-raised-button color=\"primary\" (click)=\"create()\"  cdkFocusInitial>Submit</button>\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SignupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-signup', template: "\r\n<h4 style=\"padding-top: 30px;\">Sign up</h4>\r\n\r\n<hr/>\r\n\r\n\r\n<div class=\"container tin-grid\"  style=\"font-size:14px;\">\r\n\r\n    <spa-text display=\"FirstName\" [(value)]=\"account.profile.firstName\" ></spa-text>\r\n\r\n    <spa-text display=\"LastName\" [(value)]=\"account.profile.lastName\" ></spa-text>\r\n\r\n    <spa-text display=\"Username\" [(value)]=\"account.profile.userName\"></spa-text>\r\n\r\n    &nbsp;\r\n\r\n    <spa-text display=\"Password\" [(value)]=\"account.profile.password\" format=\"password\" ></spa-text>\r\n\r\n    <spa-text display=\"Confirm Password\" [(value)]=\"confirmPassword\" format=\"password\" ></spa-text>\r\n\r\n    <div class=\"span-col-center\">\r\n      <button  mat-raised-button color=\"primary\" (click)=\"create()\"  cdkFocusInitial>Submit</button>\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n" }]
@@ -8326,7 +8505,7 @@ class RecoverAccountComponent {
     }
 }
 RecoverAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RecoverAccountComponent, deps: [{ token: i2.Location }, { token: DataServiceLib }, { token: AuthService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-RecoverAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RecoverAccountComponent, selector: "spa-recover-account", ngImport: i0, template: "\r\n<div class=\"container\" style=\"padding-top: 30px;\">\r\n<h4>Recover Account</h4>\r\n\r\n<hr />\r\n\r\nSubmit your Username and we will send you details to your registered email address.\r\n\r\n<div style=\"font-size: 14px;\">\r\n  <spa-text class=\"mt-3\" display=\"Username\" [(value)]=\"userName\"></spa-text>\r\n\r\n  <div class=\"tin-center\">\r\n    <button class=\"mt-3 w-50\" mat-raised-button color=\"primary\" (click)=\"recover()\" cdkFocusInitial>Submit</button>\r\n  </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }] });
+RecoverAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RecoverAccountComponent, selector: "spa-recover-account", ngImport: i0, template: "\r\n<div class=\"container\" style=\"padding-top: 30px;\">\r\n<h4>Recover Account</h4>\r\n\r\n<hr />\r\n\r\nSubmit your Username and we will send you details to your registered email address.\r\n\r\n<div style=\"font-size: 14px;\">\r\n  <spa-text class=\"mt-3\" display=\"Username\" [(value)]=\"userName\"></spa-text>\r\n\r\n  <div class=\"tin-center\">\r\n    <button class=\"mt-3 w-50\" mat-raised-button color=\"primary\" (click)=\"recover()\" cdkFocusInitial>Submit</button>\r\n  </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RecoverAccountComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-recover-account', template: "\r\n<div class=\"container\" style=\"padding-top: 30px;\">\r\n<h4>Recover Account</h4>\r\n\r\n<hr />\r\n\r\nSubmit your Username and we will send you details to your registered email address.\r\n\r\n<div style=\"font-size: 14px;\">\r\n  <spa-text class=\"mt-3\" display=\"Username\" [(value)]=\"userName\"></spa-text>\r\n\r\n  <div class=\"tin-center\">\r\n    <button class=\"mt-3 w-50\" mat-raised-button color=\"primary\" (click)=\"recover()\" cdkFocusInitial>Submit</button>\r\n  </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n" }]
@@ -8451,7 +8630,7 @@ class ChangePasswordComponent {
     }
 }
 ChangePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: i1$2.Router }, { token: i2.Location }, { token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChangePasswordComponent, selector: "spa-change-password", ngImport: i0, template: "<h4>Change Password</h4>\r\n<hr>\r\n\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"fill\">\r\n\r\n    <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\"  [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\"  type=\"password\"></spa-text>\r\n    <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" type=\"password\"></spa-text>\r\n    <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\"  type=\"password\"></spa-text>\r\n    <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n\r\n  </div>\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n</div>\r\n\r\n\r\n<!-- <div class=\"container\">\r\n\r\n  <div class=\"d-flex justify-content-center row align-items-center\" >\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"tin-input \" style=\"font-size:14px;\">\r\n\r\n        <div class=\"col\" *ngIf=\"changePassword.userName!=''\">\r\n          <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\" width=\"300px\" [readonly]=\"true\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"!myRole[dataService.capUsers.name]\">\r\n          <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n           <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col mt-3\">\r\n          <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n</div> -->\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }] });
+ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChangePasswordComponent, selector: "spa-change-password", ngImport: i0, template: "<h4>Change Password</h4>\r\n<hr>\r\n\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"fill\">\r\n\r\n    <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\"  [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\"  type=\"password\"></spa-text>\r\n    <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" type=\"password\"></spa-text>\r\n    <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\"  type=\"password\"></spa-text>\r\n    <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n\r\n  </div>\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n</div>\r\n\r\n\r\n<!-- <div class=\"container\">\r\n\r\n  <div class=\"d-flex justify-content-center row align-items-center\" >\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"tin-input \" style=\"font-size:14px;\">\r\n\r\n        <div class=\"col\" *ngIf=\"changePassword.userName!=''\">\r\n          <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\" width=\"300px\" [readonly]=\"true\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"!myRole[dataService.capUsers.name]\">\r\n          <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n           <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col mt-3\">\r\n          <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n</div> -->\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-change-password', template: "<h4>Change Password</h4>\r\n<hr>\r\n\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"fill\">\r\n\r\n    <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\"  [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\"  type=\"password\"></spa-text>\r\n    <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" type=\"password\"></spa-text>\r\n    <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\"  type=\"password\"></spa-text>\r\n    <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n\r\n  </div>\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n</div>\r\n\r\n\r\n<!-- <div class=\"container\">\r\n\r\n  <div class=\"d-flex justify-content-center row align-items-center\" >\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"tin-input \" style=\"font-size:14px;\">\r\n\r\n        <div class=\"col\" *ngIf=\"changePassword.userName!=''\">\r\n          <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\" width=\"300px\" [readonly]=\"true\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"!myRole[dataService.capUsers.name]\">\r\n          <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n           <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col mt-3\">\r\n          <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n</div> -->\r\n\r\n" }]
@@ -8528,7 +8707,7 @@ class ProfileComponent {
     }
 }
 ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: HttpService }, { token: i1$2.Router }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProfileComponent, selector: "spa-profile", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }] });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProfileComponent, selector: "spa-profile", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-profile', template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"] }]
@@ -8621,7 +8800,7 @@ class SettingsComponent {
     }
 }
 SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SettingsComponent, selector: "spa-settings", ngImport: i0, template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-row align-items-center mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:10px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SettingsComponent, selector: "spa-settings", ngImport: i0, template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-row align-items-center mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:10px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-settings', template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-row align-items-center mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:10px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -8824,7 +9003,7 @@ class addRoleDialog {
     ;
 }
 addRoleDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n\r\n          <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capItem of capItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n              <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n                <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n                </div>\r\n\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n\r\n          <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capItem of capItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n              <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n                <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n                </div>\r\n\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-addRole', template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n\r\n          <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capItem of capItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n              <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n                <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n                </div>\r\n\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -8902,7 +9081,7 @@ class RolesComponent {
     }
 }
 RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$2.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-roles", template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -8996,7 +9175,7 @@ class CreateAccountComponent {
     }
 }
 CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateAccountComponent, deps: [{ token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateAccountComponent, selector: "spa-create-account", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<h4>Create User</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px; max-width: 70%;\">\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\" (valueChange)=\"check()\" ></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"register.email\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"register.roleID\"></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }] });
+CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateAccountComponent, selector: "spa-create-account", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<h4>Create User</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px; max-width: 70%;\">\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\" (valueChange)=\"check()\" ></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"register.email\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"register.roleID\"></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateAccountComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-create-account', template: "<h4>Create User</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px; max-width: 70%;\">\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\" (valueChange)=\"check()\" ></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"register.email\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"register.roleID\"></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n" }]