tin-spa 2.9.2 → 2.9.4

package/fesm2015/tin-spa.mjs

@@ -219,6 +219,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+var RoleAccess;
+(function (RoleAccess) {
+    RoleAccess[RoleAccess["None"] = 0] = "None";
+    RoleAccess[RoleAccess["View"] = 1] = "View";
+    RoleAccess[RoleAccess["Edit"] = 2] = "Edit";
+    RoleAccess[RoleAccess["Create"] = 3] = "Create";
+    RoleAccess[RoleAccess["Full"] = 4] = "Full";
+})(RoleAccess || (RoleAccess = {}));
 var DetailsSource;
 (function (DetailsSource) {
     DetailsSource[DetailsSource["Row"] = 0] = "Row";
@@ -725,7 +733,6 @@ class DetailsDialogProcessor {
         if (updatedDetailsConfig.heroField && row) {
             updatedDetailsConfig.heroValue = row[updatedDetailsConfig.heroField];
         }
-        console.log("Details Config", updatedDetailsConfig);
         //Table configs
         if (updatedDetailsConfig.tableConfig) {
             updateTableConfig(updatedDetailsConfig.tableConfig);
@@ -781,7 +788,6 @@ class DetailsDialogProcessor {
         return { tableConfig, tableConfigs, formConfig, stepConfig, buttons };
     }
     static setHeroValue(detailsConfig, details) {
-        console.log(detailsConfig);
         if ((detailsConfig.formConfig.mode == "create") && detailsConfig.heroField && detailsConfig.heroValue) {
             details[detailsConfig.heroField] = detailsConfig.heroValue;
             // Ensure hero values are set in form config
@@ -789,10 +795,6 @@ class DetailsDialogProcessor {
             detailsConfig.formConfig.heroValue = detailsConfig.heroValue;
             return;
         }
-        // if (detailsConfig.config.mode != "create" && detailsConfig.heroField) {
-        //   detailsConfig.heroValue = details[detailsConfig.heroField];
-        // }
-        // console.log(detailsConfig)
     }
     static handleFormMode(detailsConfig, formConfig) {
         let details;
@@ -800,7 +802,6 @@ class DetailsDialogProcessor {
         let loadByAction = false;
         if (formConfig.mode === "create") {
             details = Core.generateObject(formConfig.fields);
-            // this.setHeroValue(detailsConfig, details);
         }
         else {
             let resp = this.loadDetailsData(detailsConfig, formConfig);
@@ -940,14 +941,6 @@ class Profile {
         this.role = new Role();
     }
 }
-var RoleAccess;
-(function (RoleAccess) {
-    RoleAccess[RoleAccess["None"] = 0] = "None";
-    RoleAccess[RoleAccess["View"] = 1] = "View";
-    RoleAccess[RoleAccess["Edit"] = 2] = "Edit";
-    RoleAccess[RoleAccess["Create"] = 3] = "Create";
-    RoleAccess[RoleAccess["Full"] = 4] = "Full";
-})(RoleAccess || (RoleAccess = {}));
 class Role {
     constructor() {
         this.roleID = 0;
@@ -1969,6 +1962,7 @@ class DataServiceLib {
         this.appConfig = config;
     }
     CallApi(action, data = '') {
+        console.log(action);
         if (action.url.includes('/list/')) {
             return this.handleListCall(action);
         }
@@ -2328,10 +2322,10 @@ class SuffixComponent {
     }
 }
 SuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuffixComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-SuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuffixComponent, selector: "spa-suffix", inputs: { label: "label", infoMessage: "infoMessage", copyContent: "copyContent", isHovered: "isHovered", clearContent: "clearContent", value: "value" }, outputs: { infoClick: "infoClick", copyClick: "copyClick", clearClick: "clearClick", valueChange: "valueChange" }, ngImport: i0, template: "<label *ngIf=\"label\">&nbsp; {{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+SuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuffixComponent, selector: "spa-suffix", inputs: { label: "label", infoMessage: "infoMessage", copyContent: "copyContent", isHovered: "isHovered", clearContent: "clearContent", value: "value" }, outputs: { infoClick: "infoClick", copyClick: "copyClick", clearClick: "clearClick", valueChange: "valueChange" }, ngImport: i0, template: "<label *ngIf=\"label\">&nbsp; {{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon class=\"smallIcon\">content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon class=\"smallIcon\">close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon class=\"smallIcon\" style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n", styles: [".smallIcon{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuffixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-suffix', template: "<label *ngIf=\"label\">&nbsp; {{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon>close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n" }]
+            args: [{ selector: 'spa-suffix', template: "<label *ngIf=\"label\">&nbsp; {{label}}</label>\r\n<button mat-icon-button *ngIf=\"copyContent && isHovered\" (click)=\"onCopyClick($event)\" matTooltip=\"Copy Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon class=\"smallIcon\">content_copy</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"clearContent && isHovered\" (click)=\"onClearClick($event)\" matTooltip=\"Clear Content\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon class=\"smallIcon\">close</mat-icon>\r\n</button>\r\n<button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" [matTooltip]=\"infoMessage\" matTooltipPosition=\"above\" style=\"opacity: 1;\">\r\n  <mat-icon class=\"smallIcon\" style=\"color: steelblue;\">info</mat-icon>\r\n</button>\r\n", styles: [".smallIcon{font-size:14px}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }]; }, propDecorators: { label: [{
                 type: Input
             }], infoMessage: [{
@@ -2515,10 +2509,10 @@ class TextComponent {
     }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { appearance: "appearance", readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue", loadAction: "loadAction", required: "required", min: "min", max: "max", regex: "regex", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" [appearance]=\"appearance ?? 'legacy'\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" [appearance]=\"appearance ?? 'legacy'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && format=='text' && options.length > 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"myControl\" matInput [matAutocomplete]=\"auto\" [required]=\"required\" [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"multiDimension ? option[optionDisplay] : option\">\r\n      {{multiDimension ? option[optionDisplay] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { appearance: "appearance", readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", copyContent: "copyContent", clearContent: "clearContent", options: "options", optionDisplay: "optionDisplay", optionValue: "optionValue", loadAction: "loadAction", required: "required", min: "min", max: "max", regex: "regex", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" [appearance]=\"appearance ?? 'legacy'\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" [appearance]=\"appearance ?? 'legacy'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && format=='text' && options.length > 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"myControl\" matInput [matAutocomplete]=\"auto\" [required]=\"required\" [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"multiDimension ? option[optionDisplay] : option\">\r\n      {{multiDimension ? option[optionDisplay] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"font-size: 14px;\" color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" [appearance]=\"appearance ?? 'legacy'\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" [appearance]=\"appearance ?? 'legacy'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && format=='text' && options.length > 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"myControl\" matInput [matAutocomplete]=\"auto\" [required]=\"required\" [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"multiDimension ? option[optionDisplay] : option\">\r\n      {{multiDimension ? option[optionDisplay] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n" }]
+            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\"  [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\" ></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px\" [appearance]=\"appearance ?? 'legacy'\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length == 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" [appearance]=\"appearance ?? 'legacy'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && format=='text' && options.length > 0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [appearance]=\"appearance ?? 'legacy'\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"myControl\" matInput [matAutocomplete]=\"auto\" [required]=\"required\" [readonly]=\"readonly\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n    <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"multiDimension ? option[optionDisplay] : option\">\r\n      {{multiDimension ? option[optionDisplay] : option}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"font-size: 14px;\" color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n</mat-form-field>\r\n\r\n" }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }]; }, propDecorators: { appearance: [{
                 type: Input
             }], readonly: [{
@@ -2818,22 +2812,21 @@ class SelectCommonComponent {
         this.hoverChange = new EventEmitter();
     }
     ngOnInit() {
-        var _a;
         if (this.placeholder == "") {
             this.placeholder = "Select " + this.display;
         }
         if (this.options == null || this.options == undefined || this.options.length == 0) {
             this.getData(this.loadAction);
         }
-        this.setDefaultValue();
-        if ((_a = this.field) === null || _a === void 0 ? void 0 : _a.optionsSubject) {
-            this.subscription = this.field.optionsSubject.subscribe(newOptions => {
-                if (newOptions) {
-                    this.options = newOptions;
-                    // this.initFilter();
-                }
-            });
-        }
+        // this.setDefaultValue();
+        // if (this.field?.optionsSubject) {
+        //   this.subscription = this.field.optionsSubject.subscribe(newOptions => {
+        //     if (newOptions) {
+        //       this.options = newOptions;
+        //       // this.initFilter();
+        //     }
+        //   });
+        // }
     }
     ngOnChanges() {
         if (this.readonlyMode != "" && this.options.length > 0) {
@@ -2863,6 +2856,7 @@ class SelectCommonComponent {
         this.hoverChange.emit(false);
     }
     refresh(event) {
+        console.log("refresh clicked");
         event.stopPropagation();
         if (!this.loadAction) {
             return;
@@ -2870,12 +2864,26 @@ class SelectCommonComponent {
         const refreshAction = Object.assign(Object.assign({}, this.loadAction), { skipCache: true });
         this.getData(refreshAction);
     }
+    transformLoadUrl(action) {
+        if (!(action === null || action === void 0 ? void 0 : action.url) || !this.loadIDField || !this.data)
+            return action;
+        // Get the ID value from data using loadIDField
+        const idValue = this.data[this.loadIDField];
+        if (!idValue)
+            return action;
+        // Transform URL similar to table component
+        const urlParts = action.url.split('/');
+        return Object.assign(Object.assign({}, action), { url: `${urlParts[0]}/${urlParts[1]}/${idValue}` });
+    }
     getData(loadAction) {
         if (!loadAction)
             return;
         if (this.masterField)
             return; //if master field is set, then it will be loaded by the master field
-        this.dataService.CallApi(loadAction, "").subscribe((apiResponse) => {
+        const transformedAction = this.transformLoadUrl(loadAction);
+        console.log("TransformedLoadUrl", transformedAction);
+        // return;
+        this.dataService.CallApi(transformedAction, "").subscribe((apiResponse) => {
             if (apiResponse.success) {
                 this.options = apiResponse.data;
                 if (this.field) {
@@ -2898,7 +2906,7 @@ class SelectCommonComponent {
     }
 }
 SelectCommonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectCommonComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-SelectCommonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectCommonComponent, selector: "spa-select-common", inputs: { width: "width", readonly: "readonly", required: "required", defaultFirstValue: "defaultFirstValue", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", masterOptions: "masterOptions", masterField: "masterField", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra", nullable: "nullable", infoMessage: "infoMessage", copyContent: "copyContent", loadAction: "loadAction", field: "field" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered && !masterField\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
+SelectCommonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectCommonComponent, selector: "spa-select-common", inputs: { width: "width", readonly: "readonly", required: "required", defaultFirstValue: "defaultFirstValue", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", masterOptions: "masterOptions", masterField: "masterField", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra", nullable: "nullable", infoMessage: "infoMessage", copyContent: "copyContent", loadAction: "loadAction", loadIDField: "loadIDField", field: "field", data: "data" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered && !masterField\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectCommonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-select-common', template: "<mat-form-field *ngIf=\"readonlyMode==''\" floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width ?? '100%'}\" [hideRequiredMarker]=\"!required\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\">\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <ng-content select=\"[additionalButtons]\"></ng-content>\r\n    <button mat-icon-button *ngIf=\"loadAction && isHovered && !masterField\" (click)=\"refresh($event)\" matTooltip=\"Refresh\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">cached</mat-icon>\r\n    </button>\r\n    <spa-suffix [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
@@ -2942,8 +2950,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], loadAction: [{
                 type: Input
+            }], loadIDField: [{
+                type: Input
             }], field: [{
                 type: Input
+            }], data: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], hoverChange: [{
@@ -4743,10 +4755,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class SelectLiteComponent extends SelectCommonComponent {
 }
 SelectLiteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectLiteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectLiteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectLiteComponent, selector: "spa-select-lite", usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [field]=\"field\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n", styles: [""], dependencies: [{ kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "field"], outputs: ["valueChange", "hoverChange"] }] });
+SelectLiteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectLiteComponent, selector: "spa-select-lite", usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n", styles: [""], dependencies: [{ kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "loadIDField", "field", "data"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectLiteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select-lite', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [field]=\"field\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n" }]
+            args: [{ selector: 'spa-select-lite', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\n                   (valueChange)=\"valueChange.emit($event)\">\n</spa-select-common>\n" }]
         }] });
 
 class DetailsDialogLite {
@@ -4989,10 +5001,10 @@ class DetailsDialogLite {
     }
 }
 DetailsDialogLite.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogLite, deps: [{ token: i1$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }, { token: AuthService }, { token: TableConfigService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogLite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogLite, selector: "spa-detailsDialog-lite", 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-0\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [field]=\"field\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n        </mat-tab-group> -->\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.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.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.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: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+DetailsDialogLite.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogLite, selector: "spa-detailsDialog-lite", 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n        </mat-tab-group> -->\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.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.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.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: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogLite, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog-lite', 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-0\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [field]=\"field\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n        </mat-tab-group> -->\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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" }]
+            args: [{ selector: 'spa-detailsDialog-lite', 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-lite\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <!-- <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\r\n\r\n        </mat-tab-group> -->\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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" }]
         }], ctorParameters: function () {
         return [{ type: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                         type: Inject,
@@ -5054,10 +5066,10 @@ class SelectInternalComponent extends SelectCommonComponent {
     }
 }
 SelectInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectInternalComponent, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: DialogService }, { token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
-SelectInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectInternalComponent, selector: "spa-select-internal", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [field]=\"field\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "field"], outputs: ["valueChange", "hoverChange"] }] });
+SelectInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectInternalComponent, selector: "spa-select-internal", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "loadIDField", "field", "data"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectInternalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select-internal', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [field]=\"field\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n" }]
+            args: [{ selector: 'spa-select-internal', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n" }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: DialogService }, { type: ButtonService }]; }, propDecorators: { detailsConfig: [{
                 type: Input
             }] } });
@@ -5480,10 +5492,10 @@ class TableHeaderComponent {
     }
 }
 TableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, deps: [{ token: ButtonService }, { token: DialogService }, { token: MessageService }, { token: CsvService }], target: i0.ɵɵFactoryTarget.Component });
-TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { lastSearch: "lastSearch", config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton", data: "data", tileData: "tileData" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick", tileUnClick: "tileUnClick" }, ngImport: i0, template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }] });
+TableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderComponent, selector: "app-table-header", inputs: { lastSearch: "lastSearch", config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton", data: "data", tileData: "tileData" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick", tileUnClick: "tileUnClick" }, ngImport: i0, template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\"[lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-header', template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'app-table-header', template: "<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"onRefreshClick()\"></spa-filter>\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\"[lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: ButtonService }, { type: DialogService }, { type: MessageService }, { type: CsvService }]; }, propDecorators: { lastSearch: [{
                 type: Input
             }], config: [{
@@ -6287,10 +6299,10 @@ class DetailsDialogInternal {
     }
 }
 DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i1$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }, { token: AuthService }, { token: TableConfigService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "spa-detailsDialog-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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-0\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [field]=\"field\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.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: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { 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: "component", type: SelectInternalComponent, selector: "spa-select-internal", inputs: ["detailsConfig"] }, { kind: "component", type: TableLiteComponent, selector: "spa-table-lite", inputs: ["data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "spa-detailsDialog-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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.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: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { 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: "component", type: SelectInternalComponent, selector: "spa-select-internal", inputs: ["detailsConfig"] }, { kind: "component", type: TableLiteComponent, selector: "spa-table-lite", inputs: ["data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog-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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-0\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [field]=\"field\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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: 'spa-detailsDialog-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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select-internal\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-lite [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-lite>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                         type: Inject,
@@ -6352,10 +6364,10 @@ class SelectComponent extends SelectCommonComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: DialogService }, { token: ButtonService }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [field]=\"field\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "field"], outputs: ["valueChange", "hoverChange"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "loadIDField", "field", "data"], outputs: ["valueChange", "hoverChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [field]=\"field\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
+            args: [{ selector: 'spa-select', template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\r\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\" [multiple]=\"multiple\"\r\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\r\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\r\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\r\n                   (valueChange)=\"valueChange.emit($event)\"\r\n                   (hoverChange)=\"onHoverChange($event)\">\r\n  <ng-container additionalButtons>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\r\n      <mat-icon style=\"color: green;\">add</mat-icon>\r\n    </button>\r\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\r\n      <mat-icon color=\"primary\">launch</mat-icon>\r\n    </button>\r\n\r\n  </ng-container>\r\n</spa-select-common>\r\n", styles: [".suffix-icons{display:flex;align-items:center}.suffix-icons button{opacity:0;transition:opacity .3s ease}:host:hover .suffix-icons button{opacity:1}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }, { type: DialogService }, { type: ButtonService }]; }, propDecorators: { detailsConfig: [{
                 type: Input
             }] } });
