tin-spa 2.3.8 → 2.3.9

package/fesm2020/tin-spa.mjs

@@ -26,9 +26,9 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i15 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i4$2 from '@angular/material/checkbox';
+import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$3 from '@angular/material/chips';
+import * as i4$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i7 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -625,10 +625,16 @@ var DetailsSource;
 })(DetailsSource || (DetailsSource = {}));
 class DetailsDialogConfig {
 }
+class dialogOptions {
+}
 class Action {
 }
 class SearchConfig {
 }
+class AlertMessages {
+}
+class AlertMessage {
+}
 class FormConfig {
 }
 class TableConfig {
@@ -1583,8 +1589,8 @@ class DialogService {
     openDetailsDialog(config, dialogComponent) {
         const hasTables = config.tableConfigs?.length > 0;
         const dialogOptions = {
-            width: this.smallScreen ? '900px' : (hasTables ? '90%' : '900px'),
-            height: hasTables ? '90%' : 'auto',
+            width: config.options?.width ? config.options?.width : (this.smallScreen ? '900px' : (hasTables ? '90%' : '900px')),
+            height: config.options?.height ? config.options?.height : (hasTables ? '90%' : 'auto'),
             data: config
         };
         const dialogRef = this.dialog.open(dialogComponent, dialogOptions);
@@ -1917,10 +1923,10 @@ class CheckComponent {
     }
 }
 CheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-CheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckComponent, selector: "spa-check", inputs: { readonly: "readonly", display: "display", value: "value", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", click: "click", check: "check", uncheck: "uncheck", infoClick: "infoClick" }, ngImport: i0, template: "\r\n<div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n  <!-- <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick()\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"padding: 0px;margin: 0px; width: 5px;\">\r\n    <mat-icon style=\"color: steelblue;font-size: 15px;\">info</mat-icon>\r\n  </button> -->\r\n\r\n</div>\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+CheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckComponent, selector: "spa-check", inputs: { readonly: "readonly", display: "display", value: "value", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", click: "click", check: "check", uncheck: "uncheck", infoClick: "infoClick" }, ngImport: i0, template: "\r\n\r\n<mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n<!-- <div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n</div> -->\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-check', template: "\r\n<div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n  <!-- <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick()\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"padding: 0px;margin: 0px; width: 5px;\">\r\n    <mat-icon style=\"color: steelblue;font-size: 15px;\">info</mat-icon>\r\n  </button> -->\r\n\r\n</div>\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'spa-check', template: "\r\n\r\n<mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n<!-- <div class=\"suffix-icons\">\r\n\r\n  <mat-checkbox color=\"primary\" [(ngModel)]=\"value\" (change)=\"changed()\" (click)=\"clicked()\" [disabled]=\"readonly\">{{display}}</mat-checkbox>\r\n\r\n  <mat-icon *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\" style=\"color: steelblue;font-size: 15px;margin-left: 5px;margin-top: 8px;\">info</mat-icon>\r\n\r\n</div> -->\r\n\r\n", styles: [".suffix-icons{display:flex;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { readonly: [{
                 type: Input
             }], display: [{
@@ -2606,7 +2612,7 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "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: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "peekConfig", "infoMessage"], outputs: ["valueChange", "infoClick"] }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "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: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "peekConfig", "infoMessage"], outputs: ["valueChange", "infoClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-option', template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n" }]
@@ -2915,7 +2921,7 @@ class ChipsComponent {
     }
 }
 ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }] });
+ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChipsComponent, selector: "spa-chips", inputs: { icon: "icon", removable: "removable", addable: "addable", chips: "chips" }, outputs: { click: "click", remove: "remove" }, ngImport: i0, template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-chips', template: "\r\n\r\n\r\n<div class=\"row  mt-1\" style=\"margin-left: 1em;\">\r\n  <mat-chip-list #chipList>\r\n    <mat-chip *ngFor=\"let chip of chips let i = index\" selectable [removable]=\"removable\" style=\"font-size: 12px;\" [ngStyle]=\"{'padding-right': removable ? '5px':'12px'}\" (click)=\"clicked(chip)\">\r\n      <mat-icon *ngIf=\"icon != ''\" color=\"primary\" style=\"font-size: 22px;\">{{icon}}</mat-icon>\r\n\r\n      {{chip}}\r\n\r\n      <mat-icon *ngIf=\"removable\" style=\"font-size: 20px; margin-left: 5px;margin-top: 3px;margin-right: 0px; color: grey;\" (click)=\"removed(chip)\">cancel</mat-icon>\r\n    </mat-chip>\r\n  </mat-chip-list>\r\n</div>\r\n\r\n\r\n\r\n" }]
@@ -3646,6 +3652,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+class AlertComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    getAlertMessages(type = undefined) {
+        return this.alertMessages.messages.filter(x => x.type === type);
+    }
+    hasAlertMessages(type = undefined) {
+        let count = this.alertMessages.messages.filter(x => x.type === type).length > 0;
+        return count;
+    }
+    testVisible(msg) {
+        return msg.hiddenCondition ? !msg.hiddenCondition(this.data) : true;
+    }
+}
+AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlertComponent, selector: "spa-alert", inputs: { alertMessages: "alertMessages", data: "data" }, ngImport: i0, template: "<div *ngIf=\"hasAlertMessages()\" class=\"alert alert-secondary\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages()\" >\n    <label *ngIf=\"testVisible(msg)\" >{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('success')\" class=\"alert alert-success\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('success')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('info')\" class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('info')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('warn')\" class=\"alert alert-warning\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('warn')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('critical')\" class=\"alert alert-danger\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('critical')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-alert', template: "<div *ngIf=\"hasAlertMessages()\" class=\"alert alert-secondary\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages()\" >\n    <label *ngIf=\"testVisible(msg)\" >{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('success')\" class=\"alert alert-success\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('success')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('info')\" class=\"alert alert-info\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('info')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('warn')\" class=\"alert alert-warning\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('warn')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n\n<div *ngIf=\"hasAlertMessages('critical')\" class=\"alert alert-danger\" style=\"font-size: 14px;\" role=\"alert\">\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}} </p>\n  <ng-container *ngFor=\"let msg of getAlertMessages('critical')\">\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { alertMessages: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
 class DetailsDialogInternal {
     constructor(breakpointObserver, loaderService, dataService, messageService, dialogRef, detailsConfig, buttonService, dialogService) {
         this.breakpointObserver = breakpointObserver;
@@ -3840,10 +3872,10 @@ class DetailsDialogInternal {
     }
 }
 DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n          <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+            args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n          <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3962,7 +3994,7 @@ class TableRowComponent {
     }
 }
 TableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableRowComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
-TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableRowComponent, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"onActionClick(column.name, row)\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: 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: i4$3.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "peekConfig", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableRowComponent, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"onActionClick(column.name, row)\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: 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: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "peekConfig", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-table-row', template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <mat-chip-list>\r\n      <mat-chip (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': testColorCondition(row, column.color) ? column.color.name : getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\r\n      <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n      <ng-container *ngFor=\"let icon of column.icons\">\r\n        <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n      </ng-container>\r\n    </mat-chip-list>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-button [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\" (click)=\"onActionClick(column.name, row)\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -4482,6 +4514,10 @@ class DetailsDialog {
         this.setTitleAction();
     }
     setTitleAction() {
+        if (this.formConfig.fixedTitle) {
+            this.titleAction = "";
+            return;
+        }
         this.titleAction = this.buttonService.getTitleAction(this.formConfig.mode, this.buttons);
     }
     getButton(name) {
@@ -4597,10 +4633,10 @@ class DetailsDialog {
     }
 }
 DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i11$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["alertMessages", "data"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+            args: [{ selector: 'app-viewModel', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n\r\n      <spa-alert [alertMessages]=\"formConfig.alertMessages\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.title ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n\r\n        </mat-tab-group>\r\n\r\n\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -6209,11 +6245,12 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         TenantSettingsComponent, inviteDialog, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
         SuppliersComponent,
         TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
-        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent, TableHeaderComponent, TableRowComponent, TableActionComponent], imports: [SpaMatModule,
+        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent, TableHeaderComponent, TableRowComponent, TableActionComponent, AlertComponent], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule,
         NgxDocViewerModule], exports: [TinSpaComponent,
         SpaMatModule,
+        AlertComponent,
         TextComponent,
         messageDialog,
         NavMenuComponent,
@@ -6264,7 +6301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TenantSettingsComponent, inviteDialog, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
                         SuppliersComponent,
                         TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
-                        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent, TableHeaderComponent, TableRowComponent, TableActionComponent,
+                        DepartmentsComponent, EmployeesComponent, PositionsComponent, GradesComponent, WelcomeComponent, InvitationsComponent, NotificationsComponent, InvitationsTableComponent, TableHeaderComponent, TableRowComponent, TableActionComponent, AlertComponent,
                     ],
                     imports: [
                         SpaMatModule,
@@ -6275,6 +6312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     exports: [
                         TinSpaComponent,
                         SpaMatModule,
+                        AlertComponent,
                         TextComponent,
                         messageDialog,
                         NavMenuComponent,
@@ -6962,7 +7000,7 @@ class addRoleDialog {
     ;
 }
 addRoleDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n\r\n          <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capItem of 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  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: 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: 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"] }] });
+addRoleDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: addRoleDialog, selector: "app-addRole", ngImport: i0, template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n\r\n          <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capItem of 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  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: 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: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: addRoleDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-addRole', template: "<mat-form-field>\r\n  <mat-label>Role Name</mat-label>\r\n  <input matInput autocomplete=\"off\" [(ngModel)]=\"role.roleName\" placeholder=\"Enter Role Name\" />\r\n</mat-form-field>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"row\" >\r\n\r\n\r\n          <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capItem of 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  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n  <button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n  <button mat-button mat-dialog-close=\"success\">Cancel</button>\r\n</mat-dialog-actions>\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -7040,7 +7078,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: i4$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$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, decorators: [{
             type: Component,
             args: [{ selector: "spa-roles", template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -7345,5 +7383,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Account, AccountsComponent, Action, ActionResponse, ActivityComponent, AdminModule, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, PositionsComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, loginConfig, messageDialog, viewerDialog };
+export { Account, AccountsComponent, Action, ActionResponse, ActivityComponent, AdminModule, AlertComponent, AlertMessage, AlertMessages, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogLevel, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, NavMenuComponent, NumberComponent, OptionComponent, PositionsComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RolesComponent, SearchComponent, SearchConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, dialogOptions, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map