tin-spa 2.6.2 → 2.6.3

package/fesm2020/tin-spa.mjs

@@ -23,8 +23,9 @@ import { HttpHeaders, HttpResponse, HttpClientModule, HTTP_INTERCEPTORS } from '
 import * as i3$1 from '@angular/cdk/layout';
 import * as i8$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i10$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i15 from '@angular/material/card';
+import * as i16 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -36,9 +37,9 @@ import * as i8$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i11$2 from '@angular/material/list';
+import * as i13$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i8$3 from '@angular/material/menu';
+import * as i9 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i11 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -60,16 +61,16 @@ import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i14 from '@angular/material/sidenav';
+import * as i16$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i15$1 from '@angular/material/toolbar';
+import * as i17 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i16 from '@angular/material/expansion';
+import * as i18 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import * as i6$2 from 'ngx-doc-viewer';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
-import * as i12 from '@angular/material/divider';
+import * as i14 from '@angular/material/divider';
 
 class TinSpaService {
     constructor() { }
@@ -3307,6 +3308,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class MultiTextComponent {
+    constructor(messageService) {
+        this.messageService = messageService;
+        this.display = "";
+        this.value = "";
+        this.valueChange = new EventEmitter();
+        this.readonly = false;
+        this.required = true;
+        this.hint = "";
+        this.strict = false;
+        this.copyContent = false;
+        this.clearContent = false;
+        this.options = [];
+        this.optionDisplay = "name"; // Default to name if not provided
+        this.optionValue = "value"; // Default to value if not provided
+        this.values = [];
+        this.control = new FormControl('');
+        this.errorState = false;
+        this.selectedFromAutocomplete = false;
+    }
+    ngOnInit() {
+        this.values = this.value ? this.value.split(';').filter(val => val.trim() !== '') : [];
+        this.setupAutoComplete();
+    }
+    ngOnChanges() {
+        if (this.options) {
+            this.setupAutoComplete();
+        }
+    }
+    setupAutoComplete() {
+        this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map(value => this.filterOptions(value)));
+    }
+    filterOptions(value) {
+        if (!value || !this.options)
+            return this.options || [];
+        const searchValue = value.toString().toLowerCase();
+        return this.options.filter(option => {
+            const displayValue = option[this.optionDisplay]?.toString().toLowerCase();
+            return displayValue?.includes(searchValue);
+        });
+    }
+    add(event) {
+        // Skip validation if option was selected from autocomplete
+        if (this.selectedFromAutocomplete) {
+            this.selectedFromAutocomplete = false;
+            return;
+        }
+        const input = (event.value || '').trim();
+        if (!input)
+            return;
+        if (this.strict) {
+            const found = this.options.find(opt => {
+                const optionDisplayValue = opt[this.optionDisplay]?.toString().toLowerCase();
+                const optionValue = opt[this.optionValue]?.toString().toLowerCase();
+                const inputLower = input.toLowerCase();
+                return optionDisplayValue === inputLower || optionValue === inputLower;
+            });
+            // if (!found) {
+            //   this.errorState = true;
+            //   this.hint = 'Value must be selected from the list';
+            //   return;
+            // }
+            this.addValue(found[this.optionValue]?.toString());
+        }
+        else {
+            this.addValue(input);
+        }
+        this.resetInput();
+    }
+    addValue(value) {
+        if (!this.values.includes(value)) {
+            this.values.push(value);
+            this.errorState = false;
+            this.updateValue();
+        }
+    }
+    remove(value) {
+        const index = this.values.indexOf(value);
+        if (index >= 0) {
+            this.values.splice(index, 1);
+            this.updateValue();
+        }
+    }
+    optionSelected(event) {
+        const selectedOption = event.option.value;
+        if (selectedOption) {
+            this.selectedFromAutocomplete = true;
+            this.addValue(selectedOption[this.optionValue]?.toString());
+            this.resetInput();
+        }
+    }
+    resetInput() {
+        // Reset form control
+        this.control.setValue('');
+        // Reset input element if available
+        if (this.textInput?.nativeElement) {
+            this.textInput.nativeElement.value = '';
+        }
+    }
+    updateValue() {
+        this.value = this.values.join(';');
+        this.valueChange.emit(this.value);
+    }
+    clear() {
+        this.values = [];
+        this.updateValue();
+    }
+    getDisplayValue(value) {
+        const option = this.options?.find(opt => opt[this.optionValue]?.toString() === value);
+        return option ? option[this.optionDisplay]?.toString() : value;
+    }
+    copyValues() {
+        navigator.clipboard.writeText(this.value).then(() => {
+            this.messageService.toast('Copied');
+        });
+    }
+}
+MultiTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiTextComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+MultiTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiTextComponent, selector: "spa-multi-text", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", strict: "strict", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%;\">\n  <mat-label>{{display}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let value of values\" [removable]=\"!readonly\" (removed)=\"remove(value)\">\n      {{getDisplayValue(value)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip>\n    <input #textInput autocomplete=\"off\" [placeholder]=\"readonly ? '' : display\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"add($event)\" [formControl]=\"control\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\n  </mat-chip-list>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-error *ngIf=\"errorState\">{{hint}}</mat-error>\n  <mat-hint *ngIf=\"hint && !errorState\">{{hint}}</mat-hint>\n\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\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: 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: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.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: i6$1.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: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.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: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-multi-text', template: "<mat-form-field style=\"width: 100%;\">\n  <mat-label>{{display}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let value of values\" [removable]=\"!readonly\" (removed)=\"remove(value)\">\n      {{getDisplayValue(value)}}\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip>\n    <input #textInput autocomplete=\"off\" [placeholder]=\"readonly ? '' : display\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"[13, 186]\" [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"add($event)\" [formControl]=\"control\" [readonly]=\"readonly\" [matAutocomplete]=\"auto\">\n  </mat-chip-list>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"optionSelected($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\n      {{option[optionDisplay]}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-error *ngIf=\"errorState\">{{hint}}</mat-error>\n  <mat-hint *ngIf=\"hint && !errorState\">{{hint}}</mat-hint>\n\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"true\" [(value)]=\"value\">\n    </spa-suffix>\n  </div>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { textInput: [{
+                type: ViewChild,
+                args: ['textInput']
+            }], display: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], strict: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], infoMessage: [{
+                type: Input
+            }], copyContent: [{
+                type: Input
+            }], clearContent: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionDisplay: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }] } });
+
 class CamelToWordsPipe {
     transform(value) {
         return Core.camelToWords(value);
@@ -3492,10 +3648,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <!-- <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [multiple]=\"true\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" >\r\n        </spa-select> -->\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <!-- <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [multiple]=\"true\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" >\r\n        </spa-select> -->\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: MultiTextComponent, selector: "spa-multi-text", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue"], outputs: ["valueChange"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <!-- <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [multiple]=\"true\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" >\r\n        </spa-select> -->\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"] }]
+            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <!-- <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [multiple]=\"true\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" >\r\n        </spa-select> -->\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { dynamicSelectTemplate: [{
                 type: ContentChild,
                 args: ['dynamicSelect']
@@ -3698,7 +3854,7 @@ class DetailsDialogLite {
             return;
         }
         if (this.validateForm()) {
-            this.executeAction(button, this.details, button.action?.successMessage || "Updated");
+            this.executeAction(button, this.details);
         }
     }
     validateForm() {
@@ -3734,23 +3890,31 @@ class DetailsDialogLite {
         }
         return data;
     }
-    executeAction(button, data, defaultSuccessMessage) {
+    executeAction(button, data) {
         const actionData = this.prepareActionData(button, data);
         if (button.confirm) {
             this.messageService.confirm(button.confirm.message).subscribe((result) => {
                 if (result === "yes") {
-                    this.performApiCall(button, actionData, defaultSuccessMessage);
+                    this.performApiCall(button, actionData);
                 }
             });
         }
         else {
-            this.performApiCall(button, actionData, defaultSuccessMessage);
+            this.performApiCall(button, actionData);
         }
     }
-    performApiCall(button, data, defaultSuccessMessage) {
+    performApiCall(button, data) {
         this.dataService.CallApi(button.action, data).subscribe((apiResponse) => {
             if (apiResponse.success) {
-                this.messageService.toast(button.action?.successMessage || defaultSuccessMessage);
+                if (button.action.successMessage) {
+                    this.messageService.toast(button.action.successMessage);
+                }
+                else if (apiResponse.message != "success" && apiResponse.message != "") {
+                    this.messageService.toast(apiResponse.message);
+                }
+                else {
+                    this.messageService.toast("Updated");
+                }
                 this.dialogRef.close({ message: 'success', data: { ...apiResponse, data: this.details } });
             }
             else {
@@ -4124,7 +4288,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", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n  <ng-container *ngFor=\"let tile of tiles\">\r\n    <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n      <!-- Number -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div style=\"text-align: center;font-size: 30px;\">\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 }\">{{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      </div>\r\n\r\n      <!-- Info -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n          <mat-label  style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{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      </div>\r\n\r\n    </mat-card>\r\n  </ng-container>\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}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i15.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.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", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row align-items-center justify-content-between\">\r\n  <ng-container *ngFor=\"let tile of tiles\">\r\n    <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n      <!-- Number -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div style=\"text-align: center;font-size: 30px;\">\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 }\">{{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      </div>\r\n\r\n      <!-- Info -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n          <mat-label  style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{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      </div>\r\n\r\n    </mat-card>\r\n  </ng-container>\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}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7.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=\"d-flex row align-items-center justify-content-between\">\r\n  <ng-container *ngFor=\"let tile of tiles\">\r\n    <mat-card class=\"col\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\r\n\r\n      <!-- Number -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div style=\"text-align: center;font-size: 30px;\">\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 }\">{{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      </div>\r\n\r\n      <!-- Info -->\r\n      <div class=\"row d-flex justify-content-center align-items-center\">\r\n        <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\r\n          <mat-label  style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{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      </div>\r\n\r\n    </mat-card>\r\n  </ng-container>\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}.col{transition:all .3s ease;cursor:pointer}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.selected-tile mat-label{font-weight:700}.selected-tile{border:2px solid #3f51b5}.col:hover{background-color:#f5f5f5}.selected-tile:hover{background-color:#e0e0e0}\n"] }]
@@ -4696,6 +4860,9 @@ class TableLiteComponent {
                 if (b.action.successMessage) {
                     this.messageService.toast(b.action.successMessage);
                 }
+                else if (apiResponse.message != "success" && apiResponse.message != "") {
+                    this.messageService.toast(apiResponse.message);
+                }
                 else {
                     this.messageService.toast("Updated");
                 }
@@ -4909,7 +5076,7 @@ class DetailsDialogInternal {
             return;
         }
         if (this.validateForm()) {
-            this.executeAction(button, this.details, button.action?.successMessage || "Updated");
+            this.executeAction(button, this.details);
         }
     }
     validateForm() {
@@ -4945,23 +5112,31 @@ class DetailsDialogInternal {
         }
         return data;
     }
-    executeAction(button, data, defaultSuccessMessage) {
+    executeAction(button, data) {
         const actionData = this.prepareActionData(button, data);
         if (button.confirm) {
             this.messageService.confirm(button.confirm.message).subscribe((result) => {
                 if (result === "yes") {
-                    this.performApiCall(button, actionData, defaultSuccessMessage);
+                    this.performApiCall(button, actionData);
                 }
             });
         }
         else {
-            this.performApiCall(button, actionData, defaultSuccessMessage);
+            this.performApiCall(button, actionData);
         }
     }
-    performApiCall(button, data, defaultSuccessMessage) {
+    performApiCall(button, data) {
         this.dataService.CallApi(button.action, data).subscribe((apiResponse) => {
             if (apiResponse.success) {
-                this.messageService.toast(button.action?.successMessage || defaultSuccessMessage);
+                if (button.action.successMessage) {
+                    this.messageService.toast(button.action.successMessage);
+                }
+                else if (apiResponse.message != "success" && apiResponse.message != "") {
+                    this.messageService.toast(apiResponse.message);
+                }
+                else {
+                    this.messageService.toast("Updated");
+                }
                 this.dialogRef.close({ message: 'success', data: { ...apiResponse, data: this.details } });
             }
             else {
@@ -5059,14 +5234,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class NotificationsService {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.notificationCount = new BehaviorSubject(0);
+        this.notificationCount$ = this.notificationCount.asObservable();
+        // this.loadNotifications();
+    }
+    loadNotifications() {
+        // Using the dedicated count endpoint for better performance
+        this.dataService.CallApi({ url: 'notifications/count/x' }).subscribe((apiResponse) => {
+            console.log(apiResponse);
+            if (apiResponse.success) {
+                this.notificationCount.next(apiResponse.data);
+            }
+        });
+    }
+    refreshCount() {
+        this.loadNotifications();
+    }
+}
+NotificationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationsService, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Injectable });
+NotificationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }]; } });
+
 class NavMenuComponent {
-    constructor(router, authService, storageService, socialService, breakpointObserver, dataService) {
+    constructor(router, authService, storageService, notificationsService, socialService, breakpointObserver, dataService) {
         this.router = router;
         this.authService = authService;
         this.storageService = storageService;
+        this.notificationsService = notificationsService;
         this.socialService = socialService;
         this.breakpointObserver = breakpointObserver;
         this.dataService = dataService;
+        this.notificationCount$ = this.notificationsService.notificationCount$;
         this.isExpanded = false;
         this.nowDate = new Date();
         this.appConfig = new AppConfig();
@@ -5112,12 +5318,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$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$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.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$2.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i11$2.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.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: NotificationsService }, { 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/notifications')\"> <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    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\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    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\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\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: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3.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: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.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: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { 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: 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$1.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
+            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/notifications')\"> <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    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\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    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\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\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: NotificationsService }, { type: i8.SocialAuthService }, { type: i3$1.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
                 type: Input
             }], footer: [{
                 type: Input
@@ -5525,6 +5731,9 @@ class TableInternalComponent {
                 if (b.action.successMessage) {
                     this.messageService.toast(b.action.successMessage);
                 }
+                else if (apiResponse.message != "success" && apiResponse.message != "") {
+                    this.messageService.toast(apiResponse.message);
+                }
                 else {
                     this.messageService.toast("Updated");
                 }
@@ -5738,7 +5947,7 @@ class DetailsDialog {
             return;
         }
         if (this.validateForm()) {
-            this.executeAction(button, this.details, button.action?.successMessage || "Updated");
+            this.executeAction(button, this.details);
         }
     }
     validateForm() {
@@ -5774,23 +5983,31 @@ class DetailsDialog {
         }
         return data;
     }
-    executeAction(button, data, defaultSuccessMessage) {
+    executeAction(button, data) {
         const actionData = this.prepareActionData(button, data);
         if (button.confirm) {
             this.messageService.confirm(button.confirm.message).subscribe((result) => {
                 if (result === "yes") {
-                    this.performApiCall(button, actionData, defaultSuccessMessage);
+                    this.performApiCall(button, actionData);
                 }
             });
         }
         else {
-            this.performApiCall(button, actionData, defaultSuccessMessage);
+            this.performApiCall(button, actionData);
         }
     }
-    performApiCall(button, data, defaultSuccessMessage) {
+    performApiCall(button, data) {
         this.dataService.CallApi(button.action, data).subscribe((apiResponse) => {
             if (apiResponse.success) {
-                this.messageService.toast(button.action?.successMessage || defaultSuccessMessage);
+                if (button.action.successMessage) {
+                    this.messageService.toast(button.action.successMessage);
+                }
+                else if (apiResponse.message != "success" && apiResponse.message != "") {
+                    this.messageService.toast(apiResponse.message);
+                }
+                else {
+                    this.messageService.toast("Updated");
+                }
                 this.dialogRef.close({ message: 'success', data: { ...apiResponse, data: this.details } });
             }
             else {
@@ -6114,6 +6331,9 @@ class TableComponent {
                 if (b.action.successMessage) {
                     this.messageService.toast(b.action.successMessage);
                 }
+                else if (apiResponse.message != "success" && apiResponse.message != "") {
+                    this.messageService.toast(apiResponse.message);
+                }
                 else {
                     this.messageService.toast("Updated");
                 }
@@ -6298,7 +6518,7 @@ class TenantSettingsComponent {
             ],
             buttons: [
                 { name: 'create', display: 'Add Member', dialog: true, detailsConfig: this.inviteDialogConfig },
-                { name: 'edit', icon: { name: 'security' }, tip: 'Edit Access', dialog: true, action: { url: 'members/dto?action=role', method: 'post' }, disabled: x => x.own },
+                { name: 'edit', icon: { name: 'security' }, tip: 'Edit Access', dialog: true, action: { url: 'members/dto?action=role', method: 'post' }, },
                 { name: 'remove', icon: { name: 'close', color: 'red' }, tip: 'Remove Member', confirm: { message: 'Remove Member from this Organisation ?' }, action: { url: 'members/dto?action=remove', method: 'post' }, disabled: x => x.own },
             ],
             loadAction: { url: 'members/all/x' },
@@ -6353,6 +6573,39 @@ class TenantSettingsComponent {
             ],
             loadAction: { url: 'tenants/my_tenants/x' },
         };
+        //Email
+        this.mailerFormConfig = {
+            fields: [
+                { name: 'smtp', type: 'text', required: true, alias: 'SMTP Server' },
+                { name: 'port', type: 'number', required: true, defaultValue: 587 },
+                { name: 'address', type: 'text', required: true, alias: 'Email Address' },
+                { name: 'display', type: 'text', required: true, alias: 'Display Name' },
+                { name: 'password', type: 'password', required: true, span: true },
+                { name: 'enableSsl', type: 'checkbox', alias: 'Enable SSL' },
+                { name: 'isBodyHtml', type: 'checkbox', alias: 'HTML Body' },
+            ]
+        };
+        this.mailerTableConfig = {
+            showFilter: true,
+            elevation: 'low',
+            minColumns: ['smtp', 'address'],
+            flatButtons: true,
+            columns: [
+                { name: 'smtp', type: 'text', alias: 'SMTP Server' },
+                { name: 'port', type: 'number' },
+                { name: 'address', type: 'text', alias: 'Email Address' },
+                { name: 'display', type: 'text', alias: 'Display Name' },
+                { name: 'enableSsl', type: 'checkbox', alias: 'SSL Enabled' },
+                { name: 'isBodyHtml', type: 'checkbox', alias: 'HTML Body' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Configure Email', dialog: true, action: { url: 'mailerconfigs?action=create', method: 'post' } },
+                { name: 'edit', dialog: true, action: { url: 'mailerconfigs?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'mailerconfigs?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'mailerconfigs/all/x' },
+            formConfig: this.mailerFormConfig
+        };
     }
     ngOnInit() {
         this.authService.myRoleObserv.subscribe(rol => this.myRole = rol);
@@ -6408,10 +6661,10 @@ class TenantSettingsComponent {
     }
 }
 TenantSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
+TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["peekConfig"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
+            args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }, { type: i4.MatDialog }]; } });
 
 class TenantsComponent {
@@ -6882,7 +7135,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: i3.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" }] });
+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: i3.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: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.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"] }]
@@ -7297,16 +7550,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: AuthService }]; } });
 
 class NotificationsComponent {
-    constructor() { }
+    constructor(dataService, notificationsService) {
+        this.dataService = dataService;
+        this.notificationsService = notificationsService;
+        this.createDialog = {
+            formConfig: {
+                title: 'Send Notification',
+                fixedTitle: true,
+                fields: [
+                    { name: 'message', type: 'text', required: true, span: true },
+                    {
+                        name: 'category', type: 'select', required: true, defaultFirstValue: true,
+                        options: [
+                            { name: 'System', value: 0 },
+                            { name: 'Security', value: 1 },
+                            { name: 'Task', value: 2 },
+                            { name: 'Approval', value: 3 },
+                            { name: 'Other', value: 4 }
+                        ]
+                    },
+                    {
+                        name: 'type', type: 'select', required: true, defaultFirstValue: true,
+                        options: [
+                            { name: 'Info', value: 'info' },
+                            { name: 'Warning', value: 'warn' },
+                            { name: 'Error', value: 'error' }
+                        ]
+                    },
+                    { name: 'durationHours', type: 'number', required: true, defaultValue: 24, hint: 'How long to keep this notification active' },
+                    { name: 'notifyAllUsers', type: 'checkbox', alias: 'Notify All Users', span: true },
+                    { name: 'recipients', type: 'multi-text', alias: 'Recipients', span: true, hiddenCondition: x => x.notifyAllUsers },
+                    { name: 'roleIDs', type: 'multi-text', strict: true, copyContent: true, alias: 'Role IDs', span: true, hiddenCondition: x => x.notifyAllUsers, infoMessage: 'Loading roles...' },
+                    {
+                        name: 'channels', type: 'select', alias: 'Notification Channels', span: true, defaultFirstValue: true, required: true,
+                        options: [
+                            { name: 'UI Only', value: 1 },
+                            { name: 'UI + Email', value: 3 },
+                            { name: 'UI + Email + SMS', value: 7 },
+                            { name: 'All Channels', value: 15 }
+                        ]
+                    }
+                ]
+            },
+            mode: 'create',
+            buttons: [
+                { name: 'create', display: 'Send', action: { url: 'notifications/notify', method: 'post', successMessage: 'Notification sent successfully' } }
+            ]
+        };
+        this.notificationsTableConfig = {
+            showFilter: true,
+            minColumns: ['message', 'categoryName'],
+            flatButtons: true,
+            columns: [
+                {
+                    name: 'type', type: 'icon',
+                    icons: [
+                        { name: 'info', color: 'steelblue', condition: x => x.type === 'info' },
+                        { name: 'warning', color: '#FF9800', condition: x => x.type === 'warn' },
+                        { name: 'error', color: '#f44336', condition: x => x.type === 'error' }
+                    ]
+                },
+                { name: 'createdDate', type: 'datetime', alias: 'Date' },
+                { name: 'message', type: 'text' },
+                { name: 'categoryName', type: 'text', alias: 'Category' },
+                // { name: 'createdByName', type: 'text', alias: 'From' }
+            ],
+            buttons: [
+                { name: 'create', display: 'Send Notification', dialog: true, detailsConfig: this.createDialog },
+                { name: 'dismiss', icon: { name: 'done' }, color: 'green', action: { url: 'notifications?action=dismiss', method: 'post' }, visible: x => x.canDismiss },
+                { name: 'dismissAll', display: 'Dismiss All', inHeader: true, icon: { name: 'done_all' }, color: 'green', action: { url: 'notifications/dismiss-all', method: 'post' } }
+            ],
+            loadAction: { url: 'notifications/all/x' }
+        };
+    }
     ngOnInit() {
+        this.loadRoles();
+        this.notificationsService.loadNotifications();
+    }
+    loadRoles() {
+        this.dataService.CallApi({ url: 'role/list/x' }, "").subscribe((apiResponse) => {
+            this.createDialog.formConfig.fields.find(x => x.name == 'roleIDs').infoMessage = 'Available Roles:\n' + apiResponse.data.map(r => `${r.roleID} - ${r.roleName}`).join('\n');
+            this.createDialog.formConfig.fields.find(x => x.name == 'roleIDs').options = apiResponse.data;
+        });
+        this.dataService.CallApi({ url: 'user/list/x' }, "").subscribe((apiResponse) => {
+            this.createDialog.formConfig.fields.find(x => x.name == 'recipients').options = apiResponse.data;
+        });
+    }
+    actionClicked(x) {
+        this.notificationsService.loadNotifications();
     }
 }
-NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationsComponent, selector: "spa-notifications", ngImport: i0, template: "<p>notifications works!</p>\n", styles: [""] });
+NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationsComponent, deps: [{ token: DataServiceLib }, { token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component });
+NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationsComponent, selector: "spa-notifications", ngImport: i0, template: "<h4>Notifications</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"notificationsTableConfig\"  (actionResponse)=\"actionClicked($event)\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-notifications', template: "<p>notifications works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'spa-notifications', template: "<h4>Notifications</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"notificationsTableConfig\"  (actionResponse)=\"actionClicked($event)\"></spa-table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: NotificationsService }]; } });
 
 class PageComponent {
     constructor(dataServiceLib, messageService) {
@@ -7316,6 +7655,12 @@ class PageComponent {
         this.searchModeActivated = new EventEmitter();
         this.searchModeDeactivated = new EventEmitter();
         this.refreshClick = new EventEmitter();
+        this.actionClick = new EventEmitter();
+        this.actionResponse = new EventEmitter();
+        this.inputChange = new EventEmitter();
+        this.createClick = new EventEmitter();
+        this.searchClick = new EventEmitter();
+        this.dataLoad = new EventEmitter();
         this.tableReload = new Subject();
         this.searchMode = false;
     }
@@ -7348,12 +7693,30 @@ class PageComponent {
     refreshClicked() {
         this.refreshClick.emit();
     }
+    actionClicked(x) {
+        this.actionClick.emit(x);
+    }
+    actionResponded(x) {
+        this.actionResponse.emit(x);
+    }
+    inputChanged(x) {
+        this.inputChange.emit(x);
+    }
+    createClicked(x) {
+        this.createClick.emit(x);
+    }
+    searchClicked(x) {
+        this.searchClick.emit(x);
+    }
+    dataLoaded(x) {
+        this.dataLoad.emit(x);
+    }
 }
 PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageComponent, selector: "spa-page", inputs: { config: "config" }, outputs: { searchModeActivated: "searchModeActivated", searchModeDeactivated: "searchModeDeactivated", refreshClick: "refreshClick" }, ngImport: i0, template: "<div class=\"row\">\r\n\r\n  <div class=\"col\">\r\n    <h4>{{config.title ?? 'Untitled'}} </h4>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\r\n    <spa-check *ngIf=\"config.searchTableConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\r\n  </div>\r\n\r\n</div>\r\n\r\n<hr style=\"margin-top: 0px;\" />\r\n\r\n\r\n<div style=\" font-size: 14px;\">\r\n  <!-- Normal -->\r\n  <spa-table *ngIf=\"!searchMode\"  [config]=\"normalTableConfig\" [reload]=\"tableReload\" (refreshClick)=\"refreshClicked()\"></spa-table>\r\n\r\n  <!-- Search -->\r\n  <spa-table *ngIf=\"searchMode\" [config]=\"searchTableConfig\" [reload]=\"tableReload\" (refreshClick)=\"refreshClicked()\"></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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
+PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageComponent, selector: "spa-page", inputs: { config: "config" }, outputs: { searchModeActivated: "searchModeActivated", searchModeDeactivated: "searchModeDeactivated", refreshClick: "refreshClick", actionClick: "actionClick", actionResponse: "actionResponse", inputChange: "inputChange", createClick: "createClick", searchClick: "searchClick", dataLoad: "dataLoad" }, ngImport: i0, template: "<div class=\"row\">\r\n\r\n  <div class=\"col\">\r\n    <h4>{{config.title ?? 'Untitled'}} </h4>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\r\n    <spa-check *ngIf=\"config.searchTableConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\r\n  </div>\r\n\r\n</div>\r\n\r\n<hr style=\"margin-top: 0px;\" />\r\n\r\n\r\n<div style=\" font-size: 14px;\">\r\n  <!-- Normal -->\r\n  <spa-table *ngIf=\"!searchMode\"  [config]=\"normalTableConfig\" [reload]=\"tableReload\"\r\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\r\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\r\n  </spa-table>\r\n\r\n  <!-- Search -->\r\n  <spa-table *ngIf=\"searchMode\" [config]=\"searchTableConfig\" [reload]=\"tableReload\"\r\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\r\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\r\n  </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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-page', template: "<div class=\"row\">\r\n\r\n  <div class=\"col\">\r\n    <h4>{{config.title ?? 'Untitled'}} </h4>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\r\n    <spa-check *ngIf=\"config.searchTableConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\r\n  </div>\r\n\r\n</div>\r\n\r\n<hr style=\"margin-top: 0px;\" />\r\n\r\n\r\n<div style=\" font-size: 14px;\">\r\n  <!-- Normal -->\r\n  <spa-table *ngIf=\"!searchMode\"  [config]=\"normalTableConfig\" [reload]=\"tableReload\" (refreshClick)=\"refreshClicked()\"></spa-table>\r\n\r\n  <!-- Search -->\r\n  <spa-table *ngIf=\"searchMode\" [config]=\"searchTableConfig\" [reload]=\"tableReload\" (refreshClick)=\"refreshClicked()\"></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}\n"] }]
+            args: [{ selector: 'spa-page', template: "<div class=\"row\">\r\n\r\n  <div class=\"col\">\r\n    <h4>{{config.title ?? 'Untitled'}} </h4>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" style=\"font-size: 14px;\">\r\n    <spa-check *ngIf=\"config.searchTableConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\r\n  </div>\r\n\r\n</div>\r\n\r\n<hr style=\"margin-top: 0px;\" />\r\n\r\n\r\n<div style=\" font-size: 14px;\">\r\n  <!-- Normal -->\r\n  <spa-table *ngIf=\"!searchMode\"  [config]=\"normalTableConfig\" [reload]=\"tableReload\"\r\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\r\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\r\n  </spa-table>\r\n\r\n  <!-- Search -->\r\n  <spa-table *ngIf=\"searchMode\" [config]=\"searchTableConfig\" [reload]=\"tableReload\"\r\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\r\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\r\n  </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}\n"] }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }]; }, propDecorators: { config: [{
                 type: Input
             }], searchModeActivated: [{
@@ -7362,6 +7725,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], refreshClick: [{
                 type: Output
+            }], actionClick: [{
+                type: Output
+            }], actionResponse: [{
+                type: Output
+            }], inputChange: [{
+                type: Output
+            }], createClick: [{
+                type: Output
+            }], searchClick: [{
+                type: Output
+            }], dataLoad: [{
+                type: Output
             }] } });
 
 class SelectContextDirective {
@@ -7390,6 +7765,7 @@ class ApprovalsComponent {
         this.approvalsTableConfig = {
             showFilter: true,
             minColumns: ['message', 'statusName'],
+            minButtons: ['approve', 'decline'],
             flatButtons: true,
             greyOut: (x) => x.isGreyedOut,
             logResponse: true,
@@ -7437,7 +7813,7 @@ class ApprovalsComponent {
     }
 }
 ApprovalsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApprovalsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ApprovalsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApprovalsComponent, selector: "spa-approvals", ngImport: i0, template: "<spa-page [config]=\"pageConfig\"></spa-page>\n", styles: [""], dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick"] }] });
+ApprovalsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApprovalsComponent, selector: "spa-approvals", ngImport: i0, template: "<spa-page [config]=\"pageConfig\"></spa-page>\n", styles: [""], dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApprovalsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-approvals', template: "<spa-page [config]=\"pageConfig\"></spa-page>\n" }]
@@ -7448,7 +7824,6 @@ class ApprovalsConfigComponent {
         // Approval Roles
         this.approvalRolesFormConfig = {
             title: 'Approval Role',
-            alertMessages: { messages: [] },
             fields: [
                 { name: 'roleID', type: 'select', required: true, alias: 'Role', optionDisplay: 'roleName', optionValue: 'roleID', loadAction: { url: 'role/all/x' } }
             ],
@@ -7523,7 +7898,7 @@ class ApprovalsConfigComponent {
     }
 }
 ApprovalsConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApprovalsConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ApprovalsConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApprovalsConfigComponent, selector: "spa-approvals-config", ngImport: i0, template: "<spa-page [config]=\"pageConfig\"></spa-page>\n", styles: [""], dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick"] }] });
+ApprovalsConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApprovalsConfigComponent, selector: "spa-approvals-config", ngImport: i0, template: "<spa-page [config]=\"pageConfig\"></spa-page>\n", styles: [""], dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApprovalsConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-approvals-config', template: "<spa-page [config]=\"pageConfig\"></spa-page>\n" }]
@@ -7540,13 +7915,14 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
         DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, NotificationsComponent, InvitationsTableComponent,
         TableHeaderComponent, TableRowComponent, TableActionComponent,
-        AlertComponent, EmailComponent, PageComponent, SelectCommonComponent, SelectInternalComponent, SuffixComponent, SelectContextDirective, SelectLiteComponent, TableLiteComponent, DetailsDialogLite, ApprovalsComponent, ApprovalsConfigComponent], imports: [SpaMatModule,
+        AlertComponent, EmailComponent, PageComponent, SelectCommonComponent, SelectInternalComponent, SuffixComponent, SelectContextDirective, SelectLiteComponent, TableLiteComponent, DetailsDialogLite, ApprovalsComponent, ApprovalsConfigComponent, MultiTextComponent], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule,
         NgxDocViewerModule], exports: [TinSpaComponent,
         SpaMatModule,
         AlertComponent,
         TextComponent,
+        MultiTextComponent,
         messageDialog,
         NavMenuComponent,
         LoaderComponent,
@@ -7598,7 +7974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
                         DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, NotificationsComponent, InvitationsTableComponent,
                         TableHeaderComponent, TableRowComponent, TableActionComponent,
-                        AlertComponent, EmailComponent, PageComponent, SelectCommonComponent, SelectInternalComponent, SuffixComponent, SelectContextDirective, SelectLiteComponent, TableLiteComponent, DetailsDialogLite, ApprovalsComponent, ApprovalsConfigComponent
+                        AlertComponent, EmailComponent, PageComponent, SelectCommonComponent, SelectInternalComponent, SuffixComponent, SelectContextDirective, SelectLiteComponent, TableLiteComponent, DetailsDialogLite, ApprovalsComponent, ApprovalsConfigComponent, MultiTextComponent
                     ],
                     imports: [
                         SpaMatModule,
@@ -7611,6 +7987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         SpaMatModule,
                         AlertComponent,
                         TextComponent,
+                        MultiTextComponent,
                         messageDialog,
                         NavMenuComponent,
                         LoaderComponent,
@@ -7652,7 +8029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 class LoginComponent {
-    constructor(httpService, storageService, router, messageService, dataService, authService, logService, route, socialService) {
+    constructor(httpService, storageService, router, messageService, dataService, authService, logService, route, socialService, notificationsService) {
         this.httpService = httpService;
         this.storageService = storageService;
         this.router = router;
@@ -7662,6 +8039,7 @@ class LoginComponent {
         this.logService = logService;
         this.route = route;
         this.socialService = socialService;
+        this.notificationsService = notificationsService;
         this.style = "default";
         this.email = "";
         this.password = "";
@@ -7751,13 +8129,18 @@ class LoginComponent {
             this.messageService.toast(this.httpService.Error(error));
         });
     }
+    notifications() {
+        if (this.appConfig.multitenant) {
+            this.notificationsService.loadNotifications();
+        }
+    }
 }
-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: i3.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.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: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.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", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], 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.ɵ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 }, { token: NotificationsService }], 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: i3.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.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: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.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: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i16.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i16.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i16.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i16.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", "copyContent", "clearContent", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], 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"] }]
-        }], ctorParameters: function () { return [{ type: HttpService }, { type: StorageService }, { type: i1$3.Router }, { type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: LogService }, { type: i1$3.ActivatedRoute }, { type: i8.SocialAuthService }]; } });
+        }], ctorParameters: function () { return [{ type: HttpService }, { type: StorageService }, { type: i1$3.Router }, { type: MessageService }, { type: DataServiceLib }, { type: AuthService }, { type: LogService }, { type: i1$3.ActivatedRoute }, { type: i8.SocialAuthService }, { type: NotificationsService }]; } });
 
 class SignupComponent {
     constructor(httpService, messageService, dataService, authService) {
@@ -8157,7 +8540,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", ngImport: i0, template: "\r\n <spa-page [config]=\"logsPageConfig\"></spa-page>\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: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick"] }] });
+LogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogsComponent, selector: "spa-logs", ngImport: i0, template: "\r\n <spa-page [config]=\"logsPageConfig\"></spa-page>\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: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-logs', template: "\r\n <spa-page [config]=\"logsPageConfig\"></spa-page>\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"] }]
@@ -8407,7 +8790,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: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.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.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: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.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: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.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"] }]
@@ -8633,6 +9016,7 @@ const routes$1 = [
     { path: "welcome", component: WelcomeComponent },
     { path: "approvals", component: ApprovalsComponent },
     { path: "approvals-config", component: ApprovalsConfigComponent },
+    { path: "notifications", component: NotificationsComponent },
 ];
 class AdminRoutingModule {
 }
@@ -8714,5 +9098,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccountsComponent, Action, ActionResponse, ActivityComponent, AdminModule, AlertComponent, AlertMessage, AlertMessages, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, PageComponent, PageConfig, PositionsComponent, ProfileComponent, RecoverAccountComponent, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepConfig, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, dialogOptions, messageDialog, viewerDialog };
+export { AccountsComponent, Action, ActionResponse, ActivityComponent, AdminModule, AlertComponent, AlertMessage, AlertMessages, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, MultiTextComponent, NavMenuComponent, NumberComponent, OptionComponent, PageComponent, PageConfig, PositionsComponent, ProfileComponent, RecoverAccountComponent, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepConfig, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, dialogOptions, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map