tin-spa 2.13.15 → 9.0.0

package/bundles/tin-spa.umd.js

@@ -0,0 +1,3867 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/snack-bar'), require('@angular/material/dialog'), require('rxjs'), require('rxjs/operators'), require('file-saver'), require('xlsx'), require('tin-core'), require('@angular/router'), require('@angular/common'), require('@angular/material/autocomplete'), require('@angular/material/badge'), require('@angular/material/button'), require('@angular/material/card'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/core'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/paginator'), require('@angular/material/progress-spinner'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/sort'), require('@angular/material/stepper'), require('@angular/material/table'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@angular/forms'), require('@angular/common/http'), require('@ng-idle/keepalive'), require('angular2-moment'), require('ngx-doc-viewer'), require('@ng-idle/core'), require('@kolkov/angular-editor'), require('@angular/cdk/stepper')) :
+    typeof define === 'function' && define.amd ? define('tin-spa', ['exports', '@angular/core', '@angular/material/snack-bar', '@angular/material/dialog', 'rxjs', 'rxjs/operators', 'file-saver', 'xlsx', 'tin-core', '@angular/router', '@angular/common', '@angular/material/autocomplete', '@angular/material/badge', '@angular/material/button', '@angular/material/card', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/core', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/list', '@angular/material/menu', '@angular/material/paginator', '@angular/material/progress-spinner', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/sort', '@angular/material/stepper', '@angular/material/table', '@angular/material/tabs', '@angular/material/tooltip', '@angular/forms', '@angular/common/http', '@ng-idle/keepalive', 'angular2-moment', 'ngx-doc-viewer', '@ng-idle/core', '@kolkov/angular-editor', '@angular/cdk/stepper'], factory) :
+    (global = global || self, factory(global['tin-spa'] = {}, global.ng.core, global.ng.material.snackBar, global.ng.material.dialog, global.rxjs, global.rxjs.operators, global.fileSaver, global.xlsx, global.tinCore, global.ng.router, global.ng.common, global.ng.material.autocomplete, global.ng.material.badge, global.ng.material.button, global.ng.material.card, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.core, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.list, global.ng.material.menu, global.ng.material.paginator, global.ng.material.progressSpinner, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.sort, global.ng.material.stepper, global.ng.material.table, global.ng.material.tabs, global.ng.material.tooltip, global.ng.forms, global.ng.common.http, global.keepalive, global.angular2Moment, global.ngxDocViewer, global.core$2, global.angularEditor, global.ng.cdk.stepper));
+}(this, (function (exports, core, snackBar, dialog, rxjs, operators, fileSaver, xlsx, tinCore, router, common, autocomplete, badge, button, card, checkbox, chips, core$1, datepicker, formField, icon, input, list, menu, paginator, progressSpinner, radio, select, slider, sort, stepper, table, tabs, tooltip, forms, http, keepalive, angular2Moment, ngxDocViewer, core$2, angularEditor, stepper$1) { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); }
+    }
+
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+
+    function __exportStar(m, exports) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m) return m.call(o);
+        if (o && typeof o.length === "number") return {
+            next: function () {
+                if (o && i >= o.length) o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    };
+
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+    }
+
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+    }
+
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        return cooked;
+    };
+
+    function __importStar(mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+        result.default = mod;
+        return result;
+    }
+
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+
+    function __classPrivateFieldGet(receiver, privateMap) {
+        if (!privateMap.has(receiver)) {
+            throw new TypeError("attempted to get private field on non-instance");
+        }
+        return privateMap.get(receiver);
+    }
+
+    function __classPrivateFieldSet(receiver, privateMap, value) {
+        if (!privateMap.has(receiver)) {
+            throw new TypeError("attempted to set private field on non-instance");
+        }
+        privateMap.set(receiver, value);
+        return value;
+    }
+
+    var TinSpaService = /** @class */ (function () {
+        function TinSpaService() {
+        }
+        TinSpaService.ɵprov = core.ɵɵdefineInjectable({ factory: function TinSpaService_Factory() { return new TinSpaService(); }, token: TinSpaService, providedIn: "root" });
+        TinSpaService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], TinSpaService);
+        return TinSpaService;
+    }());
+
+    var StorageService = /** @class */ (function () {
+        function StorageService() {
+        }
+        // Store the value
+        StorageService.prototype.store = function (storageKey, value) {
+            return __awaiter(this, void 0, void 0, function () {
+                var encryptedValue;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            encryptedValue = btoa(escape(JSON.stringify(value)));
+                            // const encryptedValue = JSON.stringify(value);
+                            return [4 /*yield*/, localStorage.setItem(storageKey, encryptedValue)];
+                        case 1:
+                            // const encryptedValue = JSON.stringify(value);
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        // Get the value
+        StorageService.prototype.get = function (storageKey) {
+            return __awaiter(this, void 0, void 0, function () {
+                var ret;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, localStorage.getItem(storageKey)];
+                        case 1:
+                            ret = _a.sent();
+                            return [2 /*return*/, JSON.parse(unescape(atob(ret)))];
+                    }
+                });
+            });
+        };
+        // Remove
+        StorageService.prototype.removeStorageItem = function (storageKey) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, localStorage.removeItem(storageKey)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        // Clear storage
+        StorageService.prototype.clear = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, localStorage.clear()];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        StorageService.ɵprov = core.ɵɵdefineInjectable({ factory: function StorageService_Factory() { return new StorageService(); }, token: StorageService, providedIn: "root" });
+        StorageService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], StorageService);
+        return StorageService;
+    }());
+
+    var messageDialog = /** @class */ (function () {
+        function messageDialog(dialogRef, data) {
+            this.dialogRef = dialogRef;
+            this.data = data;
+        }
+        messageDialog.prototype.ngOnInit = function () {
+            this.messageType = this.data.type;
+            this._messageSubject = this.data.subject;
+            this._messageDetails = this.data.details;
+        };
+        messageDialog.prototype.response = function (resp) {
+            this.dialogRef.close(resp);
+        };
+        messageDialog.ctorParameters = function () { return [
+            { type: dialog.MatDialogRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        messageDialog = __decorate([
+            core.Component({
+                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"
+            }),
+            __param(1, core.Inject(dialog.MAT_DIALOG_DATA))
+        ], messageDialog);
+        return messageDialog;
+    }());
+    ;
+
+    var MessageService = /** @class */ (function () {
+        function MessageService(snackBar, dialog) {
+            this.snackBar = snackBar;
+            this.dialog = dialog;
+        }
+        MessageService.prototype.toast = function (msg) {
+            this.snackBar.open(msg, "OK", { duration: 5000 });
+        };
+        MessageService.prototype.info = function (subject, details) {
+            var type = "info";
+            var dialogRef = this.dialog.open(messageDialog, {
+                width: "600px",
+                data: { type: type, subject: subject, details: details },
+            });
+        };
+        MessageService.prototype.error = function (details) {
+            var type = "error";
+            var subject;
+            var dialogRef = this.dialog.open(messageDialog, {
+                width: "600px",
+                data: { type: type, subject: subject, details: details },
+            });
+        };
+        MessageService.prototype.confirm = function (msg) {
+            var type = "confirm";
+            var subject = "";
+            var details = msg;
+            var dialogRef = this.dialog.open(messageDialog, {
+                width: "400px",
+                data: { type: type, subject: subject, details: details },
+            });
+            return dialogRef.afterClosed().pipe(operators.mergeMap(function (result) {
+                return rxjs.of(result);
+            }));
+        };
+        MessageService.ctorParameters = function () { return [
+            { type: snackBar.MatSnackBar },
+            { type: dialog.MatDialog }
+        ]; };
+        MessageService.ɵprov = core.ɵɵdefineInjectable({ factory: function MessageService_Factory() { return new MessageService(core.ɵɵinject(snackBar.MatSnackBar), core.ɵɵinject(dialog.MatDialog)); }, token: MessageService, providedIn: "root" });
+        MessageService = __decorate([
+            core.Injectable({
+                providedIn: "root",
+            })
+        ], MessageService);
+        return MessageService;
+    }());
+
+    var ExportService = /** @class */ (function () {
+        function ExportService() {
+            this.fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+            this.fileExtension = '.xlsx';
+        }
+        ExportService.prototype.exportExcel = function (jsonData, fileName) {
+            var ws = xlsx.utils.json_to_sheet(jsonData);
+            var wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
+            var excelBuffer = xlsx.write(wb, { bookType: 'xlsx', type: 'array' });
+            this.saveExcelFile(excelBuffer, fileName);
+        };
+        ExportService.prototype.saveExcelFile = function (buffer, fileName) {
+            var data = new Blob([buffer], { type: this.fileType });
+            fileSaver.saveAs(data, fileName + this.fileExtension);
+        };
+        ExportService.ɵprov = core.ɵɵdefineInjectable({ factory: function ExportService_Factory() { return new ExportService(); }, token: ExportService, providedIn: "root" });
+        ExportService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], ExportService);
+        return ExportService;
+    }());
+
+
+    (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";
+    })(exports.LogLevel || (exports.LogLevel = {}));
+    var Tile = /** @class */ (function () {
+        function Tile() {
+        }
+        return Tile;
+    }());
+    var Step = /** @class */ (function () {
+        function Step() {
+        }
+        return Step;
+    }());
+    var TableConfig = /** @class */ (function () {
+        function TableConfig() {
+            this.enableFilter = false;
+            this.create = new TableCreate();
+            this.greyout = new Condition();
+        }
+        return TableConfig;
+    }());
+    var TableCreate = /** @class */ (function () {
+        function TableCreate() {
+        }
+        return TableCreate;
+    }());
+    var TableColumn = /** @class */ (function () {
+        function TableColumn() {
+            this.name = "default";
+            this.display = "default";
+            this.type = exports.TableColumnType.String;
+        }
+        return TableColumn;
+    }());
+
+    (function (TableColumnType) {
+        TableColumnType[TableColumnType["String"] = 0] = "String";
+        TableColumnType[TableColumnType["Date"] = 1] = "Date";
+        TableColumnType[TableColumnType["DateTime"] = 2] = "DateTime";
+        TableColumnType[TableColumnType["Image"] = 3] = "Image";
+        TableColumnType[TableColumnType["Icon"] = 4] = "Icon";
+        TableColumnType[TableColumnType["TextIcon"] = 5] = "TextIcon";
+        TableColumnType[TableColumnType["Chip"] = 6] = "Chip";
+    })(exports.TableColumnType || (exports.TableColumnType = {}));
+    var Condition = /** @class */ (function () {
+        function Condition() {
+            this.field = "";
+            this.operator = exports.Operator.Equal;
+            this.value = "";
+        }
+        return Condition;
+    }());
+
+    (function (Operator) {
+        Operator[Operator["Equal"] = 0] = "Equal";
+        Operator[Operator["Less"] = 1] = "Less";
+        Operator[Operator["Greater"] = 2] = "Greater";
+        Operator[Operator["NotEqual"] = 3] = "NotEqual";
+    })(exports.Operator || (exports.Operator = {}));
+    var Color = /** @class */ (function (_super) {
+        __extends(Color, _super);
+        function Color() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return Color;
+    }(Condition));
+    var Icon = /** @class */ (function (_super) {
+        __extends(Icon, _super);
+        function Icon() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return Icon;
+    }(Condition));
+    var TableAction = /** @class */ (function () {
+        function TableAction() {
+        }
+        return TableAction;
+    }());
+    var ActionResponse = /** @class */ (function () {
+        function ActionResponse() {
+        }
+        return ActionResponse;
+    }());
+    var loginConfig = /** @class */ (function () {
+        function loginConfig() {
+            this.appName = "";
+            this.selfService = false;
+            this.logo = "";
+            this.logoSize = "normal";
+        }
+        return loginConfig;
+    }());
+    var AppConfig = /** @class */ (function () {
+        function AppConfig() {
+            this.appName = "App Name";
+            this.logo = "";
+            this.ADAuth = true;
+            this.localAuth = true;
+            this.employees = false;
+            this.approvals = false;
+        }
+        return AppConfig;
+    }());
+    var CapItem = /** @class */ (function () {
+        function CapItem() {
+            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";
+        }
+        return CapItem;
+    }());
+    var Role = /** @class */ (function () {
+        function Role() {
+            this.roleID = "";
+            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;
+        }
+        return Role;
+    }());
+    var Account = /** @class */ (function () {
+        function Account() {
+        }
+        return Account;
+    }());
+    var User = /** @class */ (function () {
+        function User() {
+            this.userID = "";
+            this.password = "";
+            this.tries = "0";
+            this.locked = "0";
+            this.logged = "0";
+            this.disabled = "0";
+            this.changepassword = "0";
+            this.dateCreated = tinCore.Core.nowDate();
+            this.dateUpdated = tinCore.Core.nowDate();
+            this.token = "";
+            this.dateExpire = tinCore.Core.nowDate();
+            this.tokenExpire = tinCore.Core.nowDate();
+            this.authType = "";
+        }
+        return User;
+    }());
+    var ChangeUserPassword = /** @class */ (function () {
+        function ChangeUserPassword() {
+            this.userID = "";
+            this.currentPassword = "";
+            this.newPassword = "";
+            this.confirmPassword = "";
+        }
+        return ChangeUserPassword;
+    }());
+    var Profile = /** @class */ (function () {
+        function Profile() {
+            this.profileID = "";
+            this.userID = "";
+            this.roleID = "1";
+            this.firstName = "";
+            this.lastName = "";
+            this.email = "";
+            this.empID = "";
+            this.arID = "0";
+            this.authType = "";
+        }
+        return Profile;
+    }());
+
+    var LogService = /** @class */ (function () {
+        function LogService() {
+            this.level = exports.LogLevel.All;
+            this.logToConsole = true;
+            this.logToApi = false;
+        }
+        LogService.prototype.debug = function (msg) {
+            var optionalParams = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                optionalParams[_i - 1] = arguments[_i];
+            }
+            this.writeToLog(msg, exports.LogLevel.Debug, optionalParams);
+        };
+        LogService.prototype.info = function (msg) {
+            var optionalParams = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                optionalParams[_i - 1] = arguments[_i];
+            }
+            this.writeToLog(msg, exports.LogLevel.Info, optionalParams);
+        };
+        LogService.prototype.warn = function (msg) {
+            var optionalParams = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                optionalParams[_i - 1] = arguments[_i];
+            }
+            this.writeToLog(msg, exports.LogLevel.Warn, optionalParams);
+        };
+        LogService.prototype.error = function (msg) {
+            var optionalParams = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                optionalParams[_i - 1] = arguments[_i];
+            }
+            this.writeToLog(msg, exports.LogLevel.Error, optionalParams);
+        };
+        LogService.prototype.fatal = function (msg) {
+            var optionalParams = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                optionalParams[_i - 1] = arguments[_i];
+            }
+            this.writeToLog(msg, exports.LogLevel.Fatal, optionalParams);
+        };
+        LogService.prototype.log = function (msg) {
+            var optionalParams = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                optionalParams[_i - 1] = arguments[_i];
+            }
+            this.writeToLog(msg, exports.LogLevel.All, optionalParams);
+        };
+        LogService.prototype.writeToLog = function (msg, level, params) {
+            if (this.shouldLog(level)) {
+                // Build log string
+                var value = tinCore.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
+                }
+            }
+        };
+        LogService.prototype.formatParams = function (params) {
+            var e_1, _a;
+            var ret = params.join(",");
+            // Is there at least one object in the array?
+            if (params.some(function (p) { return typeof p == "object"; })) {
+                ret = "";
+                try {
+                    // Build comma-delimited string
+                    for (var params_1 = __values(params), params_1_1 = params_1.next(); !params_1_1.done; params_1_1 = params_1.next()) {
+                        var item = params_1_1.value;
+                        ret += JSON.stringify(item) + ",";
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (params_1_1 && !params_1_1.done && (_a = params_1.return)) _a.call(params_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            return ret;
+        };
+        LogService.prototype.shouldLog = function (level) {
+            var ret = false;
+            if ((level >= this.level && level !== exports.LogLevel.Off) ||
+                this.level === exports.LogLevel.All) {
+                ret = true;
+            }
+            return ret;
+        };
+        LogService.ɵprov = core.ɵɵdefineInjectable({ factory: function LogService_Factory() { return new LogService(); }, token: LogService, providedIn: "root" });
+        LogService = __decorate([
+            core.Injectable({
+                providedIn: "root",
+            })
+        ], LogService);
+        return LogService;
+    }());
+
+    // import { Constants } from  "tin-core";
+    var AuthService = /** @class */ (function () {
+        function AuthService(storage, router, httpService, messageService, logService) {
+            this.storage = storage;
+            this.router = router;
+            this.httpService = httpService;
+            this.messageService = messageService;
+            this.logService = logService;
+            //Logged in
+            this.loggedin = false;
+            this.loggedinSource = new rxjs.BehaviorSubject(this.loggedin);
+            this.loggedinObserv = this.loggedinSource.asObservable();
+            //Token
+            this.token = "";
+            this.tokenSource = new rxjs.BehaviorSubject(this.token);
+            this.tokenObserv = this.tokenSource.asObservable();
+            //TokenExpire
+            this.tokenExpire = "";
+            this.tokenExpireSource = new rxjs.BehaviorSubject(this.tokenExpire);
+            this.tokenExpireObserv = this.tokenExpireSource.asObservable();
+            //Current User
+            this.currentUser = "tnyagato";
+            this.currentUserSource = new rxjs.BehaviorSubject(this.currentUser);
+            this.currentUserObserv = this.currentUserSource.asObservable();
+            //Line Manager
+            this.islineManager = false;
+            this.isLineManagerSource = new rxjs.BehaviorSubject(this.islineManager);
+            this.isLineManagerObserv = this.isLineManagerSource.asObservable();
+            //Roles
+            this.currentRole = new Role;
+            this.currentRoleSource = new rxjs.BehaviorSubject(this.currentRole);
+            this.myRoleObserv = this.currentRoleSource.asObservable();
+            //Logged in FirstName
+            this.loggedUserSource = new rxjs.BehaviorSubject("tnyagato");
+            this.loggedUserFullName = this.loggedUserSource.asObservable();
+        }
+        AuthService.prototype.updateloggedin = function (loggedin) {
+            this.loggedinSource.next(loggedin);
+            this.loggedin = loggedin;
+        };
+        AuthService.prototype.updateToken = function (newToken) {
+            this.tokenSource.next(newToken);
+        };
+        AuthService.prototype.updateTokenExpire = function (newTokenExpire) {
+            this.tokenExpireSource.next(newTokenExpire);
+        };
+        AuthService.prototype.updateCurrentUser = function (newUser) {
+            this.currentUserSource.next(newUser.toLocaleLowerCase());
+            this.currentUser = newUser.toLocaleLowerCase();
+        };
+        AuthService.prototype.updateIsLineManager = function (manager) {
+            this.isLineManagerSource.next(manager);
+        };
+        AuthService.prototype.updateRole = function (role) {
+            this.currentRoleSource.next(role);
+        };
+        AuthService.prototype.updateLoggedUserFullName = function (username) {
+            this.loggedUserSource.next(username);
+        };
+        //Authorisation
+        AuthService.prototype.isAuthorised = function (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;
+            }
+        };
+        AuthService.prototype.isValidToken = function () {
+            var tokenExpire = new Date(this.tokenExpireSource.value);
+            var nowDate = new Date();
+            var valid = tokenExpire > nowDate;
+            if (!valid) {
+                this.router.navigate(["login"]);
+                this.messageService.toast("Expired Session");
+            }
+            return valid;
+        };
+        AuthService.prototype.canActivate = function () {
+            var _this = this;
+            if (this.loggedin && this.isValidToken()) {
+                // this.logService.info("authentication: logged in");
+                return true;
+            }
+            if (localStorage.getItem(tinCore.Constants.AUTH_USER) === null) {
+                // this.logService.info("authentication: not logged and no cache");
+                this.updateloggedin(false);
+                this.router.navigate(["login"]);
+                return false;
+            }
+            else {
+                // this.logService.info("authentication: not logged but allowed login");
+                this.updateloggedin(true);
+                this.storage.get(tinCore.Constants.AUTH_USER).then(function (resp) {
+                    _this.updateCurrentUser(resp);
+                    // console.log("user: " + resp);
+                });
+                this.storage.get(tinCore.Constants.AUTH_NAME).then(function (resp) {
+                    _this.updateLoggedUserFullName(resp);
+                    // console.log("name: " + resp);
+                });
+                this.storage.get(tinCore.Constants.AUTH_ROLES).then(function (resp) {
+                    var ret = JSON.parse(resp);
+                    _this.updateRole(ret);
+                    // console.log("role: " + ret.roleName);
+                });
+                this.storage.get(tinCore.Constants.AUTH_TOKEN).then(function (resp) {
+                    _this.updateToken(resp);
+                    // console.log("token: " + resp);
+                });
+                this.storage.get(tinCore.Constants.AUTH_TOKEN_EXPIRE).then(function (resp) {
+                    _this.updateTokenExpire(resp);
+                    _this.isValidToken();
+                });
+                return true;
+            }
+        };
+        AuthService.ctorParameters = function () { return [
+            { type: StorageService },
+            { type: router.Router },
+            { type: tinCore.HttpService },
+            { type: MessageService },
+            { type: LogService }
+        ]; };
+        AuthService.ɵprov = core.ɵɵdefineInjectable({ factory: function AuthService_Factory() { return new AuthService(core.ɵɵinject(StorageService), core.ɵɵinject(router.Router), core.ɵɵinject(tinCore.HttpService), core.ɵɵinject(MessageService), core.ɵɵinject(LogService)); }, token: AuthService, providedIn: "root" });
+        AuthService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], AuthService);
+        return AuthService;
+    }());
+
+    var DataService = /** @class */ (function () {
+        function DataService(httpService) {
+            // httpService.apiUrl = "http://localhost:20503/";
+            // httpService.apiUrl = "http://localhost/basic/";
+            this.httpService = httpService;
+            this.capUsers = new CapItem;
+            // public appConfig = new AppConfig; ///test
+            this.tmpProfileUserID = "";
+            this.capUsers.name = "cap3";
+            this.capUsers.display = "Users";
+            this.capUsers.link = "home/admin/users";
+        }
+        //Users
+        DataService.prototype.GetUser = function (by, val) {
+            return this.httpService.Get("Basic/GetUser?by=" + by + "&val=" + val);
+        };
+        DataService.prototype.UpdateUser = function (user, action) {
+            return this.httpService.Post("Basic/UpdateUser?action=" + action, user);
+        };
+        DataService.prototype.login = function (u) {
+            return this.httpService.Post("Basic/login", u);
+        };
+        DataService.prototype.changePassword = function (u) {
+            return this.httpService.Post("Basic/ChangePassword", u);
+        };
+        DataService.prototype.changePasswordAdmin = function (u) {
+            return this.httpService.Post("Basic/ChangePasswordAdmin", u);
+        };
+        DataService.prototype.SelfReset = function (u) {
+            return this.httpService.Post("Basic/SelfReset", u);
+        };
+        //Roles
+        DataService.prototype.UpdateRole = function (role, action) {
+            return this.httpService.Post("Basic/UpdateRole?action=" + action, role);
+        };
+        DataService.prototype.GetRole = function (by, val) {
+            return this.httpService.Get("Basic/GetRole?by=" + by + "&val=" + val);
+        };
+        //Account
+        DataService.prototype.UpdateAccount = function (account, action) {
+            return this.httpService.Post("Basic/UpdateAccount?action=" + action, account);
+        };
+        //Profile
+        DataService.prototype.GetProfile = function (by, val) {
+            return this.httpService.Get("Basic/GetProfile?by=" + by + "&val=" + val);
+        };
+        DataService.prototype.UpdateProfile = function (profile, action) {
+            return this.httpService.Post("Basic/UpdateProfile?action=" + action, profile);
+        };
+        //Logs
+        DataService.prototype.GetLog = function (by, val) {
+            return this.httpService.Get("Basic/GetLog?by=" + by + "&val=" + val);
+        };
+        //Settings
+        DataService.prototype.GetSetting = function (by, val) {
+            return this.httpService.Get("Basic/GetSetting?by=" + by + "&val=" + val);
+        };
+        DataService.prototype.UpdateSetting = function (setting, action) {
+            return this.httpService.Post("Basic/UpdateSetting?action=" + action, setting);
+        };
+        DataService.ctorParameters = function () { return [
+            { type: tinCore.HttpService }
+        ]; };
+        DataService.ɵprov = core.ɵɵdefineInjectable({ factory: function DataService_Factory() { return new DataService(core.ɵɵinject(tinCore.HttpService)); }, token: DataService, providedIn: "root" });
+        DataService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], DataService);
+        return DataService;
+    }());
+
+    var LoaderService = /** @class */ (function () {
+        function LoaderService() {
+            this.isLoading = new rxjs.BehaviorSubject(false);
+        }
+        LoaderService.ɵprov = core.ɵɵdefineInjectable({ factory: function LoaderService_Factory() { return new LoaderService(); }, token: LoaderService, providedIn: "root" });
+        LoaderService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], LoaderService);
+        return LoaderService;
+    }());
+
+    var LoaderComponent = /** @class */ (function () {
+        function LoaderComponent(loaderService) {
+            var _this = this;
+            this.loaderService = loaderService;
+            this.logo = "";
+            this.loaderService.isLoading.subscribe(function (v) {
+                // console.log(v);
+                _this.loading = v;
+            });
+        }
+        LoaderComponent.prototype.ngOnInit = function () {
+        };
+        LoaderComponent.ctorParameters = function () { return [
+            { type: LoaderService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], LoaderComponent.prototype, "logo", void 0);
+        LoaderComponent = __decorate([
+            core.Component({
+                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:-ms-grid;display:grid}.loading-spinner img{-ms-grid-row-align:end;align-self:end}.loading-message{text-align:center;-ms-grid-row-align:start;align-self:start}"]
+            })
+        ], LoaderComponent);
+        return LoaderComponent;
+    }());
+
+    var ɵ0 = { disableClose: true, hasBackdrop: true };
+    var SpaMatModule = /** @class */ (function () {
+        function SpaMatModule() {
+        }
+        SpaMatModule = __decorate([
+            core.NgModule({
+                declarations: [],
+                imports: [],
+                exports: [
+                    common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule,
+                    menu.MatMenuModule, slider.MatSliderModule, table.MatTableModule, paginator.MatPaginatorModule,
+                    checkbox.MatCheckboxModule, badge.MatBadgeModule, button.MatButtonModule, icon.MatIconModule, dialog.MatDialogModule, snackBar.MatSnackBarModule,
+                    tabs.MatTabsModule, formField.MatFormFieldModule, input.MatInputModule, card.MatCardModule, chips.MatChipsModule, select.MatSelectModule,
+                    core$1.MatNativeDateModule, progressSpinner.MatProgressSpinnerModule, list.MatListModule, autocomplete.MatAutocompleteModule, tooltip.MatTooltipModule, sort.MatSortModule,
+                    datepicker.MatDatepickerModule, stepper.MatStepperModule, radio.MatRadioModule,
+                ],
+                providers: [
+                    { provide: dialog.MAT_DIALOG_DEFAULT_OPTIONS, useValue: ɵ0 },
+                    { provide: core$1.MAT_DATE_LOCALE, useValue: "en-GB" },
+                ]
+            })
+        ], SpaMatModule);
+        return SpaMatModule;
+    }());
+
+    var LoaderInterceptor = /** @class */ (function () {
+        function LoaderInterceptor(loaderService, messageService, authService, router, logService) {
+            this.loaderService = loaderService;
+            this.messageService = messageService;
+            this.authService = authService;
+            this.router = router;
+            this.logService = logService;
+            this.requests = [];
+        }
+        LoaderInterceptor.prototype.removeRequest = function (req) {
+            var i = this.requests.indexOf(req);
+            if (i >= 0) {
+                this.requests.splice(i, 1);
+            }
+            this.loaderService.isLoading.next(this.requests.length > 0);
+        };
+        LoaderInterceptor.prototype.intercept = function (request, next) {
+            var _this = this;
+            var requestClone = request.clone({
+                setHeaders: {
+                    Authorization: "Basic " + btoa(this.authService.currentUser + ":" + this.authService.tokenSource.value)
+                    // Authorization: "Basic " + btoa(this.authService.currentUser + ":" + "j5Toszfr@ys")
+                }
+            });
+            this.requests.push(requestClone);
+            if (this.requests.length > 1) {
+                this.logService.info("Multiple connections detected > " + this.requests.length);
+            }
+            // this.logService.info("Executed > " + requestClone.url)
+            this.loaderService.isLoading.next(true);
+            return rxjs.Observable.create(function (observer) {
+                var subscription = next.handle(requestClone)
+                    .subscribe(function (event) {
+                    if (event instanceof http.HttpResponse) {
+                        _this.removeRequest(requestClone);
+                        observer.next(event);
+                    }
+                }, function (err) {
+                    _this.messageService.toast('error: ' + err.statusText);
+                    _this.removeRequest(requestClone);
+                    observer.error(err);
+                    if (err.status === 401) {
+                        //request is unathorised
+                        _this.router.navigate(["login"]);
+                    }
+                }, function () {
+                    _this.removeRequest(requestClone);
+                    observer.complete();
+                });
+                // remove request from queue when cancelled
+                return function () {
+                    _this.removeRequest(requestClone);
+                    subscription.unsubscribe();
+                };
+            });
+        };
+        LoaderInterceptor.ctorParameters = function () { return [
+            { type: LoaderService },
+            { type: MessageService },
+            { type: AuthService },
+            { type: router.Router },
+            { type: LogService }
+        ]; };
+        LoaderInterceptor = __decorate([
+            core.Injectable()
+        ], LoaderInterceptor);
+        return LoaderInterceptor;
+    }());
+
+    var TinSpaComponent = /** @class */ (function () {
+        function TinSpaComponent() {
+        }
+        TinSpaComponent.prototype.ngOnInit = function () {
+        };
+        TinSpaComponent = __decorate([
+            core.Component({
+                selector: 'lib-tin-spa',
+                template: "\n    <p>\n      tin-spa works!\n    </p>\n  "
+            })
+        ], TinSpaComponent);
+        return TinSpaComponent;
+    }());
+
+    var NavMenuComponent = /** @class */ (function () {
+        function NavMenuComponent(router, authService) {
+            this.router = router;
+            this.authService = authService;
+            this.isExpanded = false;
+            this.appConfig = new AppConfig();
+        }
+        NavMenuComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.authService.loggedUserFullName.subscribe(function (user) { return _this.loggedUserFullName = user; });
+            this.authService.myRoleObserv.subscribe(function (rol) { return _this.myRole = rol; });
+            this.authService.loggedinObserv.subscribe(function (obj) { return _this.loggedin = obj; });
+        };
+        NavMenuComponent.prototype.collapse = function () {
+            this.isExpanded = false;
+        };
+        NavMenuComponent.prototype.toggle = function () {
+            this.isExpanded = !this.isExpanded;
+        };
+        // logoff() {
+        //   // this.authService.updateloggedin(false);
+        //   // this.authService.updateRole(new Role());
+        //   this.router.navigate(["login"]);
+        //   // this.storageService.clear();
+        // }
+        NavMenuComponent.prototype.redirectTo = function (link) {
+            if (link != "") {
+                this.router.navigate([link]);
+            }
+        };
+        NavMenuComponent.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: AuthService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], NavMenuComponent.prototype, "appConfig", void 0);
+        NavMenuComponent = __decorate([
+            core.Component({
+                selector: 'spa-nav-menu',
+                template: "<header *ngIf=\"loggedin\">\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    <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\"\r\n              type=\"button\"\r\n              data-toggle=\"collapse\"\r\n              data-target=\".navbar-collapse\"\r\n              aria-label=\"Toggle navigation\"\r\n              [attr.aria-expanded]=\"isExpanded\"\r\n              (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\"navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"redirectTo('login')\"> <mat-icon>logout</mat-icon> </button>\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\" style=\"margin-left:2em\"><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</header>\r\n",
+                styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}@media (min-width:768px){html{font-size:16px}}.box-shadow{box-shadow:0 .25rem .75rem rgba(0,0,0,.05)}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;font-weight:600}.stack-top{z-index:9;margin:20px}"]
+            })
+        ], NavMenuComponent);
+        return NavMenuComponent;
+    }());
+
+    var TimeoutComponent = /** @class */ (function () {
+        function TimeoutComponent(idle, keepalive, authService, router) {
+            var _this = this;
+            this.idle = idle;
+            this.keepalive = keepalive;
+            this.authService = authService;
+            this.router = router;
+            this.loggedin = false;
+            this.idleState = 'Not started.';
+            this.timedOut = false;
+            this.lastPing = null;
+            this.isWarning = false;
+            this.authService.loggedinObserv.subscribe(function (obj) {
+                _this.loggedin = obj;
+                // if (this.loggedin){
+                //   this.startWatch();
+                // }else{
+                //   this.stopWatch();
+                // }
+            });
+            // sets an idle timeout of 5 seconds, for testing purposes.
+            idle.setIdle(900);
+            // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
+            idle.setTimeout(10);
+            // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
+            idle.setInterrupts(core$2.DEFAULT_INTERRUPTSOURCES);
+            idle.onIdleStart.subscribe(function () {
+                _this.idleState = 'You\'ve gone idle!';
+            });
+            idle.onIdleEnd.subscribe(function () {
+                _this.idleState = 'No longer idle.';
+                _this.isWarning = false;
+            });
+            idle.onTimeoutWarning.subscribe(function (countdown) {
+                _this.idleState = 'You will be signed out in ' + countdown + ' seconds!';
+                if (_this.loggedin) {
+                    _this.isWarning = true;
+                }
+            });
+            idle.onTimeout.subscribe(function () {
+                _this.idleState = 'Timed out!';
+                _this.timedOut = true;
+                //action
+                _this.stopWatch();
+            });
+            // sets the ping interval to 15 seconds
+            keepalive.interval(15);
+            keepalive.onPing.subscribe(function () {
+                _this.lastPing = new Date();
+            });
+            this.startWatch();
+        }
+        TimeoutComponent.prototype.ngOnInit = function () {
+        };
+        TimeoutComponent.prototype.startWatch = function () {
+            this.idle.watch();
+            this.idleState = 'Started.';
+            this.timedOut = false;
+            this.isWarning = false;
+        };
+        TimeoutComponent.prototype.stopWatch = function () {
+            this.idle.stop();
+            this.isWarning = false;
+            this.router.navigate(['login']);
+        };
+        TimeoutComponent.prototype.using = function () {
+            //remove message and continue
+            this.isWarning = false;
+        };
+        TimeoutComponent.ctorParameters = function () { return [
+            { type: core$2.Idle },
+            { type: keepalive.Keepalive },
+            { type: AuthService },
+            { type: router.Router }
+        ]; };
+        TimeoutComponent = __decorate([
+            core.Component({
+                selector: 'spa-timeout',
+                template: "\r\n<div class=\"loading-spinner\" [hidden]=\"!isWarning\" >\r\n\r\n  <div style=\"width: 500px; text-align: center;\">\r\n\r\n\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <img style=\"width: 100px;\"\r\n        src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\">\r\n    </div>\r\n  </div>\r\n\r\n  <mat-card class=\"mat-elevation-z3\" >\r\n\r\n    <mat-card-header>\r\n\r\n     <h5>Are you still there ?</h5>\r\n\r\n    </mat-card-header>\r\n\r\n    <mat-card-content>\r\n\r\n      <br>\r\n     <span>{{idleState}}</span>\r\n\r\n     <br>\r\n\r\n    </mat-card-content>\r\n\r\n    <mat-card-actions>\r\n\r\n      <div class=\"row justify-content-around\">\r\n\r\n        <div class=\"col-2\">\r\n          <button  style=\"width: 100px;\" mat-stroked-button color=\"primary\" (click)=\"using()\">Yes</button>\r\n        </div>\r\n\r\n        <div class=\"col-4\">\r\n          <button  style=\"width: 100px;\" mat-stroked-button color=\"primary\" (click)=\"stopWatch()\">No</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\r\n</div>\r\n\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:-ms-grid;display:grid}.loading-spinner img{-ms-grid-row-align:end;align-self:end}.loading-message{text-align:center;-ms-grid-row-align:start;align-self:start}"]
+            })
+        ], TimeoutComponent);
+        return TimeoutComponent;
+    }());
+
+    var TableComponent = /** @class */ (function () {
+        function TableComponent() {
+            this.dataChange = new core.EventEmitter();
+            this.buttonClick = new core.EventEmitter();
+            this.loadClick = new core.EventEmitter();
+            this.createClick = new core.EventEmitter();
+            this.colType = exports.TableColumnType;
+            this.op = exports.Operator;
+            this.displayedColumns = [];
+            this._filterText = "";
+        }
+        TableComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            // console.log("Init")
+            this.config.columns.forEach(function (element) {
+                _this.displayedColumns.push(element.name);
+            });
+            this.displayedColumns.push("Action");
+            this.styleString = "width: " + 50 * this.config.actions.length + "px";
+        };
+        TableComponent.prototype.ngOnChanges = function () {
+            // console.log("OnChange")
+            this.data = new table.MatTableDataSource(this.data);
+            this.data.paginator = this.tablePaginator;
+            this.applyFilter(this._filterText);
+        };
+        TableComponent.prototype.applyFilter = function (filterValue) {
+            this.data.filter = filterValue.trim().toLowerCase();
+        };
+        TableComponent.prototype.do = function (name, item) {
+            var resp = new ActionResponse();
+            resp.name = name;
+            resp.value = item;
+            this.buttonClick.emit(resp);
+        };
+        TableComponent.prototype.create = function () {
+            this.createClick.emit();
+        };
+        TableComponent.prototype.load = function () {
+            this.loadClick.emit();
+        };
+        TableComponent.prototype.test = function (a, op, b) {
+            if (op == exports.Operator.Equal) {
+                if (a == b) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            if (op == exports.Operator.Greater) {
+                if (a > b) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            if (op == exports.Operator.Less) {
+                if (a < b) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            if (op == exports.Operator.NotEqual) {
+                if (a != b) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+        };
+        __decorate([
+            core.Input()
+        ], TableComponent.prototype, "config", void 0);
+        __decorate([
+            core.Input()
+        ], TableComponent.prototype, "data", void 0);
+        __decorate([
+            core.Output()
+        ], TableComponent.prototype, "dataChange", void 0);
+        __decorate([
+            core.Output()
+        ], TableComponent.prototype, "buttonClick", void 0);
+        __decorate([
+            core.Output()
+        ], TableComponent.prototype, "loadClick", void 0);
+        __decorate([
+            core.Output()
+        ], TableComponent.prototype, "createClick", void 0);
+        __decorate([
+            core.ViewChild('tablePaginator')
+        ], TableComponent.prototype, "tablePaginator", void 0);
+        TableComponent = __decorate([
+            core.Component({
+                selector: 'spa-table',
+                template: "<div >\r\n\r\n<div *ngIf=\"config.create.enabled || config.enableFilter\" class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n <div class=\"col\">\r\n<button *ngIf=\"config.create\" [disabled]=\"!config.create.enabled\" mat-raised-button color=\"primary\" (click)=\"create()\">{{config.create.display}}</button>\r\n</div>\r\n <div *ngIf=\"config.enableFilter\" class=\"col d-flex justify-content-end\">\r\n<mat-form-field style=\"font-size:12px;margin-right: 5px;\">\r\n<mat-label>Filter</mat-label>\r\n<input matInput [(ngModel)]=\"_filterText\" (keyup)=\"applyFilter($event.target.value)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n<button mat-mini-fab color=\"primary\" (click)=\"load()\" style=\"margin-top:5px\" matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n</div>\r\n</div>\r\n\r\n<div class=\"mat-elevation-z8\" *ngIf=\"data\">\r\n\r\n  <table mat-table [dataSource]=\"data\">\r\n\r\n    <ng-container *ngFor=\"let col of config.columns; let i = index\"\r\n\r\n      [matColumnDef]=\"col.name\">\r\n      <th mat-header-cell *matHeaderCellDef> {{col.display}} </th>\r\n      <td mat-cell *matCellDef=\"let row\">\r\n\r\n        <!-- String -->\r\n        <div *ngIf=\"(col.type==colType.String || col.type == null) && col.color == null\"> {{row[col.name]}}</div>\r\n\r\n        <div [ngStyle]=\"{'color':col.color.name}\"\r\n          *ngIf=\"(col.type==colType.String || col.type == null) && col.color != null && test(row[col.color.field], col.color.operator, col.color.value )\" >\r\n           {{row[col.name]}}\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"(col.type==colType.String || col.type == null) && col.color != null && !test(row[col.color.field], col.color.operator, col.color.value )\" >\r\n           {{row[col.name]}}\r\n        </div>\r\n\r\n        <!-- <div [ngStyle]=\"{'color':col.color.name}\"\r\n          *ngIf=\"(col.type==colType.String || col.type == null) && col.color != null &&\r\n          col.color.operator==op.Equal && row[col.color.field]==col.color.value\" >\r\n           {{row[col.name]}}\r\n        </div>\r\n\r\n        <div [ngStyle]=\"{'color':col.color.name}\"\r\n          *ngIf=\"(col.type==colType.String || col.type == null) && col.color != null &&\r\n          col.color.operator==op.Greater && row[col.color.field]>col.color.value\" >\r\n           {{row[col.name]}}\r\n        </div>\r\n\r\n        <div [ngStyle]=\"{'color':col.color.name}\"\r\n          *ngIf=\"(col.type==colType.String || col.type == null) && col.color != null &&\r\n          col.color.operator==op.Less && row[col.color.field]<col.color.value\" >\r\n           {{row[col.name]}}\r\n        </div>\r\n\r\n        <div [ngStyle]=\"{'color':col.color.name}\"\r\n          *ngIf=\"(col.type==colType.String || col.type == null) && col.color != null &&\r\n          col.color.operator==op.NotEqual && row[col.color.field]!=col.color.value\" >\r\n           {{row[col.name]}}\r\n        </div> -->\r\n\r\n\r\n        <!-- Date -->\r\n        <div *ngIf=\"col.type==colType.Date\"> {{row[col.name] | date:'dd/MM/yyyy'}}</div>\r\n\r\n\r\n        <!-- DateTime -->\r\n        <div *ngIf=\"col.type==colType.DateTime\"> {{row[col.name] | date:'dd/MM/yyyy HH:mm'}}</div>\r\n\r\n\r\n        <ng-container *ngFor=\"let icon of col.icons;\">\r\n          <!-- <mat-icon *ngIf=\"col.type==colType.Icon && icon.operator==op.Equal && row[icon.field]==icon.value\"\r\n            [ngStyle]=\"{'color':icon.color}\"\r\n            [matTooltip]=\"icon.hint\" matTooltipPosition=\"above\">\r\n            {{icon.name}}\r\n          </mat-icon>\r\n\r\n          <mat-icon *ngIf=\"col.type==colType.Icon && icon.operator==op.Greater && row[icon.field]>icon.value\"\r\n            [ngStyle]=\"{'color':icon.color}\"\r\n            [matTooltip]=\"icon.hint\" matTooltipPosition=\"above\">\r\n            {{icon.name}}\r\n          </mat-icon>\r\n\r\n          <mat-icon *ngIf=\"col.type==colType.Icon && icon.operator==op.Less && row[icon.field]<icon.value\"\r\n            [ngStyle]=\"{'color':icon.color}\"\r\n            [matTooltip]=\"icon.hint\" matTooltipPosition=\"above\">\r\n            {{icon.name}}\r\n          </mat-icon>\r\n          <mat-icon *ngIf=\"col.type==colType.Icon && icon.operator==op.NotEqual && row[icon.field]!=icon.value\"\r\n            [ngStyle]=\"{'color':icon.color}\"\r\n            [matTooltip]=\"icon.hint\" matTooltipPosition=\"above\">\r\n            {{icon.name}}\r\n          </mat-icon> -->\r\n\r\n          <mat-icon *ngIf=\"col.type==colType.Icon && test(row[icon.field],icon.operator,icon.value)\"\r\n            [ngStyle]=\"{'color':icon.color}\"\r\n            [matTooltip]=\"icon.hint\" matTooltipPosition=\"above\">\r\n            {{icon.name}}\r\n          </mat-icon>\r\n\r\n        </ng-container>\r\n\r\n      </td>\r\n\r\n    </ng-container>\r\n\r\n\r\n\r\n\r\n    <ng-container matColumnDef=\"Action\">\r\n\r\n      <th mat-header-cell *matHeaderCellDef> Action </th>\r\n      <td mat-cell *matCellDef=\"let row\" [style]=\"styleString+';padding-right: 0px;'\">\r\n\r\n          <ng-container *ngFor=\"let act of config.actions\">\r\n\r\n            <button *ngIf=\" (act.disappear && (row[act.disappear.field] != act.disappear.value)) || !act.disappear\"   mat-mini-fab\r\n\r\n              [disabled]=\"(act.disable && (row[act.disable.field] == act.disable.value))\"\r\n              [color]=\"act.color==null? 'primary' : act.color\"\r\n              [matTooltip]=\"act.hint\" matTooltipPosition=\"above\"\r\n              (click)=\"do(act.name,row)\" style=\"margin-right:5px\">\r\n              <mat-icon>{{act.icon}}</mat-icon>\r\n\r\n            </button>\r\n\r\n          </ng-container>\r\n\r\n      </td>\r\n    </ng-container>\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[config.greyout.field]==config.greyout.value}\"></tr>\r\n\r\n  </table>\r\n</div>\r\n<mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 50, 100]\" 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}.make-gray{background-color:#d3d3d3}"]
+            })
+        ], TableComponent);
+        return TableComponent;
+    }());
+
+    var TilesComponent = /** @class */ (function () {
+        function TilesComponent() {
+            this.clickable = false;
+            this.tileClick = new core.EventEmitter();
+            this.selected = "";
+        }
+        TilesComponent.prototype.ngOnInit = function () {
+        };
+        TilesComponent.prototype.clicked = function (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;
+            }
+        };
+        __decorate([
+            core.Input()
+        ], TilesComponent.prototype, "tiles", void 0);
+        __decorate([
+            core.Input()
+        ], TilesComponent.prototype, "clickable", void 0);
+        __decorate([
+            core.Output()
+        ], TilesComponent.prototype, "tileClick", void 0);
+        TilesComponent = __decorate([
+            core.Component({
+                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",
+                styles: [""]
+            })
+        ], TilesComponent);
+        return TilesComponent;
+    }());
+
+    var DateComponent = /** @class */ (function () {
+        function DateComponent() {
+            this.date = new forms.FormControl(new Date());
+            this.display = "";
+            this.readonly = false;
+            this.currentYear = new Date().getFullYear();
+            this.min = new forms.FormControl(new Date(this.currentYear - 50, 0, 1));
+            this.max = new forms.FormControl(new Date(this.currentYear + 50, 0, 1));
+        }
+        DateComponent.prototype.ngOnInit = function () {
+        };
+        // @Output() dateChange = new EventEmitter();
+        // minDate: Date = new Date(this.currentYear, 2, 2);
+        // maxDate: Date = new Date(this.currentYear, 2, 10);
+        DateComponent.prototype.onChangeEvent = function (d) {
+            // this.dateChange.emit(d);
+        };
+        __decorate([
+            core.Input()
+        ], DateComponent.prototype, "date", void 0);
+        __decorate([
+            core.Input()
+        ], DateComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], DateComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], DateComponent.prototype, "min", void 0);
+        __decorate([
+            core.Input()
+        ], DateComponent.prototype, "max", void 0);
+        DateComponent = __decorate([
+            core.Component({
+                selector: 'spa-date',
+                template: "\r\n<mat-form-field style=\"width:150px;margin-right:20px\">\r\n<input [formControl]=\"date\" [min]=\"min.value\" [max]=\"max.value\" matInput [matDatepicker]=\"picker_date\" [placeholder]=\"display\" [readonly]=\"true\"  [disabled]=\"readonly\">\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n</mat-form-field>\r\n",
+                styles: [""]
+            })
+        ], DateComponent);
+        return DateComponent;
+    }());
+
+    var TextComponent = /** @class */ (function () {
+        function TextComponent() {
+            // options: FormGroup;
+            this.hideRequiredControl = new forms.FormControl(true);
+            this.readonly = false;
+            this.hint = "";
+            this.display = "";
+            this.placeholder = "";
+            this.value = "";
+            this.valueChange = new core.EventEmitter();
+            this.format = "text";
+            this.leave = new core.EventEmitter();
+            this.enterPress = new core.EventEmitter();
+            this.rows = "";
+            this.width = "100%";
+            //Autocomplete items
+            this.options = [];
+            this.optionValue = "";
+            this.optionDisplay = "";
+            this.myControl = new forms.FormControl();
+            //validations
+            this.required = true;
+            this.min = 0;
+            this.max = 9000000000000000; //Math.max
+            this.regex = ""; //"[a-zA-Z ]*" //"/\S+@\S+\.\S+/";
+            this.control = new forms.FormControl(this.value, [forms.Validators.required, forms.Validators.minLength(this.min), forms.Validators.maxLength(this.max), forms.Validators.pattern(this.regex)]);
+        }
+        TextComponent.prototype.ngOnInit = function () {
+            if (this.options.length > 0) {
+                this.initFilter();
+            }
+            if (this.placeholder == "") {
+                this.placeholder = this.display;
+            }
+        };
+        TextComponent.prototype.ngAfterViewInit = function () {
+            if (this.readonly) {
+                this.control.setValidators(null);
+                this.control.updateValueAndValidity();
+            }
+            if (!this.required && !this.readonly) {
+                this.control.setValidators([forms.Validators.minLength(this.min), forms.Validators.maxLength(this.max), forms.Validators.pattern(this.regex)]);
+                this.control.updateValueAndValidity();
+            }
+        };
+        TextComponent.prototype.initFilter = function () {
+            var _this = this;
+            this.filteredOptions = this.myControl.valueChanges.pipe(operators.startWith(""), operators.map(function (value) { return _this._filter(value); }));
+        };
+        TextComponent.prototype._filter = function (value) {
+            var _this = this;
+            var filterValue = value.toLowerCase();
+            return this.options.filter(function (option) { return option["" + _this.optionDisplay].toLowerCase().includes(filterValue); });
+        };
+        TextComponent.prototype.changed = function () {
+            // console.log("value: " + this.value)
+            // console.log("cont: " + this.myControl.value)
+            // if (this.options.length > 0) {
+            //   this.value = this.myControl.value;
+            // }
+            this.valueChange.emit(this.value);
+        };
+        TextComponent.prototype.changed2 = function () {
+            // console.log("value: " + this.value)
+            // console.log("cont: " + this.myControl.value)
+            // if (this.options.length > 0) {
+            //   this.value = this.myControl.value;
+            // }
+            this.valueChange.emit(this.myControl.value);
+        };
+        TextComponent.prototype.leaved = function () {
+            this.leave.emit();
+        };
+        TextComponent.prototype.enterPressed = function () {
+            this.enterPress.emit();
+        };
+        TextComponent.prototype.validate = function () {
+            if ((this.required || this.min > 0) && this.control.hasError('required')) {
+                return "Required";
+            }
+            if (this.control.hasError('minlength')) {
+                return "Minimun length is " + this.min;
+            }
+            if (this.control.hasError('maxlength')) {
+                return "Maximum length is " + this.max;
+            }
+            if (this.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 "";
+        };
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "hint", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "placeholder", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "value", void 0);
+        __decorate([
+            core.Output()
+        ], TextComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "format", void 0);
+        __decorate([
+            core.Output()
+        ], TextComponent.prototype, "leave", void 0);
+        __decorate([
+            core.Output()
+        ], TextComponent.prototype, "enterPress", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "rows", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "width", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "optionValue", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "optionDisplay", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "required", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "min", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "max", void 0);
+        __decorate([
+            core.Input()
+        ], TextComponent.prototype, "regex", void 0);
+        TextComponent = __decorate([
+            core.Component({
+                selector: 'spa-text',
+                template: "<mat-form-field *ngIf=\"rows == '' && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" style=\"padding-right: 20px;\" [ngStyle]=\"{'width':width}\" >\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<!-- <mat-label *ngIf=\"format=='datetime'\">{{display | date:'dd/MM/yyyy HH:mm'}}</mat-label> -->\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate()}}</mat-error>\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 != ''  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" style=\"padding-right: 20px;\" [ngStyle]=\"{'width':width}\">\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()}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Work in progress cant bind to value -->\r\n\r\n <!-- <mat-form-field *ngIf=\"options.length !=0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" style=\"padding-right: 20px;\" [ngStyle]=\"{'width':width}\">\r\n  <input type=\"text\" autocomplete=\"off\" [placeholder]=\"display\" (change)=\"changed2()\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" [readonly]=\"readonly\">\r\n  <mat-autocomplete #auto=\"matAutocomplete\">\r\n    <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n</mat-form-field> -->\r\n\r\n",
+                styles: [""]
+            })
+        ], TextComponent);
+        return TextComponent;
+    }());
+
+    //-------------------------------------------EDIT
+    var viewerDialog = /** @class */ (function () {
+        function viewerDialog(httpService, data) {
+            this.httpService = httpService;
+            this.data = data;
+            this.isProcessing = false;
+            this.fileNames = new Array();
+            this.currIndex = 0;
+            this.currentFileUrl = "";
+            this.imageDoc = false;
+        }
+        viewerDialog.prototype.ngOnInit = function () {
+            this.fileNames = this.data.fileNames;
+            this.path = this.data.path;
+            this.fileName = this.data.fileName;
+            this.currIndex = this.data.fileNames.indexOf(this.fileName);
+            this.setURL();
+        };
+        viewerDialog.prototype.previous = function () {
+            if (this.fileNames.length == 0) {
+                return;
+            }
+            if (this.currIndex - 1 >= 0) {
+                this.currIndex = this.currIndex - 1;
+            }
+            else if (this.currIndex == 0) {
+                this.currIndex = this.fileNames.length - 1;
+            }
+            this.setURL();
+        };
+        viewerDialog.prototype.next = function () {
+            if (this.fileNames.length == 0) {
+                return;
+            }
+            if (this.currIndex + 1 < this.fileNames.length) {
+                this.currIndex = this.currIndex + 1;
+            }
+            else if (this.currIndex + 1 > this.fileNames.length - 1) {
+                this.currIndex = 0;
+            }
+            this.setURL();
+        };
+        viewerDialog.prototype.setURL = function () {
+            // this.currentFileUrl = this.httpService.apiUrl.replace("/api/", "/files/") + '' + "/" + this.files[this.currIndex];
+            this.currentFileUrl = "" + this.httpService.apiUrl.replace("/api/", "/") + this.path.replace("//", "/") + "/" + this.fileNames[this.currIndex];
+            if (this.currentFileUrl.toLocaleLowerCase().endsWith(".pdf") || this.currentFileUrl.toLocaleLowerCase().endsWith(".jpg") || this.currentFileUrl.toLocaleLowerCase().endsWith(".jpeg")) {
+                this.imageDoc = true;
+            }
+            else {
+                this.imageDoc = false;
+                window.open(this.currentFileUrl, '_blank');
+            }
+        };
+        viewerDialog.prototype.change = function (fileName) {
+            this.currIndex = this.fileNames.indexOf(fileName);
+            this.setURL();
+        };
+        viewerDialog.ctorParameters = function () { return [
+            { type: tinCore.HttpService },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        viewerDialog = __decorate([
+            core.Component({
+                selector: 'app-editRequest',
+                template: "\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\">\r\n\r\n    <div class=\"col\">\r\n      <ngx-doc-viewer *ngIf=\"imageDoc\"\r\n        [url]=\"currentFileUrl\"\r\n        viewer=\"url\"\r\n        style=\"width:100%;height:60vh;\">\r\n      </ngx-doc-viewer>\r\n\r\n      <div *ngIf=\"!imageDoc\" class=\"d-flex justify-content-center row align-items-center\" style=\"height:60vh;\">\r\n\r\n        This file type will be downloaded\r\n\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"col-3\">\r\n      <spa-chips [chips]=\"fileNames\" display=\"Documents\" icon=\"description\" (click)=\"change($event)\"></spa-chips>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"currIndex == 0\" (click)=\"previous()\" cdkFocusInitial>Previous</button>\r\n<button mat-button [disabled]=\"currIndex+1 == fileNames.length\" (click)=\"next()\" cdkFocusInitial>Next</button>\r\n<button mat-button mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n",
+                styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}"]
+            }),
+            __param(1, core.Inject(dialog.MAT_DIALOG_DATA))
+        ], viewerDialog);
+        return viewerDialog;
+    }());
+
+    var ViewerComponent = /** @class */ (function () {
+        function ViewerComponent(dialog) {
+            this.dialog = dialog;
+            this.dir = "";
+            this.folderName = "";
+            this.fileNames = new Array();
+            this.removable = false;
+            this.remove = new core.EventEmitter();
+            this.display = "Documents";
+            this.title = "Documents";
+        }
+        ViewerComponent.prototype.ngOnInit = function () {
+            // console.log(`${this.dir}/${this.folderName}`)
+        };
+        // fileList: string[];
+        ViewerComponent.prototype.viewDocs = function (fileName) {
+            if (typeof fileName != 'string') {
+                return;
+            }
+            // console.log("opening doc: " + fileName)
+            var dialogRef = this.dialog.open(viewerDialog, {
+                minWidth: '1500px',
+                maxWidth: '80vw',
+                data: { fileNames: this.fileNames, fileName: fileName, path: this.dir + "/" + this.folderName }
+            });
+        };
+        ViewerComponent.prototype.removed = function (i) {
+            this.remove.emit(i);
+        };
+        ViewerComponent.ctorParameters = function () { return [
+            { type: dialog.MatDialog }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ViewerComponent.prototype, "dir", void 0);
+        __decorate([
+            core.Input()
+        ], ViewerComponent.prototype, "folderName", void 0);
+        __decorate([
+            core.Input()
+        ], ViewerComponent.prototype, "fileNames", void 0);
+        __decorate([
+            core.Input()
+        ], ViewerComponent.prototype, "removable", void 0);
+        __decorate([
+            core.Output()
+        ], ViewerComponent.prototype, "remove", void 0);
+        __decorate([
+            core.Input()
+        ], ViewerComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], ViewerComponent.prototype, "title", void 0);
+        ViewerComponent = __decorate([
+            core.Component({
+                selector: 'spa-viewer',
+                template: "<div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\r\n  <mat-label style=\"font-size: 20px; font-weight: 300\" >  {{title}}</mat-label >\r\n</div>\r\n\r\n<spa-chips [chips]=\"fileNames\" [title]=\"title\"  [removable]=\"removable\" icon=\"description\" (click)=\"viewDocs($event)\" (remove)=\"removed($event)\"></spa-chips>\r\n\r\n\r\n\r\n<div *ngIf=\"!fileNames\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\r\n\r\n  No {{title.toLowerCase()}}\r\n\r\n</div>\r\n",
+                styles: [".truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.align-end{justify-content:flex-end}.fx-spacer{flex:1 1 auto}"]
+            })
+        ], ViewerComponent);
+        return ViewerComponent;
+    }());
+
+    var SelectComponent = /** @class */ (function () {
+        function SelectComponent() {
+            this.width = "100%";
+            this.readonly = false;
+            this.readonlyMode = "";
+            this.hint = "";
+            this.display = "";
+            this.value = "";
+            this.optionValue = "";
+            this.optionDisplay = "";
+            this.optionDisplayExtra = "";
+            this.valueChange = new core.EventEmitter();
+        }
+        SelectComponent.prototype.ngOnInit = function () {
+            // this.displayValue = this.options.filter((m) => m.optionValue == this.value)
+            // console.log(this.displayValue)
+            // this.displayValue = this.value
+        };
+        SelectComponent.prototype.ngOnChanges = function () {
+            var _this = this;
+            if (this.readonlyMode != "" && this.options.length > 0) {
+                this.displayValue = this.options.filter(function (m) { return m["" + _this.optionValue] == _this.value; })[0]["" + this.optionDisplay];
+            }
+        };
+        SelectComponent.prototype.changed = function () {
+            this.valueChange.emit(this.value);
+        };
+        SelectComponent.prototype.selectChanged = function () {
+        };
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "width", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "readonlyMode", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "hint", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "optionValue", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "optionDisplay", void 0);
+        __decorate([
+            core.Input()
+        ], SelectComponent.prototype, "optionDisplayExtra", void 0);
+        __decorate([
+            core.Output()
+        ], SelectComponent.prototype, "valueChange", void 0);
+        SelectComponent = __decorate([
+            core.Component({
+                selector: 'spa-select',
+                template: "\r\n\r\n\r\n<mat-form-field *ngIf=\"readonlyMode==''\" style=\"padding-right: 20px;\"  [ngStyle]=\"{'width':width}\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\"  [disabled]=\"readonly\">\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: [""]
+            })
+        ], SelectComponent);
+        return SelectComponent;
+    }());
+
+    var CheckComponent = /** @class */ (function () {
+        function CheckComponent() {
+            this.readonly = false;
+            this.display = "";
+            this.value = false;
+            this.valueChange = new core.EventEmitter();
+            this.click = new core.EventEmitter();
+            this.check = new core.EventEmitter();
+            this.uncheck = new core.EventEmitter();
+        }
+        CheckComponent.prototype.ngOnInit = function () {
+        };
+        CheckComponent.prototype.changed = function () {
+            this.valueChange.emit(this.value);
+        };
+        CheckComponent.prototype.clicked = function () {
+            this.click.emit();
+            if (!this.value) {
+                this.checked();
+            }
+            else {
+                this.unchecked();
+            }
+        };
+        CheckComponent.prototype.checked = function () {
+            this.check.emit();
+        };
+        CheckComponent.prototype.unchecked = function () {
+            this.uncheck.emit();
+        };
+        __decorate([
+            core.Input()
+        ], CheckComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], CheckComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], CheckComponent.prototype, "value", void 0);
+        __decorate([
+            core.Output()
+        ], CheckComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Output()
+        ], CheckComponent.prototype, "click", void 0);
+        __decorate([
+            core.Output()
+        ], CheckComponent.prototype, "check", void 0);
+        __decorate([
+            core.Output()
+        ], CheckComponent.prototype, "uncheck", void 0);
+        CheckComponent = __decorate([
+            core.Component({
+                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",
+                styles: [""]
+            })
+        ], CheckComponent);
+        return CheckComponent;
+    }());
+
+    var AttachComponent = /** @class */ (function () {
+        function AttachComponent() {
+            this.message = "Drag and drop files here";
+            this.files = [];
+            this.filesChange = new core.EventEmitter();
+            this.upload = new core.EventEmitter();
+            this.enableUpload = false;
+        }
+        AttachComponent.prototype.ngOnInit = function () {
+        };
+        /**
+         * on file drop handler
+         */
+        AttachComponent.prototype.onFileDropped = function ($event) {
+            this.prepareFilesList($event);
+        };
+        /**
+         * handle file from browsing
+         */
+        AttachComponent.prototype.fileBrowseHandler = function (files) {
+            this.prepareFilesList(files);
+        };
+        /**
+         * Delete file from files list
+         * @param index (File index)
+         */
+        AttachComponent.prototype.deleteFile = function (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)
+         */
+        AttachComponent.prototype.prepareFilesList = function (files) {
+            var e_1, _a;
+            try {
+                for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
+                    var item = files_1_1.value;
+                    item.progress = 0;
+                    this.files.push(item);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (files_1_1 && !files_1_1.done && (_a = files_1.return)) _a.call(files_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            // this.uploadFilesSimulator(0);
+        };
+        /**
+         * format bytes
+         * @param bytes (File size in bytes)
+         * @param decimals (Decimals point)
+         */
+        AttachComponent.prototype.formatBytes = function (bytes, decimals) {
+            if (bytes === 0) {
+                return '0 Bytes';
+            }
+            var k = 1024;
+            var dm = decimals <= 0 ? 0 : decimals || 2;
+            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+            var i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+        };
+        AttachComponent.prototype.uploaded = function () {
+            this.upload.emit();
+        };
+        AttachComponent.prototype.filesChanged = function () {
+            this.filesChange.emit(this.files);
+        };
+        __decorate([
+            core.Input()
+        ], AttachComponent.prototype, "message", void 0);
+        __decorate([
+            core.Input()
+        ], AttachComponent.prototype, "files", void 0);
+        __decorate([
+            core.Output()
+        ], AttachComponent.prototype, "filesChange", void 0);
+        __decorate([
+            core.Output()
+        ], AttachComponent.prototype, "upload", void 0);
+        __decorate([
+            core.Input()
+        ], AttachComponent.prototype, "enableUpload", void 0);
+        AttachComponent = __decorate([
+            core.Component({
+                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.target.files)\" />\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:2px dashed #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{-webkit-animation:1s infinite shake;animation:1s infinite shake}.files-list{margin-top:1.5rem}.files-list .single-file{display:flex;padding:.5rem;justify-content:space-between;align-items:center;border:1px dashed #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 0 0 1rem}.files-list .single-file .info{width:100%}@-webkit-keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) 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)}100%{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) 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)}100%{transform:translate(1px,-2px) rotate(-1deg)}}"]
+            })
+        ], AttachComponent);
+        return AttachComponent;
+    }());
+
+    var DatetimeComponent = /** @class */ (function () {
+        function DatetimeComponent() {
+            this.display = "";
+            this.value = "";
+            this.valueChange = new core.EventEmitter();
+            this.readonly = false;
+            this.min = "01 jan 1900";
+            this.max = "31 dec 9999";
+        }
+        DatetimeComponent.prototype.ngOnInit = function () {
+        };
+        DatetimeComponent.prototype.changed = function () {
+            this.valueChange.emit(this.value);
+        };
+        __decorate([
+            core.Input()
+        ], DatetimeComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], DatetimeComponent.prototype, "value", void 0);
+        __decorate([
+            core.Output()
+        ], DatetimeComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Input()
+        ], DatetimeComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], DatetimeComponent.prototype, "min", void 0);
+        __decorate([
+            core.Input()
+        ], DatetimeComponent.prototype, "max", void 0);
+        DatetimeComponent = __decorate([
+            core.Component({
+                selector: 'spa-datetime',
+                template: "<mat-form-field style=\"width:150px;margin-right:20px\">\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: [""]
+            })
+        ], DatetimeComponent);
+        return DatetimeComponent;
+    }());
+
+    var MoneyComponent = /** @class */ (function () {
+        function MoneyComponent() {
+            this.readonly = false;
+            this.display = "";
+            this.value = "";
+            this.valueChange = new core.EventEmitter();
+            this.width = "100%";
+            this.hint = "";
+            this.currency = "$";
+        }
+        MoneyComponent.prototype.ngOnInit = function () {
+        };
+        MoneyComponent.prototype.ngOnChanges = function () {
+        };
+        MoneyComponent.prototype.changed = function () {
+            this.valueChange.emit(this.value);
+        };
+        __decorate([
+            core.Input()
+        ], MoneyComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], MoneyComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], MoneyComponent.prototype, "value", void 0);
+        __decorate([
+            core.Output()
+        ], MoneyComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Input()
+        ], MoneyComponent.prototype, "width", void 0);
+        __decorate([
+            core.Input()
+        ], MoneyComponent.prototype, "hint", void 0);
+        __decorate([
+            core.Input()
+        ], MoneyComponent.prototype, "currency", void 0);
+        MoneyComponent = __decorate([
+            core.Component({
+                selector: 'spa-money',
+                template: "\r\n<div class=\"tin-input-row\">\r\n\r\n<Label>{{currency}}</Label>\r\n<mat-form-field  [hintLabel]=\"hint\"  style=\"padding-right: 20px;\" [ngStyle]=\"{'width':width}\" >\r\n  <mat-label>{{display}}</mat-label>\r\n  <!-- <span>$</span> -->\r\n  <input matInput class=\"example-right-align\" autocomplete=\"off\" type=\"number\" min=\"0.00\"  step=\"0.01\" [(ngModel)]=\"value \"  [placeholder]=\"display\" (change)=\"changed()\" [readonly]=\"readonly\" />\r\n<!-- <span matTextSuffix>.00</span> -->\r\n</mat-form-field>\r\n</div>\r\n\r\n\r\n\r\n\r\n",
+                styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-inner-spin-button,input.example-right-align::-webkit-outer-spin-button{display:none}.curr{background-color:red}"]
+            })
+        ], MoneyComponent);
+        return MoneyComponent;
+    }());
+
+    var DndDirective = /** @class */ (function () {
+        function DndDirective() {
+            this.fileDropped = new core.EventEmitter();
+        }
+        // Dragover listener
+        DndDirective.prototype.onDragOver = function (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.fileOver = true;
+        };
+        // Dragleave listener
+        DndDirective.prototype.onDragLeave = function (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.fileOver = false;
+        };
+        // Drop listener
+        DndDirective.prototype.ondrop = function (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.fileOver = false;
+            var files = evt.dataTransfer.files;
+            if (files.length > 0) {
+                this.fileDropped.emit(files);
+            }
+        };
+        __decorate([
+            core.HostBinding('class.fileover')
+        ], DndDirective.prototype, "fileOver", void 0);
+        __decorate([
+            core.Output()
+        ], DndDirective.prototype, "fileDropped", void 0);
+        __decorate([
+            core.HostListener('dragover', ['$event'])
+        ], DndDirective.prototype, "onDragOver", null);
+        __decorate([
+            core.HostListener('dragleave', ['$event'])
+        ], DndDirective.prototype, "onDragLeave", null);
+        __decorate([
+            core.HostListener('drop', ['$event'])
+        ], DndDirective.prototype, "ondrop", null);
+        DndDirective = __decorate([
+            core.Directive({
+                selector: '[appDnd]'
+            })
+        ], DndDirective);
+        return DndDirective;
+    }());
+
+    var ChipsComponent = /** @class */ (function () {
+        function ChipsComponent(messageService) {
+            this.messageService = messageService;
+            this.icon = "";
+            this.removable = false;
+            this.addable = false;
+            // @Output() chipClick = new EventEmitter();
+            this.click = new core.EventEmitter();
+            this.remove = new core.EventEmitter();
+        }
+        ChipsComponent.prototype.ngOnInit = function () {
+        };
+        ChipsComponent.prototype.clicked = function (chip) {
+            console.log("Clicked chip: " + chip);
+            if (typeof chip != 'string') {
+                return;
+            }
+            if (chip) {
+                this.click.emit(chip);
+            }
+        };
+        ChipsComponent.prototype.removed = function (chip) {
+            // const index = this.chips.indexOf(chip);
+            var _this = this;
+            // if (index >= 0) {
+            //   this.chips.splice(index, 1);
+            // }
+            this.messageService.confirm("Remove " + chip + " ?").subscribe(function (result) {
+                if (result == "yes") {
+                    _this.remove.emit(chip);
+                }
+                ;
+            });
+        };
+        ChipsComponent.ctorParameters = function () { return [
+            { type: MessageService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "icon", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "removable", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "addable", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "chips", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "click", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "remove", void 0);
+        ChipsComponent = __decorate([
+            core.Component({
+                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",
+                styles: [""]
+            })
+        ], ChipsComponent);
+        return ChipsComponent;
+    }());
+
+    var ActivityComponent = /** @class */ (function () {
+        function ActivityComponent() {
+            this.notes = new Array();
+            this.notesMessage = "Empty";
+            this.title = "Notes";
+        }
+        ActivityComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input()
+        ], ActivityComponent.prototype, "notes", void 0);
+        __decorate([
+            core.Input()
+        ], ActivityComponent.prototype, "title", void 0);
+        ActivityComponent = __decorate([
+            core.Component({
+                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",
+                styles: [""]
+            })
+        ], ActivityComponent);
+        return ActivityComponent;
+    }());
+
+    var HtmlComponent = /** @class */ (function () {
+        function HtmlComponent() {
+            this.value = "";
+            this.valueChange = new core.EventEmitter();
+            this.readonly = false;
+            this.config = {
+                editable: true,
+                spellcheck: true,
+                height: 'auto',
+                minHeight: '5rem',
+                placeholder: 'Enter text here...',
+                translate: 'no',
+                defaultParagraphSeparator: '',
+                defaultFontName: 'Arial',
+                toolbarHiddenButtons: [
+                    [
+                        'bold',
+                        'italic',
+                        'underline',
+                        'strikeThrough',
+                        'subscript',
+                        'superscript',
+                        'justifyLeft',
+                        'justifyCenter',
+                        'justifyRight',
+                        'justifyFull',
+                        'indent',
+                        'outdent',
+                        'insertUnorderedList',
+                        'insertOrderedList',
+                        'heading',
+                        'fontName'
+                    ],
+                    [
+                        'fontSize',
+                        'textColor',
+                        'backgroundColor',
+                        'customClasses',
+                        'link',
+                        'unlink',
+                        'insertImage',
+                        'insertVideo',
+                        'insertHorizontalRule',
+                        'removeFormat',
+                        'toggleEditorMode'
+                    ]
+                ],
+                customClasses: [
+                    {
+                        name: "quote",
+                        class: "quote",
+                    },
+                    {
+                        name: 'redText',
+                        class: 'redText'
+                    },
+                    {
+                        name: "titleText",
+                        class: "titleText",
+                        tag: "h1",
+                    },
+                ]
+            };
+        }
+        HtmlComponent.prototype.ngOnInit = function () {
+        };
+        HtmlComponent.prototype.changed = function () {
+            this.valueChange.emit(this.value);
+        };
+        HtmlComponent.prototype.ngOnChanges = function () {
+            // console.log("OnChange")
+            this.config.editable = !this.readonly;
+        };
+        __decorate([
+            core.Input()
+        ], HtmlComponent.prototype, "value", void 0);
+        __decorate([
+            core.Output()
+        ], HtmlComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Input()
+        ], HtmlComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], HtmlComponent.prototype, "config", void 0);
+        HtmlComponent = __decorate([
+            core.Component({
+                selector: 'spa-html',
+                template: "<angular-editor  [(ngModel)]=\"value\" [config]=\"config\" (ngModelChange)=\"changed()\" ></angular-editor>\r\n",
+                styles: [""]
+            })
+        ], HtmlComponent);
+        return HtmlComponent;
+    }());
+
+    var OptionComponent = /** @class */ (function () {
+        function OptionComponent() {
+            this.optionValue = "";
+            this.optionDisplay = "";
+            this.readonly = false;
+            this.value = "";
+            this.display = "";
+            this.show = false;
+            this.valueChange = new core.EventEmitter();
+            this.enterPress = new core.EventEmitter();
+        }
+        OptionComponent.prototype.ngOnInit = function () {
+        };
+        OptionComponent.prototype.changed = function () {
+            this.valueChange.emit(this.value);
+        };
+        OptionComponent.prototype.enterPressed = function () {
+            this.valueChange.emit();
+        };
+        OptionComponent.prototype.resetValue = function () {
+            this.value = "";
+            this.changed();
+        };
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "optionValue", void 0);
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "optionDisplay", void 0);
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "readonly", void 0);
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], OptionComponent.prototype, "show", void 0);
+        __decorate([
+            core.Output()
+        ], OptionComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Output()
+        ], OptionComponent.prototype, "enterPress", void 0);
+        OptionComponent = __decorate([
+            core.Component({
+                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<mat-form-field style=\"margin-right:10px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n<mat-form-field style=\"margin-right:30px\" *ngIf=\"show && !options\">\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;\" width=\"100\" *ngIf=\"show && options\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [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: [""]
+            })
+        ], OptionComponent);
+        return OptionComponent;
+    }());
+
+    var LabelComponent = /** @class */ (function () {
+        function LabelComponent() {
+            this.display = "";
+            this.value = "";
+            this.format = "text";
+        }
+        LabelComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input()
+        ], LabelComponent.prototype, "display", void 0);
+        __decorate([
+            core.Input()
+        ], LabelComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], LabelComponent.prototype, "format", void 0);
+        LabelComponent = __decorate([
+            core.Component({
+                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",
+                styles: [""]
+            })
+        ], LabelComponent);
+        return LabelComponent;
+    }());
+
+    var ɵ0$1 = { displayDefaultIndicatorType: false };
+    var StepsComponent = /** @class */ (function () {
+        function StepsComponent() {
+            this.value = "";
+        }
+        StepsComponent.prototype.ngOnInit = function () {
+        };
+        StepsComponent.prototype.ngAfterViewInit = function () {
+        };
+        StepsComponent.prototype.ngOnChanges = function () {
+            // console.log("OnChange")
+            this.pushSteps();
+        };
+        StepsComponent.prototype.setStepper = function () {
+            if (this.value == "")
+                return;
+            // console.log(this.value)
+            // this.stepper.disableRipple = true;
+            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;
+            }
+        };
+        StepsComponent.prototype.pushStepper = function (count) {
+            for (var index = 0; index < count + 1; index++) {
+                // const element = array[index];
+                this.stepper.selectedIndex = index;
+                // console.log("pushed")
+            }
+        };
+        StepsComponent.prototype.pushSteps = function () {
+            var e_1, _a;
+            if (this.steps.length == 0)
+                return;
+            if (this.value == "")
+                return;
+            this.stepper.selectedIndex = 0;
+            var i = 0;
+            try {
+                for (var _b = __values(this.steps), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var step = _c.value;
+                    if (step.name != this.value) {
+                        this.stepper.selectedIndex = i;
+                        i++;
+                    }
+                    else {
+                        this.stepper.selectedIndex = i;
+                        // console.log("Stopped")
+                        break;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        __decorate([
+            core.ViewChild('stepper')
+        ], StepsComponent.prototype, "stepper", void 0);
+        __decorate([
+            core.Input()
+        ], StepsComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], StepsComponent.prototype, "steps", void 0);
+        StepsComponent = __decorate([
+            core.Component({
+                selector: 'spa-steps',
+                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",
+                providers: [{
+                        provide: stepper$1.STEPPER_GLOBAL_OPTIONS, useValue: ɵ0$1
+                    }],
+                styles: [".transparent{background-color:rgba(0,0,0,0)}: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}"]
+            })
+        ], StepsComponent);
+        return StepsComponent;
+    }());
+
+    var TinSpaModule = /** @class */ (function () {
+        function TinSpaModule() {
+        }
+        TinSpaModule = __decorate([
+            core.NgModule({
+                declarations: [DndDirective, TinSpaComponent, messageDialog, NavMenuComponent, LoaderComponent,
+                    TimeoutComponent, TableComponent, TilesComponent, DateComponent, TextComponent,
+                    ViewerComponent, SelectComponent, CheckComponent, AttachComponent, DatetimeComponent,
+                    MoneyComponent,
+                    ChipsComponent,
+                    ActivityComponent, viewerDialog, HtmlComponent, OptionComponent, LabelComponent, StepsComponent],
+                entryComponents: [messageDialog],
+                imports: [
+                    forms.ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    SpaMatModule,
+                    angular2Moment.MomentModule,
+                    ngxDocViewer.NgxDocViewerModule,
+                    angularEditor.AngularEditorModule,
+                    keepalive.NgIdleKeepaliveModule.forRoot()
+                ],
+                exports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    SpaMatModule,
+                    TinSpaComponent,
+                    messageDialog,
+                    NavMenuComponent,
+                    LoaderComponent,
+                    TimeoutComponent,
+                    TableComponent,
+                    TilesComponent,
+                    DateComponent,
+                    ViewerComponent,
+                    SelectComponent,
+                    TextComponent,
+                    DatetimeComponent,
+                    CheckComponent,
+                    AttachComponent,
+                    MoneyComponent,
+                    ChipsComponent,
+                    ActivityComponent,
+                    HtmlComponent,
+                    OptionComponent,
+                    LabelComponent,
+                    StepsComponent
+                ],
+                providers: [
+                    { provide: http.HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
+                    { provide: common.LocationStrategy, useClass: common.HashLocationStrategy }
+                ],
+            })
+        ], TinSpaModule);
+        return TinSpaModule;
+    }());
+
+    var LoginComponent = /** @class */ (function () {
+        function LoginComponent(httpService, storageService, router, messageService, dataService, authService, logService) {
+            this.httpService = httpService;
+            this.storageService = storageService;
+            this.router = router;
+            this.messageService = messageService;
+            this.dataService = dataService;
+            this.authService = authService;
+            this.logService = logService;
+            this.user = new User();
+            this.hide = true;
+            this.isProcessing = false;
+            this.appConfig = new AppConfig();
+        }
+        LoginComponent.prototype.ngOnInit = function () {
+            this.authService.updateloggedin(false);
+            this.authService.updateRole(null);
+            this.storageService.clear();
+        };
+        LoginComponent.prototype.signup = function () {
+            this.router.navigate(["signup"]);
+        };
+        LoginComponent.prototype.recoverAccount = function () {
+            this.router.navigate(["recover-account"]);
+        };
+        LoginComponent.prototype.login = function () {
+            var _this = this;
+            if (this.user.userID == "" || this.user.password == "") {
+                this.messageService.toast("Please enter your credentials");
+                return;
+            }
+            this.logService.info("logging in");
+            this.isProcessing = true;
+            this.dataService.login(this.user).subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    if (apiResponse.ds.dtUser[0]["authType"] == 'local' && !_this.appConfig.localAuth) {
+                        _this.messageService.toast("Contact Admin: Authentication Type error");
+                        return;
+                    }
+                    if (apiResponse.ds.dtUser[0]["authType"] == 'AD' && !_this.appConfig.ADAuth) {
+                        _this.messageService.toast("Contact Admin: Authentication Type error");
+                        return;
+                    }
+                    _this.authService.updateloggedin(true);
+                    _this.authService.updateToken(apiResponse.ds.dtUser[0]["token"]);
+                    _this.storageService.store(tinCore.Constants.AUTH_TOKEN, apiResponse.ds.dtUser[0]["token"]);
+                    _this.authService.updateTokenExpire(apiResponse.ds.dtUser[0]["tokenExpire"]);
+                    _this.storageService.store(tinCore.Constants.AUTH_TOKEN_EXPIRE, apiResponse.ds.dtUser[0]["tokenExpire"]);
+                    _this.authService.updateCurrentUser(_this.user.userID);
+                    _this.storageService.store(tinCore.Constants.AUTH_USER, _this.user.userID);
+                    _this.authService.updateLoggedUserFullName(apiResponse.ds.dtProfile[0]["firstName"]);
+                    _this.storageService.store(tinCore.Constants.AUTH_NAME, apiResponse.ds.dtProfile[0]["firstName"]);
+                    _this.authService.updateRole(apiResponse.ds.dtRole[0]);
+                    _this.storageService.store(tinCore.Constants.AUTH_ROLES, JSON.stringify(apiResponse.ds.dtRole[0]));
+                    // this.setRole(apiResponse.dt[0]["accessLevel"]);
+                    // this.setRole("1");
+                    if (apiResponse.ds.dtUser[0]["changePassword"] == "0") {
+                        _this.router.navigate(["home"]);
+                        // this.messageService.toast("Welcome");
+                        _this.logService.info("logged in");
+                    }
+                    else {
+                        _this.router.navigate(["home/user/change-password"]);
+                    }
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                    _this.user.password = "";
+                }
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        LoginComponent.prototype.setRole = function (roleID) {
+            var _this = this;
+            this.dataService
+                .GetRole("id", roleID)
+                .subscribe(function (apiResponse) {
+                _this.authService.updateRole(apiResponse.dt[0]);
+                _this.storageService.store(tinCore.Constants.AUTH_ROLES, JSON.stringify(apiResponse.dt[0]));
+            });
+        };
+        LoginComponent.ctorParameters = function () { return [
+            { type: tinCore.HttpService },
+            { type: StorageService },
+            { type: router.Router },
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService },
+            { type: LogService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], LoginComponent.prototype, "config", void 0);
+        __decorate([
+            core.Input()
+        ], LoginComponent.prototype, "appConfig", void 0);
+        LoginComponent = __decorate([
+            core.Component({
+                selector: "spa-login",
+                template: "\r\n  <div class=\"tin-bg-login login-page\">\r\n\r\n\r\n    <div *ngIf=\"config.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"config.logoSize=='normal'\"  [src]=\"config.logo\" style=\"height:100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"config.logoSize=='medium'\"  [src]=\"config.logo\" style=\"height:150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"config.logoSize=='large'\"  [src]=\"config.logo\" style=\"height:250px;margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"config.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\r\n      <div class=\"d-none d-sm-block\">\r\n\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n\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>{{config.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <mat-form-field style=\"width: 100%;\">\r\n                <mat-label>Username</mat-label>\r\n                <input id=\"txtUserID\" matInput #parentInput placeholder=\"Enter Username\"  [(ngModel)]=\"user.userID\" autocomplete=\"off\" autofocus>\r\n              </mat-form-field>\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\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\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=\"config.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=\"config.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\r\n\r\n\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n\r\n",
+                styles: [".login-page{position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto}.tin-bg-login{background-image:url(~/assets/login-bg.jpg);background-size:100%}"]
+            })
+        ], LoginComponent);
+        return LoginComponent;
+    }());
+
+    var SignupComponent = /** @class */ (function () {
+        function SignupComponent(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();
+        }
+        SignupComponent.prototype.ngOnInit = function () {
+            this.account.user = this.user;
+            this.account.profile = this.profile;
+        };
+        SignupComponent.prototype.create = function () {
+            var _this = this;
+            this.profile.userID = this.user.userID;
+            this.isProcessing = true;
+            this.dataService.UpdateAccount(this.account, "add").subscribe(function (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);
+                }
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        SignupComponent.ctorParameters = function () { return [
+            { type: tinCore.HttpService },
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService }
+        ]; };
+        SignupComponent = __decorate([
+            core.Component({
+                selector: 'spa-signup',
+                template: "\r\n<h4 style=\"margin-top: 1em;\">Signup</h4>\r\n\r\n<hr/>\r\nComplete the form below.\r\n\r\n<div class=\"d-flex justify-content-center row align-items-center\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px; width: 50%;\">\r\n\r\n\r\n    <div class=\"tin-input-row\">\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>FirstName</mat-label>\r\n          <input matInput autocomplete=\"off\" [(ngModel)]=\"account.profile.firstName\" placeholder=\"Enter FirstName\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>LastName</mat-label>\r\n          <input matInput autocomplete=\"off\" [(ngModel)]=\"profile.lastName\" placeholder=\"Enter LastName\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"tin-input-row mt-3\">\r\n\r\n      <div class=\"col-6\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>UserID</mat-label>\r\n          <input matInput autocomplete=\"off\" [(ngModel)]=\"user.userID\" placeholder=\"Enter UserID\" />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"tin-input-row\">\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>Password</mat-label>\r\n          <input matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"user.password\" placeholder=\"Enter Password\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>Confirm Password</mat-label>\r\n          <input matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"confirmPassword\" placeholder=\"Enter Confirm Password\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n\r\n    <div class=\"tin-input-row mt-3\">\r\n      <button 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\r\n</div>\r\n\r\n",
+                styles: [""]
+            })
+        ], SignupComponent);
+        return SignupComponent;
+    }());
+
+    var RecoverAccountComponent = /** @class */ (function () {
+        function RecoverAccountComponent(location, dataService, authService, messageService) {
+            this.location = location;
+            this.dataService = dataService;
+            this.authService = authService;
+            this.messageService = messageService;
+            this.userID = "";
+        }
+        RecoverAccountComponent.prototype.ngOnInit = function () {
+        };
+        RecoverAccountComponent.prototype.recover = function () {
+            var _this = this;
+            if (this.userID == "") {
+                this.messageService.toast("Please enter your userID");
+                return;
+            }
+            else {
+                var u = new User();
+                u.userID = this.userID;
+                this.dataService.SelfReset(u).subscribe(function (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.ctorParameters = function () { return [
+            { type: common.Location },
+            { type: DataService },
+            { type: AuthService },
+            { type: MessageService }
+        ]; };
+        RecoverAccountComponent = __decorate([
+            core.Component({
+                selector: 'spa-recover-account',
+                template: "<h4 style=\"margin-top: 1em;\">Recover Account</h4>\r\n\r\n<hr/>\r\nSubmit your UserID and we will send you details to your registered email address.\r\n\r\n<div class=\"mt-3\" >\r\n\r\n\r\n  <div class=\"tin-input \" style=\"font-size:14px;\">\r\n\r\n\r\n\r\n    <div class=\"col\">\r\n\r\n      <mat-form-field style=\"width:300px\">\r\n        <mat-label>UserID</mat-label>\r\n        <input matInput autocomplete=\"off\" [(ngModel)]=\"userID\" placeholder=\"Enter UserID\" />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"col mt-3\">\r\n\r\n      <button 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",
+                styles: [""]
+            })
+        ], RecoverAccountComponent);
+        return RecoverAccountComponent;
+    }());
+
+    var SpaIndexModule = /** @class */ (function () {
+        function SpaIndexModule() {
+        }
+        SpaIndexModule = __decorate([
+            core.NgModule({
+                declarations: [LoginComponent, SignupComponent, RecoverAccountComponent],
+                entryComponents: [],
+                imports: [
+                    forms.ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    SpaMatModule,
+                ],
+                exports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    SpaMatModule,
+                    LoginComponent,
+                    SignupComponent,
+                    RecoverAccountComponent,
+                ],
+            })
+        ], SpaIndexModule);
+        return SpaIndexModule;
+    }());
+
+    var ChangePasswordComponent = /** @class */ (function () {
+        function ChangePasswordComponent(location, httpService, messageService, dataService, authService) {
+            this.location = location;
+            this.httpService = httpService;
+            this.messageService = messageService;
+            this.dataService = dataService;
+            this.authService = authService;
+            this.isProcessing = false;
+            this.changePassword = new ChangeUserPassword();
+        }
+        ChangePasswordComponent.prototype.ngOnInit = function () {
+            this.myRole = this.authService.currentRoleSource.value;
+            if (this.dataService.tmpProfileUserID == "") {
+                this.changePassword.userID = this.authService.currentUser;
+            }
+            else {
+                this.changePassword.userID = this.dataService.tmpProfileUserID;
+                this.dataService.tmpProfileUserID = "";
+            }
+            // console.log(this.myRole)
+        };
+        ChangePasswordComponent.prototype.change = function () {
+            var _this = this;
+            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(function (apiResponse) {
+                    _this.isProcessing = false;
+                    if (apiResponse.message == "success") {
+                        _this.messageService.toast("Password Changed");
+                        _this.location.back();
+                    }
+                    else {
+                        _this.messageService.toast("Error: " + apiResponse.message);
+                    }
+                });
+            }
+            else {
+                this.dataService.changePassword(this.changePassword).subscribe(function (apiResponse) {
+                    _this.isProcessing = false;
+                    if (apiResponse.message == "success") {
+                        _this.messageService.toast("Password Changed");
+                        _this.location.back();
+                    }
+                    else {
+                        _this.messageService.toast("Error: " + apiResponse.message);
+                    }
+                });
+            }
+        };
+        ChangePasswordComponent.ctorParameters = function () { return [
+            { type: common.Location },
+            { type: tinCore.HttpService },
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService }
+        ]; };
+        ChangePasswordComponent = __decorate([
+            core.Component({
+                selector: 'spa-change-password',
+                template: "<h4>Change Password</h4>\r\n<hr>\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.userID!=''\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>User ID</mat-label>\r\n            <input id=\"txtUserID\" matInput autocomplete=\"off\" [(ngModel)]=\"changePassword.userID\" readonly/>\r\n          </mat-form-field>\r\n\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"!myRole[dataService.capUsers.name]\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Current Password</mat-label>\r\n            <input id=\"txtPassword\" matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"changePassword.currentPassword\" placeholder=\"Enter Current Password\" />\r\n          </mat-form-field>\r\n\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>New Password</mat-label>\r\n            <input id=\"txtNewPassword\" matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"changePassword.newPassword\" placeholder=\"Enter New Password\" />\r\n          </mat-form-field>\r\n\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Confirm Password</mat-label>\r\n            <input id=\"txtConfirmPassword\" matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"changePassword.confirmPassword\" placeholder=\"Enter Confirm Password\" />\r\n          </mat-form-field>\r\n\r\n        </div>\r\n\r\n        <div class=\"col mt-3\">\r\n\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>\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        *Please consider these requirements for your new password. <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: [""]
+            })
+        ], ChangePasswordComponent);
+        return ChangePasswordComponent;
+    }());
+
+    var ProfileComponent = /** @class */ (function () {
+        function ProfileComponent(dataService, messageService, httpService, router, authService) {
+            this.dataService = dataService;
+            this.messageService = messageService;
+            this.httpService = httpService;
+            this.router = router;
+            this.authService = authService;
+            this.appConfig = new AppConfig();
+            this.selfProfile = false;
+            this.profile = new Profile();
+        }
+        ProfileComponent.prototype.ngOnInit = function () {
+            this.myRole = this.authService.currentRoleSource.value;
+            // this.loadRoles();
+            if (this.dataService.tmpProfileUserID == "") {
+                this.loadProfile(this.authService.currentUser);
+            }
+            else {
+                this.loadProfile(this.dataService.tmpProfileUserID);
+                this.dataService.tmpProfileUserID = "";
+            }
+            // console.log(this.myRole);
+        };
+        ProfileComponent.prototype.loadProfile = function (userID) {
+            var _this = this;
+            var action = "all";
+            if (this.appConfig.approvals && this.appConfig.employees) {
+                action = "set";
+            }
+            if (this.appConfig.approvals && !this.appConfig.employees) {
+                action = "setapp";
+            }
+            if (!this.appConfig.approvals && this.appConfig.employees) {
+                action = "setemp";
+            }
+            this.dataService.GetProfile(action, userID).subscribe(function (apiResponse) {
+                _this.profile = apiResponse.ds.dtProfiles[0];
+                if (_this.profile.userID.toLocaleLowerCase() == _this.authService.currentUser.toLocaleLowerCase()) {
+                    _this.selfProfile = true;
+                }
+                //get more details
+                _this.roles = apiResponse.ds.dtRoles;
+                _this.approvalRoles = apiResponse.ds.dtApprovalRoles;
+                _this.employees = apiResponse.ds.dtEmployees;
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        ProfileComponent.prototype.loadRoles = function () {
+            var _this = this;
+            this.dataService.GetRole("all", "").subscribe(function (apiResponse) {
+                _this.roles = apiResponse.dt;
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        ProfileComponent.prototype.changePassword = function () {
+            this.dataService.tmpProfileUserID = this.profile.userID;
+            this.router.navigate(["home/user/change-password"]);
+        };
+        ProfileComponent.prototype.gotoUsers = function () {
+            this.router.navigate(["home/admin/users"]);
+        };
+        ProfileComponent.prototype.update = function () {
+        };
+        ProfileComponent.prototype.updateProfile = function () {
+            var _this = this;
+            this.isProcessing = true;
+            this.dataService.UpdateProfile(this.profile, "edit").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("Profile Updated");
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            }, function (error) {
+                _this.messageService.toast("Connection failed ");
+                _this.isProcessing = false;
+            });
+        };
+        ProfileComponent.ctorParameters = function () { return [
+            { type: DataService },
+            { type: MessageService },
+            { type: tinCore.HttpService },
+            { type: router.Router },
+            { type: AuthService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ProfileComponent.prototype, "appConfig", void 0);
+        ProfileComponent = __decorate([
+            core.Component({
+                selector: 'spa-profile',
+                template: "\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row mt-3\" style=\"font-size:14px;\">\r\n\r\n\r\n    <div class=\"col-2 mt-3 \">\r\n\r\n      <div class=\"tin-input\">\r\n\r\n\r\n        <div class=\"col\">\r\n          <mat-icon style=\"font-size: 70px;\">account_circle</mat-icon>\r\n          <!-- <img style=\"height: 40px\"> -->\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <mat-label id=\"lblUserID\" style=\"font-size: 14px;\">{{profile.userID}}</mat-label>\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"col-8 mt-3\">\r\n\r\n      <div class=\"tin-input\" style=\"width: 70%;\">\r\n\r\n        <div class=\"tin-input-row\">\r\n\r\n\r\n          <div class=\"col\">\r\n            <mat-form-field style=\"width:200px\">\r\n              <mat-label>FirstName</mat-label>\r\n              <input id=\"txtFirstName\" matInput autocomplete=\"off\"  [(ngModel)]=\"profile.firstName\" placeholder=\"Enter FirstName\" [readOnly]=\"selfProfile\"/>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <div class=\"col\">\r\n            <mat-form-field style=\"width:200px\">\r\n              <mat-label>LastName</mat-label>\r\n              <input id=\"txtLastName\" matInput autocomplete=\"off\" [(ngModel)]=\"profile.lastName\" placeholder=\"Enter LastName \" [readOnly]=\"selfProfile\" />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Authentication</mat-label>\r\n            <input id=\"txtAuth\" matInput autocomplete=\"off\" [(ngModel)]=\"profile.authType\"  placeholder=\"Authentication\" readonly/>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Email</mat-label>\r\n            <input id=\"txtEmail\" matInput autocomplete=\"off\" [(ngModel)]=\"profile.email\"  placeholder=\"Enter Email\" [readOnly]=\"selfProfile\"/>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Role</mat-label>\r\n            <mat-select id=\"cboRole\" [(value)]=\"profile.roleID\" [disabled]=\"selfProfile\">\r\n              <mat-option *ngFor=\"let row of roles\" [value]=\"row.roleID\">\r\n                {{row.roleName}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"appConfig.approvals\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Approval Role</mat-label>\r\n            <mat-select id=\"cboApprovalRole\" [(value)]=\"profile.arID\" [disabled]=\"selfProfile\">\r\n              <mat-option *ngFor=\"let row of approvalRoles\" [value]=\"row.arID\">\r\n                {{row.arName}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n\r\n        </div>\r\n\r\n        <div class=\"col\" *ngIf=\"appConfig.employees\">\r\n\r\n          <mat-form-field style=\"width:300px\">\r\n            <mat-label>Employee Profile</mat-label>\r\n            <mat-select id=\"cboEmployee\" [(value)]=\"profile.empID\" [disabled]=\"selfProfile\">\r\n              <mat-option *ngFor=\"let row of employees\" [value]=\"row.empID\">\r\n                {{row.firstName}} {{row.lastName}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"tin-input-row mt-2\">\r\n          <button id=\"btnUpdate\" mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\" >Update Profile</button>\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"col-2 mt-4\">\r\n\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\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n\r\n\r\n",
+                styles: [""]
+            })
+        ], ProfileComponent);
+        return ProfileComponent;
+    }());
+
+    var SpaUserModule = /** @class */ (function () {
+        function SpaUserModule() {
+        }
+        SpaUserModule = __decorate([
+            core.NgModule({
+                declarations: [ChangePasswordComponent, ProfileComponent],
+                entryComponents: [],
+                imports: [
+                    forms.ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    SpaMatModule,
+                ],
+                exports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    SpaMatModule,
+                    ChangePasswordComponent,
+                    ProfileComponent,
+                ],
+            })
+        ], SpaUserModule);
+        return SpaUserModule;
+    }());
+
+    var SettingsComponent = /** @class */ (function () {
+        function SettingsComponent(dataService, messageService) {
+            this.dataService = dataService;
+            this.messageService = messageService;
+            this._filterText = "";
+            this.isProcessing = false;
+        }
+        SettingsComponent.prototype.ngOnInit = function () {
+            this.loadSettings();
+        };
+        SettingsComponent.prototype.applyFilter = function (filterValue) {
+            this.settings.filter = filterValue.trim().toLowerCase();
+        };
+        SettingsComponent.prototype.loadSettings = function () {
+            var _this = this;
+            this.dataService.GetSetting("all", "").subscribe(function (apiResponse) {
+                _this.settings = apiResponse.dt;
+                // this.applyFilter(this._filterText);
+            });
+        };
+        SettingsComponent.prototype.updateSetting = function (setting) {
+            var _this = this;
+            this.isProcessing = true;
+            this.dataService.UpdateSetting(setting, "edit").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("Setting " + setting.sName + " Updated");
+                    _this.loadSettings();
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        };
+        ;
+        SettingsComponent.prototype.addSetting = function () {
+            // 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.ctorParameters = function () { return [
+            { type: DataService },
+            { type: MessageService }
+        ]; };
+        SettingsComponent = __decorate([
+            core.Component({
+                selector: 'spa-settings',
+                template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\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\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n\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.dateUpdated | 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}"]
+            })
+        ], SettingsComponent);
+        return SettingsComponent;
+    }());
+
+    var LogsComponent = /** @class */ (function () {
+        function LogsComponent(authService, dataService) {
+            this.authService = authService;
+            this.dataService = dataService;
+            this.isProcessing = false;
+            this._filterText = "";
+            this.displayedColumns = ["dateLogged", "userID", "fullName", "source", "details"];
+        }
+        LogsComponent.prototype.ngOnInit = function () {
+            this.loadLogs();
+        };
+        LogsComponent.prototype.loadLogs = function () {
+            var _this = this;
+            this.dataService.GetLog("all", "").subscribe(function (apiResponse) {
+                _this.logs = new table.MatTableDataSource(apiResponse.dt);
+                _this.logs.paginator = _this.logsPaginator;
+                _this.applyFilter(_this._filterText);
+            });
+        };
+        LogsComponent.prototype.applyFilter = function (filterValue) {
+            this.logs.filter = filterValue.trim().toLowerCase();
+        };
+        LogsComponent.ctorParameters = function () { return [
+            { type: AuthService },
+            { type: DataService }
+        ]; };
+        __decorate([
+            core.ViewChild("logsPaginator")
+        ], LogsComponent.prototype, "logsPaginator", void 0);
+        LogsComponent = __decorate([
+            core.Component({
+                selector: 'spa-logs',
+                template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n    <div class=\"col-2\">\r\n\r\n      <!-- <mat-form-field>\r\n        <input matInput [(ngModel)]=\"_filterText\" (keyup)=\"applyFilter($event.target.value) \" placeholder=\"Filter\" autocomplete=\"off\">\r\n      </mat-form-field> -->\r\n\r\n    </div>\r\n    <div class=\"col-3\">\r\n      <mat-form-field style=\"font-size:12px\">\r\n       <mat-label>Filter</mat-label>\r\n       <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"applyFilter($event.target.value)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n     </mat-form-field>\r\n     <button id=\"btnFilter\" mat-mini-fab color=\"primary\"  (click)=\"loadLogs()\" style=\"margin-right:3em;margin-top:5px\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n\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=\"userID\">\r\n        <th mat-header-cell *matHeaderCellDef> User ID </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userID}} </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 user\"> {{user.firstName}} {{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}"]
+            })
+        ], LogsComponent);
+        return LogsComponent;
+    }());
+
+    var UsersComponent = /** @class */ (function () {
+        function UsersComponent(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 = "";
+            // public myResponse;
+            this.displayedColumns = ["userID", "fullName", "roleName", "locked", "dateCreated", "Action"];
+        }
+        UsersComponent.prototype.ngOnInit = function () {
+            this.UpdateData();
+        };
+        UsersComponent.prototype.UpdateData = function () {
+            var _this = this;
+            this.dataService.GetUser("all", "").subscribe(function (apiResponse) {
+                //this.myData = apiResponse;
+                _this.users = new table.MatTableDataSource(apiResponse.dt);
+                _this.users.paginator = _this.usersPaginator;
+                _this.applyFilter(_this._filterText);
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        UsersComponent.prototype.applyFilter = function (filterValue) {
+            this.users.filter = filterValue.trim().toLowerCase();
+        };
+        UsersComponent.prototype.createAccount = function () {
+            this.router.navigate(["home/admin/create-account"]);
+        };
+        UsersComponent.prototype.viewProfile = function (user) {
+            this.dataService.tmpProfileUserID = user.userID;
+            this.router.navigate(["home/user/profile"]);
+        };
+        UsersComponent.prototype.lock = function (u) {
+            u.locked = "1";
+            this.updateUser(u);
+        };
+        UsersComponent.prototype.unlock = function (u) {
+            u.locked = "0";
+            u.tries = "0";
+            this.updateUser(u);
+        };
+        UsersComponent.prototype.enable = function (u) {
+            u.disabled = "0";
+            this.updateUser(u);
+        };
+        UsersComponent.prototype.disable = function (u) {
+            u.disabled = "1";
+            this.updateUser(u);
+        };
+        UsersComponent.prototype.recover = function (u) {
+            var _this = this;
+            this.dataService.SelfReset(u).subscribe(function (apiResponse) {
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("The password has been sent on email");
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        };
+        UsersComponent.prototype.updateUser = function (user) {
+            var _this = this;
+            this.isProcessing = true;
+            this.dataService.UpdateUser(user, "edit").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("User Updated");
+                    _this.UpdateData();
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            }, function (error) {
+                _this.messageService.toast("Connection failed ");
+                _this.isProcessing = false;
+            });
+        };
+        UsersComponent.prototype.deleteUser = function (user) {
+            var _this = this;
+            this.messageService.confirm("Delete " + user.userID + " ?").subscribe(function (result) {
+                if (result == "yes") {
+                    _this.isProcessing = true;
+                    _this.dataService.UpdateUser(user, "delete").subscribe(function (apiResponse) {
+                        _this.isProcessing = false;
+                        if (apiResponse.message == "success") {
+                            _this.messageService.toast("User Deleted");
+                            _this.UpdateData();
+                        }
+                        else {
+                            _this.messageService.toast("Error: " + apiResponse.message);
+                        }
+                    }, function (error) {
+                        _this.messageService.toast("Connection failed ");
+                        _this.isProcessing = false;
+                    });
+                }
+            });
+        };
+        UsersComponent.ctorParameters = function () { return [
+            { type: tinCore.HttpService },
+            { type: router.Router },
+            { type: AuthService },
+            { type: DataService },
+            { type: dialog.MatDialog },
+            { type: MessageService }
+        ]; };
+        __decorate([
+            core.ViewChild("usersPaginator")
+        ], UsersComponent.prototype, "usersPaginator", void 0);
+        UsersComponent = __decorate([
+            core.Component({
+                selector: "spa-users",
+                template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container\">\r\n\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\r\n\r\n    </div>\r\n    <div class=\"col-3\">\r\n       <mat-form-field style=\"font-size:12px\">\r\n        <mat-label>Filter</mat-label>\r\n        <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"applyFilter($event.target.value)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n      </mat-form-field>\r\n      <button id=\"btnFilter\" mat-mini-fab color=\"primary\"  (click)=\"UpdateData()\" style=\"margin-right:3em;margin-top:5px\" matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n\r\n    </div>\r\n  </div>\r\n\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=\"userID\">\r\n        <th mat-header-cell *matHeaderCellDef> UserID </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userID}} </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.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.dateCreated | date: 'dd MMM yy'}} </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.dateUpdated | date: 'dd MMM yy'}} </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",
+                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}"]
+            })
+        ], UsersComponent);
+        return UsersComponent;
+    }());
+
+    var AddUserDialog = /** @class */ (function () {
+        function AddUserDialog(dataserv, messageService, dialogRef) {
+            this.dataserv = dataserv;
+            this.messageService = messageService;
+            this.dialogRef = dialogRef;
+            this.currentCount = 0;
+            this.user = new User();
+            this.isProcessing = false;
+        }
+        AddUserDialog.prototype.ngOnInit = function () {
+        };
+        AddUserDialog.prototype.Signup = function () {
+            // if (Core.emailIsValid(this.user.email)) {
+            //   this.messageService.toast("Invalid Email");
+            //   return;
+            // }
+            var _this = this;
+            this.user.dateCreated = tinCore.Core.getFormatedDate(tinCore.Core.nowDate());
+            this.user.dateUpdated = tinCore.Core.getFormatedDate(tinCore.Core.nowDate());
+            this.user.dateExpire = tinCore.Core.getFormatedDate(tinCore.Core.nowDate());
+            this.isProcessing = true;
+            this.dataserv.UpdateUser(this.user, "add").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("User Added");
+                    _this.dialogRef.close("success");
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        };
+        AddUserDialog.ctorParameters = function () { return [
+            { type: DataService },
+            { type: MessageService },
+            { type: dialog.MatDialogRef }
+        ]; };
+        AddUserDialog = __decorate([
+            core.Component({
+                selector: "spa-add-user",
+                template: "<h2 mat-dialog-title>Add User</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n\r\n\r\n  <div class=\"tin-input \" style=\"font-size:12px\">\r\n\r\n    <mat-form-field appearance=\"outline\">\r\n      <mat-label>Username</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"user.userID\" placeholder=\"Enter Username\">\r\n    </mat-form-field>\r\n\r\n\r\n\r\n    <mat-form-field appearance=\"outline\">\r\n      <mat-label>Password</mat-label>\r\n      <input matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"user.password\" placeholder=\"Enter Password\">\r\n    </mat-form-field>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n\r\n\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"Signup()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close>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}.make-gray{background-color:#d3d3d3}"]
+            })
+        ], AddUserDialog);
+        return AddUserDialog;
+    }());
+
+    var EditUserDialog = /** @class */ (function () {
+        function EditUserDialog(dataserv, messageService, dialogRef, data) {
+            this.dataserv = dataserv;
+            this.messageService = messageService;
+            this.dialogRef = dialogRef;
+            this.data = data;
+            this.user = new User();
+            this.isProcessing = false;
+            this.myUser = new User();
+        }
+        EditUserDialog.prototype.ngOnInit = function () {
+            // this.loadDepartments();
+            // this.loadRoles();
+            // this.loadLineManagers();
+            this.user = this.data;
+        };
+        EditUserDialog.prototype.unlock = function () {
+            this.user.locked = "0";
+        };
+        EditUserDialog.prototype.lock = function () {
+            this.user.locked = "1";
+        };
+        EditUserDialog.prototype.enable = function () {
+            this.user.disabled = "0";
+        };
+        EditUserDialog.prototype.disable = function () {
+            this.user.disabled = "1";
+        };
+        // loadDepartments() {
+        //   this.dataserv.GetDepartment("all", "").subscribe((myApiResponse) => {
+        //     this.departments = myApiResponse;
+        //   });
+        // }
+        // loadLineManagers() {
+        //   this.dataserv.GetLineManagers().subscribe((apiResponse: ApiResponse) => {
+        //     this.lineManagers = apiResponse.dt;
+        //   });
+        // }
+        // loadRoles() {
+        //   this.dataserv.GetRole("all", "").subscribe((apiResponse: ApiResponse) => {
+        //     this.roles = apiResponse.dt;
+        //   });
+        // }
+        EditUserDialog.prototype.Update = function () {
+            var _this = this;
+            this.isProcessing = true;
+            this.dataserv.UpdateUser(this.user, "edit").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("User Updated");
+                    _this.dialogRef.close("success");
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            }, function (error) {
+                _this.messageService.toast("Connection failed ");
+                _this.isProcessing = false;
+            });
+        };
+        EditUserDialog.prototype.DeleteUser = function () {
+            var _this = this;
+            this.isProcessing = true;
+            this.dataserv.UpdateUser(this.user, "delete").subscribe(function (myData) {
+                _this.isProcessing = false;
+                _this.myData = myData;
+                _this.myResponse = _this.myData.message;
+                if (_this.myResponse == "success") {
+                    _this.messageService.toast(_this.user.userID + " Deleted");
+                    _this.dialogRef.close("success");
+                }
+                else {
+                }
+            });
+        };
+        EditUserDialog.ctorParameters = function () { return [
+            { type: DataService },
+            { type: MessageService },
+            { type: dialog.MatDialogRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        EditUserDialog = __decorate([
+            core.Component({
+                selector: "spa-edit-user",
+                template: "<h2 mat-dialog-title>User Details</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <mat-form-field>\r\n      <mat-label>Username</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"user.userID\" placeholder=\"Enter Username\" readonly>\r\n    </mat-form-field>\r\n\r\n\r\n\r\n\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"Update()\" cdkFocusInitial>Update</button>\r\n  <!--<button mat-button [disabled]=\"isProcessing\" (click)=\"DeleteUser()\">Delete</button>-->\r\n  <button mat-button mat-dialog-close>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}.make-gray{background-color:#d3d3d3}"]
+            }),
+            __param(3, core.Inject(dialog.MAT_DIALOG_DATA))
+        ], EditUserDialog);
+        return EditUserDialog;
+    }());
+
+    var viewRoleDialog = /** @class */ (function () {
+        function viewRoleDialog(messageService, dataserv, authserv, dialogRef, data) {
+            this.messageService = messageService;
+            this.dataserv = dataserv;
+            this.authserv = authserv;
+            this.dialogRef = dialogRef;
+            this.data = data;
+        }
+        viewRoleDialog.prototype.ngOnInit = function () {
+        };
+        viewRoleDialog.prototype.submit = function () {
+        };
+        ;
+        viewRoleDialog.ctorParameters = function () { return [
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService },
+            { type: dialog.MatDialogRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        viewRoleDialog = __decorate([
+            core.Component({
+                selector: 'app-viewRole',
+                template: "",
+                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}"]
+            }),
+            __param(4, core.Inject(dialog.MAT_DIALOG_DATA))
+        ], viewRoleDialog);
+        return viewRoleDialog;
+    }());
+    ;
+
+    var addRoleDialog = /** @class */ (function () {
+        function addRoleDialog(messageService, dataService, authService, dialogRef, data) {
+            this.messageService = messageService;
+            this.dataService = dataService;
+            this.authService = authService;
+            this.dialogRef = dialogRef;
+            this.data = data;
+            this.role = new Role();
+        }
+        addRoleDialog.prototype.ngOnInit = function () {
+            this.capItems = this.data;
+        };
+        addRoleDialog.prototype.submit = function () {
+            var _this = this;
+            if (this.role.roleName == "New Role" || this.role.roleName == "") {
+                this.messageService.toast("Please enter Role Name");
+                return;
+            }
+            this.isProcessing = true;
+            this.dataService.UpdateRole(this.role, "add").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("Role Added");
+                    _this.dialogRef.close("success");
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            }, function (error) {
+                _this.messageService.toast("Connection failed");
+                _this.isProcessing = false;
+            });
+        };
+        ;
+        addRoleDialog.ctorParameters = function () { return [
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService },
+            { type: dialog.MatDialogRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        addRoleDialog = __decorate([
+            core.Component({
+                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}"]
+            }),
+            __param(4, core.Inject(dialog.MAT_DIALOG_DATA))
+        ], addRoleDialog);
+        return addRoleDialog;
+    }());
+    ;
+
+    var editRoleDialog = /** @class */ (function () {
+        function editRoleDialog(messageService, dataserv, authserv, dialogRef, data) {
+            this.messageService = messageService;
+            this.dataserv = dataserv;
+            this.authserv = authserv;
+            this.dialogRef = dialogRef;
+            this.data = data;
+            this.role = new Role;
+            this.isLoadComplete = false;
+        }
+        editRoleDialog.prototype.ngOnInit = function () {
+            this.role = this.data;
+            this.isLoadComplete = true;
+        };
+        editRoleDialog.prototype.submit = function () {
+            var _this = this;
+            this.isProcessing = true;
+            this.dataserv.UpdateRole(this.role, "edit").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("Role Updated");
+                    _this.dialogRef.close("success");
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            }, function (error) {
+                _this.messageService.toast("Connection failed ");
+                _this.isProcessing = false;
+            });
+        };
+        ;
+        editRoleDialog.ctorParameters = function () { return [
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService },
+            { type: dialog.MatDialogRef },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        editRoleDialog = __decorate([
+            core.Component({
+                selector: 'app-editRole',
+                template: "\r\n  <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  <mat-dialog-content class=\"mat-typography\">\r\n\r\n    <div class=\"row\" style=\"margin-left:2em\">\r\n\r\n\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:18px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n        </div>\r\n\r\n        <div class=\"row\">\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px\" [(ngModel)]=\"role.cap1\">Users</mat-checkbox>\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px\" [(ngModel)]=\"role.cap1\">Overview</mat-checkbox>\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px\" [(ngModel)]=\"role.cap1\">Search</mat-checkbox>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"  col-4\">\r\n\r\n        <div class=\"row\">\r\n          <mat-label style=\"margin-right:20px;font-size:18px\">Requests</mat-label>\r\n        </div>\r\n\r\n        <div class=\"row\">\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px\" [(ngModel)]=\"role.cap1\">Budget</mat-checkbox>\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px\" [(ngModel)]=\"role.cap1\">Procurement</mat-checkbox>\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px\" [(ngModel)]=\"role.cap1\">Payment</mat-checkbox>\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n\r\n\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>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n",
+                styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}"]
+            }),
+            __param(4, core.Inject(dialog.MAT_DIALOG_DATA))
+        ], editRoleDialog);
+        return editRoleDialog;
+    }());
+    ;
+
+    var RolesComponent = /** @class */ (function () {
+        function RolesComponent(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();
+        }
+        RolesComponent.prototype.ngOnInit = function () {
+            this.loadRoles();
+        };
+        // _filterText = "";
+        // applyFilter(filterValue: string) {
+        //   this.roles.filter = filterValue.trim().toLowerCase();
+        // }
+        RolesComponent.prototype.loadRoles = function () {
+            var _this = this;
+            this.dataService.GetRole("all", "").subscribe(function (apiResponse) {
+                _this.roles = apiResponse.dt;
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        RolesComponent.prototype.refresh = function () {
+            this.loadRoles();
+        };
+        RolesComponent.prototype.addRole = function () {
+            var _this = this;
+            var dialogRef = this.dialog.open(addRoleDialog, {
+                width: "1100px",
+                data: this.appConfig.capItems,
+            });
+            dialogRef.afterClosed().subscribe(function (result) {
+                if (result == "success") {
+                    _this.loadRoles();
+                }
+            });
+        };
+        RolesComponent.prototype.viewRole = function (role) {
+            var _this = this;
+            var dialogRef = this.dialog.open(viewRoleDialog, {
+                width: "1100px",
+                data: role,
+            });
+            dialogRef.afterClosed().subscribe(function (result) {
+                if (result == "success") {
+                    _this.loadRoles();
+                }
+            });
+        };
+        RolesComponent.prototype.editRole = function (role) {
+            var _this = this;
+            var dialogRef = this.dialog.open(editRoleDialog, {
+                width: "1100px",
+                data: role,
+            });
+            dialogRef.afterClosed().subscribe(function (result) {
+                if (result == "success") {
+                    _this.loadRoles();
+                }
+            });
+        };
+        RolesComponent.prototype.updateRole = function (role) {
+            var _this = this;
+            this.messageService.confirm("UPDATE " + role.roleName + " ?").subscribe(function (result) {
+                if (result == "yes") {
+                    _this.dataService
+                        .UpdateRole(role, "edit")
+                        .subscribe(function (apiResponse) {
+                        if (apiResponse.message == "success") {
+                            _this.messageService.toast("Role Updated");
+                            _this.loadRoles();
+                        }
+                        else {
+                            _this.messageService.toast("Error: " + apiResponse.message);
+                        }
+                    });
+                }
+            });
+        };
+        ;
+        RolesComponent.prototype.deleteRole = function (role) {
+            var _this = this;
+            this.messageService.confirm("DELETE " + role.roleName + " ?").subscribe(function (result) {
+                if (result == "yes") {
+                    _this.dataService
+                        .UpdateRole(role, "delete")
+                        .subscribe(function (apiResponse) {
+                        if (apiResponse.message == "success") {
+                            _this.messageService.toast("Role Deleted");
+                            _this.loadRoles();
+                        }
+                        else {
+                            _this.messageService.toast("Error: " + apiResponse.message);
+                        }
+                    });
+                }
+            });
+        };
+        RolesComponent.ctorParameters = function () { return [
+            { type: tinCore.HttpService },
+            { type: router.Router },
+            { type: AuthService },
+            { type: DataService },
+            { type: dialog.MatDialog },
+            { type: MessageService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], RolesComponent.prototype, "appConfig", void 0);
+        RolesComponent = __decorate([
+            core.Component({
+                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=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n    <div class=\"col-2\">\r\n\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n    <div class=\"col-1\">\r\n\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\" style=\"margin-right:1em;margin-top:5px\" matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\" style=\"margin-left:10px\" *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%;padding-left:2em\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\">\r\n\r\n\r\n        <div class=\"row\" style=\"margin-right:20px;\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\" font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"row\" style=\"margin-right:20px;margin-left: 0px; \" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox   color=\"primary\" style=\" font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"row\" style=\"margin-right:20px;margin-left: 0px;\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox   color=\"primary\" style=\"font-size:12px; 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)=\"editRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>edit</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}"]
+            })
+        ], RolesComponent);
+        return RolesComponent;
+    }());
+
+    var ProfilesComponent = /** @class */ (function () {
+        function ProfilesComponent() {
+        }
+        ProfilesComponent.prototype.ngOnInit = function () {
+        };
+        ProfilesComponent = __decorate([
+            core.Component({
+                selector: 'spa-profiles',
+                template: "<h6></h6>\r\n<hr>\r\n",
+                styles: [""]
+            })
+        ], ProfilesComponent);
+        return ProfilesComponent;
+    }());
+
+    var CreateAccountComponent = /** @class */ (function () {
+        function CreateAccountComponent(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.user = new User();
+            this.profile = new Profile();
+            this.account = new Account();
+            this.openProfile = true;
+        }
+        CreateAccountComponent.prototype.ngOnInit = function () {
+        };
+        CreateAccountComponent.prototype.create = function () {
+            var _this = this;
+            if (this.user.authType == "") {
+                this.messageService.toast("Choose Authentication Type");
+                return;
+            }
+            this.account.user = this.user;
+            this.account.profile = this.profile;
+            this.profile.userID = this.user.userID;
+            this.isProcessing = true;
+            this.dataService.UpdateAccount(this.account, "add").subscribe(function (apiResponse) {
+                _this.isProcessing = false;
+                if (apiResponse.message == "success") {
+                    _this.messageService.toast("Account Created");
+                    if (_this.openProfile) {
+                        _this.viewProfile(_this.user);
+                    }
+                    else {
+                        _this.user = new User();
+                        _this.profile = new Profile();
+                        _this.confirmPassword = "";
+                    }
+                }
+                else {
+                    _this.messageService.toast("Error: " + apiResponse.message);
+                }
+            }, function (error) {
+                _this.isProcessing = false;
+                _this.messageService.toast(_this.httpService.Error(error));
+            });
+        };
+        CreateAccountComponent.prototype.viewProfile = function (user) {
+            this.dataService.tmpProfileUserID = user.userID;
+            this.router.navigate(["home/user/profile"]);
+        };
+        CreateAccountComponent.ctorParameters = function () { return [
+            { type: tinCore.HttpService },
+            { type: MessageService },
+            { type: DataService },
+            { type: AuthService },
+            { type: router.Router }
+        ]; };
+        __decorate([
+            core.Input()
+        ], CreateAccountComponent.prototype, "appConfig", void 0);
+        CreateAccountComponent = __decorate([
+            core.Component({
+                selector: 'spa-create-account',
+                template: "<h4>Create Account</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px; width: 50%;\">\r\n\r\n\r\n    <div class=\"tin-input-row\">\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>FirstName</mat-label>\r\n          <input id=\"txtFirstName\" matInput autocomplete=\"off\" [(ngModel)]=\"profile.firstName\" placeholder=\"Enter FirstName\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>LastName</mat-label>\r\n          <input id=\"txtLastName\" matInput autocomplete=\"off\" [(ngModel)]=\"profile.lastName\" placeholder=\"Enter LastName\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"tin-input-row mt-3\">\r\n\r\n      <div class=\"col-6\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>UserID</mat-label>\r\n          <input id=\"txtUserID\" matInput autocomplete=\"off\" [(ngModel)]=\"user.userID\" placeholder=\"Enter UserID\" />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"col-6\">\r\n\r\n        <mat-form-field style=\"width:300px\">\r\n          <mat-select id=\"cboAuth\" [(value)]=\"user.authType\">\r\n            <mat-option *ngIf=\"appConfig.localAuth\" value=\"local\">Local Authentication</mat-option>\r\n            <mat-option *ngIf=\"appConfig.ADAuth\" value=\"AD\">AD Authentication</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n\r\n\r\n\r\n    </div>\r\n\r\n    <div class=\"tin-input-row\" *ngIf=\"user.authType=='local'\">\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>Password</mat-label>\r\n          <input id=\"txtPassword\" matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"user.password\" placeholder=\"Enter Password\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n      <div class=\"col\">\r\n\r\n        <mat-form-field style=\"width:100%\">\r\n          <mat-label>Confirm Password</mat-label>\r\n          <input id=\"txtConfirmPassword\" matInput autocomplete=\"off\" type=\"password\" [(ngModel)]=\"confirmPassword\" placeholder=\"Enter Confirm Password\" />\r\n        </mat-form-field>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"tin-input-row mt-3\" style=\"margin-left: 1em;\">\r\n\r\n      <mat-checkbox id=\"cbkOpenAfter\" color=\"primary\" style=\"margin-right:100px; font-size:12px\" [(ngModel)]=\"openProfile\">Open profile after creation</mat-checkbox>\r\n\r\n    </div>\r\n\r\n    <div class=\"tin-input-row mt-3\">\r\n      <button id=\"btnCreate\" [disabled]=\"user.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</div>\r\n\r\n",
+                styles: [""]
+            })
+        ], CreateAccountComponent);
+        return CreateAccountComponent;
+    }());
+
+    var SpaAdminModule = /** @class */ (function () {
+        function SpaAdminModule() {
+        }
+        SpaAdminModule = __decorate([
+            core.NgModule({
+                declarations: [
+                    UsersComponent,
+                    AddUserDialog,
+                    EditUserDialog,
+                    RolesComponent,
+                    addRoleDialog,
+                    editRoleDialog,
+                    viewRoleDialog,
+                    ProfilesComponent,
+                    CreateAccountComponent,
+                    LogsComponent,
+                    SettingsComponent
+                ],
+                entryComponents: [
+                    AddUserDialog,
+                    EditUserDialog,
+                    addRoleDialog,
+                    editRoleDialog,
+                    viewRoleDialog,
+                ],
+                imports: [
+                    forms.ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    SpaMatModule,
+                ],
+                exports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    SpaMatModule,
+                    UsersComponent,
+                    AddUserDialog,
+                    EditUserDialog,
+                    RolesComponent,
+                    addRoleDialog,
+                    editRoleDialog,
+                    viewRoleDialog,
+                    ProfilesComponent,
+                    CreateAccountComponent,
+                    LogsComponent,
+                    SettingsComponent
+                ],
+            })
+        ], SpaAdminModule);
+        return SpaAdminModule;
+    }());
+
+    exports.Account = Account;
+    exports.ActionResponse = ActionResponse;
+    exports.ActivityComponent = ActivityComponent;
+    exports.AddUserDialog = AddUserDialog;
+    exports.AppConfig = AppConfig;
+    exports.AttachComponent = AttachComponent;
+    exports.AuthService = AuthService;
+    exports.CapItem = CapItem;
+    exports.ChangePasswordComponent = ChangePasswordComponent;
+    exports.ChangeUserPassword = ChangeUserPassword;
+    exports.CheckComponent = CheckComponent;
+    exports.ChipsComponent = ChipsComponent;
+    exports.Color = Color;
+    exports.Condition = Condition;
+    exports.CreateAccountComponent = CreateAccountComponent;
+    exports.DataService = DataService;
+    exports.DateComponent = DateComponent;
+    exports.DatetimeComponent = DatetimeComponent;
+    exports.EditUserDialog = EditUserDialog;
+    exports.ExportService = ExportService;
+    exports.HtmlComponent = HtmlComponent;
+    exports.Icon = Icon;
+    exports.LabelComponent = LabelComponent;
+    exports.LoaderComponent = LoaderComponent;
+    exports.LogService = LogService;
+    exports.LoginComponent = LoginComponent;
+    exports.LogsComponent = LogsComponent;
+    exports.MessageService = MessageService;
+    exports.MoneyComponent = MoneyComponent;
+    exports.NavMenuComponent = NavMenuComponent;
+    exports.OptionComponent = OptionComponent;
+    exports.Profile = Profile;
+    exports.ProfileComponent = ProfileComponent;
+    exports.ProfilesComponent = ProfilesComponent;
+    exports.RecoverAccountComponent = RecoverAccountComponent;
+    exports.Role = Role;
+    exports.RolesComponent = RolesComponent;
+    exports.SelectComponent = SelectComponent;
+    exports.SettingsComponent = SettingsComponent;
+    exports.SignupComponent = SignupComponent;
+    exports.SpaAdminModule = SpaAdminModule;
+    exports.SpaIndexModule = SpaIndexModule;
+    exports.SpaMatModule = SpaMatModule;
+    exports.SpaUserModule = SpaUserModule;
+    exports.Step = Step;
+    exports.StepsComponent = StepsComponent;
+    exports.StorageService = StorageService;
+    exports.TableAction = TableAction;
+    exports.TableColumn = TableColumn;
+    exports.TableComponent = TableComponent;
+    exports.TableConfig = TableConfig;
+    exports.TableCreate = TableCreate;
+    exports.TextComponent = TextComponent;
+    exports.Tile = Tile;
+    exports.TilesComponent = TilesComponent;
+    exports.TimeoutComponent = TimeoutComponent;
+    exports.TinSpaComponent = TinSpaComponent;
+    exports.TinSpaModule = TinSpaModule;
+    exports.TinSpaService = TinSpaService;
+    exports.User = User;
+    exports.UsersComponent = UsersComponent;
+    exports.ViewerComponent = ViewerComponent;
+    exports.addRoleDialog = addRoleDialog;
+    exports.editRoleDialog = editRoleDialog;
+    exports.loginConfig = loginConfig;
+    exports.messageDialog = messageDialog;
+    exports.viewRoleDialog = viewRoleDialog;
+    exports.ɵ0 = ɵ0;
+    exports.ɵa = DndDirective;
+    exports.ɵb = LoaderService;
+    exports.ɵc = viewerDialog;
+    exports.ɵd = LoaderInterceptor;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=tin-spa.umd.js.map