tin-spa 2.3.0 → 2.3.2

package/fesm2015/tin-spa.mjs

@@ -261,6 +261,20 @@ class Core {
             }
         });
     }
+    static testVisible(config, data, f) {
+        if (f.hidden)
+            return false;
+        if (config.mode == 'create' && f.hideOnCreate) {
+            return false;
+        }
+        if (config.mode != 'create' && f.hideOnExists) {
+            return false;
+        }
+        if (f.hiddenCondition) {
+            return !f.hiddenCondition(data);
+        }
+        return true;
+    }
     static validateObject(fields, data) {
         var _a;
         console.log("Validations");
@@ -301,6 +315,8 @@ class Core {
         //   return field.options[0][field.optionValue]
         // }
         if (field.defaultValue) {
+            if (field.type == 'date' || field.type == 'datetime' && field.defaultValue == 'now')
+                return this.nowDate(true);
             return field.defaultValue;
         }
         switch (field.type) {
@@ -311,7 +327,7 @@ class Core {
             case 'number':
                 return 0;
             case 'date':
-                return '';
+                return this.nowDate(true);
             case 'checkbox':
                 return false;
             case 'select':
@@ -1213,8 +1229,12 @@ class DataServiceLib {
                 { name: 'gender', alias: 'Gender', type: 'select', options: this.genders, required: true },
                 { name: 'firstName', type: 'text', required: true },
                 { name: 'lastName', type: 'text', required: true },
+                { name: 'dateOfBirth', type: 'date', alias: 'Date of Birth', required: true },
+                { name: 'employmentDate', type: 'date', alias: 'Employment Date', required: true },
                 { name: 'departmentID', alias: 'Department', type: 'select', options: [], optionDisplay: 'name', optionValue: 'departmentID' },
                 { name: 'positionID', alias: 'Position', type: 'select', options: [], optionDisplay: 'name', optionValue: 'positionID', masterField: 'departmentID', },
+                { name: 'employmentStatus', alias: 'Employment Status', type: 'select', options: [], optionDisplay: 'name', optionValue: 'value' },
+                { name: 'activeStatus', alias: 'Active Status', type: 'select', options: [], optionDisplay: 'name', optionValue: 'value' },
                 { name: 'address', type: 'text', rows: 2, span: true },
                 { name: 'phone', type: 'text' },
                 { name: 'email', type: 'text' },
@@ -1226,12 +1246,12 @@ class DataServiceLib {
             minColumns: ['name', 'departmentName', 'positionName'],
             flatButtons: true,
             columns: [
-                { name: 'employeeID', type: 'number', alias: 'ID' },
                 { name: 'name', type: 'text' },
-                { name: 'nationalID', type: 'text' },
-                { name: 'genderName', type: 'text' },
-                { name: 'departmentName', type: 'text' },
-                { name: 'positionName', type: 'text' },
+                { name: 'genderName', type: 'text', alias: 'Gender' },
+                { name: 'departmentName', type: 'text', alias: 'Department' },
+                { name: 'positionName', type: 'text', alias: 'Position' },
+                { name: 'employmentStatusName', type: 'text', alias: 'Employment Status' },
+                { name: 'activeStatusName', type: 'text', alias: 'Active Status' },
             ],
             buttons: [
                 { name: 'create', display: 'Create', dialog: true, action: { url: 'general/employees?action=create', method: 'post' } },
@@ -1408,6 +1428,8 @@ class DataServiceLib {
         this.CallApi({ url: 'general/employeesmeta/x' }, "").subscribe((apiResponse) => {
             this.employeeFormConfig.fields.find(x => x.name == 'departmentID').options = apiResponse.data.departments;
             this.employeeFormConfig.fields.find(x => x.name == 'positionID').masterOptions = apiResponse.data.positions;
+            this.employeeFormConfig.fields.find(x => x.name == 'employmentStatus').options = apiResponse.data.employmentStatuses;
+            this.employeeFormConfig.fields.find(x => x.name == 'activeStatus').options = apiResponse.data.activeStatuses;
         });
     }
     //--------------------------Positions-------------------------
@@ -1862,16 +1884,26 @@ class DateComponent {
         this.placeholder = "";
         this.width = "100%";
         this.valueChange = new EventEmitter();
-        this.control = new FormControl(new Date());
     }
     ngOnInit() {
+        this.initializeDateControls();
+    }
+    ngOnChanges(changes) {
+        if (changes['readonly']) {
+            this.updateControlState();
+        }
+        if (changes['value']) {
+            this.control.setValue(new Date(this.value));
+        }
+    }
+    initializeDateControls() {
         this.minDate = new FormControl(new Date(this.min));
         this.maxDate = new FormControl(new Date(this.max));
-        if (!this.value || this.value == "") {
-            this.control = new FormControl(new Date());
-            ;
-        }
-        setTimeout(() => { this.onChangeEvent(); }, 5);
+        this.control = new FormControl({ value: new Date(this.value), disabled: this.readonly });
+        this.updateControlState();
+        setTimeout(() => this.onChangeEvent(), 5);
+    }
+    updateControlState() {
         if (this.readonly) {
             this.control.disable();
         }
@@ -1879,16 +1911,13 @@ class DateComponent {
             this.control.enable();
         }
     }
-    ngOnChanges() {
-        this.control = new FormControl(new Date(this.value));
-    }
     onChangeEvent() {
-        let d = Core.getFormatedDate2(this.control.value, true);
-        this.valueChange.emit(d);
+        const formattedDate = Core.getFormatedDate2(this.control.value, true);
+        this.valueChange.emit(formattedDate);
     }
     validate(control) {
         if (control.hasError('matDatepickerMin')) {
-            return `Minimun date is ${this.min}`;
+            return `Minimum date is ${this.min}`;
         }
         if (control.hasError('matDatepickerMax')) {
             return `Maximum date is ${this.max}`;
@@ -1897,11 +1926,11 @@ class DateComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { required: [{
+            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
+        }], propDecorators: { required: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -3341,25 +3370,11 @@ class FormComponent {
         if (((_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.action) && this.fileField) {
             this.config.button.action.isFormData = true;
         }
-        // this.fileViewField = this.fields.find(x => x.type == 'file-view')
-        // if (this.fileViewField && !this.fileViewField.hidden && this.config.mode != "create"){
-        //   this.loadFiles();
-        // }
-        // this.getVisibleFields();
         this.childFields = this.fields.filter(x => x.masterField);
         this.childFields.forEach(child => {
             let master = this.fields.find(x => x.name == child.masterField);
             this.updateChildOptions(master);
         });
-        // //set value for child
-        // this.fields.filter(x => x.childField).forEach(master => {
-        //   // console.log(master)
-        //   // console.log(this.data)
-        //   //get child
-        //   let child = this.fields.find(x => x.name == master.childField)
-        //   this.data[child.name] = master.options.find(x => x[master.optionValue] == this.data[master.optionValue])[master.childValueField]
-        //   console.log(this.data)
-        // });
     }
     ngOnChanges() {
         console.log("changed");
@@ -3369,24 +3384,7 @@ class FormComponent {
     }
     getVisibleFields() {
         var _a;
-        let visibleFields = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.filter(x => this.testVisible(x)
-        // && ( x.hiddenCondition && !x.hiddenCondition(this.data) )
-        );
-        return visibleFields;
-    }
-    testVisible(f) {
-        if (f.hidden)
-            return false;
-        if (this.config.mode == 'create' && f.hideOnCreate) {
-            return false;
-        }
-        if (this.config.mode != 'create' && f.hideOnExists) {
-            return false;
-        }
-        if (f.hiddenCondition) {
-            return !f.hiddenCondition(this.data);
-        }
-        return true;
+        return (_a = this.fields) === null || _a === void 0 ? void 0 : _a.filter(x => Core.testVisible(this.config, this.data, x));
     }
     testReadOnly(f) {
         if (this.config.mode == 'create') {
@@ -3442,7 +3440,7 @@ class FormComponent {
             return;
         }
         //validation
-        let resp = Core.validateObject(this.fields, this.data);
+        let resp = Core.validateObject(this.getVisibleFields(), this.data);
         if (resp != '') {
             this.messageService.toast(resp);
             return;
@@ -3618,6 +3616,10 @@ class DetailsDialogInternal {
     getButtonColor(button, row) {
         return this.buttonService.getButtonColor(button, row);
     }
+    getVisibleFields() {
+        var _a;
+        return (_a = this.formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter(x => Core.testVisible(this.formConfig, this.details, x));
+    }
     create() {
         this.handleButtonAction('create');
     }
@@ -3640,12 +3642,12 @@ class DetailsDialogInternal {
             return;
         }
         if (this.validateForm()) {
-            this.executeAction(button, this.details, ((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || `${buttonName}d`);
+            this.executeAction(button, this.details, ((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || "Updated");
         }
     }
     validateForm() {
         var _a;
-        const validationResult = Core.validateObject(this.formConfig.fields, this.details);
+        const validationResult = Core.validateObject(this.getVisibleFields(), this.details);
         if (validationResult !== '') {
             this.messageService.toast(validationResult);
             return false;
@@ -3695,10 +3697,10 @@ class DetailsDialogInternal {
     }
 }
 DetailsDialogInternal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, deps: [{ token: i3$1.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+DetailsDialogInternal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DetailsDialogInternal, selector: "app-viewModel-internal", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DetailsDialogInternal, decorators: [{
             type: Component,
-            args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
+            args: [{ selector: 'app-viewModel-internal', template: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing\"></mat-progress-bar>\r\n    <div class=\"row d-flex align-items-center mt-0\">\r\n\r\n      <div class=\"col\">\r\n        <h2 mat-dialog-title>{{titleAction | titlecase}} {{formConfig?.title}}</h2>\r\n      </div>\r\n\r\n      <div class=\"col d-flex justify-content-end\">\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\" class=\"col d-flex justify-content-end\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, true)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n<!-- Unique to iternal no tables -->\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions>\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create' && createButton\" (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit' && editButton\" (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"!smallScreen && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>{{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"testVisible(details,btn.name)\" mat-icon-button matTooltipPosition=\"above\" [matTooltip]=\"btn.tip ?? btn.name | titlecase\" [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial><mat-icon>{{btn.icon.name}}</mat-icon>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i3$1.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                         type: Inject,
@@ -4162,6 +4164,9 @@ class TableInternalComponent {
             return;
         if (!b.action)
             return;
+        if (b.setHeroField && this.config.heroValue) {
+            row[this.config.heroField] = this.config.heroValue;
+        }
         if (b.confirm) {
             this.messageService.confirm(`${b.confirm.message}`).subscribe((result) => {
                 if (result == "yes") {
@@ -4212,10 +4217,10 @@ class TableInternalComponent {
     }
 }
 TableInternalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$1.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }], target: i0.ɵɵFactoryTarget.Component });
-TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n  <!-- Unique to internal -->\r\n  <div class=\"tin-row\">\r\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\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}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableInternalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableInternalComponent, selector: "spa-table-internal", inputs: { hideTitle: "hideTitle", data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n  <!-- Unique to internal -->\r\n  <div class=\"tin-row\">\r\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableInternalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n  <!-- Unique to internal -->\r\n  <div class=\"tin-row\">\r\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\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}.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-table-internal', template: "\r\n<!-- Search -->\r\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\r\n\r\n\r\n<!-- Header -->\r\n<div class=\"top\">\r\n\r\n  <!-- Unique to internal -->\r\n  <div class=\"tin-row\">\r\n    <button *ngIf=\"createButton && !config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n    <button *ngIf=\"createButton && config.flatButtons && testVisible(config.parentData,createButton.name)\"\r\n      [ngStyle]=\"{'color': getButtonColor(createButton, config.parentData)}\"\r\n      [disabled]=\"testDisabled(config.parentData,createButton.name)\" id=\"btnNew\" mat-stroked-button  style=\"margin-right: 10px; color: green;\" (click)=\"newModel()\">{{createButton.display}}\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\r\n    <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\r\n    <spa-filter [showText]=\"!smallScreen || (smallScreen && dataSource?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" (refreshClick)=\"refreshClicked()\"></spa-filter>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\r\n</div>\r\n\r\n<div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\r\n</div>\r\n\r\n<!-- Table -->\r\n<div>\r\n\r\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n  <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n    <table mat-table [dataSource]=\"tableDataSource\" [ngClass]=\"elevation\">\r\n\r\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\r\n        <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\">\r\n\r\n          <!-- Rows -->\r\n          <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n          </app-table-row>\r\n\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"action\">\r\n        <th mat-header-cell *matHeaderCellDef> Action </th>\r\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n          <div class=\"action-buttons-container\">\r\n\r\n            <!-- Actions -->\r\n            <app-table-action [displayedButtons]=\"displayedButtons\" [config]=\"config\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n            </app-table-action>\r\n\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\r\n    </table>\r\n\r\n  </div>\r\n\r\n  <mat-paginator *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\" #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\r\n\r\n</div>\r\n\r\n<div class=\"tin-center\">\r\n  <p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\r\n</div>\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: DataServiceLib }, { type: MessageService }, { type: i3$1.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
@@ -4342,6 +4347,10 @@ class DetailsDialog {
     getButtonColor(button, row) {
         return this.buttonService.getButtonColor(button, row);
     }
+    getVisibleFields() {
+        var _a;
+        return (_a = this.formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter(x => Core.testVisible(this.formConfig, this.details, x));
+    }
     create() {
         this.handleButtonAction('create');
     }
@@ -4364,12 +4373,12 @@ class DetailsDialog {
             return;
         }
         if (this.validateForm()) {
-            this.executeAction(button, this.details, ((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || `${buttonName}d`);
+            this.executeAction(button, this.details, ((_a = button.action) === null || _a === void 0 ? void 0 : _a.successMessage) || "Updated");
         }
     }
     validateForm() {
         var _a;
-        const validationResult = Core.validateObject(this.formConfig.fields, this.details);
+        const validationResult = Core.validateObject(this.getVisibleFields(), this.details);
         if (validationResult !== '') {
             this.messageService.toast(validationResult);
             return false;
@@ -4768,6 +4777,9 @@ class TableComponent {
             return;
         if (!b.action)
             return;
+        if (b.setHeroField && this.config.heroValue) {
+            row[this.config.heroField] = this.config.heroValue;
+        }
         if (b.confirm) {
             this.messageService.confirm(`${b.confirm.message}`).subscribe((result) => {
                 if (result == "yes") {