@@ -6481,12 +6493,15 @@ class NavMenuComponent {
             this.router.navigate([link]);
         }
     }
+    getSubItems(capItem) {
+        return capItem.capSubItems.filter(x => x.showMenu && !x.isBool);
+    }
 }
 NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: StorageService }, { token: NotificationsService }, { token: i8.SocialAuthService }, { token: i1$3.BreakpointObserver }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"  matTooltip=\"Support\">\r\n      <mat-icon >help</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu\">\r\n              <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.privacyUrl\" target=\"_blank\">Privacy Policy</a>.</label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#e6f4ff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"  matTooltip=\"Support\">\r\n      <mat-icon >help</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of getSubItems(cap)\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu\">\r\n              <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.privacyUrl\" target=\"_blank\">Privacy Policy</a>.</label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#e6f4ff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"  matTooltip=\"Support\">\r\n      <mat-icon >help</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu\">\r\n              <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.privacyUrl\" target=\"_blank\">Privacy Policy</a>.</label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#e6f4ff}\n"] }]
+            args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"  matTooltip=\"Support\">\r\n      <mat-icon >help</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of getSubItems(cap)\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu\">\r\n              <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.privacyUrl\" target=\"_blank\">Privacy Policy</a>.</label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#e6f4ff}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: AuthService }, { type: StorageService }, { type: NotificationsService }, { type: i8.SocialAuthService }, { type: i1$3.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
                 type: Input
             }], footer: [{
@@ -7208,10 +7223,10 @@ class DetailsDialog {
     }
 }
 DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i1$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }, { token: AuthService }, { token: TableConfigService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "spa-detailsDialog", 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-0\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [field]=\"field\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\r\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\r\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.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: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { 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: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "spa-detailsDialog", 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\r\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\r\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.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: i13.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { 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: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog', 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-0\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [field]=\"field\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\r\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\r\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+            args: [{ selector: 'spa-detailsDialog', 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\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-bottom: 10px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\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-steps *ngIf=\"stepConfig && details\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\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)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n\r\n        <mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs)\">\r\n            <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n\r\n              <ng-template matTabLabel>\r\n                <span>{{tbl.tabTitle ?? 'Untitled'}}</span>\r\n              </ng-template>\r\n\r\n              <spa-table-internal [config]=\"tbl\" [reload]=\"tableReload\" (dataLoad)=\"loadData(formConfig.loadAction, false)\"></spa-table-internal>\r\n\r\n            </mat-tab>\r\n          </ng-container>\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\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\r\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\r\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"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      <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;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                         type: Inject,
@@ -9976,10 +9991,10 @@ class RolesComponent {
     }
 }
 RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$2.Router }, { token: AuthService }, { token: DataServiceLib }, { token: DialogService }, { 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      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\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  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"100px\" style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"100px\" style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"100px\" style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }] });
+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      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\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          <!-- Main item-->\r\n          <mat-checkbox  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"100px\" style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n\r\n              <!-- Sub Item -->\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"100px\" style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <!-- Sub Sub Items -->\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"100px\" style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }] });
 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      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\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  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"100px\" style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"100px\" style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"100px\" style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\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"] }]
