tin-spa 2.1.2 → 2.1.3

package/fesm2015/tin-spa.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Inject, NgModule, EventEmitter, Input, Output, forwardRef, Directive, HostListener, ViewChild, Pipe } from '@angular/core';
+import { Injectable, Component, Inject, NgModule, EventEmitter, Input, Output, forwardRef, Directive, HostListener, Pipe, ViewChild } from '@angular/core';
 import { __awaiter } from 'tslib';
-import * as i4 from '@angular/material/dialog';
+import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, LocationStrategy, HashLocationStrategy, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { of, BehaviorSubject, Observable } from 'rxjs';
+import { of, BehaviorSubject, Observable, Subject } from 'rxjs';
 import { mergeMap, startWith, map } from 'rxjs/operators';
 import * as i1$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -30,9 +30,9 @@ import * as i7 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i5$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$1 from '@angular/material/icon';
+import * as i3$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4$1 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import * as i4$3 from '@angular/material/menu';
@@ -41,21 +41,21 @@ import * as i7$1 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 i3$2 from '@angular/material/select';
+import * as i3$3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSortModule } from '@angular/material/sort';
 import * as i2$2 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i6$1 from '@angular/material/table';
+import * as i6 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i6 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import * as i3$3 from '@angular/cdk/layout';
+import * as i3$4 from '@angular/cdk/layout';
 
 class TinSpaService {
     constructor() { }
@@ -123,13 +123,13 @@ class messageDialog {
         this.dialogRef.close(resp);
     }
 }
-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: "\r\n  <h2 mat-dialog-title>\r\n\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  </h2>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n    <!-- Confirm -->\r\n    <p *ngIf=\"messageType=='confirm'\">{{_messageDetails}}</p>\r\n\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\">\r\n\r\n      <h3>{{_messageSubject}}</h3>\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" (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: i1.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.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: i3.MatLabel, selector: "mat-label" }] });
+messageDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: messageDialog, deps: [{ token: i3.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: "\r\n  <h2 mat-dialog-title>\r\n\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  </h2>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n    <!-- Confirm -->\r\n    <p *ngIf=\"messageType=='confirm'\">{{_messageDetails}}</p>\r\n\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\">\r\n\r\n      <h3>{{_messageSubject}}</h3>\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" (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: i1.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: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3$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: "\r\n  <h2 mat-dialog-title>\r\n\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  </h2>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n    <!-- Confirm -->\r\n    <p *ngIf=\"messageType=='confirm'\">{{_messageDetails}}</p>\r\n\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\">\r\n\r\n      <h3>{{_messageSubject}}</h3>\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" (click)=\"response('ok')\" cdkFocusInitial>OK</button>\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n" }]
         }], ctorParameters: function () {
-        return [{ type: i4.MatDialogRef }, { type: undefined, decorators: [{
+        return [{ type: i3.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];
@@ -172,14 +172,14 @@ class MessageService {
         }));
     }
 }
-MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, deps: [{ token: i1$1.MatSnackBar }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, deps: [{ token: i1$1.MatSnackBar }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
 MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatSnackBar }, { type: i4.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.MatSnackBar }, { type: i3.MatDialog }]; } });
 
 // import * as FileSaver from 'file-saver';
 // import * as XLSX from 'xlsx';
