tin-spa 2.1.60 → 2.2.1

package/fesm2020/tin-spa.mjs

@@ -449,14 +449,14 @@ class DetailsDialogProcessor {
     static processDetailsConfig(detailsConfig, row) {
         const updatedDetailsConfig = Core.getClone(detailsConfig);
         updatedDetailsConfig.details = row;
-        updatedDetailsConfig.config.mode = "view";
-        updatedDetailsConfig.setHero = updatedDetailsConfig.setHero ?? false;
+        updatedDetailsConfig.formConfig.mode = "view";
+        // updatedDetailsConfig.setHero = updatedDetailsConfig.setHero ?? false;
         if (updatedDetailsConfig.heroField) {
             updatedDetailsConfig.heroValue = row[updatedDetailsConfig.heroField];
             function updateTableConfig(tableConfig) {
                 tableConfig.heroField = updatedDetailsConfig.heroField;
                 tableConfig.heroValue = updatedDetailsConfig.heroValue;
-                tableConfig.setHero = updatedDetailsConfig.setHero;
+                // tableConfig.setHero = updatedDetailsConfig.setHero;
                 tableConfig.searchConfig = null;
                 tableConfig.tileConfig = null;
                 tableConfig.parentData = updatedDetailsConfig.details;
@@ -488,15 +488,21 @@ class DetailsDialogProcessor {
     static initializeConfigs(detailsConfig) {
         const tableConfig = detailsConfig.tableConfig;
         const tableConfigs = detailsConfig.tableConfigs;
-        const formConfig = detailsConfig.config;
+        const formConfig = detailsConfig.formConfig;
         const buttons = detailsConfig.buttons;
         formConfig.mode = formConfig.mode ?? "view";
         return { tableConfig, tableConfigs, formConfig, buttons };
     }
     static setHeroValue(detailsConfig, details) {
-        if (detailsConfig.heroField) {
-            detailsConfig.heroValue = details[detailsConfig.heroField];
+        console.log(detailsConfig);
+        if ((detailsConfig.formConfig.mode == "create") && detailsConfig.heroField && detailsConfig.heroValue) {
+            details[detailsConfig.heroField] = detailsConfig.heroValue;
+            return;
         }
+        // if (detailsConfig.config.mode != "create" && detailsConfig.heroField) {
+        //   detailsConfig.heroValue = details[detailsConfig.heroField];
+        // }
+        console.log(detailsConfig);
     }
     static handleFormMode(detailsConfig, formConfig) {
         let details;
@@ -504,7 +510,7 @@ class DetailsDialogProcessor {
         let loadByAction = false;
         if (formConfig.mode === "create") {
             details = Core.generateObject(formConfig.fields);
-            this.setHeroValue(detailsConfig, details);
+            // this.setHeroValue(detailsConfig, details);
         }
         else {
             let resp = this.loadDetailsData(detailsConfig, formConfig);
@@ -3281,6 +3287,7 @@ class DetailsDialogInternal {
         this.tableConfigs = tableConfigs;
         this.formConfig = formConfig;
         this.buttons = buttons;
+        // console.log(this.detailsConfig)
         let resp = DetailsDialogProcessor.handleFormMode(this.detailsConfig, this.formConfig);
         if (resp.loadByAction) {
             this.loadByAction = true;
@@ -3289,6 +3296,7 @@ class DetailsDialogInternal {
         }
         else {
             this.details = resp.details;
+            DetailsDialogProcessor.setHeroValue(this.detailsConfig, this.details);
             this.loadByAction = false;
             this.isLoadComplete = true;
         }
@@ -3310,6 +3318,7 @@ class DetailsDialogInternal {
                 if (apiResponse.success) {
                     this.details = apiResponse.data;
                     this.isLoadComplete = true;
+                    // DetailsDialogProcessor.setHeroValue(this.detailsConfig, this.details);
                 }
                 else {
                     this.messageService.toast("Error: " + apiResponse.message);
@@ -3894,14 +3903,14 @@ class TableInternalComponent {
             return;
         }
         let conf = {
-            config: this.config.formConfig,
+            formConfig: this.config.formConfig,
             buttons: this.config.buttons,
             details: row,
         };
         if (button.detailsConfig) {
             conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
         }
-        conf.config.mode = "view";
+        conf.formConfig.mode = "view";
         const dialogRef = this.dialog.open(DetailsDialogInternal, {
             width: "900px",
             data: conf
@@ -3926,13 +3935,13 @@ class TableInternalComponent {
         }
         this.config.formConfig.mode = "create";
         let conf = {
-            config: this.config.formConfig,
+            formConfig: this.config.formConfig,
             buttons: this.config.buttons,
         };
         if (button.detailsConfig) {
             conf = button.detailsConfig;
         }
-        conf.config.mode = "create";
+        conf.formConfig.mode = "create";
         conf.heroField = this.config?.heroField;
         conf.heroValue = this.config?.heroValue;
         const dialogRef = this.dialog.open(DetailsDialogInternal, {
@@ -3963,14 +3972,14 @@ class TableInternalComponent {
         }
         this.config.formConfig.mode = "edit";
         let conf = {
-            config: this.config.formConfig,
+            formConfig: this.config.formConfig,
             buttons: this.config.buttons,
             details: row,
         };
         if (button.detailsConfig) {
             conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
         }
-        conf.config.mode = "edit";
+        conf.formConfig.mode = "edit";
         const dialogRef = this.dialog.open(DetailsDialogInternal, {
             width: "900px",
             data: conf
@@ -4102,7 +4111,7 @@ class DetailsDialog {
         if (resp.loadByAction) {
             this.loadByAction = true;
             formConfig.loadAction = resp.action;
-            this.loadData(resp.action);
+            this.loadData(resp.action, false);
         }
         else {
             this.details = resp.details;
@@ -4118,7 +4127,7 @@ class DetailsDialog {
         this.deleteButton = deleteButton;
         this.setTitleAction();
     }
-    loadData(action) {
+    loadData(action, reload) {
         console.log("loading details");
         if (action && this.loadByAction) {
             console.log("Loading action");
@@ -4127,6 +4136,8 @@ class DetailsDialog {
                 if (apiResponse.success) {
                     this.details = apiResponse.data;
                     this.isLoadComplete = true;
+                    if (reload)
+                        this.tableReload.next(true);
                 }
                 else {
                     this.messageService.toast("Error: " + apiResponse.message);
@@ -4308,10 +4319,10 @@ class DetailsDialog {
     }
 }
 DetailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, deps: [{ token: i3$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table-internal [config]=\"tableConfig\" [reload]=\"tableReload\"  ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n    <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n      <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n        <ng-template matTabLabel>\r\n          <span>{{tbl.title}}</span>\r\n        </ng-template>\r\n\r\n        <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" ></spa-table-internal>\r\n\r\n      </mat-tab>\r\n    </ng-container>\r\n\r\n\r\n</mat-tab-group>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\"\r\n      (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\"\r\n      (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\" >\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button  *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+DetailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialog, selector: "app-viewModel", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table-internal [config]=\"tableConfig\" [reload]=\"tableReload\"  ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n    <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n      <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n        <ng-template matTabLabel>\r\n          <span>{{tbl.title}}</span>\r\n        </ng-template>\r\n\r\n        <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" ></spa-table-internal>\r\n\r\n      </mat-tab>\r\n    </ng-container>\r\n\r\n\r\n</mat-tab-group>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\"\r\n      (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\"\r\n      (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\" >\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button  *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TableInternalComponent, selector: "spa-table-internal", inputs: ["hideTitle", "data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table-internal [config]=\"tableConfig\" [reload]=\"tableReload\"  ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n    <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n      <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n        <ng-template matTabLabel>\r\n          <span>{{tbl.title}}</span>\r\n        </ng-template>\r\n\r\n        <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" ></spa-table-internal>\r\n\r\n      </mat-tab>\r\n    </ng-container>\r\n\r\n\r\n</mat-tab-group>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\"\r\n      (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\"\r\n      (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\" >\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button  *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+            args: [{ selector: 'app-viewModel', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\">\r\n\r\n    <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n    </div>\r\n\r\n    <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n<p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n<spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<div *ngIf=\"tableConfig\" class=\"mt-3\" style=\" font-size: 14px;\">\r\n  <spa-table-internal [config]=\"tableConfig\" [reload]=\"tableReload\"  ></spa-table-internal>\r\n</div>\r\n\r\n<mat-tab-group *ngIf=\"tableConfigs\">\r\n\r\n    <ng-container *ngFor=\"let tbl of tableConfigs\">\r\n\r\n      <mat-tab *ngIf=\"testVisibleTab(tbl)\">\r\n        <ng-template matTabLabel>\r\n          <span>{{tbl.title}}</span>\r\n        </ng-template>\r\n\r\n        <spa-table-internal [config]=\"tbl\" [hideTitle]=\"true\" [reload]=\"tableReload\" ></spa-table-internal>\r\n\r\n      </mat-tab>\r\n    </ng-container>\r\n\r\n\r\n</mat-tab-group>\r\n\r\n\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n\r\n  <div>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\"\r\n      (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\"\r\n      (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n    </button>\r\n\r\n    <ng-container *ngFor=\"let btn of extraButtons\" >\r\n      <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name}}\r\n      </button>\r\n    </ng-container>\r\n\r\n\r\n    <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n  </div>\r\n\r\n  <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n    <ng-container *ngFor=\"let btn of extraButtons\">\r\n      <button  *ngIf=\"testVisible(details,btn.name)\" mat-icon-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\"\r\n        (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n  </div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4695,14 +4706,14 @@ class TableComponent {
             return;
         }
         let conf = {
-            config: this.config.formConfig,
+            formConfig: this.config.formConfig,
             buttons: this.config.buttons,
             details: row,
         };
         if (button.detailsConfig) {
             conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
         }
-        conf.config.mode = "view";
+        conf.formConfig.mode = "view";
         const dialogRef = this.dialog.open(DetailsDialog, {
             width: "900px",
             data: conf
@@ -4727,13 +4738,13 @@ class TableComponent {
         }
         this.config.formConfig.mode = "create";
         let conf = {
-            config: this.config.formConfig,
+            formConfig: this.config.formConfig,
             buttons: this.config.buttons,
         };
         if (button.detailsConfig) {
             conf = button.detailsConfig;
         }
-        conf.config.mode = "create";
+        conf.formConfig.mode = "create";
         conf.heroField = this.config?.heroField;
         conf.heroValue = this.config?.heroValue;
         const dialogRef = this.dialog.open(DetailsDialog, {
@@ -4763,14 +4774,14 @@ class TableComponent {
             return;
         }
         let conf = {
-            config: this.config.formConfig,
+            formConfig: this.config.formConfig,
             buttons: this.config.buttons,
             details: row,
         };
         if (button.detailsConfig) {
             conf = DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
         }
-        conf.config.mode = "edit";
+        conf.formConfig.mode = "edit";
         const dialogRef = this.dialog.open(DetailsDialog, {
             width: "900px",
             data: conf