tin-spa 2.1.13 → 2.1.15

package/fesm2020/tin-spa.mjs

@@ -491,6 +491,25 @@ class ChangeUserPassword {
         this.confirmPassword = "";
     }
 }
+class Transaction {
+    constructor() {
+        this.transactionID = 0;
+        this.reference = "";
+        this.amount = '0';
+        this.type = 0;
+        this.date = "";
+        this.accountID = 0;
+        this.destinationID = 0;
+    }
+}
+class FinAccount {
+    constructor() {
+        this.accountID = 0;
+        this.name = "";
+        this.description = "";
+        this.currency = "";
+    }
+}
 class Register {
     constructor() {
         this.userName = "";
@@ -941,8 +960,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }], ctorParameters: function () { return [{ type: i1$3.ActivatedRoute }, { type: i8.SocialAuthService }, { type: StorageService }, { type: i1$3.Router }, { type: HttpService }, { type: MessageService }, { type: LogService }]; } });
 
 class DataServiceLib {
-    constructor(httpService) {
+    constructor(httpService, router, route) {
         this.httpService = httpService;
+        this.router = router;
+        this.route = route;
         this.appConfig = new AppConfig();
         this.appConfigSource = new BehaviorSubject(this.appConfig);
         this.appConfigObserv = this.appConfigSource.asObservable();
@@ -1036,6 +1057,21 @@ class DataServiceLib {
             return this.httpService.Post(action.url, data);
         }
     }
+    NavigateWithValue(path, value) {
+        this.router.navigate([path], {
+            queryParams: { v: value },
+            queryParamsHandling: 'merge',
+            skipLocationChange: false
+        });
+    }
+    GetNavigationValue() {
+        if (this.route.snapshot.queryParams["v"] != undefined) {
+            return this.route.snapshot.queryParams["v"];
+        }
+        else {
+            return "";
+        }
+    }
     //Users
     GetUser() {
         return this.httpService.Get("User/all/x");
@@ -1092,14 +1128,14 @@ class DataServiceLib {
         return this.httpService.Post(`Setting?action=${action}`, setting);
     }
 }
-DataServiceLib.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataServiceLib, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+DataServiceLib.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataServiceLib, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
 DataServiceLib.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataServiceLib, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataServiceLib, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: HttpService }]; } });
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: i1$3.ActivatedRoute }]; } });
 
 class TinSpaComponent {
 }
@@ -1580,6 +1616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class FilterComponent {
     constructor() {
+        this.showText = true;
         this.showButton = true;
         this.data = new MatTableDataSource();
         this.refreshClick = new EventEmitter();
@@ -1605,11 +1642,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: { 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"] }] });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</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 *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: [{
+            args: [{ selector: 'spa-filter', template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</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: { showText: [{
+                type: Input
+            }], showButton: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -2815,10 +2854,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.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, data[field.name])\" [readonly]=\"field.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, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"field.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,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\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: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { 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 getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit')  || 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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || 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, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || 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, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || 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 ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\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: ["fileAction", "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' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.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, data[field.name])\" [readonly]=\"field.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, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"field.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,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"] }]
+            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit')  || 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, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || 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, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || 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, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || 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 ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { files: [{
                 type: Input
             }], data: [{
@@ -3226,7 +3265,6 @@ class TableComponent {
         }
     }
     testIconCondition(value, icon) {
-        // const option = this.getOptions(column);
         if (icon.condition) {
             return icon.condition(value);
         }
@@ -3234,6 +3272,16 @@ class TableComponent {
             return true;
         }
     }
+    testColorCondition(value, color) {
+        if (!color)
+            return false;
+        if (color.condition) {
+            return color.condition(value);
+        }
+        else {
+            return true;
+        }
+    }
     testDisabled(row, buttonName) {
         let button = this.getButton(buttonName);
         if (button.disabled) {
@@ -3286,6 +3334,9 @@ class TableComponent {
         if (this.config.loadAction) {
             this.loadData(this.config.loadAction, "");
         }
+        else {
+            this.dataLoad.emit();
+        }
     }
     dataLoaded(x) {
         this.dataLoad.emit(x);
@@ -3388,6 +3439,7 @@ class TableComponent {
             this.inputChanged(x);
         });
         dialogRef.afterClosed().subscribe((result) => {
+            console.log(result);
             if (result.message == "success") {
                 this.actionClickedEmit('edit', result.data);
                 this.refreshClicked();
@@ -3433,10 +3485,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$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", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, 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.tileConfig\" style=\"min-width: 75%;\">\n    <spa-tiles  [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\"  [ngClass]=\"elevation\">\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=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\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-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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.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, 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=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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.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, 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:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\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;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></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}.make-gray{background-color:#e5e5e5}\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.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$2.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: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { 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" }] });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, 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.tileConfig\" style=\"min-width: 75%;\">\n    <spa-tiles  [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\"  [ngClass]=\"elevation\">\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=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\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-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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.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, 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=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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 [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\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;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></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}.make-gray{background-color:#e5e5e5}\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.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$2.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: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "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<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.tileConfig\" style=\"min-width: 75%;\">\n    <spa-tiles  [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\"  [ngClass]=\"elevation\">\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=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\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-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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.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, 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=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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.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, 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:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\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;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></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}.make-gray{background-color:#e5e5e5}\n"] }]
+            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.tileConfig\" style=\"min-width: 75%;\">\n    <spa-tiles  [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\"  [ngClass]=\"elevation\">\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=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\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-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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.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, 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=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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 [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, 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, 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:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\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;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></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}.make-gray{background-color:#e5e5e5}\n"] }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$4.BreakpointObserver }, { type: i3.MatDialog }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
@@ -3569,10 +3621,10 @@ class TenantSettingsComponent {
     }
 }
 TenantSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-row mb-2\" *ngIf=\"ownTenant\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-row mb-2\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Request other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Member Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"myTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-5\"><label>.</label></div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.subtitle{font-size:smaller}\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: 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: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { 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: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-2\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-col mb-2\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Request other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Member Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"myTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-5\"><label>.</label></div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: 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: 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: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { 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: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-row mb-2\" *ngIf=\"ownTenant\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-row mb-2\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Request other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Member Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" style=\"font-size: larger;\">Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"myTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-5\"><label>.</label></div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.subtitle{font-size:smaller}\n"] }]