@@ -223,9 +223,12 @@ class Core {
         });
     }
     static validateObject(fields, data) {
+        var _a;
         console.log("Validations");
         for (let field of fields) {
-            let name = this.camelToWords(field.name);
+            if (field.type == 'file' || field.type == 'blank' || field.type == 'section')
+                continue;
+            let name = (_a = field.alias) !== null && _a !== void 0 ? _a : this.camelToWords(field.name);
             let d = data[field.name];
             console.log(name);
             if (field.required) {
@@ -424,11 +427,13 @@ Constants.AUTH_TOKEN_EXPIRE = 'e';
 
 class Action {
 }
+class SearchConfig {
+}
 class FormConfig {
 }
 class TableConfig {
 }
-class Tile {
+class TileConfig {
 }
 class Step {
 }
@@ -963,7 +968,12 @@ class DataServiceLib {
             return this.httpService.Get(action.url);
         }
         else if (action.method == 'post') {
-            return this.httpService.Post(action.url, data);
+            if (action.isFormData) {
+                return this.httpService.Post_FormData(action.url, data);
+            }
+            else {
+                return this.httpService.Post(action.url, data);
+            }
         }
         else {
             return this.httpService.Post(action.url, data);
@@ -1203,10 +1213,10 @@ class TextComponent {
     }
 }
 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", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, 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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\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</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\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</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 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (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\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\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\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.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.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+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", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, 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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\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</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\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</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=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (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\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\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\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\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</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\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</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 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (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\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\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\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
+            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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\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</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\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</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=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (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\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\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\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -1344,7 +1354,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" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\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</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.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: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.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" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\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</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.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}\">\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</mat-form-field>\r\n" }]
@@ -1386,7 +1396,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", min: "min", max: "max" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field >\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</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.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"] }] });
+DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DatetimeComponent, selector: "spa-datetime", inputs: { display: "display", value: "value", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field >\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</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-datetime', template: "<mat-form-field >\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</mat-form-field>\r\n" }]
@@ -1459,7 +1469,7 @@ class SelectComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { width: "width", readonly: "readonly", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\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  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { width: "width", readonly: "readonly", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\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  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-select', template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\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  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n" }]
@@ -1501,7 +1511,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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i1.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i1.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" }]
@@ -1513,6 +1523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class FilterComponent {
     constructor() {
+        this.showButton = true;
         this.data = new MatTableDataSource();
         this.refreshClick = new EventEmitter();
         this._filterText = "";
@@ -1523,7 +1534,6 @@ class FilterComponent {
         // console.log("OnChange")
         this.applyFilter(this._filterText);
     }
-    ;
     keyUp(event) {
         let text = event.target['value'];
         this.applyFilter(text);
@@ -1538,11 +1548,13 @@ 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: { data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field >\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</mat-form-field>\r\n\r\n<button 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", 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.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: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field >\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</mat-form-field>\r\n\r\n<button *ngIf=\"showButton\" 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", 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: i4$1.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 >\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</mat-form-field>\r\n\r\n<button 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", 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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+            args: [{ selector: 'spa-filter', template: "<mat-form-field >\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</mat-form-field>\r\n\r\n<button *ngIf=\"showButton\" 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", 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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showButton: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], refreshClick: [{
                 type: Output
@@ -1796,7 +1808,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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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</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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.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: 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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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</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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.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: 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\"  [ngStyle]=\"{'width':width}\" 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</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"] }]
@@ -1833,6 +1845,7 @@ class OptionComponent {
         this.optionValue = "";
         this.optionDisplay = "";
         this.readonly = false;
+        this.type = "text";
         this.value = "";
         this.display = "";
         this.show = false;
@@ -1845,8 +1858,12 @@ class OptionComponent {
     changed() {
         this.valueChange.emit(this.value);
     }
+    dateChanged(x) {
+        this.value = x;
+        this.changed();
+    }
     enterPressed() {
-        this.valueChange.emit();
+        this.enterPress.emit();
     }
     resetValue() {
         this.value = this.OGValue;
@@ -1854,10 +1871,10 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, deps: [], 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", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n\r\n<mat-form-field style=\"margin-right:10px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right:30px\" *ngIf=\"show && !options\">\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput [(ngModel)]=\"value\" width=\"100\" (change)=\"changed()\" (keyup.enter)=\"changed()\" [placeholder]=\"'Enter ' + display\" autocomplete=\"off\" />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right: 20px;\" floatLabel=\"always\" width=\"100\" *ngIf=\"show && options\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [placeholder]=\"'Select ' + display\" [disabled]=\"readonly\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<!-- <spa-text *ngIf=\"show\" style=\"margin-right:30px\" [display]=\"'Enter ' + display\" (enterPress)=\"enterPressed()\" (valueChange)=\"changed($event.target.value)\" width=\"100\" [required]=\"false\" [(value)]=\"value\" ></spa-text> -->\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.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: i3$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+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" }, 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:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-option', template: "\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n\r\n<mat-form-field style=\"margin-right:10px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right:30px\" *ngIf=\"show && !options\">\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput [(ngModel)]=\"value\" width=\"100\" (change)=\"changed()\" (keyup.enter)=\"changed()\" [placeholder]=\"'Enter ' + display\" autocomplete=\"off\" />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right: 20px;\" floatLabel=\"always\" width=\"100\" *ngIf=\"show && options\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [placeholder]=\"'Select ' + display\" [disabled]=\"readonly\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<!-- <spa-text *ngIf=\"show\" style=\"margin-right:30px\" [display]=\"'Enter ' + display\" (enterPress)=\"enterPressed()\" (valueChange)=\"changed($event.target.value)\" width=\"100\" [required]=\"false\" [(value)]=\"value\" ></spa-text> -->\r\n\r\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:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input
             }], optionValue: [{
@@ -1866,6 +1883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], value: [{
                 type: Input
             }], display: [{
@@ -1878,35 +1897,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+class CamelToWordsPipe {
+    transform(value) {
+        return Core.camelToWords(value);
+    }
+}
+CamelToWordsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CamelToWordsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, name: "camelToWords" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'camelToWords'
+                }]
+        }] });
+
 class TilesComponent {
-    constructor() {
-        this.clickable = false;
+    constructor(dataService, messageService) {
+        this.dataService = dataService;
+        this.messageService = messageService;
         this.tileClick = new EventEmitter();
-        this.selected = "";
+        this.selectedTile = "";
     }
     ngOnInit() {
+        var _a, _b;
+        if (this.config) {
+            this.tiles = this.config.tiles;
+            if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.loadAction) && this.config.loadInit) {
+                this.loadData((_b = this.config) === null || _b === void 0 ? void 0 : _b.loadAction, "");
+            }
+        }
+        this.reload.subscribe(v => {
+            var _a, _b;
+            if (v == true) {
+                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loadAction) {
+                    this.loadData((_b = this.config) === null || _b === void 0 ? void 0 : _b.loadAction, "");
+                }
+            }
+        });
+    }
+    ngOnChanges() {
     }
     clicked(v) {
-        if (!this.clickable)
+        if (!this.config.clickable)
             return;
-        if (this.selected == v.tileName) {
+        if (this.selectedTile == v.name) {
             this.tileClick.emit("");
-            this.selected = "";
+            this.selectedTile = "";
         }
         else {
-            this.tileClick.emit(v.tileName);
-            this.selected = v.tileName;
+            this.tileClick.emit(v.name);
+            this.selectedTile = v.name;
+        }
+    }
+    pop(x) {
+        if (x) {
+            this.messageService.info(x, "");
+        }
+    }
+    loadData(action, data) {
+        console.log("loading");
+        if (action) {
+            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
+                this.data = apiResponse.data;
+                if (!apiResponse.success) {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
         }
     }
 }
-TilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { tiles: "tiles", clickable: "clickable" }, outputs: { tileClick: "tileClick" }, ngImport: i0, template: "      <div class=\"row align-items-center\">\r\n\r\n        <!-- <div class=\"col\" *ngFor=\"let row of tiles\" >\r\n\r\n          <mat-card *ngIf=\"row.visible\">\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label style=\"font-size:30px;font-weight:bold\" [ngStyle]=\"{'color':row.tileColor}\">{{row.tileValue}}</mat-label>\r\n\r\n          </div>\r\n\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label [ngStyle]=\"{'color':row.selected == true ? 'darkorange' : 'black' }\" style=\"font-size:12px;padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n            <mat-icon style=\"font-size: 17px; color:steelblue;\">info</mat-icon>\r\n\r\n          </div>\r\n          </mat-card>\r\n\r\n        </div> -->\r\n\r\n        <ng-container *ngFor=\"let row of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 10px;margin-right: 10px\" *ngIf=\"row.visible\" (click)=\"clicked(row)\">\r\n\r\n            <div class=\"row d-flex justify-content-center\">\r\n\r\n              <mat-label style=\"font-weight:bold\" [ngStyle]=\"{'color':row.tileColor,'font-size':row.tileName == selected ? '35px' : '30px' }\">{{row.tileValue}}</mat-label>\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center row align-items-center\">\r\n\r\n              <mat-label [ngStyle]=\"{'font-size':row.tileName == selected ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n              <mat-icon [matTooltip]=\"row.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':row.tileName == selected ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+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", data: "data", reload: "reload" }, outputs: { tileClick: "tileClick" }, usesOnChanges: true, ngImport: i0, template: "      <div class=\"tin-row align-items-center tiles\">\r\n\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"card tin-col\" *ngIf=\"!tile.hidden\" (click)=\"clicked(tile)\">\r\n\r\n            <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '45px' : '40px' }\">{{data ? data[tile.name] : 0}}</mat-label>\r\n\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n\r\n\r\n              <button mat-icon-button (click)=\"pop(tile.info)\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n              <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '24px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n\r\n          </mat-card>\r\n\r\n        </ng-container>\r\n\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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4$1.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=\"row align-items-center\">\r\n\r\n        <!-- <div class=\"col\" *ngFor=\"let row of tiles\" >\r\n\r\n          <mat-card *ngIf=\"row.visible\">\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label style=\"font-size:30px;font-weight:bold\" [ngStyle]=\"{'color':row.tileColor}\">{{row.tileValue}}</mat-label>\r\n\r\n          </div>\r\n\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label [ngStyle]=\"{'color':row.selected == true ? 'darkorange' : 'black' }\" style=\"font-size:12px;padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n            <mat-icon style=\"font-size: 17px; color:steelblue;\">info</mat-icon>\r\n\r\n          </div>\r\n          </mat-card>\r\n\r\n        </div> -->\r\n\r\n        <ng-container *ngFor=\"let row of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 10px;margin-right: 10px\" *ngIf=\"row.visible\" (click)=\"clicked(row)\">\r\n\r\n            <div class=\"row d-flex justify-content-center\">\r\n\r\n              <mat-label style=\"font-weight:bold\" [ngStyle]=\"{'color':row.tileColor,'font-size':row.tileName == selected ? '35px' : '30px' }\">{{row.tileValue}}</mat-label>\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center row align-items-center\">\r\n\r\n              <mat-label [ngStyle]=\"{'font-size':row.tileName == selected ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n              <mat-icon [matTooltip]=\"row.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':row.tileName == selected ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tiles: [{
+            args: [{ selector: 'spa-tiles', template: "      <div class=\"tin-row align-items-center tiles\">\r\n\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"card tin-col\" *ngIf=\"!tile.hidden\" (click)=\"clicked(tile)\">\r\n\r\n            <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '45px' : '40px' }\">{{data ? data[tile.name] : 0}}</mat-label>\r\n\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n\r\n\r\n              <button mat-icon-button (click)=\"pop(tile.info)\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n              <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '24px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n\r\n          </mat-card>\r\n\r\n        </ng-container>\r\n\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}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }]; }, propDecorators: { config: [{
                 type: Input
-            }], clickable: [{
+            }], data: [{
+                type: Input
+            }], reload: [{
                 type: Input
             }], tileClick: [{
                 type: Output
@@ -2080,10 +2149,10 @@ 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      <h4>or</h4>\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:200px;padding:2rem;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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.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      <h4>or</h4>\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:200px;padding:2rem;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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { message: [{
                 type: Input
             }], files: [{
@@ -2130,7 +2199,7 @@ class ChipsComponent {
     }
 }
 ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.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: i4$2.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"] }] });
+ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.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: i4$2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-chips', template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n" }]
@@ -2214,7 +2283,7 @@ class NavMenuComponent {
     }
 }
 NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$3.Router }, { token: AuthService }], 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" }, ngImport: i0, template: "<header *ngIf=\"loggedin\">\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    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n      <!--<a class=\"navbar-brand\" [routerLink]=\"['/']\">Orbit</a>-->\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n\r\n      <div style=\"font-size: 20px;\">\r\n        {{appConfig.appName}}\r\n      </div>\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=\"navitems navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"redirectTo('login')\" class=\"d-none d-sm-block\" style=\"margin-right:2em\"> <mat-icon>logout</mat-icon> </button>\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon>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)=\"redirectTo('login')\">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", 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;font-weight:600}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<header *ngIf=\"loggedin\">\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    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n      <!--<a class=\"navbar-brand\" [routerLink]=\"['/']\">Orbit</a>-->\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n\r\n      <div style=\"font-size: 20px;\">\r\n        {{appConfig.appName}}\r\n      </div>\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=\"navitems navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"redirectTo('login')\" class=\"d-none d-sm-block\" style=\"margin-right:2em\"> <mat-icon>logout</mat-icon> </button>\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon>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)=\"redirectTo('login')\">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", 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;font-weight:600}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 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\">\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    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n      <!--<a class=\"navbar-brand\" [routerLink]=\"['/']\">Orbit</a>-->\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n\r\n      <div style=\"font-size: 20px;\">\r\n        {{appConfig.appName}}\r\n      </div>\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=\"navitems navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"redirectTo('login')\" class=\"d-none d-sm-block\" style=\"margin-right:2em\"> <mat-icon>logout</mat-icon> </button>\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon>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)=\"redirectTo('login')\">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", 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;font-weight:600}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}\n"] }]
