tin-spa 2.2.3 → 2.3.1

package/fesm2015/tin-spa.mjs

@@ -19,6 +19,7 @@ import * as i8 from '@abacritt/angularx-social-login';
 import { SocialLoginModule } from '@abacritt/angularx-social-login';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders, HttpResponse, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import * as i3$1 from '@angular/cdk/layout';
 import * as i8$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -26,21 +27,21 @@ import * as i15 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i10 from '@angular/material/chips';
+import * as i4$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i7 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i5$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$1 from '@angular/material/icon';
+import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4$1 from '@angular/material/input';
+import * as i4$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i11 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i8$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i7$2 from '@angular/material/paginator';
+import * as i11$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
@@ -50,11 +51,11 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatSortModule } from '@angular/material/sort';
 import * as i2$2 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i6 from '@angular/material/table';
+import * as i10 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
-import * as i9 from '@angular/material/tabs';
+import * as i11$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i10$1 from '@angular/material/progress-bar';
+import * as i12$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i7$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -67,7 +68,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i16 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import * as i3$3 from '@angular/cdk/layout';
 import * as i12 from '@angular/material/divider';
 import * as i5$2 from 'ngx-doc-viewer';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
@@ -1203,6 +1203,124 @@ class DataServiceLib {
         this.capGrades = new CapItem;
         this.tmpProfileuserName = "";
         this.isProcessing = false;
+        this.genders = [
+            { name: 'Male', value: 1 },
+            { name: 'Female', value: 2 }
+        ];
+        this.employeeFormConfig = {
+            fields: [
+                { name: 'nationalID', type: 'text', alias: 'National ID', required: true },
+                { name: 'gender', alias: 'Gender', type: 'select', options: this.genders, required: true },
+                { name: 'firstName', type: 'text', required: true },
+                { name: 'lastName', type: 'text', required: true },
+                { name: 'dateOfBirth', type: 'date', alias: 'Date of Birth', required: true },
+                { name: 'employmentDate', type: 'date', alias: 'Employment Date', required: true },
+                { name: 'departmentID', alias: 'Department', type: 'select', options: [], optionDisplay: 'name', optionValue: 'departmentID' },
+                { name: 'positionID', alias: 'Position', type: 'select', options: [], optionDisplay: 'name', optionValue: 'positionID', masterField: 'departmentID', },
+                { name: 'employmentStatus', alias: 'Employment Status', type: 'select', options: [], optionDisplay: 'name', optionValue: 'value' },
+                { name: 'activeStatus', alias: 'Active Status', type: 'select', options: [], optionDisplay: 'name', optionValue: 'value' },
+                { name: 'address', type: 'text', rows: 2, span: true },
+                { name: 'phone', type: 'text' },
+                { name: 'email', type: 'text' },
+                { name: 'note', type: 'text', rows: 2, span: true },
+            ],
+        };
+        this.employeeTableConfig = {
+            showFilter: true,
+            minColumns: ['name', 'departmentName', 'positionName'],
+            flatButtons: true,
+            columns: [
+                { name: 'name', type: 'text' },
+                { name: 'genderName', type: 'text', alias: 'Gender' },
+                { name: 'departmentName', type: 'text', alias: 'Department' },
+                { name: 'positionName', type: 'text', alias: 'Position' },
+                { name: 'employmentStatusName', type: 'text', alias: 'Employment Status' },
+                { name: 'activeStatusName', type: 'text', alias: 'Active Status' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create', dialog: true, action: { url: 'general/employees?action=create', method: 'post' } },
+                { name: 'view', dialog: true },
+                { name: 'edit', dialog: true, action: { url: 'general/employees?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'general/employees?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'general/employees/x' },
+            formConfig: this.employeeFormConfig
+        };
+        this.positionFormConfig = {
+            fields: [
+                { name: 'name', type: 'text', required: true },
+                // { name: 'departmentID', alias: 'Department', type: 'select', options: [], optionDisplay: 'name', optionValue: 'departmentID' },
+                { name: 'description', type: 'text', span: true },
+            ],
+            loadAction: { url: 'positions/id' },
+        };
+        this.editPositionButton = { name: 'edit', dialog: true, action: { url: 'positions?action=edit', method: 'post', successMessage: 'Edited Successfully' } };
+        this.positionTableConfig = {
+            showFilter: true,
+            minColumns: ['name', 'departmentName', 'salary'],
+            flatButtons: true,
+            columns: [
+                { name: 'positionID', type: 'number', alias: 'ID' },
+                { name: 'name', type: 'text' },
+                // { name: 'departmentName', type: 'text', alias: 'Department' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create', dialog: true, action: { url: 'positions?action=create', method: 'post' } },
+                {
+                    name: 'view',
+                    dialog: true,
+                    detailsConfig: {
+                        formConfig: Object.assign(Object.assign({}, this.positionFormConfig), { fields: this.positionFormConfig.fields.filter(x => x.name != 'departmentID') }),
+                        heroField: 'positionID',
+                        buttons: [this.editPositionButton],
+                        tableConfigs: [
+                            Object.assign(Object.assign({}, this.employeeTableConfig), { loadAction: { url: 'positions/employees/x' }, loadCriteria: 'employees', loadIDField: 'positionID', title: 'Employees', elevation: 'none' })
+                        ],
+                    }
+                },
+                this.editPositionButton,
+                { name: 'delete', dialog: true, action: { url: 'positions?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'positions/all/x' },
+            formConfig: this.positionFormConfig
+        };
+        //--------------------------Departments-------------------------
+        this.departmentFormConfig = {
+            fields: [
+                { name: 'name', type: 'text', required: true },
+            ],
+            loadAction: { url: 'departments/id' },
+        };
+        this.editDepartmentButton = { name: 'edit', dialog: true, action: { url: 'departments?action=edit', method: 'post', successMessage: 'Edited Successfully' } };
+        this.departmentTableConfig = {
+            showFilter: true,
+            minColumns: ['name'],
+            flatButtons: true,
+            columns: [
+                { name: 'departmentID', type: 'number', alias: 'ID' },
+                { name: 'name', type: 'text' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create', dialog: true, action: { url: 'departments?action=create', method: 'post' } },
+                {
+                    name: 'view',
+                    dialog: true,
+                    detailsConfig: {
+                        formConfig: this.departmentFormConfig,
+                        heroField: 'departmentID',
+                        buttons: [this.editDepartmentButton],
+                        tableConfigs: [
+                            Object.assign(Object.assign({}, this.employeeTableConfig), { loadAction: { url: 'departments/employees/x' }, loadCriteria: 'employees', loadIDField: 'departmentID', title: 'Employees', elevation: 'none' }),
+                            Object.assign(Object.assign({}, this.positionTableConfig), { loadAction: { url: 'departments/positions/x' }, loadCriteria: 'positions', loadIDField: 'departmentID', title: 'Positions', elevation: 'none' })
+                        ],
+                    }
+                },
+                this.editDepartmentButton,
+                { name: 'delete', dialog: true, action: { url: 'departments?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'departments/all/x' },
+            formConfig: this.departmentFormConfig
+        };
         this.appConfig.appName = "App-Name";
         this.appConfig.logo = "./assets/logo.png";
         this.appConfig.ADAuth = true;
@@ -1271,7 +1389,7 @@ class DataServiceLib {
         this.capHR.display = "HR";
         this.capHR.link = "home/admin/hr";
         this.capHR.icon = "diversity_3";
-        this.capHR.capSubItems = [this.capEmployees, this.capDepartments, this.capPositions, this.capGrades];
+        this.capHR.capSubItems = [this.capEmployees, this.capDepartments, this.capPositions];
         this.capEmployees.name = "cap17";
         this.capEmployees.display = "Employees";
         this.capEmployees.link = "home/admin/employees";
@@ -1284,15 +1402,27 @@ class DataServiceLib {
         this.capPositions.display = "Positions";
         this.capPositions.link = "home/admin/positions";
         this.capPositions.icon = "picture_in_picture_medium";
-        this.capGrades.name = "cap17";
-        this.capGrades.display = "Grades";
-        this.capGrades.link = "home/admin/grades";
-        this.capGrades.icon = "grading";
     }
     UpdateAppConfig(config) {
         this.appConfigSource.next(config);
         this.appConfig = config;
     }
+    //--------------------------Employees-------------------------
+    loadEmployeesMeta() {
+        this.CallApi({ url: 'general/employeesmeta/x' }, "").subscribe((apiResponse) => {
+            this.employeeFormConfig.fields.find(x => x.name == 'departmentID').options = apiResponse.data.departments;
+            this.employeeFormConfig.fields.find(x => x.name == 'positionID').masterOptions = apiResponse.data.positions;
+            this.employeeFormConfig.fields.find(x => x.name == 'employmentStatus').options = apiResponse.data.employmentStatuses;
+            this.employeeFormConfig.fields.find(x => x.name == 'activeStatus').options = apiResponse.data.activeStatuses;
+        });
+    }
+    //--------------------------Positions-------------------------
+    loadPositionMeta() {
+        // this.CallApi({ url: 'positions/meta/x' }, "").subscribe((apiResponse: ApiResponse) => {
+        //   this.positionFormConfig.fields.find(x => x.name == 'departmentID').options = apiResponse.data.departments;
+        // });
+    }
+    //---------------------------Other code
     CallApi(action, data = '') {
         if (!action.method) {
             return this.httpService.Get(action.url);
@@ -1416,6 +1546,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+class DialogService {
+    constructor(dialog, breakpointObserver) {
+        this.dialog = dialog;
+        this.breakpointObserver = breakpointObserver;
+        this.smallScreen = false;
+        // Detect screen size changes
+        this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
+            this.smallScreen = result.matches;
+        });
+    }
+    openDetailsDialog(config, dialogComponent) {
+        var _a;
+        const hasTables = ((_a = config.tableConfigs) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const dialogOptions = {
+            width: this.smallScreen ? '900px' : (hasTables ? '90%' : '900px'),
+            height: hasTables ? '90%' : 'auto',
+            data: config
+        };
+        const dialogRef = this.dialog.open(dialogComponent, dialogOptions);
+        return {
+            afterClosed: dialogRef.afterClosed(),
+            inputChange: dialogRef.componentInstance.inputChange,
+            dialogRef: dialogRef
+        };
+    }
+}
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, deps: [{ token: i4.MatDialog }, { token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i4.MatDialog }, { type: i3$1.BreakpointObserver }]; } });
+
 class TinSpaComponent {
 }
 TinSpaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1597,7 +1762,7 @@ class TextComponent {
     }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
@@ -1703,16 +1868,26 @@ class DateComponent {
         this.placeholder = "";
         this.width = "100%";
         this.valueChange = new EventEmitter();
-        this.control = new FormControl(new Date());
     }
     ngOnInit() {
+        this.initializeDateControls();
+    }
+    ngOnChanges(changes) {
+        if (changes['readonly']) {
+            this.updateControlState();
+        }
+        if (changes['value']) {
+            this.control.setValue(new Date(this.value));
+        }
+    }
+    initializeDateControls() {
         this.minDate = new FormControl(new Date(this.min));
         this.maxDate = new FormControl(new Date(this.max));
-        if (!this.value || this.value == "") {
-            this.control = new FormControl(new Date());
-            ;
-        }
-        setTimeout(() => { this.onChangeEvent(); }, 5);
+        this.control = new FormControl({ value: new Date(this.value), disabled: this.readonly });
+        this.updateControlState();
+        setTimeout(() => this.onChangeEvent(), 5);
+    }
+    updateControlState() {
         if (this.readonly) {
             this.control.disable();
         }
@@ -1720,16 +1895,13 @@ class DateComponent {
             this.control.enable();
         }
     }
-    ngOnChanges() {
-        this.control = new FormControl(new Date(this.value));
-    }
     onChangeEvent() {
-        let d = Core.getFormatedDate2(this.control.value, true);
-        this.valueChange.emit(d);
+        const formattedDate = Core.getFormatedDate2(this.control.value, true);
+        this.valueChange.emit(formattedDate);
     }
     validate(control) {
         if (control.hasError('matDatepickerMin')) {
-            return `Minimun date is ${this.min}`;
+            return `Minimum date is ${this.min}`;
         }
         if (control.hasError('matDatepickerMax')) {
             return `Maximum date is ${this.max}`;
@@ -1738,11 +1910,11 @@ class DateComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { required: [{
+            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
+        }], propDecorators: { required: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -1780,7 +1952,7 @@ class DatetimeComponent {
     }
 }
 DatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DatetimeComponent, selector: "spa-datetime", inputs: { display: "display", value: "value", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+DatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DatetimeComponent, selector: "spa-datetime", inputs: { display: "display", value: "value", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-datetime', template: "<mat-form-field >\r\n<mat-label>{{display}}</mat-label>\r\n<input matInput autocomplete=\"off\" type=\"datetime-local\" [(ngModel)]=\"value\" [min]=\"min\" [max]=\"max\"  (change)=\"changed()\" [placeholder]=\"display\" [readonly]=\"readonly\" />\r\n</mat-form-field>\r\n" }]
@@ -1953,7 +2125,7 @@ class FilterComponent {
     }
 }
 FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { flatButtons: "flatButtons", showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterComponent, selector: "spa-filter", inputs: { flatButtons: "flatButtons", showText: "showText", showButton: "showButton", data: "data" }, outputs: { refreshClick: "refreshClick" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-filter', template: "<mat-form-field *ngIf=\"showText\" >\r\n <mat-label>Filter</mat-label>\r\n <input id=\"txtFilter\" matInput [(ngModel)]=\"_filterText\" (keyup)=\"keyUp($event)\" placeholder=\"Enter Filter text\" autocomplete=\"off\">\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"showButton && !flatButtons\" id=\"btnFilter\" mat-mini-fab color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"showButton && flatButtons\" id=\"btnFilter\" mat-icon-button color=\"primary\" matTooltip=\"Refresh Data\" matTooltipPosition=\"above\" (click)=\"refreshClicked()\" style=\"margin-right:1em;margin-top:5px\">\r\n  <mat-icon class=\"refreshIcon\">cached</mat-icon>\r\n</button>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -2217,7 +2389,7 @@ class MoneyComponent {
     }
 }
 MoneyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
+MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-money', template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"] }]
@@ -2280,7 +2452,7 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable"], outputs: ["valueChange"] }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable"], outputs: ["valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-option', template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n" }]
@@ -2379,7 +2551,7 @@ class TilesComponent {
     }
 }
 TilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { config: "config", data: "data", reload: "reload" }, outputs: { tileClick: "tileClick" }, usesOnChanges: true, ngImport: i0, template: "      <div class=\"tin-row align-items-center tiles\" *ngIf=\"!new\">\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"card tin-col\" *ngIf=\"!tile.hidden\" (click)=\"clicked(tile)\">\r\n\r\n            <mat-label style=\"font-weight:bold; text-align: center; padding: 0px; margin: 0px;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '45px' : '35px' }\">{{data ? data[tile.name] : 0}}</mat-label>\r\n\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n\r\n              <!-- <button mat-icon-button (click)=\"pop(tile.info)\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '24px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button> -->\r\n\r\n              <button mat-icon-button (click)=\"pop(tile.info)\" style=\"margin: 0px; padding: 0px;\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '18px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button>\r\n\r\n              <!-- <div class=\"row d-flex justify-content-center row align-items-center\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{tile.name}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </div> -->\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex row align-items-center justify-content-between\" *ngIf=\"new\">\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n            <div class=\"row d-flex justify-content-center align-items-center\">\r\n\r\n              <div style=\"text-align: center;\">\r\n                <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\r\n                <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '35px' : '30px' }\">{{data ? data[tile.name] : 0}}</mat-label>&nbsp;\r\n                <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n              </div>\r\n\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center align-items-center\">\r\n\r\n              <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '18px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; text-align: center;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\"  style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n              </div>\r\n\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: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TilesComponent, selector: "spa-tiles", inputs: { config: "config", data: "data", reload: "reload" }, outputs: { tileClick: "tileClick" }, usesOnChanges: true, ngImport: i0, template: "      <div class=\"tin-row align-items-center tiles\" *ngIf=\"!new\">\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"card tin-col\" *ngIf=\"!tile.hidden\" (click)=\"clicked(tile)\">\r\n\r\n            <mat-label style=\"font-weight:bold; text-align: center; padding: 0px; margin: 0px;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '45px' : '35px' }\">{{data ? data[tile.name] : 0}}</mat-label>\r\n\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n\r\n              <!-- <button mat-icon-button (click)=\"pop(tile.info)\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '24px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button> -->\r\n\r\n              <button mat-icon-button (click)=\"pop(tile.info)\" style=\"margin: 0px; padding: 0px;\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '18px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button>\r\n\r\n              <!-- <div class=\"row d-flex justify-content-center row align-items-center\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{tile.name}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </div> -->\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex row align-items-center justify-content-between\" *ngIf=\"new\">\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n            <div class=\"row d-flex justify-content-center align-items-center\">\r\n\r\n              <div style=\"text-align: center;\">\r\n                <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\r\n                <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '35px' : '30px' }\">{{data ? data[tile.name] : 0}}</mat-label>&nbsp;\r\n                <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n              </div>\r\n\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center align-items-center\">\r\n\r\n              <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '18px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; text-align: center;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\"  style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n              </div>\r\n\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: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tiles', template: "      <div class=\"tin-row align-items-center tiles\" *ngIf=\"!new\">\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"card tin-col\" *ngIf=\"!tile.hidden\" (click)=\"clicked(tile)\">\r\n\r\n            <mat-label style=\"font-weight:bold; text-align: center; padding: 0px; margin: 0px;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '45px' : '35px' }\">{{data ? data[tile.name] : 0}}</mat-label>\r\n\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n\r\n              <!-- <button mat-icon-button (click)=\"pop(tile.info)\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '24px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button> -->\r\n\r\n              <button mat-icon-button (click)=\"pop(tile.info)\" style=\"margin: 0px; padding: 0px;\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '14px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; margin-right: 10px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '24x' : '18px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </button>\r\n\r\n              <!-- <div class=\"row d-flex justify-content-center row align-items-center\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '18px' : '12px' }\" style=\"padding-left:5px;padding-right:5px\">{{tile.name}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" [ngStyle]=\"{'font-size':tile.name == selectedTile ? '20px' : '17px' }\" style=\" color:steelblue;\">info</mat-icon>\r\n              </div> -->\r\n\r\n            </div>\r\n\r\n          </mat-card>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex row align-items-center justify-content-between\" *ngIf=\"new\">\r\n\r\n        <ng-container *ngFor=\"let tile of tiles\">\r\n\r\n          <mat-card class=\"col\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n            <div class=\"row d-flex justify-content-center align-items-center\">\r\n\r\n              <div style=\"text-align: center;\">\r\n                <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\r\n                <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color,'font-size':tile.name == selectedTile ? '35px' : '30px' }\">{{data ? data[tile.name] : 0}}</mat-label>&nbsp;\r\n                <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\r\n              </div>\r\n\r\n\r\n            </div>\r\n\r\n            <div class=\"row d-flex justify-content-center align-items-center\">\r\n\r\n              <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n                <mat-label [ngStyle]=\"{'font-size':tile.name == selectedTile ? '18px' : '14px' }\" style=\"padding-left:5px;padding-right:5px; text-align: center;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\r\n                <mat-icon [matTooltip]=\"tile.info\" matTooltipPosition=\"above\"  style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\r\n              </div>\r\n\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: [".card{min-width:200px;max-width:200px;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}\n"] }]
@@ -2488,23 +2660,13 @@ class AttachComponent {
     }
     ngOnInit() {
     }
-    /**
-     * on file drop handler
-     */
     onFileDropped($event) {
         this.prepareFilesList($event);
     }
-    /**
-     * handle file from browsing
-     */
     fileBrowseHandler(event) {
         let files = event.target.files;
         this.prepareFilesList(files);
     }
-    /**
-     * Delete file from files list
-     * @param index (File index)
-     */
     deleteFile(index) {
         this.files.splice(index, 1);
     }
@@ -2527,10 +2689,6 @@ class AttachComponent {
     //     }
     //   }, 1000);
     // }
-    /**
-     * Convert Files list to normal array list
-     * @param files (Files List)
-     */
     prepareFilesList(files) {
         for (const item of files) {
             item.progress = 0;
@@ -2538,11 +2696,6 @@ class AttachComponent {
         }
         // this.uploadFilesSimulator(0);
     }
-    /**
-     * format bytes
-     * @param bytes (File size in bytes)
-     * @param decimals (Decimals point)
-     */
     formatBytes(bytes, decimals) {
         if (bytes === 0) {
             return '0 Bytes';
@@ -2561,7 +2714,7 @@ class AttachComponent {
     }
 }
 AttachComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AttachComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AttachComponent, selector: "spa-attach", inputs: { message: "message", files: "files", enableUpload: "enableUpload" }, outputs: { filesChange: "filesChange", upload: "upload" }, ngImport: i0, template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:100px;padding-top:5px;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+AttachComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AttachComponent, selector: "spa-attach", inputs: { message: "message", files: "files", enableUpload: "enableUpload" }, outputs: { filesChange: "filesChange", upload: "upload" }, ngImport: i0, template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:100px;padding-top:5px;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AttachComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-attach', template: "<div class=\"tin-input-row\" style=\"width: 100%;\">\r\n\r\n  <div class=\"col\">\r\n    <div class=\"container\" appDnd (fileDropped)=\"onFileDropped($event)\">\r\n      <input type=\"file\" #fileDropRef id=\"fileDropRef\" multiple (change)=\"fileBrowseHandler($event)\" />\r\n      <h4>{{message}}</h4>\r\n\r\n      <label for=\"fileDropRef\">Click to Browse</label>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"col\">\r\n    <div class=\"files-list \">\r\n      <div class=\"single-file \" style=\"width: 100%;\" *ngFor=\"let file of files; let i = index\">\r\n\r\n        <div class=\"tin-input-row info\" >\r\n          <h4 class=\"name\">\r\n            {{ file?.name }}\r\n          </h4>\r\n          <p class=\"size\">\r\n            {{ formatBytes(file?.size, 2) }}\r\n          </p>\r\n        </div>\r\n\r\n        <div class=\"delete\" (click)=\"deleteFile(i)\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"18\" viewBox=\"0 0 14 18\">\r\n            <path fill=\"#B1B1B1\" fill-rule=\"nonzero\"\r\n              d=\"M1 16c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v10zm3.17-7.83a.996.996 0 0 1 1.41 0L7 9.59l1.42-1.42a.996.996 0 1 1 1.41 1.41L8.41 11l1.42 1.42a.996.996 0 1 1-1.41 1.41L7 12.41l-1.42 1.42a.996.996 0 1 1-1.41-1.41L5.59 11 4.17 9.58a.996.996 0 0 1 0-1.41zM10.5 1L9.79.29C9.61.11 9.35 0 9.09 0H4.91c-.26 0-.52.11-.7.29L3.5 1H1c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z\" />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"files.length > 0 && enableUpload\" class=\"tin-input-row d-flex justify-content-center\" style=\"width: 100%;\" >\r\n      <button mat-button color=\"primary\" (click)=\"uploaded()\" matTooltip=\"Upload New Documents\" matTooltipPosition=\"above\"  ><mat-icon>file_upload</mat-icon> Upload</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".container{width:100%;height:100px;padding-top:5px;text-align:center;border:dashed 2px #2a7b94;position:relative;margin:0 auto}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0}.container label{color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.container h3{font-size:20px;font-weight:600;color:#38424c}.fileover{animation:shake 1s;animation-iteration-count:infinite}.files-list{margin-top:1.5rem}.files-list .single-file{padding:.5rem;justify-content:space-between;align-items:center;border:dashed 1px #1c824d;margin-bottom:1rem;margin-right:1rem;display:flex;flex-grow:1}.files-list .single-file .delete{display:flex;margin-left:.5rem;cursor:pointer;align-self:flex-end}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0;margin-left:1rem}.files-list .single-file .info{width:100%}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}to{transform:translate(1px,-2px) rotate(-1deg)}}\n"] }]
@@ -2611,7 +2764,7 @@ class ChipsComponent {
     }
 }
 ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }] });
+ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-chips', template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n" }]
@@ -2703,12 +2856,12 @@ class NavMenuComponent {
         }
     }
 }
-NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$3.Router }, { token: AuthService }, { token: StorageService }, { token: i8.SocialAuthService }, { token: i3$3.BreakpointObserver }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/tenants')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n  </div>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button matTooltip=\"Notifications\"><mat-icon>notifications</mat-icon></button>\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i11.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i14.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i14.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i15$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i16.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i16.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$3.Router }, { token: AuthService }, { token: StorageService }, { token: i8.SocialAuthService }, { token: i3$1.BreakpointObserver }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/tenants')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n  </div>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button matTooltip=\"Notifications\"><mat-icon>notifications</mat-icon></button>\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i11.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i14.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i14.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i15$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i16.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i16.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/tenants')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n  </div>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button matTooltip=\"Notifications\"><mat-icon>notifications</mat-icon></button>\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: AuthService }, { type: StorageService }, { type: i8.SocialAuthService }, { type: i3$3.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: AuthService }, { type: StorageService }, { type: i8.SocialAuthService }, { type: i3$1.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
                 type: Input
             }], footer: [{
                 type: Input
@@ -2814,6 +2967,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class ButtonService {
+    getButton(buttons, name) {
+        return (buttons === null || buttons === void 0 ? void 0 : buttons.find(x => x.name === name)) || null;
+    }
+    getButtonProperties(button, row, config) {
+        return {
+            color: this.getButtonColor(button, row),
+            icon: this.getIcon(button, config),
+            disabled: this.testDisabled(button, row),
+            visible: this.testVisible(button, row),
+            tip: button.tip || button.name
+        };
+    }
+    getButtonColor(button, row) {
+        var _a;
+        if (this.isButtonDisabled(button, row))
+            return 'lightgray';
+        if ((_a = button.icon) === null || _a === void 0 ? void 0 : _a.color)
+            return button.icon.color;
+        const colorMap = {
+            'delete': '#F44336',
+            'create': 'green'
+        };
+        return colorMap[button.name] || '#4050B5';
+    }
+    isButtonDisabled(button, row) {
+        return (button === null || button === void 0 ? void 0 : button.disabled) ? button.disabled(row) : false;
+    }
+    isButtonVisible(button, row, isLoadComplete) {
+        if (!isLoadComplete)
+            return false;
+        return (button === null || button === void 0 ? void 0 : button.visible) ? button.visible(row) : true;
+    }
+    getTitleAction(mode, buttons) {
+        var _a, _b;
+        const modeMap = {
+            'view': 'View',
+            'edit': ((_a = buttons.find(b => b.name === 'edit')) === null || _a === void 0 ? void 0 : _a.display) || 'Edit',
+            'create': ((_b = buttons.find(b => b.name === 'create')) === null || _b === void 0 ? void 0 : _b.display) || 'Create'
+        };
+        return modeMap[mode] || '';
+    }
+    isTabVisible(tableConfig) {
+        return tableConfig.hideTabCondition ? !tableConfig.hideTabCondition(tableConfig.parentData) : true;
+    }
+    getIcon(button, config) {
+        if (button.icon) {
+            return button.icon.name;
+        }
+        return this.getDefaultIcon(button.name, config.flatButtons);
+    }
+    testDisabled(button, row) {
+        return button.disabled ? button.disabled(row) : false;
+    }
+    testVisible(button, row) {
+        return button.visible ? button.visible(row) : true;
+    }
+    getDefaultColor(buttonName) {
+        switch (buttonName) {
+            case 'delete': return '#F44336';
+            case 'create': return 'green';
+            default: return '#4050B5';
+        }
+    }
+    getDefaultIcon(buttonName, flatButtons) {
+        switch (buttonName) {
+            case 'view':
+                return flatButtons ? 'open_in_new' : 'pageview';
+            case 'edit': return 'edit';
+            case 'delete': return 'delete';
+            case 'create': return 'add';
+            default: return 'more_horiz';
+        }
+    }
+    getCreateButton(buttons) {
+        return buttons === null || buttons === void 0 ? void 0 : buttons.find(button => (button === null || button === void 0 ? void 0 : button.name) === 'create');
+    }
+    getDisplayedButtons(buttons, isSmallScreen, minButtons) {
+        const nonCreateButtons = buttons === null || buttons === void 0 ? void 0 : buttons.filter(x => x.name !== 'create');
+        if (isSmallScreen) {
+            if (minButtons) {
+                return nonCreateButtons.filter(x => minButtons.includes(x.name));
+            }
+            return nonCreateButtons.slice(0, 1);
+        }
+        return nonCreateButtons;
+    }
+    getActionsWidth(buttons) {
+        return `${buttons.length * 40 + 20}px`;
+    }
+}
+ButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class NumberComponent {
     constructor() {
         // options: FormGroup;
@@ -2877,7 +3130,7 @@ class NumberComponent {
     }
 }
 NumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-number', template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n</mat-form-field>\n" }]
@@ -3278,16 +3531,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class DetailsDialogInternal {
-    constructor(breakpointObserver, loaderService, dataService, messageService, dialogRef, detailsConfig) {
+    constructor(breakpointObserver, loaderService, dataService, messageService, dialogRef, detailsConfig, buttonService, dialogService) {
         this.breakpointObserver = breakpointObserver;
         this.loaderService = loaderService;
         this.dataService = dataService;
         this.messageService = messageService;
         this.dialogRef = dialogRef;
         this.detailsConfig = detailsConfig;
+        this.buttonService = buttonService;
+        this.dialogService = dialogService;
         this.titleAction = "View";
         this.loadByAction = false;
         this.files = [];
+        this.tableReload = new Subject();
         this.smallScreen = false;
         this.isLoadComplete = false;
         this.isProcessing = false;
@@ -3308,12 +3564,11 @@ class DetailsDialogInternal {
         this.tableConfigs = tableConfigs;
         this.formConfig = formConfig;
         this.buttons = buttons;
-        // console.log(this.detailsConfig)
         let resp = DetailsDialogProcessor.handleFormMode(this.detailsConfig, this.formConfig);
         if (resp.loadByAction) {
             this.loadByAction = true;
             formConfig.loadAction = resp.action;
-            this.loadData(resp.action);
+            this.loadData(resp.action, false);
         }
         else {
             this.details = resp.details;
@@ -3330,7 +3585,7 @@ class DetailsDialogInternal {
         this.deleteButton = deleteButton;
         this.setTitleAction();
     }
-    loadData(action) {
+    loadData(action, reload) {
         console.log("loading details");
         if (action && this.loadByAction) {
             console.log("Loading action");
@@ -3340,6 +3595,8 @@ class DetailsDialogInternal {
                     this.details = apiResponse.data;
                     this.isLoadComplete = true;
                     // DetailsDialogProcessor.setHeroValue(this.detailsConfig, this.details);
+                    if (reload)
+                        this.tableReload.next(true);
                 }
                 else {
                     this.messageService.toast("Error: " + apiResponse.message);
@@ -3355,181 +3612,170 @@ class DetailsDialogInternal {
         this.setTitleAction();
     }
     setTitleAction() {
-        if (this.buttons) {
-            if (this.formConfig.mode == "view") {
-                this.titleAction = "View";
-            }
-            else if (this.formConfig.mode == "edit") {
-                this.titleAction = this.editButton.display ? this.editButton.display : "Edit";
-            }
-            else if (this.formConfig.mode == "create") {
-                this.titleAction = this.createButton.display ? this.createButton.display : "Create";
-            }
-        }
+        this.titleAction = this.buttonService.getTitleAction(this.formConfig.mode, this.buttons);
     }
     getButton(name) {
-        if (!this.buttons) {
-            console.log("No buttons found");
-            return null;
-        }
-        return this.buttons.find(x => x.name == name);
+        return this.buttonService.getButton(this.buttons, name);
     }
     testDisabled(row, buttonName) {
-        let button = this.getButton(buttonName);
-        if (button.disabled) {
-            let r = button.disabled(row);
-            return r;
-        }
-        return false;
+        const button = this.getButton(buttonName);
+        return button ? this.buttonService.isButtonDisabled(button, row) : false;
     }
     testVisible(row, buttonName) {
-        if (!this.isLoadComplete)
-            return false;
-        let button = this.getButton(buttonName);
-        if (button.visible) {
-            return button.visible(row);
-        }
-        return true;
+        const button = this.getButton(buttonName);
+        return button ? this.buttonService.isButtonVisible(button, row, this.isLoadComplete) : false;
+    }
+    testVisibleTab(tblConfig) {
+        return this.buttonService.isTabVisible(tblConfig);
     }
     getButtonColor(button, row) {
-        if (button.disabled) {
-            if (button.disabled(row)) {
-                return 'lightgray';
-            }
-        }
-        if (button.icon.color) {
-            return button.icon.color;
-        }
-        if (button.name == 'delete') {
-            return '#F44336';
-        }
-        if (button.name == 'create') {
-            return 'green';
-        }
-        return ' #4050B5';
+        return this.buttonService.getButtonColor(button, row);
     }
     create() {
+        this.handleButtonAction('create');
+    }
+    edit() {
+        this.handleButtonAction('edit');
+    }
+    delete() {
+        this.handleButtonAction('delete');
+    }
+    custom(button) {
+        this.handleButtonAction(button.name);
+    }
+    handleButtonAction(buttonName) {
         var _a;
-        // console.log(this.details)
-        //validation
-        let resp = Core.validateObject(this.formConfig.fields, this.details);
-        if (resp != '') {
-            this.messageService.toast(resp);
-            return;
-        }
-        // File Validation---
-        if (this.files.length < 1 && ((_a = this.fileField) === null || _a === void 0 ? void 0 : _a.required)) {
-            this.messageService.toast("Please attach file(s)");
+        const button = this.getButton(buttonName);
+        if (!button)
             return;
-        }
-        // File Validation---
-        let createButton = this.detailsConfig.buttons.find(x => x.name == "create");
-        if (!createButton || !createButton.action) {
+        if (!button.action) {
             this.dialogRef.close({ message: 'emit', data: this.details });
             return;
         }
-        //coversion--
-        let dataOut;
-        if (createButton.action.isFormData) {
-            let formData = new FormData();
-            for (let i = 0; i < this.files.length; i++) {
-                formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
-            }
-            formData.append("data", JSON.stringify(this.details));
-            // console.log(formData)
-            dataOut = formData;
-        }
-        else {
-            dataOut = this.details;
+        if (this.validateForm()) {
+            this.executeAction(button, this.details, ((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || `${buttonName}d`);
         }
-        //coversion--
-        this.exec(createButton, dataOut, "Created");
     }
-    edit() {
-        //validation
-        let resp = Core.validateObject(this.formConfig.fields, this.details);
-        if (resp != '') {
-            this.messageService.toast(resp);
-            return;
+    validateForm() {
+        var _a;
+        const validationResult = Core.validateObject(this.formConfig.fields, this.details);
+        if (validationResult !== '') {
+            this.messageService.toast(validationResult);
+            return false;
         }
-        let editButton = this.detailsConfig.buttons.find(x => x.name == "edit");
-        if (!editButton || !editButton.action) {
-            this.dialogRef.close({ message: 'emit', data: this.details });
-            return;
+        if (this.files.length < 1 && ((_a = this.fileField) === null || _a === void 0 ? void 0 : _a.required) && this.formConfig.mode === 'create') {
+            this.messageService.toast("Please attach file(s)");
+            return false;
         }
-        //coversion--
-        let dataOut;
-        if (editButton.action.isFormData) {
-            let formData = new FormData();
+        return true;
+    }
+    prepareActionData(button, data) {
+        var _a;
+        if ((_a = button.action) === null || _a === void 0 ? void 0 : _a.isFormData) {
+            const formData = new FormData();
             for (let i = 0; i < this.files.length; i++) {
                 formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
             }
-            formData.append("data", JSON.stringify(this.details));
-            // console.log(formData)
-            dataOut = formData;
-        }
-        else {
-            dataOut = this.details;
-        }
-        //coversion--
-        this.exec(editButton, dataOut, "Updated");
-    }
-    delete() {
-        let deleteButton = this.detailsConfig.buttons.find(x => x.name == "delete");
-        if (!deleteButton) {
-            this.dialogRef.close({ message: 'success', data: this.details });
-            return;
+            formData.append("data", JSON.stringify(data));
+            return formData;
         }
-        deleteButton.confirm = { message: "DELETE ?" };
-        this.exec(deleteButton, this.details, "Deleted");
-    }
-    custom(button) {
-        this.exec(button, this.details, "Updated");
+        return data;
     }
-    exec(button, details, defaultSuccessMessages) {
+    executeAction(button, data, defaultSuccessMessage) {
+        const actionData = this.prepareActionData(button, data);
         if (button.confirm) {
             this.messageService.confirm(button.confirm.message).subscribe((result) => {
-                if (result == "yes") {
-                    this.execAPI(button, details, defaultSuccessMessages);
+                if (result === "yes") {
+                    this.performApiCall(button, actionData, defaultSuccessMessage);
                 }
             });
         }
         else {
-            this.execAPI(button, details, defaultSuccessMessages);
+            this.performApiCall(button, actionData, defaultSuccessMessage);
         }
     }
-    execAPI(button, details, defaultSuccessMessage) {
-        this.dataService.CallApi(button.action, details).subscribe((apiResponse) => {
+    performApiCall(button, data, defaultSuccessMessage) {
+        this.dataService.CallApi(button.action, data).subscribe((apiResponse) => {
+            var _a;
             if (apiResponse.success) {
-                if (button.action.successMessage) {
-                    this.messageService.toast(button.action.successMessage);
-                }
-                else {
-                    this.messageService.toast(defaultSuccessMessage);
-                }
-                this.dialogRef.close({ message: 'success', data: details });
+                this.messageService.toast(((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || defaultSuccessMessage);
+                this.dialogRef.close({ message: 'success', data: this.details });
             }
             else {
-                this.messageService.toast("Error: " + apiResponse);
+                this.messageService.toast("Error: " + apiResponse.message);
             }
         });
     }
 }
-DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}\n"] }]
+            args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i3$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
+        return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
-                    }] }];
+                    }] }, { type: ButtonService }, { type: DialogService }];
     }, propDecorators: { inputChange: [{
                 type: Output
             }] } });
 ;
 
+// table-config.service.ts
+class TableConfigService {
+    setColumns(config, smallScreen) {
+        if (!(config === null || config === void 0 ? void 0 : config.columns)) {
+            return [];
+        }
+        if (smallScreen && config.minColumns) {
+            return config.minColumns.filter(col => config.columns.some(x => x.name === col));
+        }
+        return config.columns.map(({ name }) => name);
+    }
+    getActionsWidth(buttons) {
+        return `${(buttons === null || buttons === void 0 ? void 0 : buttons.length) * 40 + 20}px`;
+    }
+}
+TableConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ConditionService {
+    testIconCondition(icon, row) {
+        if (!icon)
+            return false;
+        return icon.condition ? icon.condition(row) : true;
+    }
+    testColorCondition(color, row) {
+        if (!color)
+            return false;
+        return color.condition ? color.condition(row) : true;
+    }
+    getColor(value, options) {
+        if (!options)
+            return 'lightgrey';
+        const option = options.find(opt => opt.value === value);
+        return option ? option.color : 'lightgrey';
+    }
+    testCondition(condition, value) {
+        return condition ? condition(value) : true;
+    }
+}
+ConditionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConditionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ConditionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConditionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConditionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class SearchComponent {
     constructor() {
         this.searchClick = new EventEmitter();
@@ -3542,7 +3788,7 @@ class SearchComponent {
     }
 }
 SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "spa-search", inputs: { config: "config" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n  <div *ngFor=\"let field of config.fields\">\n\n    <spa-option [type]=\"field.type\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n  </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n  <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n    <mat-icon>search</mat-icon>\n  </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show"], outputs: ["valueChange", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "spa-search", inputs: { config: "config" }, outputs: { searchClick: "searchClick" }, ngImport: i0, template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n  <div *ngFor=\"let field of config.fields\">\n\n    <spa-option [type]=\"field.type\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n  </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n  <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n    <mat-icon>search</mat-icon>\n  </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OptionComponent, selector: "spa-option", inputs: ["options", "optionValue", "optionDisplay", "readonly", "type", "value", "display", "show"], outputs: ["valueChange", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-search', template: "\n<div class=\"tin-between\">\n\n<div class=\"col tin-row\">\n\n  <div *ngFor=\"let field of config.fields\">\n\n    <spa-option [type]=\"field.type\" [show]=\"field.show\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (enterPress)=\"search()\"></spa-option>\n\n  </div>\n\n</div>\n\n<div class=\"col-1 tin-end\">\n  <button mat-fab color=\"primary\" (click)=\"search()\" matTooltip=\"Search\" matTooltipPosition=\"right\">\n    <mat-icon>search</mat-icon>\n  </button>\n</div>\n\n\n\n</div>\n\n\n\n", styles: [".tin-row{column-gap:30px}\n"] }]
@@ -3552,88 +3798,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-class TableInternalComponent {
-    constructor(dataService, messageService, breakpointObserver, dialog) {
-        this.dataService = dataService;
-        this.messageService = messageService;
-        this.breakpointObserver = breakpointObserver;
-        this.dialog = dialog;
-        this.elevation = "mat-elevation-z5";
-        this.actionsWidth = "50px";
-        this.showFilterButton = true;
-        this.tileReload = new Subject();
-        this.hideTitle = false;
-        this.data = [];
-        this.dataLoad = new EventEmitter();
-        this.refreshClick = new EventEmitter();
-        this.searchClick = new EventEmitter();
-        this.createClick = new EventEmitter();
+class TableRowComponent {
+    constructor(buttonService) {
+        this.buttonService = buttonService;
         this.actionClick = new EventEmitter();
-        this.inputChange = new EventEmitter();
-        this.smallScreen = false;
-        // columns: Column[] = [];
-        this.displayedColumns = [];
-        // @Input() optionValue = "";
-        // @Input() optionDisplay = "";
-        this.displayedButtons = [];
-        // detect screen size changes
+        this.columnClick = new EventEmitter();
+        this.showBannerEvent = new EventEmitter();
+    }
+    testIconCondition(row, icon) {
+        return icon.condition ? icon.condition(row) : true;
+    }
+    testColorCondition(row, color) {
+        return color && color.condition ? color.condition(row) : false;
+    }
+    getColor(value, options) {
+        if (!options)
+            return 'lightgrey';
+        const option = options.find(opt => opt.value === value);
+        return option ? option.color : 'lightgrey';
+    }
+    onActionClick(name, row) {
+        this.actionClick.emit({ name, row });
+    }
+    onColumnClick(column, row) {
+        this.columnClick.emit({ column, row });
+    }
+    showBanner(message) {
+        this.showBannerEvent.emit(message);
+    }
+}
+TableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableRowComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
+TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableRowComponent, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"onActionClick(column.name, row)\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-row', template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"onActionClick(column.name, row)\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ButtonService }]; }, propDecorators: { column: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }], columnClick: [{
+                type: Output
+            }], showBannerEvent: [{
+                type: Output
+            }] } });
+
+class TableActionComponent {
+    constructor(buttonService) {
+        this.buttonService = buttonService;
+        this.actionClick = new EventEmitter();
+    }
+    testVisible(row, buttonName) {
+        const button = this.displayedButtons.find(b => b.name === buttonName);
+        return button ? this.buttonService.testVisible(button, row) : false;
+    }
+    testDisabled(row, buttonName) {
+        const button = this.displayedButtons.find(b => b.name === buttonName);
+        return button ? this.buttonService.testDisabled(button, row) : true;
+    }
+    getButtonColor(button, row) {
+        return this.buttonService.getButtonColor(button, row);
+    }
+    getIcon(buttonName) {
+        const button = this.displayedButtons.find(b => b.name === buttonName);
+        return button ? this.buttonService.getIcon(button, this.config) : '';
+    }
+    onActionClick(buttonName, row) {
+        this.actionClick.emit({ name: buttonName, row });
+    }
+}
+TableActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableActionComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
+TableActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableActionComponent, selector: "app-table-action", inputs: { displayedButtons: "displayedButtons", config: "config", row: "row" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<ng-container *ngFor=\"let button of displayedButtons\">\r\n  <ng-container *ngIf=\"button.name != 'create' && testVisible(row, button.name)\">\r\n    <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color': getButtonColor(button, row)}\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon>{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon [ngStyle]=\"{'color': getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"button.name != 'create' && !testVisible(row, button.name) && !config.collapseButtons\">\r\n    <label style=\"margin-right: 35px;\"></label>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-action', template: "<ng-container *ngFor=\"let button of displayedButtons\">\r\n  <ng-container *ngIf=\"button.name != 'create' && testVisible(row, button.name)\">\r\n    <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color': getButtonColor(button, row)}\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon>{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name | titlecase\" matTooltipPosition=\"above\" style=\"margin-right:5px\" [disabled]=\"testDisabled(row, button.name)\" (click)=\"onActionClick(button.name, row)\">\r\n      <mat-icon [ngStyle]=\"{'color': getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"button.name != 'create' && !testVisible(row, button.name) && !config.collapseButtons\">\r\n    <label style=\"margin-right: 35px;\"></label>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ButtonService }]; }, propDecorators: { displayedButtons: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class TableInternalComponent {
+    constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.breakpointObserver = breakpointObserver;
+        this.dialog = dialog;
+        this.buttonService = buttonService;
+        this.dialogService = dialogService;
+        this.tableConfigService = tableConfigService;
+        this.conditionService = conditionService;
+        this.elevation = "mat-elevation-z5";
+        this.actionsWidth = "50px";
+        this.showFilterButton = true;
+        this.tileReload = new Subject();
+        this.smallScreen = false;
+        this.displayedColumns = [];
+        this.displayedButtons = [];
+        this.hideTitle = false;
+        this.data = [];
+        this.dataLoad = new EventEmitter();
+        this.refreshClick = new EventEmitter();
+        this.searchClick = new EventEmitter();
+        this.createClick = new EventEmitter();
+        this.actionClick = new EventEmitter();
+        this.inputChange = new EventEmitter();
+        // detect screen size changes
         this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
-            if (result.matches) {
-                this.smallScreen = true;
-                this.setColumns();
-            }
-            else {
-                this.smallScreen = false;
-                this.setColumns();
-            }
+            this.smallScreen = result.matches;
+            this.updateTableConfiguration();
         });
     }
     ngOnInit() {
-        if (this.config.elevation) {
-            if (this.config.elevation == "none") {
-                this.elevation = "";
-            }
-            else if (this.config.elevation == "low") {
-                this.elevation = "mat-elevation-z1";
-            }
-            else if (this.config.elevation == "medium") {
-                this.elevation = "mat-elevation-z5";
-            }
-            else if (this.config.elevation == "high") {
-                this.elevation = "mat-elevation-z9";
-            }
+        this.initializeComponent();
+    }
+    ngOnChanges() {
+        if (!this.config.loadAction) {
+            this.dataSource = this.data;
+            this.tableDataSource = new MatTableDataSource(this.dataSource);
+        }
+        setTimeout(() => { this.tableDataSource.paginator = this.tablePaginator; }, 1000);
+    }
+    initializeComponent() {
+        this.updateTableConfiguration();
+        this.setupDataLoading();
+        this.formDefaults();
+    }
+    updateTableConfiguration() {
+        var _a, _b, _c, _d, _e, _f;
+        this.elevation = this.getElevationClass((_a = this.config) === null || _a === void 0 ? void 0 : _a.elevation);
+        this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
+        this.displayedButtons = this.buttonService.getDisplayedButtons((_b = this.config) === null || _b === void 0 ? void 0 : _b.buttons, this.smallScreen, (_c = this.config) === null || _c === void 0 ? void 0 : _c.minButtons);
+        this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
+        this.createButton = this.buttonService.getCreateButton((_d = this.config) === null || _d === void 0 ? void 0 : _d.buttons);
+        this.showFilterButton = !((_e = this.config) === null || _e === void 0 ? void 0 : _e.searchConfig);
+        if (((_f = this.displayedButtons) === null || _f === void 0 ? void 0 : _f.length) > 0 && !this.displayedColumns.includes('action')) {
+            this.displayedColumns.push('action');
         }
-        this.setColumns();
-        this.createButton = this.getButton('create');
+    }
+    setupDataLoading() {
         if (this.config.loadAction) {
             this.loadData(this.config.loadAction, "");
         }
-        this.formDefaults();
-        if (this.config.searchConfig) {
-            this.showFilterButton = false;
-        }
-        if (this.reload != null) {
+        if (this.reload) {
             this.reload.subscribe(v => {
-                var _a, _b;
-                if (v == true) {
-                    if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loadAction) {
-                        this.loadData((_b = this.config) === null || _b === void 0 ? void 0 : _b.loadAction, "");
-                    }
+                var _a;
+                if (v && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loadAction)) {
+                    this.loadData(this.config.loadAction, "");
                 }
             });
         }
     }
-    ngOnChanges() {
-        if (!this.config.loadAction) {
-            // console.log("Table data Changed")
-            this.dataSource = this.data;
-            this.tableDataSource = new MatTableDataSource(this.dataSource);
+    loadData(action, data) {
+        console.log("loading");
+        if (action) {
+            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
+                if (this.config.logResponse) {
+                    console.log(apiResponse);
+                }
+                this.dataSource = apiResponse.data;
+                this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                this.tableDataSource.paginator = this.tablePaginator;
+                if (apiResponse.success) {
+                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                    this.tableDataSource.paginator = this.tablePaginator;
+                    this.dataLoaded(apiResponse.data);
+                }
+                else {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
         }
-        setTimeout(() => { this.tableDataSource.paginator = this.tablePaginator; }, 1000);
     }
     inputChanged(event) {
         this.inputChange.emit({ field: event.field, value: event.value });
-        // console.log("Changed " + JSON.stringify(event))
     }
     formDefaults() {
         if (!this.config.formConfig) {
@@ -3647,47 +3992,11 @@ class TableInternalComponent {
         }
     }
     setColumns() {
-        var _a, _b, _c;
-        //columns
-        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.columns)) {
-            return;
-        }
-        if (this.smallScreen) {
-            let cols = [];
-            if (this.config.minColumns) {
-                cols = this.config.minColumns.filter(col => this.config.columns.some(x => x.name === col));
-            }
-            if (cols.length > 0) {
-                this.displayedColumns = cols;
-            }
-            else {
-                this.displayedColumns = this.config.columns.map(({ name }) => name);
-            }
-        }
-        else {
-            this.displayedColumns = this.config.columns.map(({ name }) => name);
-        }
-        //buttons
-        if (!((_b = this.config) === null || _b === void 0 ? void 0 : _b.buttons)) {
-            return;
-        }
-        let buttonsCount = (_c = this.config.buttons.filter(x => x.name != 'create').length) !== null && _c !== void 0 ? _c : 0;
-        if (buttonsCount > 0) {
-            if (!this.displayedColumns.find(x => x == 'action') && this.config.buttons) {
-                this.displayedColumns.push("action");
-            }
-            if (this.smallScreen) {
-                if (this.config.minButtons) {
-                    this.displayedButtons = this.config.buttons.filter(x => this.config.minButtons.includes(x.name));
-                }
-                else {
-                    this.displayedButtons = this.config.buttons.filter(x => x.name != 'create').slice(0, 1);
-                }
-            }
-            else {
-                this.displayedButtons = this.config.buttons.filter(x => x.name != 'create');
-            }
-            this.actionsWidth = `${this.displayedButtons.length * 40 + 20}px`;
+        this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
+        this.displayedButtons = this.buttonService.getDisplayedButtons(this.config.buttons, this.smallScreen, this.config.minButtons);
+        this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
+        if (this.displayedButtons.length > 0 && !this.displayedColumns.includes('action')) {
+            this.displayedColumns.push('action');
         }
     }
     setButtons() {
@@ -3701,132 +4010,45 @@ class TableInternalComponent {
         }
     }
     getButton(name) {
-        if (!this.config.buttons) {
-            console.log("No buttons found");
-            return null;
-        }
-        return this.config.buttons.find(x => x.name == name);
+        return this.buttonService.getButton(this.config.buttons, name);
     }
     getIcon(buttonName) {
-        let b = this.getButton(buttonName);
-        if (b.icon) {
-            return b.icon.name;
-        }
-        let i = 'open_in_new';
-        switch (buttonName) {
-            case 'view':
-                i = this.config.flatButtons ? 'open_in_new' : 'pageview';
-                break;
-            case 'edit':
-                i = 'edit';
-                break;
-            case 'delete':
-                i = 'delete';
-                break;
-            default:
-                break;
-        }
-        return i;
+        const button = this.getButton(buttonName);
+        return this.buttonService.getIcon(button, this.config);
     }
     getButtonColor(button, row) {
-        if (button.disabled) {
-            if (button.disabled(row)) {
-                return 'lightgray';
-            }
-        }
-        if (button.color) {
-            return button.color;
-        }
-        if (button.name == 'delete') {
-            return '#F44336';
-        }
-        if (button.name == 'create') {
-            return 'green';
-        }
-        return ' #4050B5';
+        return this.buttonService.getButtonColor(button, row);
     }
     getOptions(column) {
         let x = this.config.columns.find(opt => opt.name === column);
         return x;
     }
-    getColor(v, options) {
-        let defaultColor = 'lightgrey';
-        if (!options)
-            return defaultColor;
-        let c = options.find(x => x.value == v);
-        if (c) {
-            return c.color;
-        }
-        else {
-            return defaultColor;
-        }
+    getColor(value, options) {
+        return this.conditionService.getColor(value, options);
     }
-    testIconCondition(value, icon) {
-        if (icon.condition) {
-            return icon.condition(value);
-        }
-        else {
-            return true;
-        }
+    testIconCondition(row, icon) {
+        return this.conditionService.testIconCondition(icon, row);
     }
-    testColorCondition(value, color) {
-        if (!color)
-            return false;
-        if (color.condition) {
-            return color.condition(value);
-        }
-        else {
-            return true;
-        }
+    testColorCondition(row, color) {
+        return this.conditionService.testColorCondition(color, row);
     }
     showBanner(message) {
-        if (!message)
-            return;
-        if (message == '')
-            return;
-        this.messageService.info(message);
+        if (message && message !== '') {
+            this.messageService.info(message);
+        }
     }
     testDisabled(row, buttonName) {
-        let button = this.getButton(buttonName);
-        if (button.disabled) {
-            return button.disabled(row);
-        }
-        return false;
+        const button = this.getButton(buttonName);
+        return this.buttonService.testDisabled(button, row);
     }
     testVisible(row, buttonName) {
-        let button = this.getButton(buttonName);
-        if (button.visible) {
-            return button.visible(row);
-        }
-        return true;
-    }
-    //Actions
-    loadData(action, data) {
-        console.log("loading");
-        if (action) {
-            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
-                if (this.config.logResponse) {
-                    console.log(apiResponse);
-                }
-                this.dataSource = apiResponse.data;
-                this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                this.tableDataSource.paginator = this.tablePaginator;
-                if (apiResponse.success) {
-                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                    this.tableDataSource.paginator = this.tablePaginator;
-                    this.dataLoaded(apiResponse.data);
-                }
-                else {
-                    this.messageService.toast("Error: " + apiResponse.message);
-                }
-            });
-        }
+        const button = this.getButton(buttonName);
+        return this.buttonService.testVisible(button, row);
     }
     //Events
     searchClicked(x) {
         console.log("Search");
         this.searchClick.emit(x);
-        // console.log(x)
         if (this.config.searchConfig.searchAction) {
             this.config.searchConfig.searchAction.method == 'post';
             this.loadData(this.config.searchConfig.searchAction, x);
@@ -3844,73 +4066,37 @@ class TableInternalComponent {
     }
     dataLoaded(x) {
         var _a;
-        this.dataLoad.emit(x);
         console.log("dataloaded");
+        this.dataLoad.emit(x);
         if ((_a = this.config.tileConfig) === null || _a === void 0 ? void 0 : _a.loadAction) {
             this.tileReload.next(true);
         }
     }
     actionClicked(name, row) {
-        if (name == 'view') {
+        if (name === 'view') {
             this.viewModel(row);
         }
-        else if (name == 'edit') {
+        else if (name === 'edit') {
             this.editModel(row);
         }
-        else if (name == 'delete') {
+        else if (name === 'delete') {
             this.deleteModel(row);
         }
         else {
             this.customModel(name, row);
         }
     }
+    //Dialog events
     columnClicked(column, row) {
         if (column.detailsConfig) {
-            let conf = DetailsDialogProcessor.processDetailsConfig(column.detailsConfig, row);
-            const dialogRef = this.dialog.open(DetailsDialogInternal, {
-                width: "900px",
-                data: conf
-            });
-            dialogRef.afterClosed().subscribe((result) => {
-                if (result.message == "success") {
-                    this.actionClickedEmit(column.name, row);
-                    this.refreshClicked();
-                }
-            });
+            this.openDetailsDialog(column.name, row, column);
         }
         else {
             this.actionClickedEmit(column.name, row);
         }
     }
     customModel(name, row) {
-        let button = this.getButton(name);
-        if (button) {
-            if (!button.dialog) {
-                this.doAction(button.name, row);
-                this.actionClickedEmit(name, row);
-            }
-            else {
-                if (button.detailsConfig) {
-                    let conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
-                    const dialogRef = this.dialog.open(DetailsDialogInternal, {
-                        width: "900px",
-                        data: conf
-                    });
-                    dialogRef.afterClosed().subscribe((result) => {
-                        if (result.message == "success") {
-                            this.actionClickedEmit(button.name, row);
-                            this.refreshClicked();
-                        }
-                    });
-                }
-                else {
-                    this.actionClickedEmit(button.name, row);
-                }
-            }
-        }
-        else {
-            this.actionClickedEmit(name, row);
-        }
+        this.openDetailsDialog(name, row);
     }
     actionClickedEmit(name, row) {
         console.log("Action clicked");
@@ -3918,111 +4104,56 @@ class TableInternalComponent {
     }
     viewModel(row) {
         console.log("view Clicked");
-        let button = this.getButton('view');
-        if (!button)
-            return;
-        if (!button.dialog) {
-            this.actionClickedEmit(button.name, row);
-            return;
-        }
-        if (!this.config.formConfig) {
-            this.messageService.toast("Please configure form");
-            return;
-        }
-        let conf = {
-            formConfig: this.config.formConfig,
-            buttons: this.config.buttons,
-            details: row,
-        };
-        if (button.detailsConfig) {
-            conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
-        }
-        conf.formConfig.mode = "view";
-        const dialogRef = this.dialog.open(DetailsDialogInternal, {
-            width: "900px",
-            data: conf
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result.message) {
-                this.refreshClicked();
-            }
-        });
+        this.openDetailsDialog('view', row);
     }
     newModel() {
-        var _a, _b;
-        let button = this.getButton('create');
-        if (!button)
-            return;
-        if (!button.dialog) {
-            this.actionClickedEmit(button.name, null);
-            return;
-        }
-        if (!this.config.formConfig) {
-            this.messageService.toast("Please configure form");
-            return;
-        }
-        this.config.formConfig.mode = "create";
-        let conf = {
-            formConfig: this.config.formConfig,
-            buttons: this.config.buttons,
-        };
-        if (button.detailsConfig) {
-            conf = button.detailsConfig;
-        }
-        conf.formConfig.mode = "create";
-        conf.heroField = (_a = this.config) === null || _a === void 0 ? void 0 : _a.heroField;
-        conf.heroValue = (_b = this.config) === null || _b === void 0 ? void 0 : _b.heroValue;
-        const dialogRef = this.dialog.open(DetailsDialogInternal, {
-            width: "900px",
-            data: conf,
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result.message == "success") {
-                this.actionClickedEmit('create', result.data);
-                this.refreshClicked();
-            }
-            else if (result.message == "emit") {
-                this.actionClickedEmit('create', result.data);
-            }
-        });
+        this.openDetailsDialog('create', null);
     }
     editModel(row) {
-        let button = this.getButton('edit');
+        this.openDetailsDialog('edit', row);
+    }
+    openDetailsDialog(buttonName, row, column) {
+        var _a, _b;
+        const button = column ? { name: column.name, dialog: true, detailsConfig: column.detailsConfig } : this.getButton(buttonName);
         if (!button)
             return;
         if (!button.dialog) {
+            this.doAction(button.name, row);
             this.actionClickedEmit(button.name, row);
             return;
         }
-        if (!this.config.formConfig) {
+        if (!this.config.formConfig && !button.detailsConfig) {
             this.messageService.toast("Please configure form");
             return;
         }
-        this.config.formConfig.mode = "edit";
         let conf = {
             formConfig: this.config.formConfig,
             buttons: this.config.buttons,
             details: row,
         };
         if (button.detailsConfig) {
-            conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
+            conf = buttonName === 'create'
+                ? button.detailsConfig
+                : DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
+        }
+        conf.formConfig.mode = buttonName === 'create' ? 'create' : (buttonName === 'edit' ? 'edit' : 'view');
+        if (buttonName === 'create') {
+            conf.heroField = (_a = this.config) === null || _a === void 0 ? void 0 : _a.heroField;
+            conf.heroValue = (_b = this.config) === null || _b === void 0 ? void 0 : _b.heroValue;
+        }
+        const dialogResult = this.dialogService.openDetailsDialog(conf, DetailsDialogInternal); // Unique to internal
+        if (buttonName === 'edit') {
+            dialogResult.inputChange.subscribe((x) => {
+                this.inputChanged(x);
+            });
         }
-        conf.formConfig.mode = "edit";
-        const dialogRef = this.dialog.open(DetailsDialogInternal, {
-            width: "900px",
-            data: conf
-        });
-        dialogRef.componentInstance.inputChange.subscribe((x) => {
-            this.inputChanged(x);
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            console.log(result);
-            if (result.message == "success") {
-                this.actionClickedEmit('edit', result.data);
+        dialogResult.afterClosed.subscribe((result) => {
+            if (result.message === 'success') {
+                this.actionClickedEmit(button.name, result.data);
                 this.refreshClicked();
             }
-            else if (result.message == "emit") {
-                this.actionClickedEmit('edit', result.data);
+            else if (result.message === 'emit') {
+                this.actionClickedEmit(button.name, result.data);
             }
         });
     }
@@ -4037,6 +4168,7 @@ class TableInternalComponent {
             }
         });
     }
+    //Actions
     doAction(buttonName, row) {
         let b = this.getButton(buttonName);
         if (!b)
@@ -4072,13 +4204,32 @@ class TableInternalComponent {
             this.messageService.toast("Error: " + error);
         });
     }
+    //Misc
+    getElevationClass(elevation) {
+        console.log(elevation);
+        if (elevation == "none") {
+            return "";
+        }
+        else if (elevation == "low") {
+            return "mat-elevation-z1";
+        }
+        else if (elevation == "medium") {
+            return "mat-elevation-z5";
+        }
+        else if (elevation == "high") {
+            return "mat-elevation-z9";
+        }
+        else {
+            return "mat-elevation-z5";
+        }
+    }
 }
-TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <!-- Unique to internal -->\n  <div class=\"tin-row\">\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\n    </button>\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\n    </button>\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'button'\">\n\n              <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button *ngIf=\"!config.flatButtons\" mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n                [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n              <button *ngIf=\"config.flatButtons\"  mat-icon-button  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<div class=\"tin-center\">\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n</div>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
+TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n  <!-- Unique to internal -->\r\n  <div class=\"tin-row\">\r\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-table-internal', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <!-- Unique to internal -->\n  <div class=\"tin-row\">\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\n    </button>\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\n    </button>\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'button'\">\n\n              <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button *ngIf=\"!config.flatButtons\" mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n                [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n              <button *ngIf=\"config.flatButtons\"  mat-icon-button  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<div class=\"tin-center\">\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n</div>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$3.BreakpointObserver }, { type: i4.MatDialog }]; }, propDecorators: { tablePaginator: [{
+            args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n  <!-- Unique to internal -->\r\n  <div class=\"tin-row\">\r\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
             }], hideTitle: [{
@@ -4104,13 +4255,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class DetailsDialog {
-    constructor(breakpointObserver, loaderService, dataService, messageService, dialogRef, detailsConfig) {
+    constructor(breakpointObserver, loaderService, dataService, messageService, dialogRef, detailsConfig, buttonService, dialogService) {
         this.breakpointObserver = breakpointObserver;
         this.loaderService = loaderService;
         this.dataService = dataService;
         this.messageService = messageService;
         this.dialogRef = dialogRef;
         this.detailsConfig = detailsConfig;
+        this.buttonService = buttonService;
+        this.dialogService = dialogService;
         this.titleAction = "View";
         this.loadByAction = false;
         this.files = [];
@@ -4183,197 +4336,178 @@ class DetailsDialog {
         this.setTitleAction();
     }
     setTitleAction() {
-        if (this.buttons) {
-            if (this.formConfig.mode == "view") {
-                this.titleAction = "View";
-            }
-            else if (this.formConfig.mode == "edit") {
-                this.titleAction = this.editButton.display ? this.editButton.display : "Edit";
-            }
-            else if (this.formConfig.mode == "create") {
-                this.titleAction = this.createButton.display ? this.createButton.display : "Create";
-            }
-        }
+        this.titleAction = this.buttonService.getTitleAction(this.formConfig.mode, this.buttons);
     }
     getButton(name) {
-        if (!this.buttons) {
-            console.log("No buttons found");
-            return null;
-        }
-        return this.buttons.find(x => x.name == name);
+        return this.buttonService.getButton(this.buttons, name);
     }
     testDisabled(row, buttonName) {
-        let button = this.getButton(buttonName);
-        if (button.disabled) {
-            let r = button.disabled(row);
-            return r;
-        }
-        return false;
+        const button = this.getButton(buttonName);
+        return button ? this.buttonService.isButtonDisabled(button, row) : false;
     }
     testVisible(row, buttonName) {
-        if (!this.isLoadComplete)
-            return false;
-        let button = this.getButton(buttonName);
-        if (button.visible) {
-            return button.visible(row);
-        }
-        return true;
+        const button = this.getButton(buttonName);
+        return button ? this.buttonService.isButtonVisible(button, row, this.isLoadComplete) : false;
     }
     testVisibleTab(tblConfig) {
-        if (tblConfig.hideTabCondition) {
-            return !tblConfig.hideTabCondition(tblConfig.parentData);
-        }
-        return true;
+        return this.buttonService.isTabVisible(tblConfig);
     }
     getButtonColor(button, row) {
-        if (button.disabled) {
-            if (button.disabled(row)) {
-                return 'lightgray';
-            }
-        }
-        if (button.icon.color) {
-            return button.icon.color;
-        }
-        if (button.name == 'delete') {
-            return '#F44336';
-        }
-        if (button.name == 'create') {
-            return 'green';
-        }
-        return ' #4050B5';
+        return this.buttonService.getButtonColor(button, row);
     }
     create() {
+        this.handleButtonAction('create');
+    }
+    edit() {
+        this.handleButtonAction('edit');
+    }
+    delete() {
+        this.handleButtonAction('delete');
+    }
+    custom(button) {
+        this.handleButtonAction(button.name);
+    }
+    handleButtonAction(buttonName) {
         var _a;
-        // console.log(this.details)
-        //validation
-        let resp = Core.validateObject(this.formConfig.fields, this.details);
-        if (resp != '') {
-            this.messageService.toast(resp);
-            return;
-        }
-        // File Validation---
-        if (this.files.length < 1 && ((_a = this.fileField) === null || _a === void 0 ? void 0 : _a.required)) {
-            this.messageService.toast("Please attach file(s)");
+        const button = this.getButton(buttonName);
+        if (!button)
             return;
-        }
-        // File Validation---
-        let createButton = this.detailsConfig.buttons.find(x => x.name == "create");
-        if (!createButton || !createButton.action) {
+        if (!button.action) {
             this.dialogRef.close({ message: 'emit', data: this.details });
             return;
         }
-        //coversion--
-        let dataOut;
-        if (createButton.action.isFormData) {
-            let formData = new FormData();
-            for (let i = 0; i < this.files.length; i++) {
-                formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
-            }
-            formData.append("data", JSON.stringify(this.details));
-            // console.log(formData)
-            dataOut = formData;
-        }
-        else {
-            dataOut = this.details;
+        if (this.validateForm()) {
+            this.executeAction(button, this.details, ((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || `${buttonName}d`);
         }
-        //coversion--
-        this.exec(createButton, dataOut, "Created");
     }
-    edit() {
-        //validation
-        let resp = Core.validateObject(this.formConfig.fields, this.details);
-        if (resp != '') {
-            this.messageService.toast(resp);
-            return;
+    validateForm() {
+        var _a;
+        const validationResult = Core.validateObject(this.formConfig.fields, this.details);
+        if (validationResult !== '') {
+            this.messageService.toast(validationResult);
+            return false;
         }
-        let editButton = this.detailsConfig.buttons.find(x => x.name == "edit");
-        if (!editButton || !editButton.action) {
-            this.dialogRef.close({ message: 'emit', data: this.details });
-            return;
+        if (this.files.length < 1 && ((_a = this.fileField) === null || _a === void 0 ? void 0 : _a.required) && this.formConfig.mode === 'create') {
+            this.messageService.toast("Please attach file(s)");
+            return false;
         }
-        //coversion--
-        let dataOut;
-        if (editButton.action.isFormData) {
-            let formData = new FormData();
+        return true;
+    }
+    prepareActionData(button, data) {
+        var _a;
+        if ((_a = button.action) === null || _a === void 0 ? void 0 : _a.isFormData) {
+            const formData = new FormData();
             for (let i = 0; i < this.files.length; i++) {
                 formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
             }
-            formData.append("data", JSON.stringify(this.details));
-            // console.log(formData)
-            dataOut = formData;
-        }
-        else {
-            dataOut = this.details;
-        }
-        //coversion--
-        this.exec(editButton, dataOut, "Updated");
-    }
-    delete() {
-        let deleteButton = this.detailsConfig.buttons.find(x => x.name == "delete");
-        if (!deleteButton) {
-            this.dialogRef.close({ message: 'success', data: this.details });
-            return;
+            formData.append("data", JSON.stringify(data));
+            return formData;
         }
-        deleteButton.confirm = { message: "DELETE ?" };
-        this.exec(deleteButton, this.details, "Deleted");
-    }
-    custom(button) {
-        this.exec(button, this.details, "Updated");
+        return data;
     }
-    exec(button, details, defaultSuccessMessages) {
+    executeAction(button, data, defaultSuccessMessage) {
+        const actionData = this.prepareActionData(button, data);
         if (button.confirm) {
             this.messageService.confirm(button.confirm.message).subscribe((result) => {
-                if (result == "yes") {
-                    this.execAPI(button, details, defaultSuccessMessages);
+                if (result === "yes") {
+                    this.performApiCall(button, actionData, defaultSuccessMessage);
                 }
             });
         }
         else {
-            this.execAPI(button, details, defaultSuccessMessages);
+            this.performApiCall(button, actionData, defaultSuccessMessage);
         }
     }
-    execAPI(button, details, defaultSuccessMessage) {
-        this.dataService.CallApi(button.action, details).subscribe((apiResponse) => {
+    performApiCall(button, data, defaultSuccessMessage) {
+        this.dataService.CallApi(button.action, data).subscribe((apiResponse) => {
+            var _a;
             if (apiResponse.success) {
-                if (button.action.successMessage) {
-                    this.messageService.toast(button.action.successMessage);
-                }
-                else {
-                    this.messageService.toast(defaultSuccessMessage);
-                }
-                this.dialogRef.close({ message: 'success', data: details });
+                this.messageService.toast(((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || defaultSuccessMessage);
+                this.dialogRef.close({ message: 'success', data: this.details });
             }
             else {
-                this.messageService.toast("Error: " + apiResponse);
+                this.messageService.toast("Error: " + apiResponse.message);
             }
         });
     }
 }
-DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table-internal [config]=\"tableConfig\" [reload]=\"tableReload\"  ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n    <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n      <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n        <ng-template matTabLabel>\r\n          <span>{{tbl.title}}</span>\r\n        </ng-template>\r\n\r\n        <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" ></spa-table-internal>\r\n\r\n      </mat-tab>\r\n    </ng-container>\r\n\r\n\r\n</mat-tab-group>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\"\r\n      (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\"\r\n      (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\" >\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button  *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table-internal [config]=\"tableConfig\" [reload]=\"tableReload\"  ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n    <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n      <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n        <ng-template matTabLabel>\r\n          <span>{{tbl.title}}</span>\r\n        </ng-template>\r\n\r\n        <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" ></spa-table-internal>\r\n\r\n      </mat-tab>\r\n    </ng-container>\r\n\r\n\r\n</mat-tab-group>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\"\r\n      (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\"\r\n      (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\" >\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button  *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+            args: [{ selector: 'app-viewModel', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i3$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
+        return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
-                    }] }];
+                    }] }, { type: ButtonService }, { type: DialogService }];
     }, propDecorators: { inputChange: [{
                 type: Output
             }] } });
 ;
 
+class TableHeaderComponent {
+    constructor() {
+        this.createClick = new EventEmitter();
+        this.refreshClick = new EventEmitter();
+        this.tileClick = new EventEmitter();
+    }
+    onCreateClick() {
+        this.createClick.emit();
+    }
+    onRefreshClick() {
+        this.refreshClick.emit();
+    }
+    onTileClick(tileName) {
+        this.tileClick.emit(tileName);
+    }
+}
+TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", createButton: "createButton", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton" }, outputs: { createClick: "createClick", refreshClick: "refreshClick", tileClick: "tileClick" }, ngImport: i0, template: "<div class=\"top\">\r\n  <div class=\"tin-row\">\r\n    <ng-container *ngIf=\"createButton\">\r\n      <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" (click)=\"onCreateClick()\" style=\"margin-right: 10px;\">\r\n        {{createButton.display}}\r\n      </button>\r\n      <button *ngIf=\"config.flatButtons\" mat-stroked-button (click)=\"onCreateClick()\" style=\"margin-right: 10px; color: green;\">\r\n        {{createButton.display}}\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-header', template: "<div class=\"top\">\r\n  <div class=\"tin-row\">\r\n    <ng-container *ngIf=\"createButton\">\r\n      <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" (click)=\"onCreateClick()\" style=\"margin-right: 10px;\">\r\n        {{createButton.display}}\r\n      </button>\r\n      <button *ngIf=\"config.flatButtons\" mat-stroked-button (click)=\"onCreateClick()\" style=\"margin-right: 10px; color: green;\">\r\n        {{createButton.display}}\r\n      </button>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], hideTitle: [{
+                type: Input
+            }], tableDataSource: [{
+                type: Input
+            }], createButton: [{
+                type: Input
+            }], tileConfig: [{
+                type: Input
+            }], smallScreen: [{
+                type: Input
+            }], tileReload: [{
+                type: Input
+            }], showFilterButton: [{
+                type: Input
+            }], createClick: [{
+                type: Output
+            }], refreshClick: [{
+                type: Output
+            }], tileClick: [{
+                type: Output
+            }] } });
+
 class TableComponent {
-    constructor(dataService, messageService, breakpointObserver, dialog) {
+    constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService) {
         this.dataService = dataService;
         this.messageService = messageService;
         this.breakpointObserver = breakpointObserver;
         this.dialog = dialog;
+        this.buttonService = buttonService;
+        this.dialogService = dialogService;
+        this.tableConfigService = tableConfigService;
+        this.conditionService = conditionService;
         this.elevation = "mat-elevation-z5";
         this.actionsWidth = "50px";
         this.showFilterButton = true;
         this.tileReload = new Subject();
+        this.smallScreen = false;
+        this.displayedColumns = [];
+        this.displayedButtons = [];
         this.hideTitle = false;
         this.data = [];
         this.dataLoad = new EventEmitter();
@@ -4382,70 +4516,75 @@ class TableComponent {
         this.createClick = new EventEmitter();
         this.actionClick = new EventEmitter();
         this.inputChange = new EventEmitter();
-        this.smallScreen = false;
-        // columns: Column[] = [];
-        this.displayedColumns = [];
-        // @Input() optionValue = "";
-        // @Input() optionDisplay = "";
-        this.displayedButtons = [];
         // detect screen size changes
         this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
-            if (result.matches) {
-                this.smallScreen = true;
-                this.setColumns();
-            }
-            else {
-                this.smallScreen = false;
-                this.setColumns();
-            }
+            this.smallScreen = result.matches;
+            this.updateTableConfiguration();
         });
     }
-    ngOnInit() {
-        if (this.config.elevation) {
-            if (this.config.elevation == "none") {
-                this.elevation = "";
-            }
-            else if (this.config.elevation == "low") {
-                this.elevation = "mat-elevation-z1";
-            }
-            else if (this.config.elevation == "medium") {
-                this.elevation = "mat-elevation-z5";
-            }
-            else if (this.config.elevation == "high") {
-                this.elevation = "mat-elevation-z9";
-            }
+    ngOnInit() {
+        this.initializeComponent();
+    }
+    ngOnChanges() {
+        if (!this.config.loadAction) {
+            this.dataSource = this.data;
+            this.tableDataSource = new MatTableDataSource(this.dataSource);
+        }
+        setTimeout(() => { this.tableDataSource.paginator = this.tablePaginator; }, 1000);
+    }
+    initializeComponent() {
+        this.updateTableConfiguration();
+        this.setupDataLoading();
+        this.formDefaults();
+    }
+    updateTableConfiguration() {
+        var _a, _b, _c, _d, _e, _f;
+        this.elevation = this.getElevationClass((_a = this.config) === null || _a === void 0 ? void 0 : _a.elevation);
+        this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
+        this.displayedButtons = this.buttonService.getDisplayedButtons((_b = this.config) === null || _b === void 0 ? void 0 : _b.buttons, this.smallScreen, (_c = this.config) === null || _c === void 0 ? void 0 : _c.minButtons);
+        this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
+        this.createButton = this.buttonService.getCreateButton((_d = this.config) === null || _d === void 0 ? void 0 : _d.buttons);
+        this.showFilterButton = !((_e = this.config) === null || _e === void 0 ? void 0 : _e.searchConfig);
+        if (((_f = this.displayedButtons) === null || _f === void 0 ? void 0 : _f.length) > 0 && !this.displayedColumns.includes('action')) {
+            this.displayedColumns.push('action');
         }
-        this.setColumns();
-        this.createButton = this.getButton('create');
+    }
+    setupDataLoading() {
         if (this.config.loadAction) {
             this.loadData(this.config.loadAction, "");
         }
-        this.formDefaults();
-        if (this.config.searchConfig) {
-            this.showFilterButton = false;
-        }
-        if (this.reload != null) {
+        if (this.reload) {
             this.reload.subscribe(v => {
-                var _a, _b;
-                if (v == true) {
-                    if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loadAction) {
-                        this.loadData((_b = this.config) === null || _b === void 0 ? void 0 : _b.loadAction, "");
-                    }
+                var _a;
+                if (v && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.loadAction)) {
+                    this.loadData(this.config.loadAction, "");
                 }
             });
         }
     }
-    ngOnChanges() {
-        if (!this.config.loadAction) {
-            // console.log("Table data Changed")
-            // this.dataSource = this.data;
-            this.tableDataSource = new MatTableDataSource(this.dataSource);
+    loadData(action, data) {
+        console.log("loading");
+        if (action) {
+            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
+                if (this.config.logResponse) {
+                    console.log(apiResponse);
+                }
+                this.dataSource = apiResponse.data;
+                this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                this.tableDataSource.paginator = this.tablePaginator;
+                if (apiResponse.success) {
+                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                    this.tableDataSource.paginator = this.tablePaginator;
+                    this.dataLoaded(apiResponse.data);
+                }
+                else {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
         }
-        setTimeout(() => { this.tableDataSource.paginator = this.tablePaginator; }, 1000);
     }
     inputChanged(event) {
         this.inputChange.emit({ field: event.field, value: event.value });
-        // console.log("Changed " + JSON.stringify(event))
     }
     formDefaults() {
         if (!this.config.formConfig) {
@@ -4459,47 +4598,11 @@ class TableComponent {
         }
     }
     setColumns() {
-        var _a, _b, _c;
-        //columns
-        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.columns)) {
-            return;
-        }
-        if (this.smallScreen) {
-            let cols = [];
-            if (this.config.minColumns) {
-                cols = this.config.minColumns.filter(col => this.config.columns.some(x => x.name === col));
-            }
-            if (cols.length > 0) {
-                this.displayedColumns = cols;
-            }
-            else {
-                this.displayedColumns = this.config.columns.map(({ name }) => name);
-            }
-        }
-        else {
-            this.displayedColumns = this.config.columns.map(({ name }) => name);
-        }
-        //buttons
-        if (!((_b = this.config) === null || _b === void 0 ? void 0 : _b.buttons)) {
-            return;
-        }
-        let buttonsCount = (_c = this.config.buttons.filter(x => x.name != 'create').length) !== null && _c !== void 0 ? _c : 0;
-        if (buttonsCount > 0) {
-            if (!this.displayedColumns.find(x => x == 'action') && this.config.buttons) {
-                this.displayedColumns.push("action");
-            }
-            if (this.smallScreen) {
-                if (this.config.minButtons) {
-                    this.displayedButtons = this.config.buttons.filter(x => this.config.minButtons.includes(x.name));
-                }
-                else {
-                    this.displayedButtons = this.config.buttons.filter(x => x.name != 'create').slice(0, 1);
-                }
-            }
-            else {
-                this.displayedButtons = this.config.buttons.filter(x => x.name != 'create');
-            }
-            this.actionsWidth = `${this.displayedButtons.length * 40 + 20}px`;
+        this.displayedColumns = this.tableConfigService.setColumns(this.config, this.smallScreen);
+        this.displayedButtons = this.buttonService.getDisplayedButtons(this.config.buttons, this.smallScreen, this.config.minButtons);
+        this.actionsWidth = this.tableConfigService.getActionsWidth(this.displayedButtons);
+        if (this.displayedButtons.length > 0 && !this.displayedColumns.includes('action')) {
+            this.displayedColumns.push('action');
         }
     }
     setButtons() {
@@ -4513,132 +4616,45 @@ class TableComponent {
         }
     }
     getButton(name) {
-        if (!this.config.buttons) {
-            console.log("No buttons found");
-            return null;
-        }
-        return this.config.buttons.find(x => x.name == name);
+        return this.buttonService.getButton(this.config.buttons, name);
     }
     getIcon(buttonName) {
-        let b = this.getButton(buttonName);
-        if (b.icon) {
-            return b.icon.name;
-        }
-        let i = 'open_in_new';
-        switch (buttonName) {
-            case 'view':
-                i = this.config.flatButtons ? 'open_in_new' : 'pageview';
-                break;
-            case 'edit':
-                i = 'edit';
-                break;
-            case 'delete':
-                i = 'delete';
-                break;
-            default:
-                break;
-        }
-        return i;
+        const button = this.getButton(buttonName);
+        return this.buttonService.getIcon(button, this.config);
     }
     getButtonColor(button, row) {
-        if (button.disabled) {
-            if (button.disabled(row)) {
-                return 'lightgray';
-            }
-        }
-        if (button.color) {
-            return button.color;
-        }
-        if (button.name == 'delete') {
-            return '#F44336';
-        }
-        if (button.name == 'create') {
-            return 'green';
-        }
-        return ' #4050B5';
+        return this.buttonService.getButtonColor(button, row);
     }
     getOptions(column) {
         let x = this.config.columns.find(opt => opt.name === column);
         return x;
     }
-    getColor(v, options) {
-        let defaultColor = 'lightgrey';
-        if (!options)
-            return defaultColor;
-        let c = options.find(x => x.value == v);
-        if (c) {
-            return c.color;
-        }
-        else {
-            return defaultColor;
-        }
+    getColor(value, options) {
+        return this.conditionService.getColor(value, options);
     }
-    testIconCondition(value, icon) {
-        if (icon.condition) {
-            return icon.condition(value);
-        }
-        else {
-            return true;
-        }
+    testIconCondition(row, icon) {
+        return this.conditionService.testIconCondition(icon, row);
     }
-    testColorCondition(value, color) {
-        if (!color)
-            return false;
-        if (color.condition) {
-            return color.condition(value);
-        }
-        else {
-            return true;
-        }
+    testColorCondition(row, color) {
+        return this.conditionService.testColorCondition(color, row);
     }
     showBanner(message) {
-        if (!message)
-            return;
-        if (message == '')
-            return;
-        this.messageService.info(message);
+        if (message && message !== '') {
+            this.messageService.info(message);
+        }
     }
     testDisabled(row, buttonName) {
-        let button = this.getButton(buttonName);
-        if (button.disabled) {
-            return button.disabled(row);
-        }
-        return false;
+        const button = this.getButton(buttonName);
+        return this.buttonService.testDisabled(button, row);
     }
     testVisible(row, buttonName) {
-        let button = this.getButton(buttonName);
-        if (button.visible) {
-            return button.visible(row);
-        }
-        return true;
-    }
-    //Actions
-    loadData(action, data) {
-        console.log("loading");
-        if (action) {
-            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
-                if (this.config.logResponse) {
-                    console.log(apiResponse);
-                }
-                this.dataSource = apiResponse.data;
-                this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                this.tableDataSource.paginator = this.tablePaginator;
-                if (apiResponse.success) {
-                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                    this.tableDataSource.paginator = this.tablePaginator;
-                    this.dataLoaded(apiResponse.data);
-                }
-                else {
-                    this.messageService.toast("Error: " + apiResponse.message);
-                }
-            });
-        }
+        const button = this.getButton(buttonName);
+        return this.buttonService.testVisible(button, row);
     }
     //Events
     searchClicked(x) {
         console.log("Search");
         this.searchClick.emit(x);
-        // console.log(x)
         if (this.config.searchConfig.searchAction) {
             this.config.searchConfig.searchAction.method == 'post';
             this.loadData(this.config.searchConfig.searchAction, x);
@@ -4656,73 +4672,37 @@ class TableComponent {
     }
     dataLoaded(x) {
         var _a;
-        this.dataLoad.emit(x);
         console.log("dataloaded");
+        this.dataLoad.emit(x);
         if ((_a = this.config.tileConfig) === null || _a === void 0 ? void 0 : _a.loadAction) {
             this.tileReload.next(true);
         }
     }
     actionClicked(name, row) {
-        if (name == 'view') {
+        if (name === 'view') {
             this.viewModel(row);
         }
-        else if (name == 'edit') {
+        else if (name === 'edit') {
             this.editModel(row);
         }
-        else if (name == 'delete') {
+        else if (name === 'delete') {
             this.deleteModel(row);
         }
         else {
             this.customModel(name, row);
         }
     }
+    //Dialog events
     columnClicked(column, row) {
         if (column.detailsConfig) {
-            let conf = DetailsDialogProcessor.processDetailsConfig(column.detailsConfig, row);
-            const dialogRef = this.dialog.open(DetailsDialog, {
-                width: "900px",
-                data: conf
-            });
-            dialogRef.afterClosed().subscribe((result) => {
-                if (result.message == "success") {
-                    this.actionClickedEmit(column.name, row);
-                    this.refreshClicked();
-                }
-            });
+            this.openDetailsDialog(column.name, row, column);
         }
         else {
             this.actionClickedEmit(column.name, row);
         }
     }
     customModel(name, row) {
-        let button = this.getButton(name);
-        if (button) {
-            if (!button.dialog) {
-                this.doAction(button.name, row);
-                this.actionClickedEmit(name, row);
-            }
-            else {
-                if (button.detailsConfig) {
-                    let conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
-                    const dialogRef = this.dialog.open(DetailsDialog, {
-                        width: "900px",
-                        data: conf
-                    });
-                    dialogRef.afterClosed().subscribe((result) => {
-                        if (result.message == "success") {
-                            this.actionClickedEmit(button.name, row);
-                            this.refreshClicked();
-                        }
-                    });
-                }
-                else {
-                    this.actionClickedEmit(button.name, row);
-                }
-            }
-        }
-        else {
-            this.actionClickedEmit(name, row);
-        }
+        this.openDetailsDialog(name, row);
     }
     actionClickedEmit(name, row) {
         console.log("Action clicked");
@@ -4730,83 +4710,25 @@ class TableComponent {
     }
     viewModel(row) {
         console.log("view Clicked");
-        let button = this.getButton('view');
-        if (!button)
-            return;
-        if (!button.dialog) {
-            this.actionClickedEmit(button.name, row);
-            return;
-        }
-        if (!this.config.formConfig) {
-            this.messageService.toast("Please configure form");
-            return;
-        }
-        let conf = {
-            formConfig: this.config.formConfig,
-            buttons: this.config.buttons,
-            details: row,
-        };
-        if (button.detailsConfig) {
-            conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
-        }
-        conf.formConfig.mode = "view";
-        const dialogRef = this.dialog.open(DetailsDialog, {
-            width: "900px",
-            data: conf
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result.message) {
-                this.refreshClicked();
-            }
-        });
+        this.openDetailsDialog('view', row);
     }
     newModel() {
-        var _a, _b;
-        let button = this.getButton('create');
-        if (!button)
-            return;
-        if (!button.dialog) {
-            this.actionClickedEmit(button.name, null);
-            return;
-        }
-        if (!this.config.formConfig) {
-            this.messageService.toast("Please configure form");
-            return;
-        }
-        this.config.formConfig.mode = "create";
-        let conf = {
-            formConfig: this.config.formConfig,
-            buttons: this.config.buttons,
-        };
-        if (button.detailsConfig) {
-            conf = button.detailsConfig;
-        }
-        conf.formConfig.mode = "create";
-        conf.heroField = (_a = this.config) === null || _a === void 0 ? void 0 : _a.heroField;
-        conf.heroValue = (_b = this.config) === null || _b === void 0 ? void 0 : _b.heroValue;
-        const dialogRef = this.dialog.open(DetailsDialog, {
-            width: "900px",
-            data: conf,
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result.message == "success") {
-                this.actionClickedEmit('create', result.data);
-                this.refreshClicked();
-            }
-            else if (result.message == "emit") {
-                this.actionClickedEmit('create', result.data);
-            }
-        });
+        this.openDetailsDialog('create', null);
     }
     editModel(row) {
-        let button = this.getButton('edit');
+        this.openDetailsDialog('edit', row);
+    }
+    openDetailsDialog(buttonName, row, column) {
+        var _a, _b;
+        const button = column ? { name: column.name, dialog: true, detailsConfig: column.detailsConfig } : this.getButton(buttonName);
         if (!button)
             return;
         if (!button.dialog) {
+            this.doAction(button.name, row);
             this.actionClickedEmit(button.name, row);
             return;
         }
-        if (!this.config.formConfig) {
+        if (!this.config.formConfig && !button.detailsConfig) {
             this.messageService.toast("Please configure form");
             return;
         }
@@ -4816,24 +4738,28 @@ class TableComponent {
             details: row,
         };
         if (button.detailsConfig) {
-            conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
+            conf = buttonName === 'create'
+                ? button.detailsConfig
+                : DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
+        }
+        conf.formConfig.mode = buttonName === 'create' ? 'create' : (buttonName === 'edit' ? 'edit' : 'view');
+        if (buttonName === 'create') {
+            conf.heroField = (_a = this.config) === null || _a === void 0 ? void 0 : _a.heroField;
+            conf.heroValue = (_b = this.config) === null || _b === void 0 ? void 0 : _b.heroValue;
+        }
+        const dialogResult = this.dialogService.openDetailsDialog(conf, DetailsDialog);
+        if (buttonName === 'edit') {
+            dialogResult.inputChange.subscribe((x) => {
+                this.inputChanged(x);
+            });
         }
-        conf.formConfig.mode = "edit";
-        const dialogRef = this.dialog.open(DetailsDialog, {
-            width: "900px",
-            data: conf
-        });
-        dialogRef.componentInstance.inputChange.subscribe((x) => {
-            this.inputChanged(x);
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            console.log(result);
-            if (result.message == "success") {
-                this.actionClickedEmit('edit', result.data);
+        dialogResult.afterClosed.subscribe((result) => {
+            if (result.message === 'success') {
+                this.actionClickedEmit(button.name, result.data);
                 this.refreshClicked();
             }
-            else if (result.message == "emit") {
-                this.actionClickedEmit('edit', result.data);
+            else if (result.message === 'emit') {
+                this.actionClickedEmit(button.name, result.data);
             }
         });
     }
@@ -4848,6 +4774,7 @@ class TableComponent {
             }
         });
     }
+    //Actions
     doAction(buttonName, row) {
         let b = this.getButton(buttonName);
         if (!b)
@@ -4883,13 +4810,32 @@ class TableComponent {
             this.messageService.toast("Error: " + error);
         });
     }
+    //Misc
+    getElevationClass(elevation) {
+        console.log(elevation);
+        if (elevation == "none") {
+            return "";
+        }
+        else if (elevation == "low") {
+            return "mat-elevation-z1";
+        }
+        else if (elevation == "medium") {
+            return "mat-elevation-z5";
+        }
+        else if (elevation == "high") {
+            return "mat-elevation-z9";
+        }
+        else {
+            return "mat-elevation-z5";
+        }
+    }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton && !config.flatButtons\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <button *ngIf=\"createButton && config.flatButtons\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}</button>\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles  [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'button'\">\n\n              <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n          <div class=\"action-buttons-container\">\n\n            <ng-container *ngFor=\"let button of displayedButtons\">\n\n              <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n                <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                  [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n                  [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n                  <mat-icon>{{getIcon(button.name)}}</mat-icon>\n                </button>\n\n                <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                  [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n                  <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n                </button>\n\n              </ng-container>\n\n              <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name) && !config.collapseButtons\">\n                <label style=\"margin-right: 35px;\"></label>\n              </ng-container>\n\n            </ng-container>\n          </div>\n\n\n\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<div class=\"tin-center\">\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n</div>\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search\r\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n  [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [createButton]=\"createButton\" [tileConfig]=\"config.tileConfig\" [smallScreen]=\"smallScreen\"\r\n  [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (refreshClick)=\"refreshClicked()\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action\r\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["config", "hideTitle", "tableDataSource", "createButton", "tileConfig", "smallScreen", "tileReload", "showFilterButton"], outputs: ["createClick", "refreshClick", "tileClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton && !config.flatButtons\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <button *ngIf=\"createButton && config.flatButtons\" id=\"btnNew\" mat-stroked-button style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}</button>\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles  [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"columnClicked(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'button'\">\n\n              <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"actionClicked(column.name, row)\">{{row[column.name]}}</button>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n          <div class=\"action-buttons-container\">\n\n            <ng-container *ngFor=\"let button of displayedButtons\">\n\n              <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n                <button *ngIf=\"!config.flatButtons\" mat-mini-fab [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                  [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n                  [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n                  <mat-icon>{{getIcon(button.name)}}</mat-icon>\n                </button>\n\n                <button *ngIf=\"config.flatButtons\" mat-icon-button [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n                  [disabled]=\"testDisabled(row,button.name)\" (click)=\"actionClicked(button.name, row)\">\n                  <mat-icon [ngStyle]=\"{'color':getButtonColor(button, row)}\">{{getIcon(button.name)}}</mat-icon>\n                </button>\n\n              </ng-container>\n\n              <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name) && !config.collapseButtons\">\n                <label style=\"margin-right: 35px;\"></label>\n              </ng-container>\n\n            </ng-container>\n          </div>\n\n\n\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<div class=\"tin-center\">\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n</div>\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$3.BreakpointObserver }, { type: i4.MatDialog }]; }, propDecorators: { tablePaginator: [{
+            args: [{ selector: 'spa-table', template: "\r\n<!-- Search -->\r\n<spa-search\r\n  *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n</spa-search>\r\n\r\n<!-- Header -->\r\n<app-table-header\r\n  [config]=\"config\" [hideTitle]=\"false\" [tableDataSource]=\"tableDataSource\" [createButton]=\"createButton\" [tileConfig]=\"config.tileConfig\" [smallScreen]=\"smallScreen\"\r\n  [tileReload]=\"tileReload\" [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (refreshClick)=\"refreshClicked()\">\r\n</app-table-header>\r\n\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\"\r\n            (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action\r\n              [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
             }], hideTitle: [{
@@ -5536,7 +5482,7 @@ class InventoryComponent {
     }
 }
 InventoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InventoryComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-InventoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InventoryComponent, selector: "spa-inventory", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Inventory</label>\n\n  <div >\n    <button mat-mini-fab color=\"primary\"  style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+InventoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InventoryComponent, selector: "spa-inventory", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Inventory</label>\n\n  <div >\n    <button mat-mini-fab color=\"primary\"  style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InventoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-inventory', template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Inventory</label>\n\n  <div >\n    <button mat-mini-fab color=\"primary\"  style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon >category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" (actionClick)=\"clicked($event)\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -5639,7 +5585,7 @@ class AccountsComponent {
     }
 }
 AccountsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, deps: [{ token: i1$3.Router }, { token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n    <div class=\"tin-row d-flex justify-content-between\">\r\n      <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n    <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n    <div *ngIf=\"account\" class=\"tin-row\">\r\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n    </div>\r\n\r\n    <mat-card-actions class=\"d-flex justify-content-between\" >\r\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n    </mat-card-actions>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+AccountsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccountsComponent, selector: "spa-accounts", ngImport: i0, template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n    <div class=\"tin-row d-flex justify-content-between\">\r\n      <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n    <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n    <div *ngIf=\"account\" class=\"tin-row\">\r\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n    </div>\r\n\r\n    <mat-card-actions class=\"d-flex justify-content-between\" >\r\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n    </mat-card-actions>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccountsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-accounts', template: "<h4>Accounts</h4>\r\n<hr>\r\n\r\n<div class=\"tin-row d-flex justify-content-between\" style=\"font-size: 14px;margin-left: 5px;\">\r\n  <button mat-raised-button color=\"primary\" (click)=\"open(null)\">Create</button>\r\n  <spa-filter [showText]=\"false\" (refreshClick)=\"loadData()\"></spa-filter>\r\n</div>\r\n\r\n<div class=\"row \" style=\"margin-left: 0px;\">\r\n\r\n  <mat-card class=\"mat-elevation-z8\" *ngFor=\"let account of accounts\" style=\"max-width: 350px;margin: 5px;\">\r\n\r\n    <div class=\"tin-row d-flex justify-content-between\">\r\n      <label style=\"font-size: 24px; font-weight: 300;\">{{account.name}}</label>\r\n      <button mat-mini-fab color=\"primary\" (click)=\"open(account)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <hr style=\"margin-top: 5px;margin-bottom: 10px;\"/>\r\n\r\n    <label *ngIf=\"account.description != ''\" style=\"font-size: small;margin-bottom: 5px;\">{{account.description}}</label>\r\n\r\n    <div *ngIf=\"account\" class=\"tin-row\">\r\n      <label style=\"margin-right: 5px;font-size: 14px;\">{{account?.currency}}</label>\r\n      <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\r\n    </div>\r\n\r\n    <mat-card-actions class=\"d-flex justify-content-between\" >\r\n      <button mat-stroked-button color=\"primary\" style=\"margin-right:10px;\" (click)=\"view(account)\">View</button>\r\n      <button mat-mini-fab *ngIf=\"account.count == 0\" color=\"warn\" style=\"margin-right:10px\" (click)=\"delete(account)\"><mat-icon>delete</mat-icon></button>\r\n    </mat-card-actions>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -5836,12 +5782,12 @@ class TransactionsComponent {
     transfer() {
     }
 }
-TransactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$3.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+TransactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TransactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TransactionsComponent, selector: "spa-transactions", ngImport: i0, template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TransactionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-transactions', template: "<!-- <h4>Transactions ({{account?.name}})</h4>\n<hr> -->\n\n<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Transactions ({{account?.name}})</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;padding-left: 0;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$3.BreakpointObserver }, { type: i4.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }]; } });
 
 class TasksComponent {
     constructor(dataService, messageService, authService, dialog) {
@@ -5911,7 +5857,7 @@ class TasksComponent {
     }
 }
 TasksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tasks', template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -5922,108 +5868,50 @@ class DepartmentsComponent {
         this.dataService = dataService;
         this.messageService = messageService;
         this.authService = authService;
-        this.formConfig = {
-            fields: [
-                { name: 'name', type: 'text' },
-            ],
-            reset: true,
-        };
-        this.config = {
-            showFilter: true,
-            minColumns: ['name'],
-            flatButtons: true,
-            columns: [
-                { name: 'name', type: 'text' },
-            ],
-            buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'general/departments?action=create', method: 'post' } },
-                { name: 'view', dialog: true },
-                { name: 'edit', dialog: true, action: { url: 'general/departments?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'general/departments?action=delete', method: 'post' } },
-            ],
-            loadAction: { url: 'general/departments/x' },
-            formConfig: this.formConfig
-        };
     }
     ngOnInit() {
+        this.dataService.loadPositionMeta();
+        this.dataService.loadEmployeesMeta();
     }
 }
 DepartmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DepartmentsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-DepartmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DepartmentsComponent, selector: "spa-departments", ngImport: i0, template: "<h4>Departments</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+DepartmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DepartmentsComponent, selector: "spa-departments", ngImport: i0, template: "<h4>Departments</h4>\r\n<hr>\r\n\r\n<div class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table [config]=\"dataService.departmentTableConfig\"></spa-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DepartmentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-departments', template: "<h4>Departments</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
+            args: [{ selector: 'spa-departments', template: "<h4>Departments</h4>\r\n<hr>\r\n\r\n<div class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table [config]=\"dataService.departmentTableConfig\"></spa-table>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }]; } });
 
 class EmployeesComponent {
-    constructor(dataService, messageService, authService) {
+    constructor(dataService, authService) {
         this.dataService = dataService;
-        this.messageService = messageService;
         this.authService = authService;
-        this.genders = [
-            { name: 'Male', value: 1 },
-            { name: 'Female', value: 2 }
-        ];
-        this.departments = [];
-        this.formConfig = {
-            fields: [
-                { name: 'nationalID', type: 'text', required: true },
-                { name: 'gender', alias: 'Gender', type: 'select', options: this.genders, required: true },
-                { name: 'firstName', type: 'text', required: true },
-                { name: 'lastName', type: 'text', required: true },
-                { name: 'departmentID', alias: 'Department', type: 'select', options: this.departments, optionDisplay: 'name', optionValue: 'departmentID' },
-                { name: 'address', type: 'text', rows: 2, span: true },
-                { name: 'note', type: 'text', rows: 2, span: true },
-            ],
-            reset: true,
-        };
-        this.config = {
-            showFilter: true,
-            minColumns: ['name'],
-            flatButtons: true,
-            columns: [
-                { name: 'name', type: 'text' },
-                { name: 'nationalID', type: 'text' },
-                { name: 'genderName', type: 'text' },
-                { name: 'departmentName', type: 'text' },
-            ],
-            buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'general/employees?action=create', method: 'post' } },
-                { name: 'view', dialog: true },
-                { name: 'edit', dialog: true, action: { url: 'general/employees?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'general/employees?action=delete', method: 'post' } },
-            ],
-            loadAction: { url: 'general/employees/x' },
-            formConfig: this.formConfig
-        };
     }
     ngOnInit() {
-        this.loadMeta();
-    }
-    loadMeta() {
-        this.dataService.CallApi({ url: 'general/departments/x' }, "").subscribe((apiResponse) => {
-            this.formConfig.fields.find(x => x.name == 'departmentID').options = apiResponse.data;
-        });
+        this.dataService.loadEmployeesMeta();
     }
 }
-EmployeesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmployeesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-EmployeesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EmployeesComponent, selector: "spa-employees", ngImport: i0, template: "<h4>Employees</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+EmployeesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmployeesComponent, deps: [{ token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+EmployeesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EmployeesComponent, selector: "spa-employees", ngImport: i0, template: "<h4>Employees</h4>\r\n<hr>\r\n\r\n<div class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table [config]=\"dataService.employeeTableConfig\"></spa-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EmployeesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-employees', template: "<h4>Employees</h4>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }]; } });
+            args: [{ selector: 'spa-employees', template: "<h4>Employees</h4>\r\n<hr>\r\n\r\n<div class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table [config]=\"dataService.employeeTableConfig\"></spa-table>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: AuthService }]; } });
 
 class PositionsComponent {
-    constructor() { }
+    constructor(dataService, authService) {
+        this.dataService = dataService;
+        this.authService = authService;
+    }
     ngOnInit() {
+        this.dataService.loadPositionMeta();
     }
 }
-PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PositionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PositionsComponent, selector: "spa-positions", ngImport: i0, template: "<h4>Positions</h4>\n<hr>\n", styles: [""] });
+PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PositionsComponent, deps: [{ token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PositionsComponent, selector: "spa-positions", ngImport: i0, template: "<h4>Positions</h4>\r\n<hr>\r\n\r\n<div class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table [config]=\"dataService.positionTableConfig\"></spa-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PositionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-positions', template: "<h4>Positions</h4>\n<hr>\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'spa-positions', template: "<h4>Positions</h4>\r\n<hr>\r\n\r\n<div class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table [config]=\"dataService.positionTableConfig\"></spa-table>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: AuthService }]; } });
 
 class GradesComponent {
     constructor() { }
@@ -6107,7 +5995,7 @@ class WelcomeComponent {
     }
 }
 WelcomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WelcomeComponent, deps: [{ token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-WelcomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WelcomeComponent, selector: "spa-welcome", ngImport: i0, template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
+WelcomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WelcomeComponent, selector: "spa-welcome", ngImport: i0, template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WelcomeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-welcome', template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"] }]
@@ -6146,7 +6034,7 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         TenantSettingsComponent, inviteDialog, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
         SuppliersComponent,
         TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
-        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent], imports: [SpaMatModule,
+        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent, TableHeaderComponent, TableRowComponent, TableActionComponent], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule,
         NgxDocViewerModule], exports: [TinSpaComponent,
@@ -6201,7 +6089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TenantSettingsComponent, inviteDialog, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
                         SuppliersComponent,
                         TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
-                        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent,
+                        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent, TableHeaderComponent, TableRowComponent, TableActionComponent,
                     ],
                     imports: [
                         SpaMatModule,
@@ -6355,7 +6243,7 @@ class LoginComponent {
     }
 }
 LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoginComponent, deps: [{ token: HttpService }, { token: StorageService }, { token: i1$3.Router }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: LogService }, { token: i1$3.ActivatedRoute }, { token: i8.SocialAuthService }], target: i0.ɵɵFactoryTarget.Component });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoginComponent, selector: "spa-login", ngImport: i0, template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title style=\"font-size: 40px;margin-bottom: 10px; margin-top: 20px; font-weight: 300\">{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions style=\"margin-bottom: 10px;\">\r\n\r\n          <div class=\"button mt-0\" *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n            <button id=\"btnLogin\" mat-flat-button [disabled]=\"isProcessing\" style=\"width: 350px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"(appConfig.localAuth || appConfig.ADAuth) && appConfig.selfService\" >\r\n            <button  id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 350px;\" (click)=\"signup()\">Sign up with Email</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"appConfig.googleAuth\">\r\n            <asl-google-signin-button type='standard' width=\"350px\" size='medium' logo_alignment=\"center\" style=\"text-align: center;\"></asl-google-signin-button>\r\n          </div>\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}.button{display:flex;flex-direction:row;justify-content:center;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i15.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i15.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i15.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "directive", type: i8.GoogleSigninButtonDirective, selector: "asl-google-signin-button", inputs: ["type", "size", "text", "shape", "theme", "logo_alignment", "width", "locale"] }] });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoginComponent, selector: "spa-login", ngImport: i0, template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title style=\"font-size: 40px;margin-bottom: 10px; margin-top: 20px; font-weight: 300\">{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions style=\"margin-bottom: 10px;\">\r\n\r\n          <div class=\"button mt-0\" *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n            <button id=\"btnLogin\" mat-flat-button [disabled]=\"isProcessing\" style=\"width: 350px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"(appConfig.localAuth || appConfig.ADAuth) && appConfig.selfService\" >\r\n            <button  id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 350px;\" (click)=\"signup()\">Sign up with Email</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"appConfig.googleAuth\">\r\n            <asl-google-signin-button type='standard' width=\"350px\" size='medium' logo_alignment=\"center\" style=\"text-align: center;\"></asl-google-signin-button>\r\n          </div>\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}.button{display:flex;flex-direction:row;justify-content:center;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i15.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i15.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i15.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "directive", type: i8.GoogleSigninButtonDirective, selector: "asl-google-signin-button", inputs: ["type", "size", "text", "shape", "theme", "logo_alignment", "width", "locale"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-login", template: "\r\n  <div *ngIf=\"style=='old'\" class=\"tin-bg-login login-page\">\r\n\r\n    <div *ngIf=\"appConfig.logo!=''\" class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;margin-bottom:1em\">\r\n\r\n      <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px;margin-right:3em;margin-left:3em\" />\r\n      <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px; margin-right:3em;margin-left:3em\" />\r\n\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"appConfig.logo ==''\" style=\"margin-top:2em\">\r\n        <!-- Add margin top when there is no logo -->\r\n    </div>\r\n\r\n\r\n    <div class=\"d-flex justify-content-center row align-items-center\" style=\"margin-top:3em;\">\r\n\r\n      <div class=\"d-none d-sm-block\">\r\n      </div>\r\n\r\n      <div style=\"margin-left:1em\">\r\n\r\n        <mat-card class=\"mat-elevation-z3 login-card\" style=\"width:400px; \">\r\n\r\n          <mat-card-header>\r\n            <mat-card-title>{{appConfig.appName}}</mat-card-title>\r\n          </mat-card-header>\r\n\r\n          <mat-card-content>\r\n\r\n            <div class=\"tin-input mt-2\">\r\n\r\n              <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\" ></spa-text>\r\n\r\n              <mat-form-field >\r\n                <mat-label>Password</mat-label>\r\n                <input id=\"txtPassword\" matInput [type]=\"hide ? 'password' : 'text'\"  (keyup.enter)=\"login()\" [(ngModel)]=\"user.password\" autocomplete=\"off\" >\r\n                <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n                  <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                </button>\r\n              </mat-form-field>\r\n\r\n            </div>\r\n\r\n          </mat-card-content>\r\n\r\n\r\n          <mat-card-actions>\r\n\r\n            <div class=\"row \">\r\n\r\n              <div class=\"col d-flex justify-content-center\">\r\n                <button id=\"btnLogin\"  mat-raised-button [disabled]=\"isProcessing\" style=\"width: 100px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n              </div>\r\n\r\n              <div class=\"col d-flex justify-content-center\" *ngIf=\"appConfig.selfService\">\r\n                <button id=\"btnSignup\" mat-stroked-button  color=\"primary\" style=\"width: 100px;\" (click)=\"signup()\">Signup</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n          </mat-card-actions>\r\n\r\n        </mat-card>\r\n\r\n        <div *ngIf=\"appConfig.selfService\">\r\n          <br />\r\n          <a mat-button id=\"lnkRecover\"  style=\"margin-left: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='default'\" class=\"login-page background tin-bg-login\">\r\n\r\n    <div class=\"container\" >\r\n\r\n      <div class=\"logo\">\r\n        <img *ngIf=\"appConfig.logoSize=='normal'\"  [src]=\"appConfig.logo\" style=\"width: 100px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='medium'\"  [src]=\"appConfig.logo\" style=\"width: 150px\" />\r\n        <img *ngIf=\"appConfig.logoSize=='large'\"  [src]=\"appConfig.logo\" style=\"width: 250px\" />\r\n      </div>\r\n\r\n      <mat-card class=\"mat-elevation-z3 \" style=\"width:400px; \">\r\n\r\n        <mat-card-header>\r\n          <mat-card-title style=\"font-size: 40px;margin-bottom: 10px; margin-top: 20px; font-weight: 300\">{{appConfig.appName}}</mat-card-title>\r\n        </mat-card-header>\r\n\r\n        <mat-card-content *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n\r\n          <div class=\"tin-input mt-2\">\r\n\r\n            <spa-text id=\"txtuserName\" display=\"Username\" [(value)]=\"user.userName\"></spa-text>\r\n\r\n            <spa-text id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"user.password\" (enterPress)=\"login()\"></spa-text>\r\n\r\n          </div>\r\n\r\n        </mat-card-content>\r\n\r\n\r\n        <mat-card-actions style=\"margin-bottom: 10px;\">\r\n\r\n          <div class=\"button mt-0\" *ngIf=\"appConfig.localAuth || appConfig.ADAuth\">\r\n            <button id=\"btnLogin\" mat-flat-button [disabled]=\"isProcessing\" style=\"width: 350px;\" (click)=\"login()\" color=\"primary\">Login</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"(appConfig.localAuth || appConfig.ADAuth) && appConfig.selfService\" >\r\n            <button  id=\"btnSignup\" mat-stroked-button color=\"primary\" style=\"width: 350px;\" (click)=\"signup()\">Sign up with Email</button>\r\n          </div>\r\n\r\n          <div class=\"button\" *ngIf=\"appConfig.googleAuth\">\r\n            <asl-google-signin-button type='standard' width=\"350px\" size='medium' logo_alignment=\"center\" style=\"text-align: center;\"></asl-google-signin-button>\r\n          </div>\r\n\r\n        </mat-card-actions>\r\n\r\n      </mat-card>\r\n\r\n      <a *ngIf=\"appConfig.selfService\" mat-button id=\"lnkRecover\" style=\"margin-top: 1em\" (click)=\"recoverAccount()\">Forgot your password ?</a>\r\n\r\n\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"style=='bs'\">\r\n\r\n    <div class=\"container\">\r\n\r\n      <div class=\"image\">\r\n        <img class=\"mb-4\" src=\"c:\\Tinashe\\Code\\Angular\\Junk\\bs-examples\\assets\\brand\\bootstrap-logo.svg\" alt=\"\" width=\"72\" height=\"57\">\r\n      </div>\r\n\r\n      <div class=\"details\">\r\n        <h1 class=\"h3 mb-3 fw-normal\" >Please sign in</h1>\r\n\r\n        <div class=\"form-floating\">\r\n          <input  class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\" [(ngModel)]=\"user.userName\">\r\n          <label for=\"floatingInput\">Username</label>\r\n        </div>\r\n\r\n        <div class=\"form-floating\">\r\n          <input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\" [(ngModel)]=\"user.password\">\r\n          <label for=\"floatingPassword\">Password</label>\r\n        </div>\r\n\r\n        <div class=\"form-check text-start my-3\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"remember-me\" id=\"flexCheckDefault\" >\r\n          <label class=\"form-check-label\" for=\"flexCheckDefault\">\r\n            Remember me\r\n          </label>\r\n        </div>\r\n\r\n        <button class=\"btn btn-primary w-100 py-2\"  (click)=\"login()\">Sign in</button>\r\n\r\n      </div>\r\n\r\n      <p class=\"mt-5 mb-3 text-body-secondary\">&copy; 2017\u20132023</p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n", styles: [".login-page{position:absolute;inset:0;overflow:auto}.background{min-height:100%}.container{display:flex;flex-direction:column;align-items:center;height:100vh}.logo{margin-top:3em;margin-bottom:1em}.buttons{display:flex;flex-direction:row;justify-content:space-evenly}.button{display:flex;flex-direction:row;justify-content:center;margin-top:10px}\n"] }]
@@ -6731,7 +6619,7 @@ class SettingsComponent {
     }
 }
 SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SettingsComponent, selector: "spa-settings", ngImport: i0, template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-row align-items-center mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:10px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SettingsComponent, selector: "spa-settings", ngImport: i0, template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-row align-items-center mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:10px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-settings', template: "<h4>Settings</h4>\r\n<hr>\r\n\r\n<div class=\"container\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n\r\n    <div class=\"col-2\">\r\n      <!-- <button mat-raised-button (click)=\"addSetting()\">New Setting</button> -->\r\n    </div>\r\n    <div class=\"col-2\">\r\n      <button mat-raised-button (click)=\"loadSettings()\">Refresh</button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-row align-items-center mt-1 mb-1\" style=\"margin-left:10px\" *ngFor=\"let setting of settings\">\r\n\r\n    <mat-form-field style=\"width: 500px; font-size: 14px;\">\r\n      <mat-label>{{setting.sName}}</mat-label>\r\n      <input matInput autocomplete=\"off\" [(ngModel)]=\"setting.sValue\" >\r\n    </mat-form-field>\r\n\r\n    <button mat-mini-fab color=\"primary\" (click)=\"updateSetting(setting)\" style=\"margin-right:10px;\"><mat-icon>done_all</mat-icon></button>\r\n\r\n    <mat-label style=\"font-size: small;\">Last Updated by {{setting.updatedBy}} on {{setting.updatedDate | date: 'dd MMM yy HH:mm'}}</mat-label>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -6756,7 +6644,7 @@ class LogsComponent {
     }
 }
 LogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, deps: [{ token: AuthService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", viewQueries: [{ propertyName: "logsPaginator", first: true, predicate: ["logsPaginator"], descendants: true }], ngImport: i0, template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-logs', template: "<h4>Logs</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n\r\n    <div class=\"col-2\">\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"logs\" (refreshClick)=\"loadLogs()\"></spa-filter>\r\n   </div>\r\n  </div>\r\n\r\n\r\n\r\n  <p *ngIf=\"!logs\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"logs\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"logs\">\r\n\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> User </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.userName}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"dateLogged\">\r\n        <th mat-header-cell *matHeaderCellDef class=\"datetime\"> Date Logged </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.dateLogged | date: 'dd MMM yy HH:mm:ss'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef> Source </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.source}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef> Details </th>\r\n        <td mat-cell *matCellDef=\"let log\"> {{log.details}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let log\">{{log.user.firstName}} {{log.user.lastName}}</td>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #logsPaginator [pageSizeOptions]=\"[50, 100, 200]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -6859,7 +6747,7 @@ class UsersComponent {
     }
 }
 UsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\" style=\"font-size: 14px;\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create User</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> UserName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+UsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UsersComponent, selector: "spa-users", viewQueries: [{ propertyName: "usersPaginator", first: true, predicate: ["usersPaginator"], descendants: true }], ngImport: i0, template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\" style=\"font-size: 14px;\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create User</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> UserName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UsersComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-users", template: "\r\n<h4>Users</h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid\" style=\"font-size: 14px;\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px\">\r\n    <div class=\"col-2\">\r\n      <button id=\"btnCreateAccount\" mat-raised-button color=\"primary\" (click)=\"createAccount()\">Create User</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <spa-filter [data]=\"users\" (refreshClick)=\"UpdateData()\"></spa-filter>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <p *ngIf=\"!users\"><em>Loading...</em></p>\r\n\r\n\r\n  <div class=\"mat-elevation-z8\" *ngIf=\"users\">\r\n\r\n    <table id=\"tblTable\" mat-table [dataSource]=\"users\">\r\n\r\n      <ng-container matColumnDef=\"userName\">\r\n        <th mat-header-cell *matHeaderCellDef> UserName </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.userName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"locked\">\r\n        <th mat-header-cell *matHeaderCellDef> Locked </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.locked}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"fullName\">\r\n        <th mat-header-cell *matHeaderCellDef> Name </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.firstName}} {{user.lastName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"roleName\">\r\n        <th mat-header-cell *matHeaderCellDef> Role </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.role.roleName}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"disabled\">\r\n        <th mat-header-cell *matHeaderCellDef> Disabled </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.disabled}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateCreated\">\r\n        <th mat-header-cell *matHeaderCellDef> Created </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.createdDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"dateUpdated\">\r\n        <th mat-header-cell *matHeaderCellDef> Updated </th>\r\n        <td mat-cell *matCellDef=\"let user\"> {{user.updatedDate | date: 'dd/MM/yyyy'}} </td>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"Action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let user\" style=\"width: 250px;\">\r\n\r\n          <button mat-mini-fab color=\"primary\" (click)=\"viewProfile(user)\" style=\"margin-right:30px\" matTooltip=\"View Profile\" matTooltipPosition=\"above\"> <mat-icon>account_circle</mat-icon></button>\r\n\r\n          <button *ngIf=\"user.locked=='0'\" mat-mini-fab color=\"warn\" (click)=\"lock(user)\" style=\"margin-right:10px\" matTooltip=\"Lock\" matTooltipPosition=\"above\"> <mat-icon>lock</mat-icon></button>\r\n          <button *ngIf=\"user.locked=='1'\" mat-mini-fab  (click)=\"unlock(user)\" style=\"margin-right:10px; background-color: green;\" matTooltip=\"Unlock\" matTooltipPosition=\"above\"> <mat-icon >lock_open</mat-icon></button>\r\n\r\n          <!-- <button *ngIf=\"user.disabled=='0'\" mat-mini-fab color=\"warn\" (click)=\"disable(user)\" style=\"margin-right:10px\" matTooltip=\"Disable\" matTooltipPosition=\"above\"> <mat-icon>block</mat-icon></button>\r\n          <button *ngIf=\"user.disabled=='1'\" mat-mini-fab (click)=\"enable(user)\" style=\"margin-right:10px; background-color: green\" matTooltip=\"Enable\" matTooltipPosition=\"above\"> <mat-icon>done</mat-icon></button> -->\r\n\r\n          <button mat-mini-fab color=\"warn\" (click)=\"deleteUser(user)\" style=\"margin-right:10px\" matTooltip=\"Delete\" matTooltipPosition=\"above\"> <mat-icon>delete</mat-icon></button>\r\n          <!-- <button mat-mini-fab color=\"primary\" (click)=\"recover(user)\" style=\"margin-right:10px\" matTooltip=\"Reset Password\" matTooltipPosition=\"above\"> <mat-icon>vpn_key</mat-icon></button> -->\r\n\r\n\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': row.disabled =='1'}\"></tr>\r\n\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator #usersPaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n</div>\r\n\r\n<!-- ------------------ -->\r\n\r\n<!-- <div class=\"container mt-5\" style=\" font-size: 14px;\">\r\n<spa-table  [data]=\"usersRaw\" [config]=\"config\" (refreshClick)=\"UpdateData()\" (viewClick)=\"viewProfile($event)\" (createClick)=\"createAccount()\" (deleteClick)=\"deleteUser($event)\"></spa-table>\r\n</div> -->\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.make-gray{background-color:#d3d3d3}\n"] }]
@@ -6903,7 +6791,7 @@ class addRoleDialog {
     ;
 }
 addRoleDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-addRole', template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n    <!-- <div class=\"  col-4\">\r\n\r\n      <div class=\"row\">\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:14px\" [(ngModel)]=\"role.cap1\">Admin</mat-checkbox>\r\n      </div>\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row\" style=\"margin-left: 2em;margin-right: 2em;\">\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\" *ngFor=\"let capItem of capItems\">\r\n\r\n        <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n        <div *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"margin-right:20px; font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -6983,7 +6871,7 @@ class RolesComponent {
     }
 }
 RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i15.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-roles", template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -7290,5 +7178,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Account, AccountsComponent, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, PositionsComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, loginConfig, messageDialog, viewerDialog };
+export { Account, AccountsComponent, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, PositionsComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map