+            args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-2\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-col mb-2\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Request other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Member Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"myTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-5\"><label>.</label></div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }]; } });
 
 class TenantsComponent {
@@ -3645,8 +3697,8 @@ class MembershipComponent {
             minColumns: ['memberName', 'tenantName', 'roleName'],
             logResponse: true,
             columns: [
-                { name: 'memberName', type: 'text' },
                 { name: 'tenantName', type: 'text' },
+                { name: 'memberName', type: 'text' },
                 { name: 'roleName', type: 'text' },
                 { name: 'status', type: 'text' },
             ],
@@ -3861,17 +3913,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'spa-inventory', template: "<h4>Inventory</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }, { type: i3.MatDialog }]; } });
 
+//-------------------------------------------VIEW
+// import { ApiResponse, DataServiceLib, MessageService } from 'projects/tin-spa/src/public-api';
+class accountDialog {
+    constructor(messageService, dataService, dialogRef, data) {
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.isLoadComplete = false;
+        this.isProcessing = false;
+        this.currencies = [
+            { name: 'USD', value: 'USD' },
+            { name: 'ZAR', value: 'ZAR' },
+            { name: 'ZWL', value: 'ZWL' },
+        ];
+    }
+    ngOnInit() {
+        this.action = this.data == null ? 'create' : 'edit';
+        this.account = this.data ?? new FinAccount();
+        this.isLoadComplete = true;
+        console.log(this.account);
+    }
+    submit() {
+        this.dataService.CallApi({ url: `general/accounts?action=${this.action}`, method: 'post' }, this.account).subscribe((x) => {
+            if (x.success) {
+                this.dialogRef.close('success');
+            }
+            else {
+                this.messageService.toast(x.message);
+            }
+        });
+    }
+}
+accountDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: accountDialog, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+accountDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: accountDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: 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: 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"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: accountDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+;
+
 class AccountsComponent {
-    constructor() { }
+    constructor(router, dataService, messageService, authService, dialog) {
+        this.router = router;
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.authService = authService;
+        this.dialog = dialog;
+        this.reload = new Subject();
+    }
     ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.dataService.CallApi({ url: 'general/accounts/x' }, '').subscribe((apiResponse) => {
+            this.accounts = apiResponse.data;
+        });
+    }
+    view(x) {
+        this.dataService.NavigateWithValue("home/admin/transactions", x.accountID);
+    }
+    open(x) {
+        const dialogRef = this.dialog.open(accountDialog, {
+            width: "900px",
+            data: x,
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result == 'success') {
+                this.loadData();
+                this.messageService.toast("Updated");
+            }
+        });
+    }
+    delete(row) {
+        this.messageService.confirm(`DELETE ${row.name} ?`).subscribe((result) => {
+            if (result == "yes") {
+                this.dataService.CallApi({ url: `general/accounts?action=delete`, method: 'post' }, row).subscribe((apiResponse) => {
+                    if (apiResponse.message == "success") {
+                        this.messageService.toast("Account Deleted");
+                        this.loadData();
+                    }
+                    else {
+                        this.messageService.toast(apiResponse.message);
+                    }
+                });
+            }
+            ;
+        });
     }
 }
-AccountsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<p>accounts works!</p>\n", styles: [""] });
+AccountsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, deps: [{ token: i1$3.Router }, { token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\n<hr>\n\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\n</div>\n\n<div class=\"row \" style=\"margin-left: 5px;\">\n\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\n\n    <div class=\"tin-row d-flex justify-content-between\">\n      <label>{{account.name}}</label>\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\n    </div>\n\n    <hr style=\"margin-top: 0px;margin-bottom: 0px;\"/>\n\n    <label style=\"font-size: small;\">{{account.description}}</label>\n\n    <div *ngIf=\"account\" class=\"tin-row\">\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    </div>\n\n    <mat-card-actions class=\"d-flex justify-content-between\" >\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\n    </mat-card-actions>\n\n  </mat-card>\n\n</div>\n\n\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: 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: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-accounts', template: "<p>accounts works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'spa-accounts', template: "<h4>Accounts</h4>\n<hr>\n\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\n</div>\n\n<div class=\"row \" style=\"margin-left: 5px;\">\n\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\n\n    <div class=\"tin-row d-flex justify-content-between\">\n      <label>{{account.name}}</label>\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\n    </div>\n\n    <hr style=\"margin-top: 0px;margin-bottom: 0px;\"/>\n\n    <label style=\"font-size: small;\">{{account.description}}</label>\n\n    <div *ngIf=\"account\" class=\"tin-row\">\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    </div>\n\n    <mat-card-actions class=\"d-flex justify-content-between\" >\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\n    </mat-card-actions>\n\n  </mat-card>\n\n</div>\n\n\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: DataServiceLib }, { type: MessageService }, { type: AuthService }, { type: i3.MatDialog }]; } });
 
 class SuppliersComponent {
     constructor(dataService, messageService, authService) {
@@ -3917,13 +4057,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'spa-suppliers', template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n\n" }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }]; } });
 
+//-------------------------------------------VIEW
+// import { ApiResponse, DataServiceLib, MessageService } from 'projects/tin-spa/src/public-api';
+class transactDialog {
+    constructor(messageService, dataService, dialogRef, data) {
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.txn = new Transaction;
+        this.isLoadComplete = false;
+        this.isProcessing = false;
+        this.formConfig = {
+            multiColumn: false,
+            fields: [
+                { name: 'date', type: 'date', required: true },
+                { name: 'amount', type: 'money', required: true },
+                { name: 'reference', required: true, type: 'text' },
+            ],
+        };
+    }
+    ngOnInit() {
+        this.action = this.data.action;
+        this.account = this.data.account;
+        this.accounts = this.data.accounts;
+        this.isLoadComplete = true;
+        if (this.action == "edit") {
+            this.txn = this.data.data;
+        }
+    }
+    submit() {
+        if (this.action == "income") {
+            this.txn.type = 1;
+        }
+        else {
+            this.txn.type = 0;
+        }
+        this.txn.accountID = this.account.accountID;
+        let act;
+        if (this.action == "edit") {
+            act = 'edit';
+        }
+        else if (this.action == "transfer") {
+            act = 'transfer';
+        }
+        else {
+            act = 'create';
+        }
+        this.dataService.CallApi({ url: `general/transactions?action=${act}`, method: 'post' }, this.txn).subscribe((x) => {
+            if (x.success) {
+                this.dialogRef.close('success');
+            }
+            else {
+                this.messageService.toast(x.message);
+            }
+        });
+    }
+}
+transactDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+transactDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: transactDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Reference\" [(value)]=\"txn.reference\"></spa-text>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}\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.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: 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"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Reference\" [(value)]=\"txn.reference\"></spa-text>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}\n"] }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+;
+
+class TransactionsComponent {
+    constructor(dataService, messageService, breakpointObserver, dialog) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.breakpointObserver = breakpointObserver;
+        this.dialog = dialog;
+        this.accounts = [];
+        this.transactions = [];
+        this.reload = new Subject();
+        this.formConfig = {
+            fields: [
+                { name: 'date', type: 'date' },
+                { name: 'reference', type: 'text' },
+                { name: 'amount', type: 'money' },
+            ],
+        };
+        this.config = {
+            minColumns: ['date', 'reference', 'amount'],
+            columns: [
+                { name: 'date', type: 'date' },
+                { name: 'reference', type: 'text' },
+                { name: 'amount', type: 'money', color: { name: 'red', condition: x => x.type == 0 }, icons: [{ name: 'arrow_right_alt', condition: x => x.link != '' && x.type == 0 }, { name: 'keyboard_backspace', condition: x => x.link != '' && x.type == 1 }] },
+            ],
+            buttons: [
+                { name: 'edit', disabled: x => x.link != '' && x.type == 1 },
+                { name: 'delete', dialog: true, action: { url: 'general/transactions?action=delete', method: 'post' }, disabled: x => x.link != '' && x.type == 1 },
+            ],
+            formConfig: this.formConfig
+        };
+        // detect screen size changes
+        this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
+            if (result.matches) {
+                this.smallScreen = true;
+            }
+            else {
+                this.smallScreen = false;
+            }
+        });
+    }
+    ngOnInit() {
+        this.accountID = this.dataService.GetNavigationValue();
+        this.loadData();
+    }
+    actionClicked(x) {
+        if (x.name == "edit") {
+            this.transact('edit', x.data);
+        }
+    }
+    loadData() {
+        this.dataService.CallApi({ url: 'general/transactions/' + this.accountID }, '').subscribe((apiResponse) => {
+            this.account = apiResponse.data.account;
+            this.accounts = apiResponse.data.accounts;
+            this.transactions = apiResponse.data.transactions;
+            console.log(this.transactions);
+        });
+    }
+    transact(x, data) {
+        const dialogRef = this.dialog.open(transactDialog, {
+            width: "500px",
+            data: { action: x, account: this.account, data: data, accounts: this.accounts },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result == 'success') {
+                this.loadData();
+                this.messageService.toast("Updated");
+            }
+        });
+    }
+    transfer() {
+    }
+}
+TransactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$4.BreakpointObserver }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<h4>Transactions ({{account?.name}})</h4>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\">\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen; then buttons\"></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}\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: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-transactions', template: "<h4>Transactions ({{account?.name}})</h4>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\">\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen; then buttons\"></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$4.BreakpointObserver }, { type: i3.MatDialog }]; } });
+
 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, SearchComponent, ViewerComponent, viewerDialog,