@@ -2376,7 +2445,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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.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"] }] });
+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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: NumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-number', template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n" }]
@@ -2408,38 +2477,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-class CamelToWordsPipe {
-    transform(value) {
-        if (!value)
-            return value;
-        if (typeof value !== 'string')
-            return value;
-        if (value.length == 0)
-            return value;
-        let v = value.charAt(0).toUpperCase() + value.substring(1);
-        return v.replace(/([A-Z]+)*([A-Z][a-z])/g, "$1 $2");
+//-------------------------------------------EDIT
+// import { HttpService } from 'tin-core';
+class viewerDialog {
+    constructor(httpService, data) {
+        this.httpService = httpService;
+        this.data = data;
+        this.isProcessing = false;
+        this.fileNames = new Array();
+        this.currIndex = 0;
+        this.currentFileUrl = "";
+        this.imageDoc = false;
+    }
+    ngOnInit() {
+        this.fileNames = this.data.fileNames;
+        this.path = this.data.path;
+        this.fileName = this.data.fileName;
+        this.currIndex = this.data.fileNames.indexOf(this.fileName);
+        this.setURL();
+    }
+    previous() {
+        if (this.fileNames.length == 0) {
+            return;
+        }
+        if (this.currIndex - 1 >= 0) {
+            this.currIndex = this.currIndex - 1;
+        }
+        else if (this.currIndex == 0) {
+            this.currIndex = this.fileNames.length - 1;
+        }
+        this.setURL();
+    }
+    next() {
+        if (this.fileNames.length == 0) {
+            return;
+        }
+        if (this.currIndex + 1 < this.fileNames.length) {
+            this.currIndex = this.currIndex + 1;
+        }
+        else if (this.currIndex + 1 > this.fileNames.length - 1) {
+            this.currIndex = 0;
+        }
+        this.setURL();
+    }
+    setURL() {
+        // this.currentFileUrl = this.httpService.apiUrl.replace("/api/", "/files/") + '' + "/" + this.files[this.currIndex];
+        this.currentFileUrl = `${this.httpService.apiUrl.replace("/api/", "/")}${this.path.replace("//", "/")}/${this.fileNames[this.currIndex]}`;
+        if (this.currentFileUrl.toLocaleLowerCase().endsWith(".pdf") || this.currentFileUrl.toLocaleLowerCase().endsWith(".jpg") || this.currentFileUrl.toLocaleLowerCase().endsWith(".jpeg")) {
+            this.imageDoc = true;
+        }
+        else {
+            this.imageDoc = false;
+            window.open(this.currentFileUrl, '_blank');
+        }
+    }
+    change(fileName) {
+        this.currIndex = this.fileNames.indexOf(fileName);
+        this.setURL();
     }
 }
-CamelToWordsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CamelToWordsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, name: "camelToWords" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'camelToWords'
-                }]
-        }] });
+viewerDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: viewerDialog, deps: [{ token: HttpService }, { 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: "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: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+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"] }]
+        }], ctorParameters: function () {
+        return [{ type: HttpService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+
+class ViewerComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.path = "";
+        this.folderName = "";
+        this.removable = false;
+        this.remove = new EventEmitter();
+        this.display = "Documents";
+        this.title = "Documents";
+    }
+    ngOnInit() {
+        if (typeof this.fileNames == 'string') {
+            this.fileNames = this.fileNames.split(",");
+        }
+    }
+    // fileList: string[];
+    viewDocs(fileName) {
+        if (typeof fileName != 'string') {
+            return;
+        }
+        const dialogRef = this.dialog.open(viewerDialog, {
+            minWidth: '95%',
+            maxWidth: '80vw',
+            data: { fileNames: this.fileNames, fileName: fileName, path: `${this.path}/${this.folderName}` }
+        });
+    }
+    removed(i) {
+        this.remove.emit(i);
+    }
+}
+ViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewerComponent, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewerComponent, selector: "spa-viewer", inputs: { 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\" 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$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\" 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"] }]
+        }], ctorParameters: function () { return [{ type: i3.MatDialog }]; }, propDecorators: { path: [{
+                type: Input
+            }], folderName: [{
+                type: Input
+            }], fileNames: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }], display: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
 
 class FormComponent {
     constructor(messageService, dataService) {
         this.messageService = messageService;
         this.dataService = dataService;
+        this.files = [];
         this.buttonDisplay = "Submit";
         this.isProcessing = false;
         this.multiColumn = false;
         this.buttonClick = new EventEmitter();
+        this.inputChange = new EventEmitter();
     }
     ngOnInit() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!this.config.fields) {
             this.messageService.toast("Please Configure Form Fields");
             return;
@@ -2458,11 +2630,19 @@ class FormComponent {
         if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.display) {
             this.buttonDisplay = this.config.button.display;
         }
+        this.fileField = this.fields.find(x => x.type == 'file');
+        if (((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.action) && this.fileField) {
+            this.config.button.action.isFormData = true;
+        }
     }
     ngOnChanges() {
         console.log("changed");
     }
+    inputChanged(name, value) {
+        this.inputChange.emit({ name: name, value: value });
+    }
     buttonClicked() {
+        var _a;
         console.log("Button Clicked");
         this.buttonClick.emit(this.data);
         console.log(this.data);
@@ -2476,6 +2656,10 @@ class FormComponent {
             this.messageService.toast(resp);
             return;
         }
+        if (this.files.length < 1 && ((_a = this.fileField) === null || _a === void 0 ? void 0 : _a.required) && this.config.mode == 'create') {
+            this.messageService.toast("Please attach file(s)");
+            return;
+        }
         if (button.confirm) {
             this.messageService.confirm(`${button.confirm.message}`).subscribe((result) => {
                 if (result == "yes") {
@@ -2490,8 +2674,21 @@ class FormComponent {
     processCall(button) {
         if (!button.action)
             return;
+        let dataOut;
+        if (button.action.isFormData) {
+            let formData = new FormData();
+            for (let i = 0; i < this.files.length; i++) {
+                formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
+            }
+            formData.append("data", JSON.stringify(this.data));
+            console.log(formData);
+            dataOut = formData;
+        }
+        else {
+            dataOut = this.data;
+        }
         this.isProcessing = true;
-        this.dataService.CallApi(button.action, this.data).subscribe((apiResponse) => {
+        this.dataService.CallApi(button.action, dataOut).subscribe((apiResponse) => {
             this.isProcessing = false;
             if (apiResponse.success) {
                 if (button.action.successMessage) {
@@ -2502,6 +2699,7 @@ class FormComponent {
                 }
                 if (this.config.reset) {
                     Core.resetObject(this.fields, this.data);
+                    this.files = [];
                 }
             }
             else {
@@ -2509,18 +2707,24 @@ class FormComponent {
             }
         });
     }
+    processForm() {
+    }
 }
 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: { data: "data", config: "config" }, outputs: { buttonClick: "buttonClick" }, 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' ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\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      <label *ngSwitchCase=\"'blank'\">.</label>\r\n\r\n      <spa-text  *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\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\" [disabled]=\"isProcessing\" (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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { 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" }, 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 fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\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 !='create'\">\r\n          <spa-viewer [fileNames]=\"data[field.name]\" path=\"files/docs\" folderName=\"doc\"></spa-viewer>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n\r\n      <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.alias ?? field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { 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"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { 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' ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\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      <label *ngSwitchCase=\"'blank'\">.</label>\r\n\r\n      <spa-text  *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\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\" [disabled]=\"isProcessing\" (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}\n"] }]
-        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { data: [{
+            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 fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\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 !='create'\">\r\n          <spa-viewer [fileNames]=\"data[field.name]\" path=\"files/docs\" folderName=\"doc\"></spa-viewer>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n\r\n      <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.alias ?? field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\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}\n"] }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { files: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], config: [{
                 type: Input
             }], buttonClick: [{
                 type: Output
+            }], inputChange: [{
+                type: Output
             }] } });
 
 class detailsDialog {
@@ -2529,6 +2733,7 @@ class detailsDialog {
         this.messageService = messageService;
         this.dialogRef = dialogRef;
         this.data = data;
+        this.files = [];
         this.smallScreen = false;
         this.isLoadComplete = false;
         this.isProcessing = false;
@@ -2544,12 +2749,14 @@ class detailsDialog {
         else {
             this.details = this.data.details;
         }
+        this.fileField = this.formConfig.fields.find(x => x.type == 'file');
         this.isLoadComplete = true;
     }
     setMode(newMode) {
         this.formConfig.mode = newMode;
     }
     create() {
+        var _a;
         console.log(this.details);
         //validation
         let resp = Core.validateObject(this.formConfig.fields, this.details);
@@ -2557,17 +2764,38 @@ class detailsDialog {
             this.messageService.toast(resp);
             return;
         }
-        let b = this.tableConfig.buttons.find(x => x.name == "create");
-        if (!b || !b.action) {
+        // File Validation---
+        if (this.files.length < 1 && ((_a = this.fileField) === null || _a === void 0 ? void 0 : _a.required)) {
+            this.messageService.toast("Please attach file(s)");
+            return;
+        }
+        // File Validation---
+        let tableCreateButton = this.tableConfig.buttons.find(x => x.name == "create");
+        if (!tableCreateButton || !tableCreateButton.action) {
             this.dialogRef.close({ message: 'emit', data: this.details });
             return;
         }
+        //coversion--
+        let dataOut;
+        if (tableCreateButton.action.isFormData) {
+            let formData = new FormData();
+            for (let i = 0; i < this.files.length; i++) {
+                formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
+            }
+            formData.append("data", JSON.stringify(this.details));
+            console.log(formData);
+            dataOut = formData;
+        }
+        else {
+            dataOut = this.details;
+        }
+        //coversion--
         this.isProcessing = true;
-        this.dataService.CallApi(b.action, this.details).subscribe((apiResponse) => {
+        this.dataService.CallApi(tableCreateButton.action, dataOut).subscribe((apiResponse) => {
             this.isProcessing = false;
             if (apiResponse.success) {
-                if (b.action.successMessage) {
-                    this.messageService.toast(b.action.successMessage);
+                if (tableCreateButton.action.successMessage) {
+                    this.messageService.toast(tableCreateButton.action.successMessage);
                 }
                 else {
                     this.messageService.toast("Created");
@@ -2587,17 +2815,32 @@ class detailsDialog {
             this.messageService.toast(resp);
             return;
         }
-        let b = this.tableConfig.buttons.find(x => x.name == "edit");
-        if (!b || !b.action) {
+        let tableEditButton = this.tableConfig.buttons.find(x => x.name == "edit");
+        if (!tableEditButton || !tableEditButton.action) {
             this.dialogRef.close({ message: 'emit', data: this.details });
             return;
         }
+        //coversion--
+        let dataOut;
+        if (tableEditButton.action.isFormData) {
+            let formData = new FormData();
+            for (let i = 0; i < this.files.length; i++) {
+                formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
+            }
+            formData.append("data", JSON.stringify(this.details));
+            console.log(formData);
+            dataOut = formData;
+        }
+        else {
+            dataOut = this.details;
+        }
+        //coversion--
         this.isProcessing = true;
-        this.dataService.CallApi(b.action, this.details).subscribe((apiResponse) => {
+        this.dataService.CallApi(tableEditButton.action, dataOut).subscribe((apiResponse) => {
             this.isProcessing = false;
             if (apiResponse.success) {
-                if (b.action.successMessage) {
-                    this.messageService.toast(b.action.successMessage);
+                if (tableEditButton.action.successMessage) {
+                    this.messageService.toast(tableEditButton.action.successMessage);
                 }
                 else {
                     this.messageService.toast("Updated");
@@ -2638,19 +2881,41 @@ class detailsDialog {
         });
     }
 }
-detailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-detailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: detailsDialog, selector: "app-viewModel", ngImport: i0, template: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.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: i3$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: FormComponent, selector: "spa-form", inputs: ["data", "config"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+detailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+detailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: detailsDialog, selector: "app-viewModel", ngImport: i0, template: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [files]=\"files\" [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && smallScreen\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel', template: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
+            args: [{ selector: 'app-viewModel', template: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [files]=\"files\" [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && smallScreen\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{
+        return [{ type: DataServiceLib }, { type: MessageService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];
     } });
 ;
 
+class SearchComponent {
+    constructor() {
+        this.searchClick = new EventEmitter();
+    }
+    ngOnInit() {
+        this.data = Core.generateObject(this.config.fields);
+    }
+    search() {
+        this.searchClick.emit(this.data);
+    }
+}
+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" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n  <div *ngFor=\"let field of config.fields\">\n\n    <spa-option [type]=\"field.type\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n  </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n  <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n    <mat-icon>search</mat-icon>\n  </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"], dependencies: [{ kind: "directive", type: i1.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show"], 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: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n  <div *ngFor=\"let field of config.fields\">\n\n    <spa-option [type]=\"field.type\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n  </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n  <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n    <mat-icon>search</mat-icon>\n  </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], searchClick: [{
+                type: Output
+            }] } });
+
 class TableComponent {
     constructor(dataService, messageService, breakpointObserver, dialog) {
         this.dataService = dataService;
@@ -2658,8 +2923,12 @@ class TableComponent {
         this.breakpointObserver = breakpointObserver;
         this.dialog = dialog;
         this.actionsWidth = "50px";
+        this.showFilterButton = true;
+        this.tileReload = new Subject();
         this.data = [];
+        this.dataLoad = new EventEmitter();
         this.refreshClick = new EventEmitter();
+        this.searchClick = new EventEmitter();
         this.createClick = new EventEmitter();
         this.viewClick = new EventEmitter();
         this.editClick = new EventEmitter();
@@ -2693,9 +2962,12 @@ class TableComponent {
         this.custom2Button = this.getButton('custom2');
         this.custom3Button = this.getButton('custom3');
         if (this.config.loadAction) {
-            this.loadData();
+            this.loadData(this.config.loadAction, "");
         }
         this.formDefaults();
+        if (this.config.searchConfig) {
+            this.showFilterButton = false;
+        }
     }
     ngOnChanges() {
         if (!this.config.loadAction) {
@@ -2754,15 +3026,14 @@ class TableComponent {
         let x = this.options.find(opt => opt.name === column);
         return x;
     }
-    testIconCondition(column, row) {
-        const option = this.getOptions(column);
-        if (option && option.icon && !option.icon.condition) {
-            return true;
+    testIconCondition(value, icon) {
+        // const option = this.getOptions(column);
+        if (icon.condition) {
+            return icon.condition(value);
         }
-        if (option && option.icon && option.icon.condition) {
-            return option.icon.condition(row[column]);
+        else {
+            return true;
         }
-        return false;
     }
     testDisabled(row, buttonName) {
         let button = this.getButton(buttonName);
@@ -2779,11 +3050,29 @@ class TableComponent {
         return true;
     }
     //Actions
+    searchClicked(x) {
+        console.log("Search");
+        this.refreshClick.emit(x);
+        console.log(x);
+        if (this.config.searchConfig.searchAction) {
+            this.config.searchConfig.searchAction.method == 'post';
+            this.loadData(this.config.searchConfig.searchAction, x);
+        }
+    }
     refreshClicked() {
         console.log("Refresh");
         this.refreshClick.emit();
         if (this.config.loadAction) {
-            this.loadData();
+            this.loadData(this.config.loadAction, "");
+        }
+    }
+    dataLoaded(x) {
+        var _a;
+        this.dataLoad.emit(x);
+        console.log("dataloaded");
+        if ((_a = this.config.tileConfig) === null || _a === void 0 ? void 0 : _a.loadAction) {
+            this.tileReload.next(true);
+            ;
         }
     }
     view(x) {
@@ -2925,19 +3214,20 @@ class TableComponent {
             }
         });
     }
-    loadData() {
+    loadData(action, data) {
         console.log("loading");
-        if (this.config.loadAction) {
-            this.dataService.CallApi(this.config.loadAction, "").subscribe((apiResponse) => {
+        if (action) {
+            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
                 this.dataSource = apiResponse.data;
                 this.tableDataSource = new MatTableDataSource(apiResponse.data);
                 this.tableDataSource.paginator = this.tablePaginator;
                 if (apiResponse.success) {
                     this.tableDataSource = new MatTableDataSource(apiResponse.data);
                     this.tableDataSource.paginator = this.tablePaginator;
+                    this.dataLoaded(apiResponse.data);
                 }
                 else {
-                    this.messageService.toast("Error: " + JSON.stringify(apiResponse));
+                    this.messageService.toast("Error: " + apiResponse.message);
                 }
             });
         }
@@ -2953,21 +3243,37 @@ class TableComponent {
             this.config.formConfig = config;
         }
     }
+    getColor(v, options) {
+        let defaultColor = 'lightgrey';
+        if (!options)
+            return defaultColor;
+        let c = options.find(x => x.value == v);
+        if (c) {
+            return c.color;
+        }
+        else {
+            return defaultColor;
+        }
+    }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config" }, outputs: { refreshClick: "refreshClick", createClick: "createClick", viewClick: "viewClick", editClick: "editClick", deleteClick: "deleteClick", custom1Click: "custom1Click", custom2Click: "custom2Click", custom3Click: "custom3Click" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"top\">\n\n  <div >\n    <!-- <button *ngIf=\"config.newText\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{config.newText}}</button> -->\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{createButton.display}}</button>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n          </ng-container>\n\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:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$4.BreakpointObserver }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", viewClick: "viewClick", editClick: "editClick", deleteClick: "deleteClick", custom1Click: "custom1Click", custom2Click: "custom2Click", custom3Click: "custom3Click" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\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;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip  (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\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:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.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: i4$2.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: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { 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: "\n<div class=\"top\">\n\n  <div >\n    <!-- <button *ngIf=\"config.newText\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{config.newText}}</button> -->\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{createButton.display}}</button>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n          </ng-container>\n\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:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.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$3.BreakpointObserver }, { type: i4.MatDialog }]; }, propDecorators: { tablePaginator: [{
+            args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\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;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip  (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\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:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$4.BreakpointObserver }, { type: i3.MatDialog }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
             }], data: [{
                 type: Input
             }], config: [{
                 type: Input
+            }], dataLoad: [{
+                type: Output
             }], refreshClick: [{
                 type: Output
+            }], searchClick: [{
+                type: Output
             }], createClick: [{
                 type: Output
             }], viewClick: [{
@@ -2989,7 +3295,7 @@ class TinSpaModule {
 TinSpaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, declarations: [TinSpaComponent, TextComponent, CheckComponent, DateComponent, DatetimeComponent, LabelComponent, SelectComponent,
         ActivityComponent, FilterComponent, messageDialog, MoneyComponent, OptionComponent, TilesComponent, StepsComponent,
-        AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent], imports: [SpaMatModule,
+        AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent, SearchComponent, ViewerComponent, viewerDialog], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule], exports: [TinSpaComponent,
         SpaMatModule,
@@ -3012,7 +3318,10 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         FilterComponent,
         TableComponent, detailsDialog,
         FormComponent,
-        NumberComponent] });
+        NumberComponent,
+        SearchComponent,
+        ViewerComponent,
+        viewerDialog] });
 TinSpaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, providers: [
         { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
         { provide: LocationStrategy, useClass: HashLocationStrategy },
@@ -3027,7 +3336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     declarations: [
                         TinSpaComponent, TextComponent, CheckComponent, DateComponent, DatetimeComponent, LabelComponent, SelectComponent,
                         ActivityComponent, FilterComponent, messageDialog, MoneyComponent, OptionComponent, TilesComponent, StepsComponent,
-                        AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent
+                        AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent, SearchComponent, ViewerComponent, viewerDialog
                     ],
                     imports: [
                         SpaMatModule,
@@ -3056,7 +3365,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         FilterComponent,
                         TableComponent, detailsDialog,
                         FormComponent,
-                        NumberComponent
+                        NumberComponent,
+                        SearchComponent,
+                        ViewerComponent,
+                        viewerDialog
                     ],
                     providers: [
                         { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
@@ -3155,7 +3467,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$3.Router }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: LogService }, { token: i1$3.ActivatedRoute }], 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>{{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            <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>\r\n\r\n          <div class=\"buttons\">\r\n\r\n            <button id=\"btnLogin\" mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n\r\n            <button *ngIf=\"appConfig.selfService\" id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n\r\n          </div>\r\n\r\n\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}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.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: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i14.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i14.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i14.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i14.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", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }] });
+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>{{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            <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>\r\n\r\n          <div class=\"buttons\">\r\n\r\n            <button id=\"btnLogin\" mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n\r\n            <button *ngIf=\"appConfig.selfService\" id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n\r\n          </div>\r\n\r\n\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}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i14.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i14.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i14.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i14.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", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }] });
 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>{{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            <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>\r\n\r\n          <div class=\"buttons\">\r\n\r\n            <button id=\"btnLogin\" mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n\r\n            <button *ngIf=\"appConfig.selfService\" id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n\r\n          </div>\r\n\r\n\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}\n"] }]
@@ -3434,7 +3746,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$3.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: i1.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: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
+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: i1.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: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
 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"] }]
@@ -3528,7 +3840,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=\"row 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:150px;\"><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\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.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: i1.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=\"row 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:150px;\"><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\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: i1.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=\"row 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:150px;\"><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\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"] }]
@@ -3553,7 +3865,7 @@ class LogsComponent {
     }
 }
 LogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, deps: [{ token: AuthService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-logs', template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\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"] }]
@@ -3655,12 +3967,12 @@ class UsersComponent {
         });
     }
 }
-UsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</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\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create Account</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> userName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\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': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\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}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+UsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i3.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</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\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create Account</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> userName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\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': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\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}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-users", template: "\r\n<h4>Users</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\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create Account</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> userName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\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': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\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}.make-gray{background-color:#d3d3d3}\n"] }]
-        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i4.MatDialog }, { type: MessageService }]; }, propDecorators: { usersPaginator: [{
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i3.MatDialog }, { type: MessageService }]; }, propDecorators: { usersPaginator: [{
                 type: ViewChild,
                 args: ["usersPaginator"]
             }] } });
@@ -3699,13 +4011,13 @@ class addRoleDialog {
     }
     ;
 }
-addRoleDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, deps: [{ 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    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$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: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i3.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    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$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: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\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"] }]
         }], ctorParameters: function () {
-        return [{ type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{
+        return [{ type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];
@@ -3779,12 +4091,12 @@ class RolesComponent {
         });
     }
 }
-RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$3.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 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: 200px;\" [(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: 200px;\" [(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: 200px;\" [(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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i14.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i3.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 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: 200px;\" [(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: 200px;\" [(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: 200px;\" [(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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i14.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$1.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 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: 200px;\" [(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: 200px;\" [(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: 200px;\" [(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"] }]
-        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i4.MatDialog }, { type: MessageService }]; } });
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i3.MatDialog }, { type: MessageService }]; } });
 
 class CreateAccountComponent {
     constructor(httpService, messageService, dataService, authService, router) {
@@ -4033,5 +4345,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Account, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, DataServiceLib, DateComponent, DatetimeComponent, ExportService, FilterComponent, FormComponent, FormConfig, HttpService, IndexModule, LabelComponent, LoaderComponent, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, TableComponent, TableConfig, TextComponent, Tile, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, User, UserModule, UsersComponent, addRoleDialog, detailsDialog, loginConfig, messageDialog };
+export { Account, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, DataServiceLib, DateComponent, DatetimeComponent, ExportService, FilterComponent, FormComponent, FormConfig, HttpService, IndexModule, LabelComponent, LoaderComponent, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, TableComponent, TableConfig, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, User, UserModule, UsersComponent, ViewerComponent, addRoleDialog, detailsDialog, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map