+            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      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\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          <!-- Main item-->\r\n          <mat-checkbox  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"100px\" style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n\r\n              <!-- Sub Item -->\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"100px\" style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <!-- Sub Sub Items -->\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"100px\" style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$2.Router }, { type: AuthService }, { type: DataServiceLib }, { type: DialogService }, { type: i4.MatDialog }, { type: MessageService }]; } });
 
 class CreateAccountComponent {
@@ -10284,5 +10299,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccountsComponent, Action, ActivityComponent, AdminModule, AlertComponent, AlertMessage, AlertMessages, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, MultiSelectComponent, MultiTextComponent, NavMenuComponent, NumberComponent, OptionComponent, PageComponent, PageConfig, PositionsComponent, ProfileComponent, RecoverAccountComponent, RolesComponent, SearchComponent, SearchConfig, SecurityConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepConfig, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, dialogOptions, messageDialog, viewerDialog };
+export { AccountsComponent, Action, ActivityComponent, AdminModule, AlertComponent, AlertMessage, AlertMessages, ApiResponse, AppConfig, AttachComponent, AuthService, CapItem, ChangePasswordComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, MultiSelectComponent, MultiTextComponent, NavMenuComponent, NumberComponent, OptionComponent, PageComponent, PageConfig, PositionsComponent, ProfileComponent, RecoverAccountComponent, RoleAccess, RolesComponent, SearchComponent, SearchConfig, SecurityConfig, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepConfig, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, dialogOptions, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map