tin-spa 2.13.2 → 2.13.4

package/fesm2020/tin-spa.mjs

@@ -784,9 +784,10 @@ class DetailsDialogProcessor {
         const tableConfigs = detailsConfig.tableConfigs;
         const formConfig = detailsConfig.formConfig;
         const stepConfig = detailsConfig.stepConfig;
+        const statusConfig = detailsConfig.statusConfig;
         const buttons = detailsConfig.buttons;
         formConfig.mode = formConfig.mode ?? "view";
-        return { tableConfig, tableConfigs, formConfig, stepConfig, buttons };
+        return { tableConfig, tableConfigs, formConfig, stepConfig, statusConfig, buttons };
     }
     static setHeroValue(detailsConfig, details) {
         if ((detailsConfig.formConfig.mode == "create") && detailsConfig.heroField && detailsConfig.heroValue) {
@@ -4981,10 +4982,10 @@ class AlertComponent {
     }
 }
 AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlertComponent, selector: "spa-alert", inputs: { alertMessages: "alertMessages", data: "data" }, ngImport: i0, template: "<div *ngIf=\"hasAlertMessages()\" class=\"alert alert-secondary\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages(); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('success')\" class=\"alert alert-success\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('success'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('info')\" class=\"alert alert-info\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('info'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('warn')\" class=\"alert alert-warning\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('warn'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('critical')\" class=\"alert alert-danger\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('critical'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\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"] }] });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlertComponent, selector: "spa-alert", inputs: { alertMessages: "alertMessages", data: "data" }, ngImport: i0, template: "<div *ngIf=\"hasAlertMessages()\" class=\"alert alert-secondary\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages(); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('success')\" class=\"alert alert-success\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('success'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('info')\" class=\"alert alert-info\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('info'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('warn')\" class=\"alert alert-warning\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('warn'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('critical')\" class=\"alert alert-danger\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('critical'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n", styles: [".alert-compact{padding-top:7px;padding-bottom:7px}\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-alert', template: "<div *ngIf=\"hasAlertMessages()\" class=\"alert alert-secondary\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages(); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('success')\" class=\"alert alert-success\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('success'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('info')\" class=\"alert alert-info\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('info'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('warn')\" class=\"alert alert-warning\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('warn'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('critical')\" class=\"alert alert-danger\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('critical'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n" }]
+            args: [{ selector: 'spa-alert', template: "<div *ngIf=\"hasAlertMessages()\" class=\"alert alert-secondary\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages(); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('success')\" class=\"alert alert-success\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('success'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('info')\" class=\"alert alert-info\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('info'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('warn')\" class=\"alert alert-warning\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('warn'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"hasAlertMessages('critical')\" class=\"alert alert-danger\" [ngClass]=\"{'alert-compact': alertMessages.compact}\" style=\"font-size: 14px;margin-bottom: 5px;\" role=\"alert\">\r\n  <p *ngIf=\"alertMessages.subject\">{{alertMessages.subject}}</p>\r\n  <ng-container *ngFor=\"let msg of getAlertMessages('critical'); let last = last\">\r\n    <label *ngIf=\"testVisible(msg)\">{{msg.content}}</label>\r\n    <br *ngIf=\"!last\">\r\n  </ng-container>\r\n</div>\r\n", styles: [".alert-compact{padding-top:7px;padding-bottom:7px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { alertMessages: [{
                 type: Input
             }], data: [{
@@ -5005,6 +5006,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'spa-select-lite', 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</spa-select-common>\r\n" }]
         }] });
 
