tin-spa 2.0.0 → 2.1.1

package/fesm2015/tin-spa.mjs

@@ -0,0 +1,4026 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Inject, NgModule, EventEmitter, Input, Output, forwardRef, Directive, HostListener, ViewChild, Pipe } from '@angular/core';
+import { __awaiter } from 'tslib';
+import * as i4 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
+import * as i1 from '@angular/common';
+import { CommonModule, DecimalPipe, LocationStrategy, HashLocationStrategy, CurrencyPipe, DatePipe } from '@angular/common';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { of, BehaviorSubject, Observable } from 'rxjs';
+import { mergeMap, startWith, map } from 'rxjs/operators';
+import * as i1$1 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i1$3 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i1$2 from '@angular/common/http';
+import { HttpHeaders, HttpResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import * as i8 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i14 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i2$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i7 from '@angular/material/core';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import * as i5$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import * as i4$3 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i7$1 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i3$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSortModule } from '@angular/material/sort';
+import * as i2$2 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i6$1 from '@angular/material/table';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i6 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
+import * as i3$3 from '@angular/cdk/layout';
+
+class TinSpaService {
+    constructor() { }
+}
+TinSpaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TinSpaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class StorageService {
+    constructor() { }
+    // Store the value
+    store(storageKey, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const encryptedValue = btoa(escape(JSON.stringify(value)));
+            // const encryptedValue = JSON.stringify(value);
+            yield localStorage.setItem(storageKey, encryptedValue);
+        });
+    }
+    // Get the value
+    get(storageKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const ret = yield localStorage.getItem(storageKey);
+            return JSON.parse(unescape(atob(ret)));
+            // return JSON.parse(ret);
+        });
+    }
+    // Remove
+    removeStorageItem(storageKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield localStorage.removeItem(storageKey);
+        });
+    }
+    // Clear storage
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield localStorage.clear();
+        });
+    }
+}
+StorageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+StorageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class messageDialog {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+        this.messageType = this.data.type;
+        this._messageSubject = this.data.subject;
+        this._messageDetails = this.data.details;
+    }
+    response(resp) {
+        this.dialogRef.close(resp);
+    }
+}
+messageDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: messageDialog, deps: [{ token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+messageDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: messageDialog, selector: "lib-app-message", ngImport: i0, template: "\r\n  <h2 mat-dialog-title>\r\n\r\n    <mat-label *ngIf=\"messageType=='confirm'\">Confirm</mat-label>\r\n    <mat-label *ngIf=\"messageType=='info'\">Information</mat-label>\r\n    <mat-label *ngIf=\"messageType=='error'\">Error</mat-label>\r\n\r\n  </h2>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n    <!-- Confirm -->\r\n    <p *ngIf=\"messageType=='confirm'\">{{_messageDetails}}</p>\r\n\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\">\r\n\r\n      <h3>{{_messageSubject}}</h3>\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" (click)=\"response('ok')\" cdkFocusInitial>OK</button>\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: messageDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-app-message', template: "\r\n  <h2 mat-dialog-title>\r\n\r\n    <mat-label *ngIf=\"messageType=='confirm'\">Confirm</mat-label>\r\n    <mat-label *ngIf=\"messageType=='info'\">Information</mat-label>\r\n    <mat-label *ngIf=\"messageType=='error'\">Error</mat-label>\r\n\r\n  </h2>\r\n\r\n  <mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n    <!-- Confirm -->\r\n    <p *ngIf=\"messageType=='confirm'\">{{_messageDetails}}</p>\r\n\r\n\r\n    <!-- Information -->\r\n    <div *ngIf=\"messageType=='info'\">\r\n\r\n      <h3>{{_messageSubject}}</h3>\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div *ngIf=\"messageType=='error'\">\r\n\r\n      <mat-label>{{_messageDetails}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n  </mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <button id=\"btnYes\" mat-stroked-button  *ngIf=\"messageType=='confirm'\" (click)=\"response('yes')\" cdkFocusInitial>Yes</button>\r\n\r\n  <button id=\"btnNo\" mat-stroked-button *ngIf=\"messageType=='confirm'\" (click)=\"response('no')\" >No</button>\r\n\r\n  <button id=\"btnOK\" mat-stroked-button *ngIf=\"messageType=='info' || messageType=='error'\" (click)=\"response('ok')\" cdkFocusInitial>OK</button>\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i4.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+;
+
+class MessageService {
+    constructor(snackBar, dialog) {
+        this.snackBar = snackBar;
+        this.dialog = dialog;
+    }
+    toast(msg) {
+        this.snackBar.open(msg, "OK", { duration: 5000 });
+    }
+    info(subject, details) {
+        let type = "info";
+        const dialogRef = this.dialog.open(messageDialog, {
+            width: "600px",
+            data: { type, subject, details },
+        });
+    }
+    error(details) {
+        let type = "error";
+        let subject;
+        const dialogRef = this.dialog.open(messageDialog, {
+            width: "600px",
+            data: { type, subject, details },
+        });
+    }
+    confirm(msg) {
+        let type = "confirm";
+        let subject = "";
+        let details = msg;
+        const dialogRef = this.dialog.open(messageDialog, {
+            width: "400px",
+            data: { type, subject, details },
+        });
+        return dialogRef.afterClosed().pipe(mergeMap((result) => {
+            return of(result);
+        }));
+    }
+}
+MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, deps: [{ token: i1$1.MatSnackBar }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatSnackBar }, { type: i4.MatDialog }]; } });
+
+// import * as FileSaver from 'file-saver';
+// import * as XLSX from 'xlsx';
+class ExportService {
+    constructor() { }
+}
+ExportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExportService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class Core {
+    static generateObject(fields) {
+        let data = {};
+        fields.forEach(field => {
+            data[field.name] = this.getInitialValue(field);
+        });
+        return data;
+    }
+    static resetObject(fields, data) {
+        fields.forEach(field => {
+            data[field.name] = this.getInitialValue(field);
+        });
+    }
+    static validateObject(fields, data) {
+        console.log("Validations");
+        for (let field of fields) {
+            let name = field.name;
+            let d = data[field.name];
+            console.log(name);
+            if (field.required) {
+                if (!d)
+                    return `${name} is required`;
+                if (field.type == 'text') {
+                    if (d == '')
+                        return `Please enter ${name}`;
+                    if (field.min && d.length < field.min)
+                        return `Minimum  ${name} length is ${field.min}`;
+                    if (field.max && d.length > field.max)
+                        return `Maximum ${name} length is ${field.max}`;
+                }
+                else if (field.type == 'number' || field.type == 'money' || field.type == 'date') {
+                    if (field.min && d < field.min)
+                        return `Minimum  ${name} is ${field.min}`;
+                    if (field.max && d > field.max)
+                        return `Maximum ${name} is ${field.max}`;
+                }
+                else if (field.type == 'select') {
+                    if (d == '')
+                        return `Please select ${name}`;
+                }
+            }
+        }
+        ;
+        return '';
+    }
+    static getInitialValue(field) {
+        if (field.defaultValue) {
+            return field.defaultValue;
+        }
+        switch (field.type) {
+            case 'text':
+                return '';
+            case 'money':
+                return 0;
+            case 'number':
+                return 0;
+            case 'date':
+                return '';
+            case 'checkbox':
+                return false;
+            case 'select':
+                return null;
+            default:
+                return null;
+        }
+    }
+    static getClone(x) {
+        return JSON.parse(JSON.stringify(x));
+    }
+    static getNumber(value) {
+        if (value == null || value == "") {
+            return 0;
+        }
+        const onlyNumbers = value.replace(/[^\d.-]/g, '');
+        return onlyNumbers;
+    }
+    static getFirstDayOfMonth() {
+        const date = new Date();
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    static emailIsValid(email) {
+        // return /\S+@\S+\.\S+/.test(email)
+        return false;
+    }
+    static isValidUNCPath(path) {
+        // return /\\\\([a-zA-Z0-9_.$●-]+)\\([a-zA-Z0-9_.$●-]+).*/.test(path)
+        return false;
+    }
+    static isValidDate(date) {
+        var parsedDate = Date.parse(date);
+        if (isNaN(date) && !isNaN(parsedDate)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    static isValidEmailList(list) {
+        if (list.includes(";")) {
+            let emails = list.split(";");
+            for (var email of emails) {
+                if (this.emailIsValid(email) == false) {
+                    return false;
+                }
+            }
+        }
+        else {
+            if (this.emailIsValid(list) == false) {
+                return false;
+            }
+        }
+        return true;
+    }
+    static isNumber(value) {
+        return ((value != null) &&
+            (value !== '') &&
+            !isNaN(Number(value.toString())));
+    }
+    static getDiff(startDate, endDate = Date()) {
+        var eventStartTime = new Date(startDate);
+        var eventEndTime = new Date(endDate);
+        var milliseconds = eventEndTime.valueOf() - eventStartTime.valueOf();
+        function numberEnding(number) {
+            if (number.toFixed() == '1') {
+                return '';
+            }
+            else {
+                return 's';
+            }
+        }
+        var minutes = (milliseconds / (1000 * 60));
+        var hours = (milliseconds / (1000 * 60 * 60));
+        var days = (milliseconds / (1000 * 60 * 60 * 24));
+        var weeks = (milliseconds / (1000 * 60 * 60 * 24 * 7));
+        var months = (milliseconds / (1000 * 60 * 60 * 24 * 7 * 4));
+        var years = (milliseconds / (1000 * 60 * 60 * 24 * 365));
+        if (years >= 1) {
+            return years.toFixed() + ' year' + numberEnding(years);
+        }
+        else if (months >= 1) {
+            return months.toFixed() + ' month' + numberEnding(months);
+        }
+        else if (weeks >= 1) {
+            return weeks.toFixed() + ' week' + numberEnding(weeks);
+        }
+        else if (days >= 1) {
+            return days.toFixed() + ' day' + numberEnding(days);
+        }
+        else if (hours >= 1) {
+            return hours.toFixed() + ' hour' + numberEnding(hours);
+        }
+        else if (minutes >= 1) {
+            return minutes.toFixed() + ' minute' + numberEnding(minutes);
+        }
+        else if (milliseconds >= (-1000 * 60)) {
+            return 'a minute';
+        }
+        else {
+            return 'N/A';
+        }
+    }
+    static nowDate(NoTime = false) {
+        if (NoTime) {
+            return this.getFormatedDate(Date(), true);
+        }
+        else {
+            return this.getFormatedDate(Date());
+        }
+    }
+    static getFormatedDate(dateString, NoTime = false) {
+        let d = new Date(dateString);
+        d.setHours(d.getHours() + 2);
+        if (NoTime == true) {
+            return d.toISOString().split('T')[0];
+        }
+        else {
+            return d.toISOString().split('.')[0];
+        }
+    }
+    static getFormatedDate2(d, NoTime = false) {
+        d.setHours(d.getHours() + 2);
+        if (NoTime == true) {
+            return d.toISOString().split('T')[0];
+        }
+        else {
+            return d.toISOString().split('.')[0];
+        }
+    }
+    static getBusinessDatesCount(startDate, endDate) {
+        var count = 0;
+        var _startDate = new Date(startDate);
+        var _endDate = new Date(endDate);
+        var curDate = _startDate;
+        while (curDate < _endDate) {
+            var dayOfWeek = curDate.getDay();
+            if (!(dayOfWeek == 6 || dayOfWeek == 0))
+                count++;
+            curDate.setDate(curDate.getDate() + 1);
+        }
+        return count;
+    }
+}
+Core.nullDate = "01 Jan 1969";
+class ApiResponse {
+}
+class Constants {
+}
+Constants.AUTH_USER = 'a';
+Constants.AUTH_NAME = 'b';
+Constants.AUTH_ROLES = 'c';
+Constants.AUTH_TOKEN = 'd';
+Constants.AUTH_TOKEN_EXPIRE = 'e';
+
+class Action {
+}
+class FormConfig {
+}
+class TableConfig {
+}
+class Tile {
+}
+class Step {
+}
+class ActionResponse {
+}
+class loginConfig {
+    constructor() {
+        this.appName = "";
+        this.selfService = false;
+        this.logo = "";
+        this.logoSize = "normal";
+    }
+}
+class AppConfig {
+    constructor() {
+        this.appName = "App Name";
+        this.logo = "";
+        this.logoSize = "normal";
+        this.ADAuth = true;
+        this.localAuth = true;
+        this.selfService = false;
+    }
+}
+class CapItem {
+    constructor() {
+        this.name = "";
+        this.display = "New Cap Item";
+        this.enabled = false;
+        this.type = "";
+        this.newLine = false;
+        this.showMenu = true;
+        this.ignoreSubsDisplay = false;
+        this.link = "";
+        this.icon = "navigate_next";
+    }
+}
+class Account {
+}
+class User {
+    constructor() {
+        this.userName = "";
+        this.password = "";
+        this.tries = "0";
+        this.locked = "0";
+        this.logged = "0";
+        this.disabled = "0";
+        this.changepassword = "0";
+        this.dateCreated = Core.nowDate();
+        this.dateUpdated = Core.nowDate();
+        this.token = "";
+        this.dateExpire = Core.nowDate();
+        this.tokenExpire = Core.nowDate();
+        this.authType = "";
+    }
+}
+class ChangeUserPassword {
+    constructor() {
+        this.userName = "";
+        this.currentPassword = "";
+        this.newPassword = "";
+        this.confirmPassword = "";
+    }
+}
+class Register {
+    constructor() {
+        this.userName = "";
+        this.roleID = 1;
+        this.firstName = "";
+        this.lastName = "";
+        this.email = "";
+        this.authType = "";
+        this.password = "";
+    }
+}
+class Profile {
+    constructor() {
+        this.profileID = "";
+        this.userName = "";
+        this.roleID = 1;
+        this.firstName = "";
+        this.lastName = "";
+        this.email = "";
+        this.empID = "";
+        this.arID = "0";
+        this.authType = "";
+        this.password = "";
+        this.role = new Role();
+    }
+}
+class Role {
+    constructor() {
+        this.roleID = 0;
+        this.roleName = "New Role";
+        this.cap1 = false;
+        this.cap2 = false;
+        this.cap3 = false;
+        this.cap4 = false;
+        this.cap5 = false;
+        this.cap6 = false;
+        this.cap7 = false;
+        this.cap8 = false;
+        this.cap9 = false;
+        this.cap10 = false;
+        this.cap11 = false;
+        this.cap12 = false;
+        this.cap13 = false;
+        this.cap14 = false;
+        this.cap15 = false;
+        this.cap16 = false;
+        this.cap17 = false;
+        this.cap18 = false;
+        this.cap19 = false;
+        this.cap20 = false;
+        this.cap21 = false;
+        this.cap22 = false;
+        this.cap23 = false;
+        this.cap24 = false;
+        this.cap25 = false;
+        this.cap26 = false;
+        this.cap27 = false;
+        this.cap28 = false;
+        this.cap29 = false;
+        this.cap30 = false;
+        this.cap31 = false;
+        this.cap32 = false;
+        this.cap33 = false;
+        this.cap34 = false;
+        this.cap35 = false;
+        this.cap36 = false;
+        this.cap37 = false;
+        this.cap38 = false;
+        this.cap39 = false;
+        this.cap40 = false;
+        this.cap41 = false;
+        this.cap42 = false;
+        this.cap43 = false;
+        this.cap44 = false;
+        this.cap45 = false;
+        this.cap46 = false;
+        this.cap47 = false;
+        this.cap48 = false;
+        this.cap49 = false;
+        this.cap50 = false;
+        this.cap51 = false;
+        this.cap52 = false;
+        this.cap53 = false;
+        this.cap54 = false;
+        this.cap55 = false;
+        this.cap56 = false;
+        this.cap57 = false;
+        this.cap58 = false;
+        this.cap59 = false;
+        this.cap60 = false;
+        this.cap61 = false;
+        this.cap62 = false;
+        this.cap63 = false;
+        this.cap64 = false;
+        this.cap65 = false;
+        this.cap66 = false;
+        this.cap67 = false;
+        this.cap68 = false;
+        this.cap69 = false;
+        this.cap70 = false;
+        this.cap71 = false;
+        this.cap72 = false;
+        this.cap73 = false;
+        this.cap74 = false;
+        this.cap75 = false;
+        this.cap76 = false;
+        this.cap77 = false;
+        this.cap78 = false;
+        this.cap79 = false;
+        this.cap80 = false;
+        this.cap81 = false;
+        this.cap82 = false;
+        this.cap83 = false;
+        this.cap84 = false;
+        this.cap85 = false;
+        this.cap86 = false;
+        this.cap87 = false;
+        this.cap88 = false;
+        this.cap89 = false;
+        this.cap90 = false;
+        this.cap91 = false;
+        this.cap92 = false;
+        this.cap93 = false;
+        this.cap94 = false;
+        this.cap95 = false;
+        this.cap96 = false;
+        this.cap97 = false;
+        this.cap98 = false;
+        this.cap99 = false;
+        this.cap100 = false;
+    }
+}
+var LogLevel;
+(function (LogLevel) {
+    LogLevel[LogLevel["All"] = 0] = "All";
+    LogLevel[LogLevel["Debug"] = 1] = "Debug";
+    LogLevel[LogLevel["Info"] = 2] = "Info";
+    LogLevel[LogLevel["Warn"] = 3] = "Warn";
+    LogLevel[LogLevel["Error"] = 4] = "Error";
+    LogLevel[LogLevel["Fatal"] = 5] = "Fatal";
+    LogLevel[LogLevel["Off"] = 6] = "Off";
+})(LogLevel || (LogLevel = {}));
+
+class HttpService {
+    constructor(httpClient, router) {
+        this.httpClient = httpClient;
+        this.router = router;
+        //----Set apiUrl from the data service of the project---//
+        this.apiUrl = "https://api.solinc.co.zw/"; //default
+        this.httpOptions_Legacy = {
+            headers: new HttpHeaders({
+                Accept: "application/json",
+                "Content-Type": "application/json",
+                Authorization: "Basic " + btoa("emptyUser:emptyToken"),
+            }),
+            resposeType: "json",
+        };
+        this.httpOptions_Files = {
+            headers: new HttpHeaders({
+                Authorization: "Basic " + btoa("tnyagato:j5Toszfr@ys"),
+            }),
+            resposeType: "json",
+        };
+    }
+    //POST
+    Post(service, data) {
+        return this.httpClient.post(this.apiUrl + service, data, this.httpOptions_Legacy);
+    }
+    //PUT
+    Put(service, data) {
+        return this.httpClient.put(this.apiUrl + service, data, this.httpOptions_Legacy);
+    }
+    //POST RAW
+    Post_Raw(url, data) {
+        return this.httpClient.post(url, data, this.httpOptions_Legacy);
+    }
+    //POST with file
+    Post_WithFile(service, data, file) {
+        let formData = new FormData();
+        if (file) {
+            formData.append("uploadFile", file, file.name);
+        }
+        formData.append("data", JSON.stringify(data));
+        return this.httpClient.post(this.apiUrl + service, formData, this.httpOptions_Files);
+    }
+    //  //POST with files
+    Post_FormData(service, formData) {
+        return this.httpClient.post(this.apiUrl + service, formData, this.httpOptions_Files);
+    }
+    //GET
+    Get(service) {
+        return this.httpClient.get(this.apiUrl + service, this.httpOptions_Legacy);
+    }
+    //Get RAW
+    Get_Raw(url) {
+        return this.httpClient.get(url, this.httpOptions_Legacy);
+    }
+    //ERROR
+    Error(error) {
+        if (error.statusText == "Unauthorized") {
+            this.router.navigate(["login"]);
+            return "Unauthorized";
+        }
+        else {
+            return "Connection failed";
+        }
+    }
+}
+HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HttpService, deps: [{ token: i1$2.HttpClient }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HttpService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HttpService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$3.Router }]; } });
+
+// import { Core } from 'tin-core';
+class LogService {
+    constructor() {
+        this.level = LogLevel.All;
+        this.logToConsole = true;
+        this.logToApi = false;
+    }
+    debug(msg, ...optionalParams) {
+        this.writeToLog(msg, LogLevel.Debug, optionalParams);
+    }
+    info(msg, ...optionalParams) {
+        this.writeToLog(msg, LogLevel.Info, optionalParams);
+    }
+    warn(msg, ...optionalParams) {
+        this.writeToLog(msg, LogLevel.Warn, optionalParams);
+    }
+    error(msg, ...optionalParams) {
+        this.writeToLog(msg, LogLevel.Error, optionalParams);
+    }
+    fatal(msg, ...optionalParams) {
+        this.writeToLog(msg, LogLevel.Fatal, optionalParams);
+    }
+    log(msg, ...optionalParams) {
+        this.writeToLog(msg, LogLevel.All, optionalParams);
+    }
+    writeToLog(msg, level, params) {
+        if (this.shouldLog(level)) {
+            // Build log string
+            let value = Core.getFormatedDate(Date(), false).replace("T", " ");
+            // value += " - Type: " + LogLevel[this.level];
+            value += " - Message: " + msg;
+            if (params.length) {
+                value += " - Extra Info: " + this.formatParams(params);
+            }
+            // Log the value
+            if (this.logToConsole) {
+                console.log(value);
+            }
+            if (this.logToApi) {
+                //Call API post
+            }
+        }
+    }
+    formatParams(params) {
+        let ret = params.join(",");
+        // Is there at least one object in the array?
+        if (params.some((p) => typeof p == "object")) {
+            ret = "";
+            // Build comma-delimited string
+            for (let item of params) {
+                ret += JSON.stringify(item) + ",";
+            }
+        }
+        return ret;
+    }
+    shouldLog(level) {
+        let ret = false;
+        if ((level >= this.level && level !== LogLevel.Off) ||
+            this.level === LogLevel.All) {
+            ret = true;
+        }
+        return ret;
+    }
+}
+LogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AuthService {
+    constructor(_route, storage, router, httpService, messageService, logService) {
+        this._route = _route;
+        this.storage = storage;
+        this.router = router;
+        this.httpService = httpService;
+        this.messageService = messageService;
+        this.logService = logService;
+        //Logged in
+        this.loggedin = false;
+        this.loggedinSource = new BehaviorSubject(this.loggedin);
+        this.loggedinObserv = this.loggedinSource.asObservable();
+        //Token
+        this.token = "";
+        this.tokenSource = new BehaviorSubject(this.token);
+        this.tokenObserv = this.tokenSource.asObservable();
+        //TokenExpire
+        this.tokenExpire = "";
+        this.tokenExpireSource = new BehaviorSubject(this.tokenExpire);
+        this.tokenExpireObserv = this.tokenExpireSource.asObservable();
+        //Current User
+        this.currentUser = "tnyagato";
+        this.currentUserSource = new BehaviorSubject(this.currentUser);
+        this.currentUserObserv = this.currentUserSource.asObservable();
+        //Line Manager
+        this.islineManager = false;
+        this.isLineManagerSource = new BehaviorSubject(this.islineManager);
+        this.isLineManagerObserv = this.isLineManagerSource.asObservable();
+        //Roles
+        this.currentRole = new Role;
+        this.currentRoleSource = new BehaviorSubject(this.currentRole);
+        this.myRoleObserv = this.currentRoleSource.asObservable();
+        //Logged in FirstName
+        this.loggedUserSource = new BehaviorSubject("tnyagato");
+        this.loggedUserFullName = this.loggedUserSource.asObservable();
+    }
+    Updateloggedin(loggedin) {
+        this.loggedinSource.next(loggedin);
+        this.loggedin = loggedin;
+    }
+    UpdateToken(newToken) {
+        this.tokenSource.next(newToken);
+    }
+    UpdateTokenExpire(newTokenExpire) {
+        this.tokenExpireSource.next(newTokenExpire);
+    }
+    UpdateCurrentUser(newUser) {
+        this.currentUserSource.next(newUser.toLocaleLowerCase());
+        this.currentUser = newUser.toLocaleLowerCase();
+    }
+    UpdateIsLineManager(manager) {
+        this.isLineManagerSource.next(manager);
+    }
+    UpdateRole(role) {
+        this.currentRoleSource.next(role);
+    }
+    updateLoggedUserFullName(userName) {
+        this.loggedUserSource.next(userName);
+    }
+    //Authorisation
+    isAuthorised(capName) {
+        if (!this.currentRoleSource.value[capName]) {
+            // this.logService.info(`authorise: ${this.currentRoleSource.value.roleName} not authorised for ${capName}`);
+            this.router.navigate(["home"]);
+            this.messageService.toast(`Unauthorised: ${capName}`);
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    isValidToken() {
+        let tokenExpire = new Date(this.tokenExpireSource.value);
+        let nowDate = new Date();
+        let valid = tokenExpire > nowDate;
+        if (!valid) {
+            this.router.navigate(["login"]);
+            this.messageService.toast(`Expired Session`);
+        }
+        return valid;
+    }
+    canActivate() {
+        if (this.loggedin && this.isValidToken()) {
+            // this.logService.info("authentication: logged in");
+            return true;
+        }
+        if (localStorage.getItem(Constants.AUTH_USER) === null) {
+            // this.logService.info("authentication: not logged and no cache");
+            this.Updateloggedin(false);
+            let url = new URL(window.location.href);
+            let path = url.hash.replace("#/", "");
+            this.router.navigate(["login"], {
+                relativeTo: this._route,
+                queryParams: { redirectTo: path },
+                queryParamsHandling: 'merge',
+                skipLocationChange: false
+            });
+            return false;
+        }
+        else {
+            // this.logService.info("authentication: not logged but allowed login");
+            this.Updateloggedin(true);
+            this.storage.get(Constants.AUTH_USER).then((resp) => {
+                this.UpdateCurrentUser(resp);
+            });
+            this.storage.get(Constants.AUTH_NAME).then((resp) => {
+                this.updateLoggedUserFullName(resp);
+            });
+            this.storage.get(Constants.AUTH_ROLES).then((resp) => {
+                let ret = JSON.parse(resp);
+                this.UpdateRole(ret);
+            });
+            this.storage.get(Constants.AUTH_TOKEN).then((resp) => {
+                this.UpdateToken(resp);
+            });
+            this.storage.get(Constants.AUTH_TOKEN_EXPIRE).then((resp) => {
+                this.UpdateTokenExpire(resp);
+                this.isValidToken();
+            });
+            return true;
+        }
+    }
+}
+AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthService, deps: [{ token: i1$3.ActivatedRoute }, { token: StorageService }, { token: i1$3.Router }, { token: HttpService }, { token: MessageService }, { token: LogService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.ActivatedRoute }, { type: StorageService }, { type: i1$3.Router }, { type: HttpService }, { type: MessageService }, { type: LogService }]; } });
+
+class DataServiceLib {
+    constructor(httpService) {
+        this.httpService = httpService;
+        this.appConfig = new AppConfig();
+        this.appConfigSource = new BehaviorSubject(this.appConfig);
+        this.appConfigObserv = this.appConfigSource.asObservable();
+        // caps: CapItem[];
+        this.capHome = new CapItem;
+        this.capAdmin = new CapItem;
+        this.capUsers = new CapItem;
+        this.capRoles = new CapItem;
+        this.capLogs = new CapItem;
+        this.capSettings = new CapItem;
+        this.tmpProfileuserName = "";
+        this.appConfig.appName = "App-Name";
+        this.appConfig.logo = "./assets/logo.png";
+        this.appConfig.ADAuth = true;
+        this.appConfig.capItems = [this.capAdmin, this.capHome];
+        this.capHome.name = "cap1";
+        this.capHome.display = "Home";
+        this.capHome.link = "home";
+        this.capAdmin.name = "cap2";
+        this.capAdmin.display = "Admin";
+        this.capAdmin.capSubItems = [this.capUsers, this.capRoles, this.capLogs, this.capSettings];
+        this.capUsers.name = "cap3";
+        this.capUsers.display = "Users";
+        this.capUsers.link = "home/admin/users";
+        this.capRoles.name = "cap4";
+        this.capRoles.display = "Roles";
+        this.capRoles.link = "home/admin/roles";
+        this.capLogs.name = "cap5";
+        this.capLogs.display = "Logs";
+        this.capLogs.link = "home/admin/logs";
+        this.capSettings.name = "cap6";
+        this.capSettings.display = "Settings";
+        this.capSettings.link = "home/admin/settings";
+    }
+    UpdateAppConfig(config) {
+        this.appConfigSource.next(config);
+        this.appConfig = config;
+    }
+    CallApi(action, data) {
+        if (!action.method) {
+            return this.httpService.Get(action.url);
+        }
+        if (action.method == 'get') {
+            return this.httpService.Get(action.url);
+        }
+        else if (action.method == 'post') {
+            return this.httpService.Post(action.url, data);
+        }
+        else {
+            return this.httpService.Post(action.url, data);
+        }
+    }
+    //Users
+    GetUser() {
+        return this.httpService.Get("User/all/x");
+    }
+    RegisterAccount(u) {
+        return this.httpService.Post("User/register", u);
+    }
+    GetUserByID(val) {
+        return this.httpService.Get(`User/id/${val}`);
+    }
+    UpdateUser(profile) {
+        return this.httpService.Post("User/edit", profile);
+    }
+    UnlockUser(user) {
+        return this.httpService.Post("User/unlock", user);
+    }
+    LockUser(user) {
+        return this.httpService.Post("User/lock", user);
+    }
+    DeleteUser(user) {
+        return this.httpService.Post("User/delete", user);
+    }
+    Login(u) {
+        return this.httpService.Post("User/login", u);
+    }
+    ChangePassword(u) {
+        return this.httpService.Post("User/changepassword-self", u);
+    }
+    ChangePasswordAdmin(u) {
+        return this.httpService.Post("User/changepassword-admin", u);
+    }
+    SelfReset(u) {
+        return this.httpService.Post("Basic/SelfReset", u);
+    }
+    //Roles
+    PostRole(role, action) {
+        return this.httpService.Post(`Role?action=${action}`, role);
+    }
+    PutRole(role) {
+        return this.httpService.Put("Role", role);
+    }
+    GetRole(by, val) {
+        return this.httpService.Get("Role/all/x");
+    }
+    //Logs
+    GetLog(by, val) {
+        return this.httpService.Get("Log/all/x");
+    }
+    //Settings
+    GetSetting(by, val) {
+        return this.httpService.Get("Setting/all/x");
+    }
+    UpdateSetting(setting, action) {
+        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.ɵ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 }]; } });
+
+class TinSpaComponent {
+}
+TinSpaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TinSpaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TinSpaComponent, selector: "spa-tin-spa", ngImport: i0, template: `
+    <p>
+      tin-spa works!
+    </p>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-tin-spa', template: `
+    <p>
+      tin-spa works!
+    </p>
+  ` }]
+        }] });
+
+class SpaMatModule {
+}
+SpaMatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaMatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpaMatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SpaMatModule, exports: [CommonModule, FormsModule, ReactiveFormsModule,
+        MatMenuModule, MatSliderModule, MatTableModule, MatPaginatorModule,
+        MatCheckboxModule, MatBadgeModule, MatButtonModule, MatIconModule, MatDialogModule, MatSnackBarModule,
+        MatTabsModule, MatFormFieldModule, MatInputModule, MatCardModule, MatChipsModule, MatSelectModule,
+        MatNativeDateModule, MatProgressSpinnerModule, MatListModule, MatAutocompleteModule, MatTooltipModule, MatSortModule,
+        MatDatepickerModule, MatStepperModule, MatRadioModule] });
+SpaMatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaMatModule, providers: [
+        { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { disableClose: true, hasBackdrop: true } },
+        { provide: MAT_DATE_LOCALE, useValue: "en-GB" },
+    ], imports: [CommonModule, FormsModule, ReactiveFormsModule,
+        MatMenuModule, MatSliderModule, MatTableModule, MatPaginatorModule,
+        MatCheckboxModule, MatBadgeModule, MatButtonModule, MatIconModule, MatDialogModule, MatSnackBarModule,
+        MatTabsModule, MatFormFieldModule, MatInputModule, MatCardModule, MatChipsModule, MatSelectModule,
+        MatNativeDateModule, MatProgressSpinnerModule, MatListModule, MatAutocompleteModule, MatTooltipModule, MatSortModule,
+        MatDatepickerModule, MatStepperModule, MatRadioModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaMatModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [],
+                    exports: [
+                        CommonModule, FormsModule, ReactiveFormsModule,
+                        MatMenuModule, MatSliderModule, MatTableModule, MatPaginatorModule,
+                        MatCheckboxModule, MatBadgeModule, MatButtonModule, MatIconModule, MatDialogModule, MatSnackBarModule,
+                        MatTabsModule, MatFormFieldModule, MatInputModule, MatCardModule, MatChipsModule, MatSelectModule,
+                        MatNativeDateModule, MatProgressSpinnerModule, MatListModule, MatAutocompleteModule, MatTooltipModule, MatSortModule,
+                        MatDatepickerModule, MatStepperModule, MatRadioModule,
+                    ],
+                    providers: [
+                        { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { disableClose: true, hasBackdrop: true } },
+                        { provide: MAT_DATE_LOCALE, useValue: "en-GB" },
+                    ]
+                }]
+        }] });
+
+class TextComponent {
+    constructor() {
+        this.multiDimension = false;
+        // options: FormGroup;
+        this.hideRequiredControl = new FormControl(true);
+        this.hide = true; //for password only
+        this.readonly = false;
+        this.hint = "";
+        this.display = "";
+        this.placeholder = "";
+        this.value = "";
+        this.valueChange = new EventEmitter();
+        this.format = "text";
+        this.type = "";
+        this.leave = new EventEmitter();
+        this.enterPress = new EventEmitter();
+        this.rows = 1;
+        this.width = "100%";
+        //Autocomplete items
+        this.options = [];
+        this.optionValue = "";
+        //validation input
+        this.required = true;
+        this.min = 0;
+        this.max = 9000000000000000; //Math.max
+        this.regex = ""; //"[a-zA-Z ]*" //"/\S+@\S+\.\S+/";
+        //validation
+        this.myControl = new FormControl('', [Validators.required, Validators.minLength(this.min), Validators.maxLength(this.max), Validators.pattern(this.regex)]);
+        this.control = new FormControl(this.value, [Validators.required, Validators.minLength(this.min), Validators.maxLength(this.max), Validators.pattern(this.regex)]);
+    }
+    ngOnInit() {
+        if (this.options.length > 0) {
+            this.initFilter();
+        }
+        if (this.placeholder == "") {
+            this.placeholder = "Enter " + this.display;
+        }
+    }
+    ngAfterViewInit() {
+        this.initControl(this.control);
+        this.initControl(this.myControl);
+    }
+    initFilter() {
+        const objKeyList = Object.keys(this.options[0]);
+        const firstKey = objKeyList[0];
+        this.multiDimension = !Core.isNumber(firstKey);
+        this.filteredOptions = this.myControl.valueChanges.pipe(startWith(""), map((value) => this._filter(value)));
+    }
+    _filter(value) {
+        if (this.multiDimension) {
+            let filterValue = "";
+            if (value != "" && value) {
+                filterValue = value.toLowerCase();
+            }
+            return this.options.filter((option) => option[`${this.optionValue}`].toLowerCase().includes(filterValue));
+        }
+        else {
+            const filterValue = value.toLowerCase();
+            return this.options.filter(option => option.toLowerCase().includes(filterValue));
+        }
+    }
+    initControl(control) {
+        if (this.readonly) {
+            control.setValidators(null);
+            control.updateValueAndValidity();
+        }
+        if (!this.required && !this.readonly) {
+            control.setValidators([Validators.minLength(this.min), Validators.maxLength(this.max), Validators.pattern(this.regex)]);
+            this.control.updateValueAndValidity();
+        }
+    }
+    //Events
+    changed() {
+        if (this.options.length > 0) {
+            this.valueChange.emit(this.myControl.value);
+        }
+        else {
+            this.valueChange.emit(this.value);
+        }
+    }
+    leaved() {
+        this.leave.emit();
+    }
+    enterPressed() {
+        this.enterPress.emit();
+    }
+    validate(control) {
+        if ((this.required || this.min > 0) && control.hasError('required')) {
+            return `Required`;
+        }
+        if (control.hasError('minlength')) {
+            return `Minimun length is ${this.min}`;
+        }
+        if (control.hasError('maxlength')) {
+            return `Maximum length is ${this.max}`;
+        }
+        if (control.hasError('pattern')) {
+            return `Invalid Input`;
+        }
+        // if (this.regex != ""){
+        //   let r = new RegExp(this.regex, "g");
+        //   if (!r.test(this.value)){
+        //     this.valid = false;
+        //     this.errorMessage = "Invalid input";
+        //     return this.errorMessage;
+        //   }
+        // }
+        return "";
+    }
+}
+TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], format: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], leave: [{
+                type: Output
+            }], enterPress: [{
+                type: Output
+            }], rows: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], regex: [{
+                type: Input
+            }] } });
+
+class CheckComponent {
+    constructor() {
+        this.readonly = false;
+        this.display = "";
+        this.value = false;
+        this.valueChange = new EventEmitter();
+        this.click = new EventEmitter();
+        this.check = new EventEmitter();
+        this.uncheck = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    changed() {
+        this.valueChange.emit(this.value);
+    }
+    clicked() {
+        this.click.emit();
+        if (!this.value) {
+            this.checked();
+        }
+        else {
+            this.unchecked();
+        }
+    }
+    checked() {
+        this.check.emit();
+    }
+    unchecked() {
+        this.uncheck.emit();
+    }
+}
+CheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckComponent, selector: "spa-check", inputs: { readonly: "readonly", display: "display", value: "value" }, outputs: { valueChange: "valueChange", click: "click", check: "check", uncheck: "uncheck" }, ngImport: i0, template: " <mat-checkbox color=\"primary\" style=\"margin-right:50px; font-size:14px\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-check', template: " <mat-checkbox color=\"primary\" style=\"margin-right:50px; font-size:14px\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], click: [{
+                type: Output
+            }], check: [{
+                type: Output
+            }], uncheck: [{
+                type: Output
+            }] } });
+
+class DateComponent {
+    constructor() {
+        this.required = true;
+        this.min = "2023-11-05";
+        this.max = "9999-01-01";
+        this.readonly = false;
+        this.hint = "";
+        this.value = Core.nowDate(true);
+        this.display = "";
+        this.placeholder = "";
+        this.width = "100%";
+        this.valueChange = new EventEmitter();
+        this.control = new FormControl(new Date());
+    }
+    ngOnInit() {
+        this.minDate = new FormControl(new Date(this.min));
+        this.maxDate = new FormControl(new Date(this.max));
+        if (!this.value || this.value == "") {
+            this.control = new FormControl(new Date());
+            ;
+        }
+        setTimeout(() => { this.onChangeEvent(); }, 5);
+        if (this.readonly) {
+            this.control.disable();
+        }
+        else {
+            this.control.enable();
+        }
+    }
+    ngOnChanges() {
+        this.control = new FormControl(new Date(this.value));
+    }
+    onChangeEvent() {
+        let d = Core.getFormatedDate2(this.control.value, true);
+        this.valueChange.emit(d);
+    }
+    validate(control) {
+        if (control.hasError('matDatepickerMin')) {
+            return `Minimun date is ${this.min}`;
+        }
+        if (control.hasError('matDatepickerMax')) {
+            return `Maximum date is ${this.max}`;
+        }
+        return "";
+    }
+}
+DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { required: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class DatetimeComponent {
+    constructor() {
+        this.display = "";
+        this.value = "";
+        this.valueChange = new EventEmitter();
+        this.readonly = false;
+        this.min = "01 jan 1900";
+        this.max = "31 dec 9999";
+    }
+    ngOnInit() {
+    }
+    changed() {
+        this.valueChange.emit(this.value);
+    }
+}
+DatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DatetimeComponent, selector: "spa-datetime", inputs: { display: "display", value: "value", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatetimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-datetime', template: "<mat-form-field >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n</mat-form-field>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { display: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], readonly: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class LabelComponent {
+    constructor() {
+        this.display = "";
+        this.value = "";
+        this.format = "text";
+    }
+    ngOnInit() {
+    }
+}
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LabelComponent, selector: "spa-label", inputs: { display: "display", value: "value", format: "format" }, ngImport: i0, template: "<div *ngIf=\"format=='text'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='date'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value | date:'dd/MM/yyyy'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='datetime'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value | date:'dd/MM/yyyy HH:mm'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='money'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value | currency:'USD':''}} </label> &nbsp;\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-label', template: "<div *ngIf=\"format=='text'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='date'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value | date:'dd/MM/yyyy'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='datetime'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value | date:'dd/MM/yyyy HH:mm'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='money'\">\r\n  <label style=\"font-weight: 500\">{{display}}: </label> &nbsp; <label>{{value | currency:'USD':''}} </label> &nbsp;\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { display: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }] } });
+
+class SelectComponent {
+    constructor() {
+        this.width = "100%";
+        this.readonly = false;
+        this.readonlyMode = "";
+        this.hint = "";
+        this.placeholder = "";
+        this.multiple = false;
+        this.display = "";
+        this.optionValue = "";
+        this.optionDisplay = "";
+        this.optionDisplayExtra = "";
+        this.valueChange = new EventEmitter();
+    }
+    ngOnInit() {
+        // this.displayValue = this.options.filter((m) => m.optionValue == this.value)
+        // this.displayValue = this.value
+        if (this.placeholder == "") {
+            this.placeholder = "Select " + this.display;
+        }
+    }
+    ngOnChanges() {
+        if (this.readonlyMode != "" && this.options.length > 0) {
+            this.displayValue = this.options.filter((m) => m[`${this.optionValue}`] == this.value)[0][`${this.optionDisplay}`];
+        }
+    }
+    changed() {
+        // let v;
+        // v = Core.isNumber(this.value) ? Number(this.value) : this.value;
+        this.valueChange.emit(this.value);
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { width: "width", readonly: "readonly", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-select', template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], readonlyMode: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionDisplay: [{
+                type: Input
+            }], optionDisplayExtra: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class ActivityComponent {
+    constructor() {
+        this.notes = new Array();
+        this.notesMessage = "Empty";
+        this.title = "Notes";
+    }
+    ngOnInit() {
+    }
+}
+ActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ActivityComponent, selector: "spa-activity", inputs: { notes: "notes", title: "title" }, ngImport: i0, template: "\r\n      <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n        <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n      </div>\r\n\r\n      <ul *ngIf=\"notes && notes.length>0\" class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\r\n\r\n        <li *ngFor=\"let note of notes\" class=\"list-group-item  list-group-item-action flex-column align-items-start\">\r\n          <div class=\"d-flex w-100 justify-content-between\">\r\n            <div class=\"mb-0\">{{note.createdByName}}</div>\r\n            <!-- <small class=\"text-muted\">{{note.expr1}} ago</small> -->\r\n          </div>\r\n\r\n          <small>{{note.details}} (<em>{{note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>) </small>\r\n        </li>\r\n\r\n\r\n      </ul>\r\n\r\n      <div *ngIf=\"notes && notes.length==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n        No {{title.toLowerCase()}}\r\n\r\n      </div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-activity', template: "\r\n      <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n        <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n      </div>\r\n\r\n      <ul *ngIf=\"notes && notes.length>0\" class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\r\n\r\n        <li *ngFor=\"let note of notes\" class=\"list-group-item  list-group-item-action flex-column align-items-start\">\r\n          <div class=\"d-flex w-100 justify-content-between\">\r\n            <div class=\"mb-0\">{{note.createdByName}}</div>\r\n            <!-- <small class=\"text-muted\">{{note.expr1}} ago</small> -->\r\n          </div>\r\n\r\n          <small>{{note.details}} (<em>{{note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>) </small>\r\n        </li>\r\n\r\n\r\n      </ul>\r\n\r\n      <div *ngIf=\"notes && notes.length==0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n        No {{title.toLowerCase()}}\r\n\r\n      </div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { notes: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class FilterComponent {
+    constructor() {
+        this.data = new MatTableDataSource();
+        this.refreshClick = new EventEmitter();
+        this._filterText = "";
+    }
+    ngOnInit() {
+    }
+    ngOnChanges() {
+        // console.log("OnChange")
+        this.applyFilter(this._filterText);
+    }
+    ;
+    keyUp(event) {
+        let text = event.target['value'];
+        this.applyFilter(text);
+    }
+    applyFilter(filterValue) {
+        if (this.data) {
+            this.data.filter = filterValue.trim().toLowerCase();
+        }
+    }
+    refreshClicked() {
+        this.refreshClick.emit();
+    }
+}
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-filter', template: "<mat-form-field >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], refreshClick: [{
+                type: Output
+            }] } });
+
+const CURRENCY_INPUT_MASK_DIRECTIVE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CurrencyInputMaskDirective),
+    multi: true
+};
+class CurrencyInputMaskDirective {
+    constructor(elementRef, decimalPipe) {
+        this.elementRef = elementRef;
+        this.decimalPipe = decimalPipe;
+        this.DECIMAL_MARK = '.';
+    }
+    ngOnInit() {
+        this.el = this.elementRef.nativeElement;
+    }
+    handleFocus(event) {
+        const strVal = this.getInputValue();
+        const unmaskedStr = this.getUnmaskedValue(strVal);
+        this.updateInputValue(unmaskedStr);
+    }
+    handleCut(event) {
+        setTimeout(() => {
+            this.inputUpdated();
+        }, 0);
+    }
+    handleKeypress(event) {
+        // Restrict characters
+        const newChar = String.fromCharCode(event.which);
+        const allowedChars = /^[\d.]+$/;
+        if (!allowedChars.test(newChar)) {
+            event.preventDefault();
+            return;
+        }
+        // Handle decimal mark input
+        const currentValue = event.target.value;
+        const separatorIdx = currentValue.indexOf(this.DECIMAL_MARK);
+        const hasFractionalPart = (separatorIdx >= 0);
+        if (!hasFractionalPart || newChar !== this.DECIMAL_MARK) {
+            return;
+        }
+        const isOutsideSelection = !this.isIdxBetweenSelection(separatorIdx);
+        if (isOutsideSelection) {
+            const positionAfterMark = separatorIdx + 1;
+            this.setCursorPosition(positionAfterMark);
+            event.preventDefault();
+            return;
+        }
+    }
+    handleInput(event) {
+        this.inputUpdated();
+    }
+    handlePaste(event) {
+        setTimeout(() => {
+            this.inputUpdated();
+        }, 1);
+    }
+    handleBlur(event) {
+        const strVal = this.getInputValue();
+        const numVal = this.convertStrToDecimal(strVal);
+        this.maskInput(numVal);
+        this.onModelTouched.apply(event);
+    }
+    registerOnChange(callbackFunction) {
+        this.onModelChange = callbackFunction;
+    }
+    registerOnTouched(callbackFunction) {
+        this.onModelTouched = callbackFunction;
+    }
+    setDisabledState(value) {
+        this.el.disabled = value;
+    }
+    writeValue(numValue) {
+        this.maskInput(numValue);
+    }
+    maskInput(numVal) {
+        if (!this.isNumeric(numVal)) {
+            this.updateInputValue('');
+            return;
+        }
+        const strVal = this.convertDecimalToStr(numVal);
+        const newVal = this.transformWithPipe(strVal);
+        this.updateInputValue(newVal);
+    }
+    inputUpdated() {
+        this.restrictDecimalValue();
+        const strVal = this.getInputValue();
+        const unmaskedVal = this.getUnmaskedValue(strVal);
+        const numVal = this.convertStrToDecimal(unmaskedVal);
+        if (numVal !== this.lastNumVal) {
+            this.lastNumVal = numVal;
+            this.onModelChange(numVal);
+        }
+    }
+    restrictDecimalValue() {
+        const strVal = this.getInputValue();
+        const dotIdx = strVal.indexOf(this.DECIMAL_MARK);
+        const hasFractionalPart = (dotIdx >= 0);
+        if (hasFractionalPart) {
+            const fractionalPart = strVal.substring(dotIdx + 1);
+            if (fractionalPart.length > 2) {
+                const choppedVal = strVal.substring(0, dotIdx + 3);
+                this.updateInputValue(choppedVal, true);
+                return;
+            }
+        }
+    }
+    transformWithPipe(str) {
+        return this.decimalPipe.transform(str, '1.2-2');
+    }
+    getUnmaskedValue(value) {
+        return value.replace(/[^-\d\\.]/g, '');
+    }
+    updateInputValue(value, savePosition = false) {
+        if (savePosition) {
+            this.saveCursorPosition();
+        }
+        this.el.value = value;
+    }
+    getInputValue() {
+        return this.el.value;
+    }
+    convertStrToDecimal(str) {
+        return (this.isNumeric(str)) ? parseFloat(str) : null;
+    }
+    convertDecimalToStr(n) {
+        return (this.isNumeric(n)) ? n + '' : '';
+    }
+    isNumeric(n) {
+        return !isNaN(parseFloat(n)) && isFinite(n);
+    }
+    saveCursorPosition() {
+        const position = this.el.selectionStart;
+        setTimeout(() => {
+            this.setCursorPosition(position);
+        }, 1);
+    }
+    setCursorPosition(position) {
+        this.el.selectionStart = position;
+        this.el.selectionEnd = position;
+    }
+    isIdxBetweenSelection(idx) {
+        if (this.el.selectionStart === this.el.selectionEnd) {
+            return false;
+        }
+        return (idx >= this.el.selectionStart && idx < this.el.selectionEnd);
+    }
+}
+CurrencyInputMaskDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyInputMaskDirective, deps: [{ token: i0.ElementRef }, { token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Directive });
+CurrencyInputMaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]", host: { listeners: { "focus": "handleFocus($event)", "cut": "handleCut($event)", "keypress": "handleKeypress($event)", "input": "handleInput($event)", "paste": "handlePaste($event)", "blur": "handleBlur($event)" } }, providers: [
+        CURRENCY_INPUT_MASK_DIRECTIVE_VALUE_ACCESSOR,
+        DecimalPipe
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyInputMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appCurrencyInputMask]',
+                    providers: [
+                        CURRENCY_INPUT_MASK_DIRECTIVE_VALUE_ACCESSOR,
+                        DecimalPipe
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DecimalPipe }]; }, propDecorators: { handleFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], handleCut: [{
+                type: HostListener,
+                args: ['cut', ['$event']]
+            }], handleKeypress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], handleInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], handlePaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], handleBlur: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }] } });
+
+class MoneyComponent {
+    constructor() {
+        this.readonly = false;
+        this.hint = "";
+        this.display = "";
+        this.placeholder = "";
+        this.value = "";
+        this.width = "100%";
+        this.currency = "";
+        this.valueChange = new EventEmitter();
+        this.leave = new EventEmitter();
+        this.enterPress = new EventEmitter();
+        //validation input
+        this.required = true;
+        this.min = 0;
+        this.max = 9000000000000000; //Math.max 9000000000000000
+        //validation
+        this.control = new FormControl(this.value, [Validators.required, Validators.min(this.min), Validators.max(this.max)]);
+    }
+    ngOnInit() {
+        if (this.placeholder == "") {
+            this.placeholder = "Enter " + this.display;
+        }
+    }
+    ngOnChanges() {
+    }
+    ngAfterViewInit() {
+        this.initControl(this.control);
+    }
+    initControl(control) {
+        if (this.readonly) {
+            control.setValidators(null);
+            control.updateValueAndValidity();
+        }
+        if (!this.required && !this.readonly) {
+            control.setValidators([Validators.min(this.min), Validators.max(this.max)]);
+            this.control.updateValueAndValidity();
+        }
+    }
+    changed(x) {
+        this.valueChange.emit(x);
+    }
+    leaved() {
+        this.leave.emit();
+    }
+    enterPressed() {
+        this.enterPress.emit();
+    }
+    validate(control) {
+        if (this.required && control.hasError('required')) {
+            return `Required`;
+        }
+        if (parseFloat(this.value) < this.min) {
+            return `Minimun value is ${this.min}`;
+        }
+        if (parseFloat(this.value) > this.max) {
+            return `Maximum value is ${this.max}`;
+        }
+        if (control.hasError('min')) {
+            return `Minimun value is ${this.min}`;
+        }
+        if (control.hasError('max')) {
+            return `Maximum value is ${this.max}`;
+        }
+        return "";
+    }
+}
+MoneyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-money', template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], leave: [{
+                type: Output
+            }], enterPress: [{
+                type: Output
+            }], required: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class OptionComponent {
+    constructor() {
+        this.optionValue = "";
+        this.optionDisplay = "";
+        this.readonly = false;
+        this.value = "";
+        this.display = "";
+        this.show = false;
+        this.valueChange = new EventEmitter();
+        this.enterPress = new EventEmitter();
+    }
+    ngOnInit() {
+        this.OGValue = this.value;
+    }
+    changed() {
+        this.valueChange.emit(this.value);
+    }
+    enterPressed() {
+        this.valueChange.emit();
+    }
+    resetValue() {
+        this.value = this.OGValue;
+        this.changed();
+    }
+}
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n\r\n<mat-form-field style=\"margin-right:10px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right:30px\" *ngIf=\"show && !options\">\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput [(ngModel)]=\"value\" width=\"100\" (change)=\"changed()\" (keyup.enter)=\"changed()\" [placeholder]=\"'Enter ' + display\" autocomplete=\"off\" />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right: 20px;\" floatLabel=\"always\" width=\"100\" *ngIf=\"show && options\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [placeholder]=\"'Select ' + display\" [disabled]=\"readonly\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<!-- <spa-text *ngIf=\"show\" style=\"margin-right:30px\" [display]=\"'Enter ' + display\" (enterPress)=\"enterPressed()\" (valueChange)=\"changed($event.target.value)\" width=\"100\" [required]=\"false\" [(value)]=\"value\" ></spa-text> -->\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-option', template: "\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n\r\n<mat-form-field style=\"margin-right:10px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right:30px\" *ngIf=\"show && !options\">\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput [(ngModel)]=\"value\" width=\"100\" (change)=\"changed()\" (keyup.enter)=\"changed()\" [placeholder]=\"'Enter ' + display\" autocomplete=\"off\" />\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field style=\"margin-right: 20px;\" floatLabel=\"always\" width=\"100\" *ngIf=\"show && options\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [placeholder]=\"'Select ' + display\" [disabled]=\"readonly\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<!-- <spa-text *ngIf=\"show\" style=\"margin-right:30px\" [display]=\"'Enter ' + display\" (enterPress)=\"enterPressed()\" (valueChange)=\"changed($event.target.value)\" width=\"100\" [required]=\"false\" [(value)]=\"value\" ></spa-text> -->\r\n\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionDisplay: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], enterPress: [{
+                type: Output
+            }] } });
+
+class TilesComponent {
+    constructor() {
+        this.clickable = false;
+        this.tileClick = new EventEmitter();
+        this.selected = "";
+    }
+    ngOnInit() {
+    }
+    clicked(v) {
+        if (!this.clickable)
+            return;
+        if (this.selected == v.tileName) {
+            this.tileClick.emit("");
+            this.selected = "";
+        }
+        else {
+            this.tileClick.emit(v.tileName);
+            this.selected = v.tileName;
+        }
+    }
+}
+TilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { tiles: "tiles", clickable: "clickable" }, outputs: { tileClick: "tileClick" }, ngImport: i0, template: "      <div class=\"row align-items-center\">\r\n\r\n        <!-- <div class=\"col\" *ngFor=\"let row of tiles\" >\r\n\r\n          <mat-card *ngIf=\"row.visible\">\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label style=\"font-size:30px;font-weight:bold\" [ngStyle]=\"{'color':row.tileColor}\">{{row.tileValue}}</mat-label>\r\n\r\n          </div>\r\n\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label [ngStyle]=\"{'color':row.selected == true ? 'darkorange' : 'black' }\" style=\"font-size:12px;padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n            <mat-icon style=\"font-size: 17px; color:steelblue;\">info</mat-icon>\r\n\r\n          </div>\r\n          </mat-card>\r\n\r\n        </div> -->\r\n\r\n        <ng-container *ngFor=\"let row of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 10px;margin-right: 10px\" *ngIf=\"row.visible\" (click)=\"clicked(row)\">\r\n\r\n            <div class=\"row d-flex justify-content-center\">\r\n\r\n              <mat-label style=\"font-weight:bold\" [ngStyle]=\"{'color':row.tileColor,'font-size':row.tileName == selected ? '35px' : '30px' }\">{{row.tileValue}}</mat-label>\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center row align-items-center\">\r\n\r\n              <mat-label [ngStyle]=\"{'font-size':row.tileName == selected ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n              <mat-icon [matTooltip]=\"row.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':row.tileName == selected ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-tiles', template: "      <div class=\"row align-items-center\">\r\n\r\n        <!-- <div class=\"col\" *ngFor=\"let row of tiles\" >\r\n\r\n          <mat-card *ngIf=\"row.visible\">\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label style=\"font-size:30px;font-weight:bold\" [ngStyle]=\"{'color':row.tileColor}\">{{row.tileValue}}</mat-label>\r\n\r\n          </div>\r\n\r\n          <div class=\"row d-flex justify-content-center\">\r\n\r\n            <mat-label [ngStyle]=\"{'color':row.selected == true ? 'darkorange' : 'black' }\" style=\"font-size:12px;padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n            <mat-icon style=\"font-size: 17px; color:steelblue;\">info</mat-icon>\r\n\r\n          </div>\r\n          </mat-card>\r\n\r\n        </div> -->\r\n\r\n        <ng-container *ngFor=\"let row of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 10px;margin-right: 10px\" *ngIf=\"row.visible\" (click)=\"clicked(row)\">\r\n\r\n            <div class=\"row d-flex justify-content-center\">\r\n\r\n              <mat-label style=\"font-weight:bold\" [ngStyle]=\"{'color':row.tileColor,'font-size':row.tileName == selected ? '35px' : '30px' }\">{{row.tileValue}}</mat-label>\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center row align-items-center\">\r\n\r\n              <mat-label [ngStyle]=\"{'font-size':row.tileName == selected ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{row.tileName}}</mat-label>\r\n              <mat-icon [matTooltip]=\"row.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':row.tileName == selected ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tiles: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], tileClick: [{
+                type: Output
+            }] } });
+
+class StepsComponent {
+    constructor() {
+        this.value = "";
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+    }
+    ngOnChanges() {
+        this.pushSteps();
+    }
+    setStepper() {
+        if (this.value == "")
+            return;
+        this.stepper.selectedIndex = 0;
+        switch (this.value) {
+            case "Draft":
+                this.stepper.selectedIndex = 0;
+                break;
+            case "Head Approval":
+                this.pushStepper(1);
+                break;
+            case "CE Approval":
+                this.pushStepper(2);
+                break;
+            case "Booking":
+                this.pushStepper(3);
+                break;
+            case "BTA Approval":
+                this.pushStepper(4);
+                break;
+            case "Travel":
+                this.pushStepper(5);
+                break;
+            case "BTR Approval":
+                this.pushStepper(6);
+                break;
+            case "Travel Closure":
+                this.pushStepper(7);
+                break;
+        }
+    }
+    pushStepper(count) {
+        for (let index = 0; index < count + 1; index++) {
+            // const element = array[index];
+            this.stepper.selectedIndex = index;
+        }
+    }
+    pushSteps() {
+        if (this.steps.length == 0)
+            return;
+        if (this.value == "")
+            return;
+        this.stepper.selectedIndex = 0;
+        let i = 0;
+        for (let step of this.steps) {
+            if (step.name != this.value) {
+                this.stepper.selectedIndex = i;
+                i++;
+            }
+            else {
+                this.stepper.selectedIndex = i;
+                break;
+            }
+        }
+    }
+}
+StepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StepsComponent, selector: "spa-steps", inputs: { value: "value", steps: "steps" }, providers: [{
+            provide: STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
+        }], viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n\r\n\r\n<!-- <mat-horizontal-stepper class=\"test\" labelPosition=\"bottom\"  #stepper>\r\n  <mat-step [editable]=\"false\" label=\"Draft\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Head Approval\" > </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"CE Approval\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Booking\" state=\"booking\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"BTA Approval\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Travel\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"BTR Approval\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Closure\"> </mat-step>\r\n  <ng-template matStepperIcon=\"booking\"> <mat-icon>forum</mat-icon> </ng-template>\r\n</mat-horizontal-stepper> -->\r\n\r\n<mat-horizontal-stepper class=\"transparent\" labelPosition=\"bottom\"   #stepper>\r\n\r\n  <mat-step *ngFor=\"let row of steps\"\r\n    [editable]=\"false\"  [label]=\"row.name\">\r\n  </mat-step>\r\n\r\n  <!-- <ng-template *ngFor=\"let row of steps\"\r\n    [matStepperIcon]=\"row.name\"> <mat-icon>{{row.icon}}</mat-icon>\r\n  </ng-template> -->\r\n\r\n  <!-- <ng-template matStepperIcon=\"booking\">\r\n    <mat-icon>call_end</mat-icon>\r\n  </ng-template> -->\r\n\r\n  <!-- <ng-template ngFor let-xb [ngForOf]=\"steps\" matStepperIcon=\"Booking\"> <mat-icon>forum</mat-icon>\r\n\r\n  </ng-template> -->\r\n\r\n</mat-horizontal-stepper>\r\n", styles: [".transparent{background-color:#0000}:host ::ng-deep .mat-step-header{padding:5px!important}:host ::ng-deep .mat-stepper-horizontal-line{min-width:5px!important}:host ::ng-deep .mat-horizontal-content-container{padding:0!important}:host ::ng-deep .mat-horizontal-stepper-header{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i2$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-steps', providers: [{
+                            provide: STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
+                        }], template: "\r\n\r\n\r\n<!-- <mat-horizontal-stepper class=\"test\" labelPosition=\"bottom\"  #stepper>\r\n  <mat-step [editable]=\"false\" label=\"Draft\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Head Approval\" > </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"CE Approval\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Booking\" state=\"booking\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"BTA Approval\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Travel\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"BTR Approval\"> </mat-step>\r\n  <mat-step [editable]=\"false\" label=\"Closure\"> </mat-step>\r\n  <ng-template matStepperIcon=\"booking\"> <mat-icon>forum</mat-icon> </ng-template>\r\n</mat-horizontal-stepper> -->\r\n\r\n<mat-horizontal-stepper class=\"transparent\" labelPosition=\"bottom\"   #stepper>\r\n\r\n  <mat-step *ngFor=\"let row of steps\"\r\n    [editable]=\"false\"  [label]=\"row.name\">\r\n  </mat-step>\r\n\r\n  <!-- <ng-template *ngFor=\"let row of steps\"\r\n    [matStepperIcon]=\"row.name\"> <mat-icon>{{row.icon}}</mat-icon>\r\n  </ng-template> -->\r\n\r\n  <!-- <ng-template matStepperIcon=\"booking\">\r\n    <mat-icon>call_end</mat-icon>\r\n  </ng-template> -->\r\n\r\n  <!-- <ng-template ngFor let-xb [ngForOf]=\"steps\" matStepperIcon=\"Booking\"> <mat-icon>forum</mat-icon>\r\n\r\n  </ng-template> -->\r\n\r\n</mat-horizontal-stepper>\r\n", styles: [".transparent{background-color:#0000}:host ::ng-deep .mat-step-header{padding:5px!important}:host ::ng-deep .mat-stepper-horizontal-line{min-width:5px!important}:host ::ng-deep .mat-horizontal-content-container{padding:0!important}:host ::ng-deep .mat-horizontal-stepper-header{pointer-events:none!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { stepper: [{
+                type: ViewChild,
+                args: ['stepper']
+            }], value: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }] } });
+
+class AttachComponent {
+    constructor() {
+        this.message = "Drag and drop files here";
+        this.files = [];
+        this.filesChange = new EventEmitter();
+        this.upload = new EventEmitter();
+        this.enableUpload = false;
+    }
+    ngOnInit() {
+    }
+    /**
+     * on file drop handler
+     */
+    onFileDropped($event) {
+        this.prepareFilesList($event);
+    }
+    /**
+     * handle file from browsing
+     */
+    fileBrowseHandler(event) {
+        let files = event.target.files;
+        this.prepareFilesList(files);
+    }
+    /**
+     * Delete file from files list
+     * @param index (File index)
+     */
+    deleteFile(index) {
+        this.files.splice(index, 1);
+    }
+    /**
+     * Simulate the upload process
+     */
+    // uploadFilesSimulator(index: number) {
+    //   setTimeout(() => {
+    //     if (index === this.files.length) {
+    //       return;
+    //     } else {
+    //       const progressInterval = setInterval(() => {
+    //         if (this.files[index].progress === 100) {
+    //           clearInterval(progressInterval);
+    //           this.uploadFilesSimulator(index + 1);
+    //         } else {
+    //           this.files[index].progress += 5;
+    //         }
+    //       }, 200);
+    //     }
+    //   }, 1000);
+    // }
+    /**
+     * Convert Files list to normal array list
+     * @param files (Files List)
+     */
+    prepareFilesList(files) {
+        for (const item of files) {
+            item.progress = 0;
+            this.files.push(item);
+        }
+        // this.uploadFilesSimulator(0);
+    }
+    /**
+     * format bytes
+     * @param bytes (File size in bytes)
+     * @param decimals (Decimals point)
+     */
+    formatBytes(bytes, decimals) {
+        if (bytes === 0) {
+            return '0 Bytes';
+        }
+        const k = 1024;
+        const dm = decimals <= 0 ? 0 : decimals || 2;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    }
+    uploaded() {
+        this.upload.emit();
+    }
+    filesChanged() {
+        this.filesChange.emit(this.files);
+    }
+}
+AttachComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AttachComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AttachComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AttachComponent, selector: "spa-attach", inputs: { message: "message", files: "files", enableUpload: "enableUpload" }, outputs: { filesChange: "filesChange", upload: "upload" }, ngImport: i0, template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n      <h4>or</h4>\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:200px;padding:2rem;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AttachComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-attach', template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n      <h4>or</h4>\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:200px;padding:2rem;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
+                type: Input
+            }], files: [{
+                type: Input
+            }], filesChange: [{
+                type: Output
+            }], upload: [{
+                type: Output
+            }], enableUpload: [{
+                type: Input
+            }] } });
+
+class ChipsComponent {
+    constructor(messageService) {
+        this.messageService = messageService;
+        this.icon = "";
+        this.removable = false;
+        this.addable = false;
+        // @Output() chipClick = new EventEmitter();
+        this.click = new EventEmitter();
+        this.remove = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    clicked(chip) {
+        if (typeof chip != 'string') {
+            return;
+        }
+        if (chip) {
+            this.click.emit(chip);
+        }
+    }
+    removed(chip) {
+        // const index = this.chips.indexOf(chip);
+        // if (index >= 0) {
+        //   this.chips.splice(index, 1);
+        // }
+        this.messageService.confirm(`Remove ${chip} ?`).subscribe((result) => {
+            if (result == "yes") {
+                this.remove.emit(chip);
+            }
+            ;
+        });
+    }
+}
+ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-chips', template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { icon: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], addable: [{
+                type: Input
+            }], chips: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }] } });
+
+class LoaderService {
+    constructor() {
+        this.isLoading = new BehaviorSubject(false);
+    }
+}
+LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class LoaderComponent {
+    constructor(loaderService) {
+        this.loaderService = loaderService;
+        this.logo = "";
+        this.loaderService.isLoading.subscribe((v) => {
+            this.loading = v;
+        });
+    }
+    ngOnInit() {
+    }
+}
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderComponent, deps: [{ token: LoaderService }], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoaderComponent, selector: "spa-loader", inputs: { logo: "logo" }, ngImport: i0, template: "<div class=\"progress-loader\" style=\"z-index: 9999;\" [hidden]=\"!loading\">\r\n  <div class=\"loading-spinner\">\r\n\r\n      <img *ngIf=\"logo==''\" style=\"width: 100px;\"\r\n      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\"\r\n\r\n      >\r\n\r\n      <img *ngIf=\"logo!=''\" [src]=\"logo\" style=\"width: 100px;\" />\r\n\r\n\r\n      <span id=\"loadingMessage\" class=\"loading-message\">Please wait...</span>\r\n  </div>\r\n</div>\r\n", styles: [".loading-spinner{background-color:#0000001f;position:absolute;width:100%;top:0;left:0;height:100vh;align-items:center;justify-content:center;display:grid}.loading-spinner img{align-self:end}.loading-message{text-align:center;align-self:start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-loader', template: "<div class=\"progress-loader\" style=\"z-index: 9999;\" [hidden]=\"!loading\">\r\n  <div class=\"loading-spinner\">\r\n\r\n      <img *ngIf=\"logo==''\" style=\"width: 100px;\"\r\n      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\"\r\n\r\n      >\r\n\r\n      <img *ngIf=\"logo!=''\" [src]=\"logo\" style=\"width: 100px;\" />\r\n\r\n\r\n      <span id=\"loadingMessage\" class=\"loading-message\">Please wait...</span>\r\n  </div>\r\n</div>\r\n", styles: [".loading-spinner{background-color:#0000001f;position:absolute;width:100%;top:0;left:0;height:100vh;align-items:center;justify-content:center;display:grid}.loading-spinner img{align-self:end}.loading-message{text-align:center;align-self:start}\n"] }]
+        }], ctorParameters: function () { return [{ type: LoaderService }]; }, propDecorators: { logo: [{
+                type: Input
+            }] } });
+
+class NavMenuComponent {
+    constructor(router, authService) {
+        this.router = router;
+        this.authService = authService;
+        this.isExpanded = false;
+        this.appConfig = new AppConfig();
+    }
+    ngOnInit() {
+        this.authService.loggedUserFullName.subscribe(user => this.loggedUserFullName = user);
+        this.authService.myRoleObserv.subscribe(rol => this.myRole = rol);
+        this.authService.loggedinObserv.subscribe(obj => this.loggedin = obj);
+    }
+    collapse() {
+        this.isExpanded = false;
+    }
+    toggle() {
+        this.isExpanded = !this.isExpanded;
+    }
+    // logoff() {
+    //   // this.authService.updateloggedin(false);
+    //   // this.authService.updateRole(new Role());
+    //   this.router.navigate(["login"]);
+    //   // this.storageService.clear();
+    // }
+    redirectTo(link) {
+        this.collapse();
+        if (link != "") {
+            this.router.navigate([link]);
+        }
+    }
+}
+NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$3.Router }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<header *ngIf=\"loggedin\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n      <!--<a class=\"navbar-brand\" [routerLink]=\"['/']\">Orbit</a>-->\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n\r\n      <div style=\"font-size: 20px;\">\r\n        {{appConfig.appName}}\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\"navitems navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"redirectTo('login')\" class=\"d-none d-sm-block\" style=\"margin-right:2em\"> <mat-icon>logout</mat-icon> </button>\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon>account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"redirectTo('login')\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;font-weight:600}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n      <!--<a class=\"navbar-brand\" [routerLink]=\"['/']\">Orbit</a>-->\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n\r\n      <div style=\"font-size: 20px;\">\r\n        {{appConfig.appName}}\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\"navitems navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"redirectTo('login')\" class=\"d-none d-sm-block\" style=\"margin-right:2em\"> <mat-icon>logout</mat-icon> </button>\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon>account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"redirectTo('login')\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;font-weight:600}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: AuthService }]; }, propDecorators: { appConfig: [{
+                type: Input
+            }] } });
+
+class LoaderInterceptor {
+    constructor(loaderService, messageService, authService, router, logService) {
+        this.loaderService = loaderService;
+        this.messageService = messageService;
+        this.authService = authService;
+        this.router = router;
+        this.logService = logService;
+        this.requests = [];
+    }
+    removeRequest(req) {
+        const i = this.requests.indexOf(req);
+        if (i >= 0) {
+            this.requests.splice(i, 1);
+        }
+        this.loaderService.isLoading.next(this.requests.length > 0);
+    }
+    intercept(request, next) {
+        let requestClone = request.clone({
+            setHeaders: {
+                Authorization: "Bearer " + this.authService.tokenSource.value
+            }
+        });
+        this.requests.push(requestClone);
+        if (this.requests.length > 1) {
+            this.logService.info("Multiple connections detected >= " + this.requests.length);
+        }
+        this.loaderService.isLoading.next(true);
+        return Observable.create(observer => {
+            const subscription = next.handle(requestClone).subscribe(event => {
+                if (event instanceof HttpResponse) {
+                    this.removeRequest(requestClone);
+                    observer.next(event);
+                }
+            }, (error) => {
+                this.removeRequest(requestClone);
+                observer.error(error);
+                if (error.status === 401) {
+                    this.router.navigate(["login"]);
+                    this.messageService.toast('Unauthorised: Please login again');
+                }
+                else if (error.status === 500) {
+                    console.log(error.error);
+                    this.messageService.toast('System Error');
+                }
+                else if (error.statusText == 'Unknown Error') {
+                    this.messageService.toast('Connection Error');
+                }
+                else {
+                    this.messageService.toast('Error: ' + error.statusText);
+                }
+            }, () => {
+                this.removeRequest(requestClone);
+                observer.complete();
+            });
+            // remove request from queue when cancelled
+            return () => {
+                this.removeRequest(requestClone);
+                subscription.unsubscribe();
+            };
+        });
+    }
+}
+LoaderInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderInterceptor, deps: [{ token: LoaderService }, { token: MessageService }, { token: AuthService }, { token: i1$3.Router }, { token: LogService }], target: i0.ɵɵFactoryTarget.Injectable });
+LoaderInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoaderInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: LoaderService }, { type: MessageService }, { type: AuthService }, { type: i1$3.Router }, { type: LogService }]; } });
+
+class CurrencyInputModule {
+}
+CurrencyInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CurrencyInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CurrencyInputModule, declarations: [CurrencyInputMaskDirective], imports: [CommonModule,
+        FormsModule], exports: [CurrencyInputMaskDirective] });
+CurrencyInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyInputModule, imports: [CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule
+                    ],
+                    declarations: [
+                        CurrencyInputMaskDirective
+                    ],
+                    exports: [
+                        CurrencyInputMaskDirective
+                    ]
+                }]
+        }] });
+
+class NumberComponent {
+    constructor() {
+        // options: FormGroup;
+        this.hideRequiredControl = new FormControl(true);
+        this.hide = true; //for password only
+        this.readonly = false;
+        this.hint = "";
+        this.display = "";
+        this.placeholder = "";
+        this.value = 0;
+        this.width = "100%";
+        this.valueChange = new EventEmitter();
+        this.leave = new EventEmitter();
+        this.enterPress = new EventEmitter();
+        //validation input
+        this.required = true;
+        this.min = 0;
+        this.max = 9000000000000000; //Math.max
+        this.step = 1;
+        //validation
+        this.control = new FormControl(this.value, [Validators.required, Validators.min(this.min), Validators.max(this.max)]);
+    }
+    ngOnInit() {
+        if (this.placeholder == "") {
+            this.placeholder = "Enter " + this.display;
+        }
+    }
+    ngAfterViewInit() {
+        this.initControl(this.control);
+    }
+    initControl(control) {
+        if (this.readonly) {
+            control.setValidators(null);
+            control.updateValueAndValidity();
+        }
+        if (!this.required && !this.readonly) {
+            control.setValidators([Validators.minLength(this.min), Validators.maxLength(this.max)]);
+            this.control.updateValueAndValidity();
+        }
+    }
+    changed() {
+        this.valueChange.emit(this.value);
+    }
+    leaved() {
+        this.leave.emit();
+    }
+    enterPressed() {
+        this.enterPress.emit();
+    }
+    validate(control) {
+        if (this.required && control.hasError('required')) {
+            return `Required`;
+        }
+        if (control.hasError('min')) {
+            return `Minimun value is ${this.min}`;
+        }
+        if (control.hasError('max')) {
+            return `Maximum value is ${this.max}`;
+        }
+        return "";
+    }
+}
+NumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-number', template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], leave: [{
+                type: Output
+            }], enterPress: [{
+                type: Output
+            }], required: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }] } });
+
+class CamelToWordsPipe {
+    transform(value) {
+        if (!value)
+            return value;
+        if (typeof value !== 'string')
+            return value;
+        if (value.length == 0)
+            return value;
+        let v = value.charAt(0).toUpperCase() + value.substring(1);
+        return v.replace(/([A-Z]+)*([A-Z][a-z])/g, "$1 $2");
+    }
+}
+CamelToWordsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CamelToWordsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, name: "camelToWords" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CamelToWordsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'camelToWords'
+                }]
+        }] });
+
+class FormComponent {
+    constructor(messageService, dataService) {
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.buttonDisplay = "Submit";
+        this.isProcessing = false;
+        this.multiColumn = false;
+        this.buttonClick = new EventEmitter();
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (!this.config.fields) {
+            this.messageService.toast("Please Configure Form Fields");
+            return;
+        }
+        if (!this.data) {
+            this.messageService.toast("Please Configure Form Data");
+            return;
+        }
+        this.fields = this.config.fields;
+        if (this.config.multiColumn) {
+            this.multiColumn = this.config.multiColumn;
+        }
+        else {
+            this.multiColumn = this.fields.length > 2;
+        }
+        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.display) {
+            this.buttonDisplay = this.config.button.display;
+        }
+    }
+    ngOnChanges() {
+        console.log("changed");
+    }
+    buttonClicked() {
+        console.log("Button Clicked");
+        this.buttonClick.emit(this.data);
+        console.log(this.data);
+        let button = this.config.button;
+        if (!button) {
+            return;
+        }
+        //validation
+        let resp = Core.validateObject(this.fields, this.data);
+        if (resp != '') {
+            this.messageService.toast(resp);
+            return;
+        }
+        if (button.confirm) {
+            this.messageService.confirm(`${button.confirm.message}`).subscribe((result) => {
+                if (result == "yes") {
+                    this.processCall(button);
+                }
+            });
+        }
+        else {
+            this.processCall(button);
+        }
+    }
+    processCall(button) {
+        if (!button.action)
+            return;
+        this.isProcessing = true;
+        this.dataService.CallApi(button.action, this.data).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                if (button.action.successMessage) {
+                    this.messageService.toast(button.action.successMessage);
+                }
+                else {
+                    this.messageService.toast("Submitted");
+                }
+                if (this.config.reset) {
+                    Core.resetObject(this.fields, this.data);
+                }
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        });
+    }
+}
+FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { data: "data", config: "config" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\" >\r\n\r\n  <div [ngClass]=\"field.span ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\r\n\r\n      <spa-text  *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"isProcessing\" (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+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 ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\r\n\r\n      <spa-text  *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"isProcessing\" (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { data: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class detailsDialog {
+    constructor(dataService, messageService, dialogRef, data) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.smallScreen = false;
+        this.isLoadComplete = false;
+        this.isProcessing = false;
+    }
+    ngOnInit() {
+        this.tableConfig = this.data.config;
+        this.formConfig = this.tableConfig.formConfig;
+        this.formConfig.mode = this.data.mode;
+        this.smallScreen = this.data.smallScreen;
+        if (this.formConfig.mode == "create") {
+            this.details = Core.generateObject(this.formConfig.fields);
+        }
+        else {
+            this.details = this.data.details;
+        }
+        this.isLoadComplete = true;
+    }
+    setMode(newMode) {
+        this.formConfig.mode = newMode;
+    }
+    create() {
+        console.log(this.details);
+        //validation
+        let resp = Core.validateObject(this.formConfig.fields, this.details);
+        if (resp != '') {
+            this.messageService.toast(resp);
+            return;
+        }
+        let b = this.tableConfig.buttons.find(x => x.name == "create");
+        if (!b || !b.action) {
+            this.dialogRef.close({ message: 'emit', data: this.details });
+            return;
+        }
+        this.isProcessing = true;
+        this.dataService.CallApi(b.action, this.details).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                if (b.action.successMessage) {
+                    this.messageService.toast(b.action.successMessage);
+                }
+                else {
+                    this.messageService.toast("Created");
+                }
+                this.dialogRef.close({ message: 'success', data: this.details });
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse);
+            }
+        });
+    }
+    edit() {
+        console.log("Edit");
+        //validation
+        let resp = Core.validateObject(this.formConfig.fields, this.details);
+        if (resp != '') {
+            this.messageService.toast(resp);
+            return;
+        }
+        let b = this.tableConfig.buttons.find(x => x.name == "edit");
+        if (!b || !b.action) {
+            this.dialogRef.close({ message: 'emit', data: this.details });
+            return;
+        }
+        this.isProcessing = true;
+        this.dataService.CallApi(b.action, this.details).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                if (b.action.successMessage) {
+                    this.messageService.toast(b.action.successMessage);
+                }
+                else {
+                    this.messageService.toast("Updated");
+                }
+                this.dialogRef.close({ message: 'success', data: this.details });
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse);
+            }
+        });
+    }
+    delete() {
+        this.messageService.confirm(`DELETE ?`).subscribe((result) => {
+            if (result == "yes") {
+                console.log("Delete");
+                let b = this.tableConfig.buttons.find(x => x.name == "delete");
+                if (!b) {
+                    this.dialogRef.close({ message: 'success', data: this.details });
+                    return;
+                }
+                this.isProcessing = true;
+                this.dataService.CallApi(b.action, this.details).subscribe((apiResponse) => {
+                    this.isProcessing = false;
+                    if (apiResponse.success) {
+                        if (b.action.successMessage) {
+                            this.messageService.toast(b.action.successMessage);
+                        }
+                        else {
+                            this.messageService.toast("Deleted");
+                        }
+                        this.dialogRef.close({ message: 'success', data: this.details });
+                    }
+                    else {
+                        this.messageService.toast("Error: " + apiResponse);
+                    }
+                });
+            }
+        });
+    }
+}
+detailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+detailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: detailsDialog, selector: "app-viewModel", ngImport: i0, template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["data", "config"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-viewModel', template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+;
+
+class TableComponent {
+    constructor(dataService, messageService, breakpointObserver, dialog) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.breakpointObserver = breakpointObserver;
+        this.dialog = dialog;
+        this.actionsWidth = "50px";
+        this.data = [];
+        this.refreshClick = new EventEmitter();
+        this.createClick = new EventEmitter();
+        this.viewClick = new EventEmitter();
+        this.editClick = new EventEmitter();
+        this.deleteClick = new EventEmitter();
+        this.custom1Click = new EventEmitter();
+        this.custom2Click = new EventEmitter();
+        this.custom3Click = new EventEmitter();
+        this.smallScreen = false;
+        this.options = [];
+        this.displayedColumns = [];
+        // detect screen size changes
+        this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
+            if (result.matches) {
+                this.smallScreen = true;
+                this.setColumns();
+            }
+            else {
+                this.smallScreen = false;
+                this.setColumns();
+            }
+        });
+    }
+    ngOnInit() {
+        this.options = this.config.columns;
+        this.setColumns();
+        this.createButton = this.getButton('create');
+        this.viewButton = this.getButton('view');
+        this.editButton = this.getButton('edit');
+        this.deleteButton = this.getButton('delete');
+        this.custom1Button = this.getButton('custom1');
+        this.custom2Button = this.getButton('custom2');
+        this.custom3Button = this.getButton('custom3');
+        if (this.config.loadAction) {
+            this.loadData();
+        }
+        this.formDefaults();
+    }
+    ngOnChanges() {
+        if (!this.config.loadAction) {
+            console.log("Table data Changed");
+            this.dataSource = this.data;
+            this.tableDataSource = new MatTableDataSource(this.dataSource);
+            setTimeout(() => { this.tableDataSource.paginator = this.tablePaginator; }, 5);
+        }
+    }
+    getButton(name) {
+        if (!this.config.buttons)
+            return null;
+        return this.config.buttons.find(x => x.name == name);
+    }
+    getIcon(buttonName) {
+        let b = this.getButton(buttonName);
+        if (b.icon) {
+            return b.icon.name;
+        }
+        let i = 'pageview';
+        switch (buttonName) {
+            case 'view':
+                i = 'pageview';
+                break;
+            case 'edit':
+                i = 'edit';
+                break;
+            case 'delete':
+                i = 'delete';
+                break;
+            default:
+                break;
+        }
+        return i;
+    }
+    setColumns() {
+        var _a, _b;
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.columns)) {
+            return;
+        }
+        if (this.smallScreen) {
+            this.displayedColumns = this.config.minColumns;
+        }
+        else {
+            this.displayedColumns = this.config.columns.map(({ name }) => name);
+        }
+        let buttonsCount = (_b = this.config.buttons.filter(x => x.name != 'create').length) !== null && _b !== void 0 ? _b : 0;
+        if (buttonsCount > 0) {
+            if (!this.displayedColumns.find(x => x == 'action') && this.config.buttons) {
+                this.displayedColumns.push("action");
+            }
+            this.actionsWidth = `${buttonsCount * 40 + 20}px`;
+        }
+    }
+    getOptions(column) {
+        let x = this.options.find(opt => opt.name === column);
+        return x;
+    }
+    testIconCondition(column, row) {
+        const option = this.getOptions(column);
+        if (option && option.icon && !option.icon.condition) {
+            return true;
+        }
+        if (option && option.icon && option.icon.condition) {
+            return option.icon.condition(row[column]);
+        }
+        return false;
+    }
+    testDisabled(row, buttonName) {
+        let button = this.getButton(buttonName);
+        if (button.disabled) {
+            return button.disabled(row);
+        }
+        return false;
+    }
+    testVisible(row, buttonName) {
+        let button = this.getButton(buttonName);
+        if (button.visible) {
+            return button.visible(row);
+        }
+        return true;
+    }
+    //Actions
+    refreshClicked() {
+        console.log("Refresh");
+        this.refreshClick.emit();
+        if (this.config.loadAction) {
+            this.loadData();
+        }
+    }
+    view(x) {
+        console.log("View");
+        this.viewClick.emit(x);
+        // this.doAction('view', x);
+    }
+    create(x) {
+        console.log("Create " + x);
+        this.createClick.emit(x);
+        this.doAction('create', x);
+    }
+    edit(x) {
+        console.log("Edit " + x);
+        this.editClick.emit(x);
+        this.doAction('edit', x);
+    }
+    delete(x) {
+        console.log("Delete");
+        this.deleteClick.emit(x);
+        this.doAction('delete', x);
+    }
+    custom1(x) {
+        console.log("Custom 1");
+        this.custom1Click.emit(x);
+        this.doAction('custom1', x);
+    }
+    custom2(x) {
+        console.log("Custom 2");
+        this.custom2Click.emit(x);
+        this.doAction('custom2', x);
+    }
+    custom3(x) {
+        console.log("Custom 3");
+        this.custom3Click.emit(x);
+        this.doAction('custom3', x);
+    }
+    viewModel(row) {
+        let button = this.getButton('view');
+        if (button && !button.dialog) {
+            this.view(row);
+            return;
+        }
+        if (!this.config.formConfig) {
+            this.messageService.toast("Please configure form");
+            return;
+        }
+        const dialogRef = this.dialog.open(detailsDialog, {
+            width: "900px",
+            data: { mode: "view", config: this.config, details: row, smallScreen: this.smallScreen },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result.message) {
+                this.refreshClicked();
+            }
+        });
+    }
+    newModel() {
+        let button = this.getButton('create');
+        if (button && !button.dialog) {
+            this.create('');
+            return;
+        }
+        if (!this.config.formConfig) {
+            this.messageService.toast("Please configure form");
+            return;
+        }
+        const dialogRef = this.dialog.open(detailsDialog, {
+            width: "900px",
+            data: { mode: "create", config: this.config, smallScreen: this.smallScreen }
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result.message == "success") {
+                this.create(result.data);
+                this.refreshClicked();
+            }
+            else if (result.message == "emit") {
+                this.create(result.data);
+            }
+        });
+    }
+    editModel(row) {
+        let button = this.getButton('edit');
+        if (button && !button.dialog) {
+            this.edit(row);
+            return;
+        }
+        if (!this.config.formConfig) {
+            this.messageService.toast("Please configure form");
+            return;
+        }
+        const dialogRef = this.dialog.open(detailsDialog, {
+            width: "900px",
+            data: { mode: "edit", config: this.config, details: row, smallScreen: this.smallScreen },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result.message == "success") {
+                this.edit(result.data);
+                this.refreshClicked();
+            }
+            else if (result.message == "emit") {
+                this.edit(result.data);
+            }
+        });
+    }
+    deleteModel(row) {
+        let button = this.getButton('delete');
+        if (button && !button.dialog) {
+            this.delete(row);
+            return;
+        }
+        this.messageService.confirm(`DELETE ?`).subscribe((result) => {
+            if (result == "yes") {
+                this.delete(row);
+                this.refreshClicked();
+            }
+        });
+    }
+    doAction(buttonName, row) {
+        let b = this.getButton(buttonName);
+        if (!b)
+            return;
+        if (b.action && buttonName != 'delete')
+            return;
+        if (!b.action)
+            return;
+        this.dataService.CallApi(b.action, row).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                if (b.action.successMessage) {
+                    this.messageService.toast(b.action.successMessage);
+                }
+                else {
+                    this.messageService.toast("Updated");
+                }
+                this.refreshClicked();
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        });
+    }
+    loadData() {
+        console.log("loading");
+        if (this.config.loadAction) {
+            this.dataService.CallApi(this.config.loadAction, "").subscribe((apiResponse) => {
+                this.dataSource = apiResponse.data;
+                this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                this.tableDataSource.paginator = this.tablePaginator;
+                if (apiResponse.success) {
+                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                    this.tableDataSource.paginator = this.tablePaginator;
+                }
+                else {
+                    this.messageService.toast("Error: " + JSON.stringify(apiResponse));
+                }
+            });
+        }
+    }
+    formDefaults() {
+        if (!this.config.formConfig) {
+            let config = new FormConfig;
+            config.fields = [];
+            this.config.columns.forEach(column => {
+                let field = { name: column.name, type: column.type };
+                config.fields.push(field);
+            });
+            this.config.formConfig = config;
+        }
+    }
+}
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config" }, outputs: { refreshClick: "refreshClick", createClick: "createClick", viewClick: "viewClick", editClick: "editClick", deleteClick: "deleteClick", custom1Click: "custom1Click", custom2Click: "custom2Click", custom3Click: "custom3Click" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"top\">\n\n  <div >\n    <!-- <button *ngIf=\"config.newText\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{config.newText}}</button> -->\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{createButton.display}}</button>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-table', template: "\n<div class=\"top\">\n\n  <div >\n    <!-- <button *ngIf=\"config.newText\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{config.newText}}</button> -->\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" (click)=\"newModel()\">{{createButton.display}}</button>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon *ngIf=\"column.icon && testIconCondition(column.name, row)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$3.BreakpointObserver }, { type: i4.MatDialog }]; }, propDecorators: { tablePaginator: [{
+                type: ViewChild,
+                args: ['tablePaginator']
+            }], data: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], refreshClick: [{
+                type: Output
+            }], createClick: [{
+                type: Output
+            }], viewClick: [{
+                type: Output
+            }], editClick: [{
+                type: Output
+            }], deleteClick: [{
+                type: Output
+            }], custom1Click: [{
+                type: Output
+            }], custom2Click: [{
+                type: Output
+            }], custom3Click: [{
+                type: Output
+            }] } });
+
+class TinSpaModule {
+}
+TinSpaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, declarations: [TinSpaComponent, TextComponent, CheckComponent, DateComponent, DatetimeComponent, LabelComponent, SelectComponent,
+        ActivityComponent, FilterComponent, messageDialog, MoneyComponent, OptionComponent, TilesComponent, StepsComponent,
+        AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent], imports: [SpaMatModule,
+        HttpClientModule,
+        CurrencyInputModule], exports: [TinSpaComponent,
+        SpaMatModule,
+        TextComponent,
+        messageDialog,
+        NavMenuComponent,
+        LoaderComponent,
+        TilesComponent,
+        DateComponent,
+        SelectComponent,
+        DatetimeComponent,
+        CheckComponent,
+        AttachComponent,
+        MoneyComponent,
+        ChipsComponent,
+        ActivityComponent,
+        OptionComponent,
+        LabelComponent,
+        StepsComponent,
+        FilterComponent,
+        TableComponent, detailsDialog,
+        FormComponent,
+        NumberComponent] });
+TinSpaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, providers: [
+        { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
+        { provide: LocationStrategy, useClass: HashLocationStrategy },
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'legacy' } },
+        CurrencyPipe, DatePipe
+    ], imports: [SpaMatModule,
+        HttpClientModule,
+        CurrencyInputModule, SpaMatModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TinSpaComponent, TextComponent, CheckComponent, DateComponent, DatetimeComponent, LabelComponent, SelectComponent,
+                        ActivityComponent, FilterComponent, messageDialog, MoneyComponent, OptionComponent, TilesComponent, StepsComponent,
+                        AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent
+                    ],
+                    imports: [
+                        SpaMatModule,
+                        HttpClientModule,
+                        CurrencyInputModule
+                    ],
+                    exports: [
+                        TinSpaComponent,
+                        SpaMatModule,
+                        TextComponent,
+                        messageDialog,
+                        NavMenuComponent,
+                        LoaderComponent,
+                        TilesComponent,
+                        DateComponent,
+                        SelectComponent,
+                        DatetimeComponent,
+                        CheckComponent,
+                        AttachComponent,
+                        MoneyComponent,
+                        ChipsComponent,
+                        ActivityComponent,
+                        OptionComponent,
+                        LabelComponent,
+                        StepsComponent,
+                        FilterComponent,
+                        TableComponent, detailsDialog,
+                        FormComponent,
+                        NumberComponent
+                    ],
+                    providers: [
+                        { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
+                        { provide: LocationStrategy, useClass: HashLocationStrategy },
+                        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'legacy' } },
+                        CurrencyPipe, DatePipe
+                    ],
+                }]
+        }] });
+
+class LoginComponent {
+    constructor(httpService, storageService, router, messageService, dataService, authService, logService, route) {
+        this.httpService = httpService;
+        this.storageService = storageService;
+        this.router = router;
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.authService = authService;
+        this.logService = logService;
+        this.route = route;
+        this.style = "default";
+        this.email = "";
+        this.password = "";
+        this.user = new User();
+        this.hide = true;
+        this.isProcessing = false;
+        this.appConfig = new AppConfig();
+    }
+    ngOnInit() {
+        this.authService.Updateloggedin(false);
+        this.authService.UpdateRole(null);
+        this.storageService.clear();
+        this.dataService.appConfigObserv.subscribe(x => this.appConfig = x);
+        if (this.route.snapshot.queryParams["redirectTo"] != undefined) {
+            this.redirectPath = this.route.snapshot.queryParams["redirectTo"];
+        }
+        else {
+            this.redirectPath = "home";
+        }
+    }
+    signup() {
+        this.router.navigate(["signup"]);
+    }
+    recoverAccount() {
+        this.router.navigate(["recover-account"]);
+    }
+    login() {
+        if (this.user.userName == "" || this.user.password == "") {
+            this.messageService.toast("Please enter your credentials");
+            return;
+        }
+        this.logService.info("logging in");
+        this.isProcessing = true;
+        this.user.userName = this.user.userName;
+        this.dataService.Login(this.user).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                if (apiResponse.data.authType == 'local' && !this.appConfig.localAuth) {
+                    this.messageService.toast("Contact Admin: Authentication Type error");
+                    return;
+                }
+                if (apiResponse.data.authType == 'AD' && !this.appConfig.ADAuth) {
+                    this.messageService.toast("Contact Admin: Authentication Type error");
+                    return;
+                }
+                this.authService.Updateloggedin(true);
+                this.authService.UpdateToken(apiResponse.data.token);
+                this.storageService.store(Constants.AUTH_TOKEN, apiResponse.data.token);
+                this.authService.UpdateTokenExpire(apiResponse.data.expiration);
+                this.storageService.store(Constants.AUTH_TOKEN_EXPIRE, apiResponse.data.expiration);
+                this.authService.UpdateCurrentUser(this.user.userName);
+                this.storageService.store(Constants.AUTH_USER, this.user.userName);
+                this.authService.updateLoggedUserFullName(apiResponse.data.firstName);
+                this.storageService.store(Constants.AUTH_NAME, apiResponse.data.firstName);
+                this.authService.UpdateRole(apiResponse.data.role);
+                this.storageService.store(Constants.AUTH_ROLES, JSON.stringify(apiResponse.data.role));
+                this.logService.info("logged in");
+                if (apiResponse.data.changePassword == true && apiResponse.data.authType == 'local') {
+                    this.router.navigate(["home/user/change-password"], {
+                        queryParams: { redirectTo: this.redirectPath },
+                        queryParamsHandling: 'merge',
+                        skipLocationChange: false
+                    });
+                    return;
+                }
+                this.router.navigate([this.redirectPath]);
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+                this.user.password = "";
+            }
+        }, (error) => {
+            this.isProcessing = false;
+            this.messageService.toast(this.httpService.Error(error));
+        });
+    }
+}
+LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoginComponent, deps: [{ token: HttpService }, { token: StorageService }, { token: i1$3.Router }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: LogService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoginComponent, selector: "spa-login", ngImport: i0, template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content>\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions>\r\n\r\n          <div class=\"buttons\">\r\n\r\n            <button id=\"btnLogin\" mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n\r\n            <button *ngIf=\"appConfig.selfService\" id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n\r\n          </div>\r\n\r\n\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i14.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i14.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i14.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i14.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "spa-login", template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content>\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions>\r\n\r\n          <div class=\"buttons\">\r\n\r\n            <button id=\"btnLogin\" mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n\r\n            <button *ngIf=\"appConfig.selfService\" id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n\r\n          </div>\r\n\r\n\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}\n"] }]
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: StorageService }, { type: i1$3.Router }, { type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: LogService }, { type: i1$3.ActivatedRoute }]; } });
+
+class SignupComponent {
+    constructor(httpService, messageService, dataService, authService) {
+        this.httpService = httpService;
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.authService = authService;
+        this.isProcessing = false;
+        this.user = new User();
+        this.profile = new Profile();
+        this.account = new Account();
+    }
+    ngOnInit() {
+        this.account.user = this.user;
+        this.account.profile = this.profile;
+    }
+    create() {
+        this.profile.userName = this.user.userName;
+        this.isProcessing = true;
+        this.dataService.RegisterAccount(this.account).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.message == "success") {
+                this.messageService.toast("Account Created");
+                this.user = new User();
+                this.profile = new Profile();
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        }, (error) => {
+            this.isProcessing = false;
+            this.messageService.toast(this.httpService.Error(error));
+        });
+    }
+}
+SignupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SignupComponent, deps: [{ token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+SignupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SignupComponent, selector: "spa-signup", ngImport: i0, template: "\r\n<h4 style=\"padding-top: 30px;\">Signup</h4>\r\n\r\n<hr/>\r\nComplete the form below.\r\n\r\n<div class=\"container tin-grid\"  style=\"font-size:14px;\">\r\n\r\n    <spa-text display=\"FirstName\" [(value)]=\"account.profile.firstName\" ></spa-text>\r\n\r\n    <spa-text display=\"LastName\" [(value)]=\"account.profile.lastName\" ></spa-text>\r\n\r\n    <spa-text display=\"Username\" [(value)]=\"account.profile.userName\"></spa-text>\r\n\r\n    &nbsp;\r\n\r\n    <spa-text display=\"Password\" [(value)]=\"account.profile.password\" format=\"password\" ></spa-text>\r\n\r\n    <spa-text display=\"Confirm Password\" [(value)]=\"confirmPassword\" format=\"password\" ></spa-text>\r\n\r\n    <div class=\"span-col-center\">\r\n      <button  mat-raised-button color=\"primary\" (click)=\"create()\"  cdkFocusInitial>Create</button>\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SignupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-signup', template: "\r\n<h4 style=\"padding-top: 30px;\">Signup</h4>\r\n\r\n<hr/>\r\nComplete the form below.\r\n\r\n<div class=\"container tin-grid\"  style=\"font-size:14px;\">\r\n\r\n    <spa-text display=\"FirstName\" [(value)]=\"account.profile.firstName\" ></spa-text>\r\n\r\n    <spa-text display=\"LastName\" [(value)]=\"account.profile.lastName\" ></spa-text>\r\n\r\n    <spa-text display=\"Username\" [(value)]=\"account.profile.userName\"></spa-text>\r\n\r\n    &nbsp;\r\n\r\n    <spa-text display=\"Password\" [(value)]=\"account.profile.password\" format=\"password\" ></spa-text>\r\n\r\n    <spa-text display=\"Confirm Password\" [(value)]=\"confirmPassword\" format=\"password\" ></spa-text>\r\n\r\n    <div class=\"span-col-center\">\r\n      <button  mat-raised-button color=\"primary\" (click)=\"create()\"  cdkFocusInitial>Create</button>\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: MessageService }, { type: DataServiceLib }, { type: AuthService }]; } });
+
+class RecoverAccountComponent {
+    constructor(location, dataService, authService, messageService) {
+        this.location = location;
+        this.dataService = dataService;
+        this.authService = authService;
+        this.messageService = messageService;
+        this.userName = "";
+    }
+    ngOnInit() {
+    }
+    recover() {
+        if (this.userName == "") {
+            this.messageService.toast("Please enter your userName");
+            return;
+        }
+        else {
+            let u = new User();
+            u.userName = this.userName;
+            this.dataService.SelfReset(u).subscribe((apiResponse) => {
+                if (apiResponse.message == "success") {
+                    this.messageService.toast("The password has been sent to your email");
+                    this.location.back();
+                }
+                else {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        }
+    }
+}
+RecoverAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RecoverAccountComponent, deps: [{ token: i1.Location }, { token: DataServiceLib }, { token: AuthService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+RecoverAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RecoverAccountComponent, selector: "spa-recover-account", ngImport: i0, template: "\r\n<div class=\"container\" style=\"padding-top: 30px;\">\r\n<h4>Recover Account</h4>\r\n\r\n<hr />\r\n\r\nSubmit your Username and we will send you details to your registered email address.\r\n\r\n<div style=\"font-size: 14px;\">\r\n  <spa-text class=\"mt-3\" display=\"Username\" [(value)]=\"userName\"></spa-text>\r\n\r\n  <div class=\"tin-center\">\r\n    <button class=\"mt-3 w-50\" mat-raised-button color=\"primary\" (click)=\"recover()\" cdkFocusInitial>Submit</button>\r\n  </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RecoverAccountComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-recover-account', template: "\r\n<div class=\"container\" style=\"padding-top: 30px;\">\r\n<h4>Recover Account</h4>\r\n\r\n<hr />\r\n\r\nSubmit your Username and we will send you details to your registered email address.\r\n\r\n<div style=\"font-size: 14px;\">\r\n  <spa-text class=\"mt-3\" display=\"Username\" [(value)]=\"userName\"></spa-text>\r\n\r\n  <div class=\"tin-center\">\r\n    <button class=\"mt-3 w-50\" mat-raised-button color=\"primary\" (click)=\"recover()\" cdkFocusInitial>Submit</button>\r\n  </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Location }, { type: DataServiceLib }, { type: AuthService }, { type: MessageService }]; } });
+
+class SpaIndexModule {
+}
+SpaIndexModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaIndexModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpaIndexModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SpaIndexModule, declarations: [LoginComponent, SignupComponent, RecoverAccountComponent], imports: [i2.ReactiveFormsModule, CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        // SpaMatModule,
+        TinSpaModule], exports: [CommonModule,
+        FormsModule,
+        // SpaMatModule,
+        LoginComponent,
+        SignupComponent,
+        RecoverAccountComponent] });
+SpaIndexModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaIndexModule, imports: [ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        // SpaMatModule,
+        TinSpaModule, CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaIndexModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LoginComponent, SignupComponent, RecoverAccountComponent],
+                    imports: [
+                        ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        // SpaMatModule,
+                        TinSpaModule
+                    ],
+                    exports: [
+                        CommonModule,
+                        FormsModule,
+                        // SpaMatModule,
+                        LoginComponent,
+                        SignupComponent,
+                        RecoverAccountComponent,
+                    ],
+                }]
+        }] });
+
+class ChangePasswordComponent {
+    constructor(router, location, httpService, messageService, dataService, authService, route) {
+        this.router = router;
+        this.location = location;
+        this.httpService = httpService;
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.authService = authService;
+        this.route = route;
+        this.isProcessing = false;
+        this.changePassword = new ChangeUserPassword();
+    }
+    ngOnInit() {
+        this.myRole = this.authService.currentRoleSource.value;
+        if (this.dataService.tmpProfileuserName == "") {
+            this.changePassword.userName = this.authService.currentUser;
+        }
+        else {
+            this.changePassword.userName = this.dataService.tmpProfileuserName;
+            this.dataService.tmpProfileuserName = "";
+        }
+        if (this.route.snapshot.queryParams["redirectTo"] != undefined) {
+            this.redirectPath = this.route.snapshot.queryParams["redirectTo"];
+        }
+        else {
+            this.redirectPath = "home";
+        }
+    }
+    change() {
+        if (!this.myRole[this.dataService.capUsers.name]) {
+            if (this.changePassword.currentPassword == "") {
+                this.messageService.toast("Please enter current Password");
+                return;
+            }
+        }
+        if (this.changePassword.newPassword == "") {
+            this.messageService.toast("Please enter new Password");
+            return;
+        }
+        if (this.changePassword.confirmPassword == "") {
+            this.messageService.toast("Please confirm new Password");
+            return;
+        }
+        if (this.changePassword.confirmPassword != this.changePassword.newPassword) {
+            this.messageService.toast("Passwords do not match");
+            return;
+        }
+        this.isProcessing = true;
+        if (this.myRole[this.dataService.capUsers.name]) {
+            this.dataService.ChangePasswordAdmin(this.changePassword).subscribe((apiResponse) => {
+                this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    this.messageService.toast("Password Changed");
+                    this.router.navigate([this.redirectPath]);
+                }
+                else {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        }
+        else {
+            this.dataService.ChangePassword(this.changePassword).subscribe((apiResponse) => {
+                this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    this.messageService.toast("Password Changed");
+                    this.router.navigate([this.redirectPath]);
+                }
+                else {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        }
+    }
+}
+ChangePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: i1$3.Router }, { token: i1.Location }, { token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChangePasswordComponent, selector: "spa-change-password", ngImport: i0, template: "<h4>Change Password</h4>\r\n<hr>\r\n\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"fill\">\r\n\r\n    <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\"  [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\"  type=\"password\"></spa-text>\r\n    <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" type=\"password\"></spa-text>\r\n    <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\"  type=\"password\"></spa-text>\r\n    <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n\r\n  </div>\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n</div>\r\n\r\n\r\n<!-- <div class=\"container\">\r\n\r\n  <div class=\"d-flex justify-content-center row align-items-center\" >\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"tin-input \" style=\"font-size:14px;\">\r\n\r\n        <div class=\"col\" *ngIf=\"changePassword.userName!=''\">\r\n          <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\" width=\"300px\" [readonly]=\"true\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"!myRole[dataService.capUsers.name]\">\r\n          <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n           <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col mt-3\">\r\n          <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n</div> -->\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChangePasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-change-password', template: "<h4>Change Password</h4>\r\n<hr>\r\n\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"fill\">\r\n\r\n    <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\"  [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\"  type=\"password\"></spa-text>\r\n    <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" type=\"password\"></spa-text>\r\n    <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\"  type=\"password\"></spa-text>\r\n    <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n\r\n  </div>\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n</div>\r\n\r\n\r\n<!-- <div class=\"container\">\r\n\r\n  <div class=\"d-flex justify-content-center row align-items-center\" >\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"tin-input \" style=\"font-size:14px;\">\r\n\r\n        <div class=\"col\" *ngIf=\"changePassword.userName!=''\">\r\n          <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"changePassword.userName\" width=\"300px\" [readonly]=\"true\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"!myRole[dataService.capUsers.name]\">\r\n          <spa-text id=\"txtPassword\" display=\"Current Password\" [(value)]=\"changePassword.currentPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <spa-text id=\"txtNewPassword\" display=\"New Password\" [(value)]=\"changePassword.newPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n           <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" [(value)]=\"changePassword.confirmPassword\" width=\"300px\" type=\"password\"></spa-text>\r\n        </div>\r\n\r\n        <div class=\"col mt-3\">\r\n          <button id=\"btnChange\" mat-raised-button color=\"primary\" (click)=\"change()\" cdkFocusInitial>Change</button>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"col\">\r\n\r\n      <div class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\r\n        <b>*Please consider these requirements for your new password.</b> <br><br>\r\n\r\n        At least 8 characters<br>\r\n        At least 1 uppercase letter (A-Z)<br>\r\n        At least 2 lowercase letters (a-z)<br>\r\n        At least 1 digit (0-9)<br>\r\n        At least 1 special character (~`! \u2026)<br>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n</div> -->\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: i1.Location }, { type: HttpService }, { type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: i1$3.ActivatedRoute }]; } });
+
+class ProfileComponent {
+    constructor(dataService, messageService, httpService, router, authService) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.httpService = httpService;
+        this.router = router;
+        this.authService = authService;
+        this.initials = "";
+        this.appConfig = new AppConfig();
+        this.selfProfile = false;
+    }
+    ngOnInit() {
+        this.myRole = this.authService.currentRoleSource.value;
+        if (this.dataService.tmpProfileuserName == "") {
+            this.loadProfile(this.authService.currentUser);
+        }
+        else {
+            this.loadProfile(this.dataService.tmpProfileuserName);
+            this.dataService.tmpProfileuserName = "";
+        }
+    }
+    loadProfile(userName) {
+        let action = "all";
+        this.dataService.GetUserByID(userName).subscribe((apiResponse) => {
+            var _a, _b;
+            this.profile = apiResponse[0];
+            if (this.profile.userName.toLocaleLowerCase() == this.authService.currentUser.toLocaleLowerCase()) {
+                this.selfProfile = true;
+            }
+            this.loadRoles();
+            this.initials = `${(_a = this.profile.firstName) === null || _a === void 0 ? void 0 : _a.toUpperCase().charAt(0)}${(_b = this.profile.lastName) === null || _b === void 0 ? void 0 : _b.toUpperCase().charAt(0)}`;
+        }, (error) => {
+            this.isProcessing = false;
+            this.messageService.toast(this.httpService.Error(error));
+        });
+    }
+    loadRoles() {
+        this.dataService.GetRole("all", "").subscribe((apiResponse) => {
+            this.roles = apiResponse;
+            console.log(this.roles);
+        }, (error) => {
+            this.isProcessing = false;
+            this.messageService.toast(this.httpService.Error(error));
+        });
+    }
+    changePassword() {
+        this.dataService.tmpProfileuserName = this.profile.userName;
+        this.router.navigate(["home/user/change-password"]);
+    }
+    gotoUsers() {
+        this.router.navigate(["home/admin/users"]);
+    }
+    update() {
+    }
+    updateProfile() {
+        this.isProcessing = true;
+        // console.log(this.profile)
+        // return
+        this.dataService.UpdateUser(this.profile).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                this.messageService.toast("Profile Updated");
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        }, (error) => {
+            this.messageService.toast("Connection failed ");
+            this.isProcessing = false;
+        });
+    }
+}
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: HttpService }, { token: i1$3.Router }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProfileComponent, selector: "spa-profile", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-profile', template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: HttpService }, { type: i1$3.Router }, { type: AuthService }]; }, propDecorators: { appConfig: [{
+                type: Input
+            }] } });
+
+class SpaUserModule {
+}
+SpaUserModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpaUserModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, declarations: [ChangePasswordComponent, ProfileComponent], imports: [i2.ReactiveFormsModule, CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        // SpaMatModule,
+        TinSpaModule], exports: [CommonModule,
+        FormsModule,
+        // SpaMatModule,
+        ChangePasswordComponent,
+        ProfileComponent] });
+SpaUserModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, imports: [ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        // SpaMatModule,
+        TinSpaModule, CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ChangePasswordComponent, ProfileComponent],
+                    imports: [
+                        ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        // SpaMatModule,
+                        TinSpaModule
+                    ],
+                    exports: [
+                        CommonModule,
+                        FormsModule,
+                        // SpaMatModule,
+                        ChangePasswordComponent,
+                        ProfileComponent,
+                    ],
+                }]
+        }] });
+
+// import { ApiResponse } from 'tin-core';
+class SettingsComponent {
+    constructor(dataService, messageService) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this._filterText = "";
+        this.isProcessing = false;
+    }
+    ngOnInit() {
+        this.loadSettings();
+    }
+    applyFilter(filterValue) {
+        this.settings.filter = filterValue.trim().toLowerCase();
+    }
+    loadSettings() {
+        this.dataService.GetSetting("all", "").subscribe((apiResponse) => {
+            this.settings = apiResponse;
+        });
+    }
+    updateSetting(setting) {
+        this.isProcessing = true;
+        this.dataService.UpdateSetting(setting, "edit").subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                this.messageService.toast(`Setting ${setting.sName} Updated`);
+                this.loadSettings();
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        });
+    }
+    ;
+    addSetting() {
+        // const dialogRef = this.dialog.open(addRoleDialog, {
+        //   width: "1100px",
+        //   data: "",
+        // });
+        // dialogRef.afterClosed().subscribe((result) => {
+        //   if (result == "success") {
+        //     this.loadRoles();
+        //   }
+        // });
+        this.messageService.toast("Feature not Available");
+    }
+}
+SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SettingsComponent, selector: "spa-settings", ngImport: i0, template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button  mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:150px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-settings', template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button  mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:150px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n    </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }]; } });
+
+class LogsComponent {
+    constructor(authService, dataService) {
+        this.authService = authService;
+        this.dataService = dataService;
+        this.isProcessing = false;
+        this.displayedColumns = ["dateLogged", "userName", "fullName", "source", "details"];
+    }
+    ngOnInit() {
+        this.authService.isAuthorised(this.dataService.capLogs.name);
+        this.loadLogs();
+    }
+    loadLogs() {
+        this.dataService.GetLog("all", "").subscribe((apiResponse) => {
+            this.logs = new MatTableDataSource(apiResponse);
+            this.logs.paginator = this.logsPaginator;
+        });
+    }
+}
+LogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, deps: [{ token: AuthService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+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"] }]
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: DataServiceLib }]; }, propDecorators: { logsPaginator: [{
+                type: ViewChild,
+                args: ["logsPaginator"]
+            }] } });
+
+class UsersComponent {
+    constructor(httpService, router, authService, dataService, dialog, messageService) {
+        this.httpService = httpService;
+        this.router = router;
+        this.authService = authService;
+        this.dataService = dataService;
+        this.dialog = dialog;
+        this.messageService = messageService;
+        this.isProcessing = false;
+        this._filterText = "";
+        this.displayedColumns = ["userName", "fullName", "roleName", "locked", "dateCreated", "Action"];
+    }
+    ngOnInit() {
+        this.authService.isAuthorised(this.dataService.capUsers.name);
+        this.UpdateData();
+    }
+    UpdateData() {
+        this.dataService.GetUser().subscribe((apiResponse) => {
+            console.log(apiResponse);
+            this.usersRaw = apiResponse;
+            this.users = new MatTableDataSource(apiResponse);
+            this.users.paginator = this.usersPaginator;
+            this.applyFilter(this._filterText);
+        }, (error) => {
+            this.isProcessing = false;
+            this.messageService.toast(this.httpService.Error(error));
+        });
+    }
+    applyFilter(filterValue) {
+        this.users.filter = filterValue.trim().toLowerCase();
+    }
+    createAccount() {
+        this.router.navigate(["home/admin/create-account"]);
+    }
+    viewProfile(user) {
+        this.dataService.tmpProfileuserName = user.userName;
+        this.router.navigate(["home/user/profile"]);
+    }
+    lock(u) {
+        let login = { userName: u.userName, password: "Abcdef@123" };
+        this.dataService.LockUser(login).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                this.messageService.toast("User Locked");
+                this.UpdateData();
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse);
+            }
+        });
+    }
+    unlock(u) {
+        let login = { userName: u.userName, password: "Abcdef@123" };
+        this.dataService.UnlockUser(login).subscribe((apiResponse) => {
+            if (apiResponse.success) {
+                this.messageService.toast("User Unlocked");
+                this.UpdateData();
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse);
+            }
+        });
+    }
+    recover(u) {
+        this.dataService.SelfReset(u).subscribe((apiResponse) => {
+            if (apiResponse.message == "success") {
+                this.messageService.toast("The password has been sent on email");
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        });
+    }
+    deleteUser(user) {
+        this.messageService.confirm(`Delete ${user.userName} ?`).subscribe((result) => {
+            if (result == "yes") {
+                this.isProcessing = true;
+                this.dataService.DeleteUser(user).subscribe((apiResponse) => {
+                    this.isProcessing = false;
+                    if (apiResponse.message == "success") {
+                        this.messageService.toast("User Deleted");
+                        this.UpdateData();
+                    }
+                    else {
+                        this.messageService.toast("Error: " + apiResponse.message);
+                    }
+                }, (error) => {
+                    this.messageService.toast("Connection failed ");
+                    this.isProcessing = false;
+                });
+            }
+        });
+    }
+}
+UsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create Account</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> userName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "spa-users", template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create Account</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> userName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"] }]
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i4.MatDialog }, { type: MessageService }]; }, propDecorators: { usersPaginator: [{
+                type: ViewChild,
+                args: ["usersPaginator"]
+            }] } });
+
+class addRoleDialog {
+    constructor(messageService, dataService, authService, dialogRef, data) {
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.authService = authService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.role = new Role();
+    }
+    ngOnInit() {
+        this.capItems = this.data;
+    }
+    submit() {
+        if (this.role.roleName == "New Role" || this.role.roleName == "") {
+            this.messageService.toast("Please enter Role Name");
+            return;
+        }
+        this.isProcessing = true;
+        this.dataService.PostRole(this.role, "add").subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                this.messageService.toast("Role Added");
+                this.dialogRef.close("success");
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        }, error => {
+            this.messageService.toast("Connection failed");
+            this.isProcessing = false;
+        });
+    }
+    ;
+}
+addRoleDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-addRole', template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+;
+
+class RolesComponent {
+    constructor(httpService, router, authService, dataService, dialog, messageService) {
+        this.httpService = httpService;
+        this.router = router;
+        this.authService = authService;
+        this.dataService = dataService;
+        this.dialog = dialog;
+        this.messageService = messageService;
+        this.isProcessing = false;
+        this.appConfig = new AppConfig();
+    }
+    ngOnInit() {
+        this.authService.isAuthorised(this.dataService.capRoles.name);
+        this.loadRoles();
+        this.dataService.appConfigObserv.subscribe(x => this.appConfig = x);
+    }
+    loadRoles() {
+        this.dataService.GetRole("all", "").subscribe((apiResponse) => {
+            this.roles = apiResponse;
+        });
+    }
+    refresh() {
+        this.loadRoles();
+    }
+    addRole() {
+        const dialogRef = this.dialog.open(addRoleDialog, {
+            width: "1100px",
+            data: this.appConfig.capItems,
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result == "success") {
+                this.loadRoles();
+            }
+        });
+    }
+    updateRole(role) {
+        this.messageService.confirm(`UPDATE ${role.roleName} ?`).subscribe((result) => {
+            if (result == "yes") {
+                this.dataService.PostRole(role, "edit").subscribe((apiResponse) => {
+                    if (apiResponse.success) {
+                        this.messageService.toast("Role Updated");
+                        this.loadRoles();
+                    }
+                    else {
+                        this.messageService.toast("Error: " + apiResponse);
+                    }
+                });
+            }
+        });
+    }
+    ;
+    deleteRole(role) {
+        this.messageService.confirm(`DELETE ${role.roleName} ?`).subscribe((result) => {
+            if (result == "yes") {
+                this.dataService.PostRole(role, "delete").subscribe((apiResponse) => {
+                    if (apiResponse.success) {
+                        this.messageService.toast("Role Deleted");
+                        this.loadRoles();
+                    }
+                    else {
+                        this.messageService.toast("Error: " + apiResponse);
+                    }
+                });
+            }
+        });
+    }
+}
+RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i14.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "spa-roles", template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i4.MatDialog }, { type: MessageService }]; } });
+
+class CreateAccountComponent {
+    constructor(httpService, messageService, dataService, authService, router) {
+        this.httpService = httpService;
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.authService = authService;
+        this.router = router;
+        this.appConfig = new AppConfig();
+        this.isProcessing = false;
+        this.register = new Register();
+        this.openProfile = true;
+        this.authTypes = [
+            { name: "Local Authentication", value: "local" },
+            { name: "AD Authentication", value: "AD" }
+        ];
+    }
+    ngOnInit() {
+        this.appConfig = this.dataService.appConfig;
+    }
+    create() {
+        if (this.register.authType == "") {
+            this.messageService.toast("Choose Authentication Type");
+            return;
+        }
+        this.isProcessing = true;
+        this.dataService.RegisterAccount(this.register).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                this.messageService.toast("Account Created");
+                if (this.openProfile) {
+                    this.viewProfile(this.register.userName);
+                }
+                else {
+                    // this.user = new User();
+                    this.register = new Register();
+                    this.confirmPassword = "";
+                }
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        }, (error) => {
+            this.isProcessing = false;
+            this.messageService.toast(this.httpService.Error(error));
+        });
+    }
+    viewProfile(userName) {
+        this.dataService.tmpProfileuserName = userName;
+        this.router.navigate(["home/user/profile"]);
+    }
+}
+CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateAccountComponent, deps: [{ token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateAccountComponent, selector: "spa-create-account", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<h4>Create Account</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\"></spa-text>\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\"></spa-text>\r\n\r\n\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\"></spa-select>\r\n\r\n  <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "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: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateAccountComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-create-account', template: "<h4>Create Account</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px;\">\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\"></spa-text>\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\"></spa-text>\r\n\r\n\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\"></spa-select>\r\n\r\n  <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: i1$3.Router }]; }, propDecorators: { appConfig: [{
+                type: Input
+            }] } });
+
+class SpaAdminModule {
+}
+SpaAdminModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpaAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SpaAdminModule, declarations: [UsersComponent,
+        RolesComponent,
+        addRoleDialog,
+        CreateAccountComponent,
+        LogsComponent,
+        SettingsComponent], imports: [i2.ReactiveFormsModule, CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        // SpaMatModule,
+        TinSpaModule], exports: [CommonModule,
+        FormsModule,
+        // SpaMatModule,
+        UsersComponent,
+        RolesComponent,
+        addRoleDialog,
+        CreateAccountComponent,
+        LogsComponent,
+        SettingsComponent] });
+SpaAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaAdminModule, imports: [ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        // SpaMatModule,
+        TinSpaModule, CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaAdminModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UsersComponent,
+                        RolesComponent,
+                        addRoleDialog,
+                        CreateAccountComponent,
+                        LogsComponent,
+                        SettingsComponent
+                    ],
+                    imports: [
+                        ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        // SpaMatModule,
+                        TinSpaModule
+                    ],
+                    exports: [
+                        CommonModule,
+                        FormsModule,
+                        // SpaMatModule,
+                        UsersComponent,
+                        RolesComponent,
+                        addRoleDialog,
+                        CreateAccountComponent,
+                        LogsComponent,
+                        SettingsComponent
+                    ],
+                }]
+        }] });
+
+const routes$2 = [
+    { path: "signup", component: SignupComponent },
+    { path: 'recover-account', component: RecoverAccountComponent },
+    { path: 'login', component: LoginComponent },
+    { path: '', redirectTo: 'login', pathMatch: 'full' },
+    { path: '**', redirectTo: '' },
+];
+class IndexRoutingModule {
+}
+IndexRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IndexRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IndexRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: IndexRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] });
+IndexRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IndexRoutingModule, imports: [RouterModule.forChild(routes$2), RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IndexRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$2)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class IndexModule {
+}
+IndexModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IndexModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IndexModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: IndexModule, imports: [CommonModule,
+        IndexRoutingModule,
+        SpaIndexModule] });
+IndexModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IndexModule, imports: [CommonModule,
+        IndexRoutingModule,
+        SpaIndexModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IndexModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        IndexRoutingModule,
+                        SpaIndexModule
+                    ]
+                }]
+        }] });
+
+const routes$1 = [
+    { path: "users", component: UsersComponent },
+    { path: "roles", component: RolesComponent },
+    { path: "create-account", component: CreateAccountComponent },
+    { path: "logs", component: LogsComponent },
+    { path: "settings", component: SettingsComponent },
+];
+class AdminRoutingModule {
+}
+AdminRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdminRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: AdminRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] });
+AdminRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminRoutingModule, imports: [RouterModule.forChild(routes$1), RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$1)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class AdminModule {
+}
+AdminModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: AdminModule, imports: [CommonModule,
+        AdminRoutingModule,
+        SpaAdminModule] });
+AdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminModule, imports: [CommonModule,
+        AdminRoutingModule,
+        SpaAdminModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        AdminRoutingModule,
+                        SpaAdminModule
+                    ]
+                }]
+        }] });
+
+const routes = [
+    { path: "change-password", component: ChangePasswordComponent },
+    { path: "profile", component: ProfileComponent },
+];
+class UserRoutingModule {
+}
+UserRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UserRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: UserRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] });
+UserRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class UserModule {
+}
+UserModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UserModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: UserModule, imports: [CommonModule,
+        UserRoutingModule,
+        SpaUserModule] });
+UserModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserModule, imports: [CommonModule,
+        UserRoutingModule,
+        SpaUserModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        UserRoutingModule,
+                        SpaUserModule
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of tin-spa
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Account, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, DataServiceLib, DateComponent, DatetimeComponent, ExportService, FilterComponent, FormComponent, FormConfig, HttpService, IndexModule, LabelComponent, LoaderComponent, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, TableComponent, TableConfig, TextComponent, Tile, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, User, UserModule, UsersComponent, addRoleDialog, detailsDialog, loginConfig, messageDialog };
+//# sourceMappingURL=tin-spa.mjs.map