-        TenantSettingsComponent, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, SuppliersComponent], imports: [SpaMatModule,
+        TenantSettingsComponent, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
+        SuppliersComponent,
+        TransactionsComponent, transactDialog], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule,
         NgxDocViewerModule], exports: [TinSpaComponent,
@@ -3982,7 +4270,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TinSpaComponent, TextComponent, CheckComponent, DateComponent, DatetimeComponent, LabelComponent, SelectComponent,
                         ActivityComponent, FilterComponent, messageDialog, MoneyComponent, OptionComponent, TilesComponent, StepsComponent,
                         AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent, SearchComponent, ViewerComponent, viewerDialog,
-                        TenantSettingsComponent, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, SuppliersComponent,
+                        TenantSettingsComponent, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
+                        SuppliersComponent,
+                        TransactionsComponent, transactDialog,
                     ],
                     imports: [
                         SpaMatModule,
@@ -4062,16 +4352,16 @@ class LoginComponent {
     }
     ngOnInit() {
         this.dataService.appConfigObserv.subscribe(x => this.appConfig = x);
-        this.authService.autoLoginObserv.subscribe(x => {
-            this.autoLogin = x;
-            console.log("AUTO LOGIN :" + this.autoLogin);
-        });
         if (this.route.snapshot.queryParams["redirectTo"] != undefined) {
             this.redirectPath = this.route.snapshot.queryParams["redirectTo"];
         }
         else {
             this.redirectPath = "home";
         }
+        this.authService.autoLoginObserv.subscribe(x => {
+            this.autoLogin = x;
+            console.log("AUTO LOGIN :" + this.autoLogin);
+        });
         this.socialUser = null;
         this.socialService.authState.subscribe((socialUser) => {
             this.socialUser = socialUser;
@@ -4081,6 +4371,7 @@ class LoginComponent {
             this.user.authType = socialUser.provider;
             this.login();
         });
+        // this.authService.logoff();
     }
     signup() {
         this.router.navigate(["signup"]);
@@ -4543,7 +4834,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.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$2.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" }] });
+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$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "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"] }]
@@ -4646,7 +4937,7 @@ 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: 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\" style=\"font-size: 14px;\">\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 User</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$2.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" }] });
+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\" style=\"font-size: 14px;\">\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 User</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$2.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: ["showText", "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\" style=\"font-size: 14px;\">\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 User</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"] }]
@@ -4987,6 +5278,7 @@ const routes$1 = [
     { path: "inventory", component: InventoryComponent },
     { path: "suppliers", component: SuppliersComponent },
     { path: "accounts", component: AccountsComponent },
+    { path: "transactions", component: TransactionsComponent },
 ];
 class AdminRoutingModule {
 }
@@ -5068,5 +5360,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, 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 };
+export { Account, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, DataServiceLib, DateComponent, DatetimeComponent, ExportService, FilterComponent, FinAccount, 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, Transaction, User, UserModule, UsersComponent, ViewerComponent, addRoleDialog, detailsDialog, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map