+class StatusesComponent {
+    // Check if the entire component should be visible
+    isComponentVisible() {
+        if (!this.config || !this.data)
+            return false;
+        return this.config.hiddenCondition ? !this.config.hiddenCondition(this.data) : true;
+    }
+    // Check if individual status item should be visible
+    isItemVisible(item) {
+        if (!this.data)
+            return false;
+        return item.hiddenCondition ? !item.hiddenCondition(this.data) : true;
+    }
+    // Get the icon based on status value and state conditions
+    getIcon(item) {
+        if (!this.data || !item.states)
+            return '';
+        const statusValue = this.data[item.field];
+        const matchingState = item.states.find(state => state.condition(statusValue));
+        return matchingState ? matchingState.icon : '';
+    }
+    // Get the icon color based on status value and state conditions
+    getIconColor(item) {
+        if (!this.data || !item.states)
+            return '';
+        const statusValue = this.data[item.field];
+        const matchingState = item.states.find(state => state.condition(statusValue));
+        return matchingState ? matchingState.color : '';
+    }
+}
+StatusesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StatusesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatusesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StatusesComponent, selector: "spa-statuses", inputs: { config: "config", data: "data" }, ngImport: i0, template: "<div *ngIf=\"isComponentVisible()\" class=\"statuses-container\">\r\n  <ng-container *ngFor=\"let item of config.items\">\r\n    <button \r\n      *ngIf=\"isItemVisible(item)\"\r\n      mat-stroked-button \r\n      class=\"status-button\">\r\n      {{item.name}} \r\n      <mat-icon [ngStyle]=\"{'color': getIconColor(item)}\">{{getIcon(item)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>", styles: [".statuses-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;margin-bottom:4px}.status-button{margin-right:10px;display:flex;align-items:center;gap:8px}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StatusesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-statuses', template: "<div *ngIf=\"isComponentVisible()\" class=\"statuses-container\">\r\n  <ng-container *ngFor=\"let item of config.items\">\r\n    <button \r\n      *ngIf=\"isItemVisible(item)\"\r\n      mat-stroked-button \r\n      class=\"status-button\">\r\n      {{item.name}} \r\n      <mat-icon [ngStyle]=\"{'color': getIconColor(item)}\">{{getIcon(item)}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>", styles: [".statuses-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;margin-bottom:4px}.status-button{margin-right:10px;display:flex;align-items:center;gap:8px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
 class DetailsDialogLite {
     constructor(breakpointObserver, loaderService, dataService, messageService, dialogRef, detailsConfig, buttonService, dialogService, authService, tableConfigService) {
         this.breakpointObserver = breakpointObserver;
@@ -5038,11 +5080,12 @@ class DetailsDialogLite {
         });
     }
     ngOnInit() {
-        const { tableConfig, tableConfigs, formConfig, stepConfig, buttons } = DetailsDialogProcessor.initializeConfigs(this.detailsConfig);
+        const { tableConfig, tableConfigs, formConfig, stepConfig, statusConfig, buttons } = DetailsDialogProcessor.initializeConfigs(this.detailsConfig);
         this.tableConfig = tableConfig;
         this.tableConfigs = tableConfigs;
         this.formConfig = formConfig;
         this.stepConfig = stepConfig;
+        this.statusConfig = statusConfig;
         this.buttons = buttons;
         let resp = DetailsDialogProcessor.handleFormMode(this.detailsConfig, this.formConfig);
         if (resp.loadByAction) {
@@ -5318,7 +5361,20 @@ class DetailsDialogLite {
                     button.onSuccess(apiResponse.data, this.details);
                 }
                 if (button.keepOpen) {
-                    this.refreshData();
+                    if (button.name === 'create' && apiResponse.data) {
+                        this.details = apiResponse.data;
+                        if (this.detailsConfig.heroField && apiResponse.data[this.detailsConfig.heroField]) {
+                            this.detailsConfig.heroValue = apiResponse.data[this.detailsConfig.heroField];
+                            this.formConfig.heroField = this.detailsConfig.heroField;
+                            this.formConfig.heroValue = this.detailsConfig.heroValue;
+                        }
+                        this.formConfig.mode = 'edit';
+                        this.setTitleAction();
+                        this.isLoadComplete = true;
+                    }
+                    else {
+                        this.refreshData();
+                    }
                 }
                 else {
                     this.dialogRef.close({ message: 'success', data: { ...apiResponse, data: button.name == 'create' ? apiResponse.data : this.details } });
@@ -5339,10 +5395,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-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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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\" (click)=\"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.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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-statuses *ngIf=\"statusConfig && details\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\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>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" (click)=\"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.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "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: 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-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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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\" (click)=\"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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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-statuses *ngIf=\"statusConfig && details\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\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>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" (click)=\"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,
                     args: [MAT_DIALOG_DATA]
@@ -6615,11 +6671,12 @@ class DetailsDialogInternal {
         });
     }
     ngOnInit() {
-        const { tableConfig, tableConfigs, formConfig, stepConfig, buttons } = DetailsDialogProcessor.initializeConfigs(this.detailsConfig);
+        const { tableConfig, tableConfigs, formConfig, stepConfig, statusConfig, buttons } = DetailsDialogProcessor.initializeConfigs(this.detailsConfig);
         this.tableConfig = tableConfig;
         this.tableConfigs = tableConfigs;
         this.formConfig = formConfig;
         this.stepConfig = stepConfig;
+        this.statusConfig = statusConfig;
         this.buttons = buttons;
         let resp = DetailsDialogProcessor.handleFormMode(this.detailsConfig, this.formConfig);
         if (resp.loadByAction) {
@@ -6895,7 +6952,20 @@ class DetailsDialogInternal {
                     button.onSuccess(apiResponse.data, this.details);
                 }
                 if (button.keepOpen) {
-                    this.refreshData();
+                    if (button.name === 'create' && apiResponse.data) {
+                        this.details = apiResponse.data;
+                        if (this.detailsConfig.heroField && apiResponse.data[this.detailsConfig.heroField]) {
+                            this.detailsConfig.heroValue = apiResponse.data[this.detailsConfig.heroField];
+                            this.formConfig.heroField = this.detailsConfig.heroField;
+                            this.formConfig.heroValue = this.detailsConfig.heroValue;
+                        }
+                        this.formConfig.mode = 'edit';
+                        this.setTitleAction();
+                        this.isLoadComplete = true;
+                    }
+                    else {
+                        this.refreshData();
+                    }
                 }
                 else {
                     this.dialogRef.close({ message: 'success', data: { ...apiResponse, data: button.name == 'create' ? apiResponse.data : this.details } });
@@ -6916,10 +6986,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-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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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              \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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\" (click)=\"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.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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", "activeTab", "inTab"], outputs: ["dataLoad", "actionSuccess", "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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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-statuses *ngIf=\"statusConfig && details\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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              \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" (click)=\"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.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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", "activeTab", "inTab"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "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: 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-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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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              \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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\" (click)=\"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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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-statuses *ngIf=\"statusConfig && details\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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              \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" (click)=\"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,
                     args: [MAT_DIALOG_DATA]
@@ -7674,11 +7744,12 @@ class DetailsDialog {
         });
     }
     ngOnInit() {
-        const { tableConfig, tableConfigs, formConfig, stepConfig, buttons } = DetailsDialogProcessor.initializeConfigs(this.detailsConfig);
+        const { tableConfig, tableConfigs, formConfig, stepConfig, statusConfig, buttons } = DetailsDialogProcessor.initializeConfigs(this.detailsConfig);
         this.tableConfig = tableConfig;
         this.tableConfigs = tableConfigs;
         this.formConfig = formConfig;
         this.stepConfig = stepConfig;
+        this.statusConfig = statusConfig;
         this.buttons = buttons;
         let resp = DetailsDialogProcessor.handleFormMode(this.detailsConfig, this.formConfig);
         if (resp.loadByAction) {
@@ -7951,10 +8022,23 @@ class DetailsDialog {
                     this.messageService.toast("Updated");
                 }
                 if (button.onSuccess) {
-                    button.onSuccess(apiResponse, this.details);
+                    button.onSuccess(apiResponse.data, this.details);
                 }
                 if (button.keepOpen) {
-                    this.refreshData();
+                    if (button.name === 'create' && apiResponse.data) {
+                        this.details = apiResponse.data;
+                        if (this.detailsConfig.heroField && apiResponse.data[this.detailsConfig.heroField]) {
+                            this.detailsConfig.heroValue = apiResponse.data[this.detailsConfig.heroField];
+                            this.formConfig.heroField = this.detailsConfig.heroField;
+                            this.formConfig.heroValue = this.detailsConfig.heroValue;
+                        }
+                        this.formConfig.mode = 'edit';
+                        this.setTitleAction();
+                        this.isLoadComplete = true;
+                    }
+                    else {
+                        this.refreshData();
+                    }
                 }
                 else {
                     this.dialogRef.close({ message: 'success', data: { ...apiResponse, data: button.name == 'create' ? apiResponse.data : this.details } });
@@ -7975,10 +8059,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-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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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 \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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\" (click)=\"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.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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", "activeTab", "inTab"], outputs: ["dataLoad", "actionSuccess", "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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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-statuses *ngIf=\"statusConfig && details\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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 \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" (click)=\"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.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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", "activeTab", "inTab"], outputs: ["dataLoad", "actionSuccess", "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: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "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-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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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 \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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\" (click)=\"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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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, detailsConfig.causeTableRefresh)\"><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-statuses *ngIf=\"statusConfig && details\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\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\" (selectedTabChange)=\"onTabChange($event)\">\r\n\r\n          <ng-container *ngFor=\"let tbl of tableConfigService.getVisibleTableConfigs(tableConfigs) ; let i = index\">\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 \r\n                [config]=\"tbl\" \r\n                [reload]=\"tableReload\" \r\n                [inTab]=\"true\"\r\n                [activeTab]=\"selectedTabIndex === i\"\r\n                (actionSuccess)=\"tbl.causeFormRefresh ? loadData(formConfig.loadAction, false) : null\">\r\n              </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>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" (click)=\"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,
                     args: [MAT_DIALOG_DATA]
@@ -10193,7 +10277,7 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         AlertComponent, EmailComponent, PageComponent, SelectCommonComponent, SelectInternalComponent, SuffixComponent, SelectContextDirective, SelectLiteComponent,
         TableLiteComponent, DetailsDialogLite, ApprovalsComponent, ApprovalsConfigComponent, MultiTextComponent,
         MultiSelectComponent, SelectBitwiseComponent, AppModelsComponent, NotificationsConfigComponent,
-        HtmlComponent, NotesComponent, CapsulesComponent, CardsComponent, TabsComponent], imports: [SpaMatModule,
+        HtmlComponent, NotesComponent, CapsulesComponent, CardsComponent, TabsComponent, StatusesComponent], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule,
         NgxDocViewerModule], exports: [TinSpaComponent,
@@ -10235,7 +10319,7 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         WelcomeComponent, EmailComponent, PageComponent,
         HtmlComponent,
         NotesComponent,
-        CapsulesComponent, TabsComponent] });
+        CapsulesComponent, TabsComponent, StatusesComponent] });
 TinSpaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, providers: [
         { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
         { provide: LocationStrategy, useClass: HashLocationStrategy },
@@ -10260,7 +10344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         AlertComponent, EmailComponent, PageComponent, SelectCommonComponent, SelectInternalComponent, SuffixComponent, SelectContextDirective, SelectLiteComponent,
                         TableLiteComponent, DetailsDialogLite, ApprovalsComponent, ApprovalsConfigComponent, MultiTextComponent,
                         MultiSelectComponent, SelectBitwiseComponent, AppModelsComponent, NotificationsConfigComponent,
-                        HtmlComponent, NotesComponent, CapsulesComponent, CardsComponent, TabsComponent
+                        HtmlComponent, NotesComponent, CapsulesComponent, CardsComponent, TabsComponent, StatusesComponent
                     ],
                     imports: [
                         SpaMatModule,
@@ -10308,7 +10392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         WelcomeComponent, EmailComponent, PageComponent,
                         HtmlComponent,
                         NotesComponent,
-                        CapsulesComponent, TabsComponent
+                        CapsulesComponent, TabsComponent, StatusesComponent
                     ],
                     providers: [
                         { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
@@ -11475,5 +11559,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, CapsulesComponent, ChangePasswordComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HtmlComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, MultiSelectComponent, MultiTextComponent, NavMenuComponent, NotesComponent, NotesConfig, NumberComponent, OptionComponent, PageComponent, PageConfig, PositionsComponent, ProfileComponent, RecoverAccountComponent, RoleAccess, RolesComponent, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, Step, StepConfig, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TabsComponent, 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, CapsulesComponent, ChangePasswordComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FinAccount, FormComponent, FormConfig, GradesComponent, HtmlComponent, HttpService, IndexModule, InventoryComponent, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LogService, LoginComponent, LogsComponent, MessageService, MoneyComponent, MultiSelectComponent, MultiTextComponent, NavMenuComponent, NotesComponent, NotesConfig, NumberComponent, OptionComponent, PageComponent, PageConfig, PositionsComponent, ProfileComponent, RecoverAccountComponent, RoleAccess, RolesComponent, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SuppliersComponent, TableComponent, TableConfig, TabsComponent, TasksComponent, TextComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, Transaction, TransactionsComponent, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, addRoleDialog, dialogOptions, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map