tin-spa 2.1.3 → 2.1.4

package/fesm2015/tin-spa.mjs

@@ -1213,10 +1213,10 @@ class TextComponent {
     }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
+            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -2681,7 +2681,6 @@ class FormComponent {
                 formData.append(`uploadFile${i}`, this.files[i], this.files[i].name);
             }
             formData.append("data", JSON.stringify(this.data));
-            console.log(formData);
             dataOut = formData;
         }
         else {
@@ -2711,10 +2710,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\" >\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\r\n\r\n      <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n        <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n      </div>\r\n\r\n      <ng-container *ngSwitchCase=\"'file'\" >\r\n        <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n          <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'file-view'\">\r\n        <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='create'\">\r\n          <spa-viewer [fileNames]=\"data[field.name]\" path=\"files/docs\" folderName=\"doc\"></spa-viewer>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n\r\n      <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.alias ?? field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\" >\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\">\r\n\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='create'\">\r\n            <spa-viewer [fileNames]=\"data[field.name]\" path=\"files/docs\" folderName=\"doc\"></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngIf=\"!field.hidden\">\r\n\r\n        </ng-container>\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\" [multiple]=\"true\">\r\n        </spa-select>\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n\r\n\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\" >\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\r\n\r\n      <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n        <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n      </div>\r\n\r\n      <ng-container *ngSwitchCase=\"'file'\" >\r\n        <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n          <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'file-view'\">\r\n        <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='create'\">\r\n          <spa-viewer [fileNames]=\"data[field.name]\" path=\"files/docs\" folderName=\"doc\"></spa-viewer>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n\r\n      <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.alias ?? field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.alias ?? field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"] }]
+            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\" >\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\">\r\n\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n\r\n        <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n          <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n        </div>\r\n\r\n        <ng-container *ngSwitchCase=\"'file'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n            <spa-attach message=\"Drag and Drop files here\" [(files)]=\"files\"></spa-attach>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'file-view'\">\r\n          <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='create'\">\r\n            <spa-viewer [fileNames]=\"data[field.name]\" path=\"files/docs\" folderName=\"doc\"></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <ng-container *ngIf=\"!field.hidden\">\r\n\r\n        </ng-container>\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [readonly]=\"field.readonly || config.mode =='view'\" [multiple]=\"true\">\r\n        </spa-select>\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field.name, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"field.readonly || config.mode =='view'\"></spa-text>\r\n\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n\r\n\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".title{margin-top:1em;font-size:larger;font-weight:300}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { files: [{
                 type: Input
             }], data: [{
@@ -2737,6 +2736,7 @@ class detailsDialog {
         this.smallScreen = false;
         this.isLoadComplete = false;
         this.isProcessing = false;
+        this.inputChange = new EventEmitter();
     }
     ngOnInit() {
         this.tableConfig = this.data.config;
@@ -2752,6 +2752,9 @@ class detailsDialog {
         this.fileField = this.formConfig.fields.find(x => x.type == 'file');
         this.isLoadComplete = true;
     }
+    inputChanged(event) {
+        this.inputChange.emit({ name: event.name, value: event.value });
+    }
     setMode(newMode) {
         this.formConfig.mode = newMode;
     }
@@ -2809,6 +2812,7 @@ class detailsDialog {
     }
     edit() {
         console.log("Edit");
+        console.log(this.details);
         //validation
         let resp = Core.validateObject(this.formConfig.fields, this.details);
         if (resp != '') {
@@ -2882,16 +2886,18 @@ class detailsDialog {
     }
 }
 detailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3.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", ngImport: i0, template: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [files]=\"files\" [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && smallScreen\"><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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && smallScreen\"><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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [files]=\"files\" [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && smallScreen\"><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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"] }]
+            args: [{ selector: 'app-viewModel', template: "\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>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create' && smallScreen\"><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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"] }]
         }], ctorParameters: function () {
         return [{ type: DataServiceLib }, { type: MessageService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];
-    } });
+    }, propDecorators: { inputChange: [{
+                type: Output
+            }] } });
 ;
 
 class SearchComponent {
@@ -2930,12 +2936,8 @@ class TableComponent {
         this.refreshClick = new EventEmitter();
         this.searchClick = new EventEmitter();
         this.createClick = new EventEmitter();
-        this.viewClick = new EventEmitter();
-        this.editClick = new EventEmitter();
-        this.deleteClick = new EventEmitter();
-        this.custom1Click = new EventEmitter();
-        this.custom2Click = new EventEmitter();
-        this.custom3Click = new EventEmitter();
+        this.actionClick = new EventEmitter();
+        this.inputChange = new EventEmitter();
         this.smallScreen = false;
         this.options = [];
         this.displayedColumns = [];
@@ -2955,12 +2957,12 @@ class TableComponent {
         this.options = this.config.columns;
         this.setColumns();
         this.createButton = this.getButton('create');
-        this.viewButton = this.getButton('view');
-        this.editButton = this.getButton('edit');
-        this.deleteButton = this.getButton('delete');
-        this.custom1Button = this.getButton('custom1');
-        this.custom2Button = this.getButton('custom2');
-        this.custom3Button = this.getButton('custom3');
+        // this.viewButton = this.getButton('view')
+        // this.editButton = this.getButton('edit')
+        // this.deleteButton = this.getButton('delete')
+        // this.custom1Button = this.getButton('custom1')
+        // this.custom2Button = this.getButton('custom2')
+        // this.custom3Button = this.getButton('custom3')
         if (this.config.loadAction) {
             this.loadData(this.config.loadAction, "");
         }
@@ -2977,6 +2979,40 @@ class TableComponent {
             setTimeout(() => { this.tableDataSource.paginator = this.tablePaginator; }, 5);
         }
     }
+    inputChanged(event) {
+        this.inputChange.emit({ name: event.name, value: event.value });
+        console.log("Changed " + JSON.stringify(event));
+    }
+    formDefaults() {
+        if (!this.config.formConfig) {
+            let config = new FormConfig;
+            config.fields = [];
+            this.config.columns.forEach(column => {
+                let field = { name: column.name, type: column.type };
+                config.fields.push(field);
+            });
+            this.config.formConfig = config;
+        }
+    }
+    setColumns() {
+        var _a, _b;
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.columns)) {
+            return;
+        }
+        if (this.smallScreen) {
+            this.displayedColumns = this.config.minColumns;
+        }
+        else {
+            this.displayedColumns = this.config.columns.map(({ name }) => name);
+        }
+        let buttonsCount = (_b = this.config.buttons.filter(x => x.name != 'create').length) !== null && _b !== void 0 ? _b : 0;
+        if (buttonsCount > 0) {
+            if (!this.displayedColumns.find(x => x == 'action') && this.config.buttons) {
+                this.displayedColumns.push("action");
+            }
+            this.actionsWidth = `${buttonsCount * 40 + 20}px`;
+        }
+    }
     getButton(name) {
         if (!this.config.buttons)
             return null;
@@ -3003,29 +3039,36 @@ class TableComponent {
         }
         return i;
     }
-    setColumns() {
-        var _a, _b;
-        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.columns)) {
-            return;
-        }
-        if (this.smallScreen) {
-            this.displayedColumns = this.config.minColumns;
+    getButtonColor(button, row) {
+        if (button.disabled) {
+            if (button.disabled(row)) {
+                return 'lightgray';
+            }
         }
-        else {
-            this.displayedColumns = this.config.columns.map(({ name }) => name);
+        if (button.color) {
+            return button.color;
         }
-        let buttonsCount = (_b = this.config.buttons.filter(x => x.name != 'create').length) !== null && _b !== void 0 ? _b : 0;
-        if (buttonsCount > 0) {
-            if (!this.displayedColumns.find(x => x == 'action') && this.config.buttons) {
-                this.displayedColumns.push("action");
-            }
-            this.actionsWidth = `${buttonsCount * 40 + 20}px`;
+        if (button.name == 'delete') {
+            return '#F44336';
         }
+        return ' #4050B5';
     }
     getOptions(column) {
         let x = this.options.find(opt => opt.name === column);
         return x;
     }
+    getColor(v, options) {
+        let defaultColor = 'lightgrey';
+        if (!options)
+            return defaultColor;
+        let c = options.find(x => x.value == v);
+        if (c) {
+            return c.color;
+        }
+        else {
+            return defaultColor;
+        }
+    }
     testIconCondition(value, icon) {
         // const option = this.getOptions(column);
         if (icon.condition) {
@@ -3050,6 +3093,25 @@ class TableComponent {
         return true;
     }
     //Actions
+    loadData(action, data) {
+        console.log("loading");
+        if (action) {
+            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
+                this.dataSource = apiResponse.data;
+                this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                this.tableDataSource.paginator = this.tablePaginator;
+                if (apiResponse.success) {
+                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                    this.tableDataSource.paginator = this.tablePaginator;
+                    this.dataLoaded(apiResponse.data);
+                }
+                else {
+                    this.messageService.toast("Error: " + apiResponse.message);
+                }
+            });
+        }
+    }
+    //Events
     searchClicked(x) {
         console.log("Search");
         this.refreshClick.emit(x);
@@ -3075,45 +3137,29 @@ class TableComponent {
             ;
         }
     }
-    view(x) {
-        console.log("View");
-        this.viewClick.emit(x);
-        // this.doAction('view', x);
-    }
-    create(x) {
-        console.log("Create " + x);
-        this.createClick.emit(x);
-        this.doAction('create', x);
-    }
-    edit(x) {
-        console.log("Edit " + x);
-        this.editClick.emit(x);
-        this.doAction('edit', x);
-    }
-    delete(x) {
-        console.log("Delete");
-        this.deleteClick.emit(x);
-        this.doAction('delete', x);
-    }
-    custom1(x) {
-        console.log("Custom 1");
-        this.custom1Click.emit(x);
-        this.doAction('custom1', x);
-    }
-    custom2(x) {
-        console.log("Custom 2");
-        this.custom2Click.emit(x);
-        this.doAction('custom2', x);
+    actionClicked(name, row) {
+        if (name == 'view') {
+            this.viewModel(row);
+        }
+        else if (name == 'edit') {
+            this.editModel(row);
+        }
+        else if (name == 'delete') {
+            this.deleteModel(row);
+        }
+        else {
+            this.actionClickedEmit(name, row);
+        }
+        this.doAction(name, row);
     }
-    custom3(x) {
-        console.log("Custom 3");
-        this.custom3Click.emit(x);
-        this.doAction('custom3', x);
+    actionClickedEmit(name, row) {
+        console.log("Action clicked");
+        this.actionClick.emit({ name: name, data: row });
     }
     viewModel(row) {
         let button = this.getButton('view');
         if (button && !button.dialog) {
-            this.view(row);
+            // this.actionClicked('view',row);
             return;
         }
         if (!this.config.formConfig) {
@@ -3133,7 +3179,7 @@ class TableComponent {
     newModel() {
         let button = this.getButton('create');
         if (button && !button.dialog) {
-            this.create('');
+            // this.actionClickedEmit('create','');
             return;
         }
         if (!this.config.formConfig) {
@@ -3146,18 +3192,18 @@ class TableComponent {
         });
         dialogRef.afterClosed().subscribe((result) => {
             if (result.message == "success") {
-                this.create(result.data);
+                this.actionClickedEmit('create', result.data);
                 this.refreshClicked();
             }
             else if (result.message == "emit") {
-                this.create(result.data);
+                this.actionClickedEmit('create', result.data);
             }
         });
     }
     editModel(row) {
         let button = this.getButton('edit');
         if (button && !button.dialog) {
-            this.edit(row);
+            // this.actionClicked('edit',row);
             return;
         }
         if (!this.config.formConfig) {
@@ -3168,25 +3214,28 @@ class TableComponent {
             width: "900px",
             data: { mode: "edit", config: this.config, details: row, smallScreen: this.smallScreen },
         });
+        dialogRef.componentInstance.inputChange.subscribe((x) => {
+            this.inputChanged(x);
+        });
         dialogRef.afterClosed().subscribe((result) => {
             if (result.message == "success") {
-                this.edit(result.data);
+                this.actionClickedEmit('edit', result.data);
                 this.refreshClicked();
             }
             else if (result.message == "emit") {
-                this.edit(result.data);
+                this.actionClickedEmit('edit', result.data);
             }
         });
     }
     deleteModel(row) {
         let button = this.getButton('delete');
         if (button && !button.dialog) {
-            this.delete(row);
+            // this.actionClicked('delete', row);
             return;
         }
         this.messageService.confirm(`DELETE ?`).subscribe((result) => {
             if (result == "yes") {
-                this.delete(row);
+                this.actionClickedEmit('delete', row);
                 this.refreshClicked();
             }
         });
@@ -3214,53 +3263,12 @@ class TableComponent {
             }
         });
     }
-    loadData(action, data) {
-        console.log("loading");
-        if (action) {
-            this.dataService.CallApi(action, data).subscribe((apiResponse) => {
-                this.dataSource = apiResponse.data;
-                this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                this.tableDataSource.paginator = this.tablePaginator;
-                if (apiResponse.success) {
-                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                    this.tableDataSource.paginator = this.tablePaginator;
-                    this.dataLoaded(apiResponse.data);
-                }
-                else {
-                    this.messageService.toast("Error: " + apiResponse.message);
-                }
-            });
-        }
-    }
-    formDefaults() {
-        if (!this.config.formConfig) {
-            let config = new FormConfig;
-            config.fields = [];
-            this.config.columns.forEach(column => {
-                let field = { name: column.name, type: column.type };
-                config.fields.push(field);
-            });
-            this.config.formConfig = config;
-        }
-    }
-    getColor(v, options) {
-        let defaultColor = 'lightgrey';
-        if (!options)
-            return defaultColor;
-        let c = options.find(x => x.value == v);
-        if (c) {
-            return c.color;
-        }
-        else {
-            return defaultColor;
-        }
-    }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$4.BreakpointObserver }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", viewClick: "viewClick", editClick: "editClick", deleteClick: "deleteClick", custom1Click: "custom1Click", custom2Click: "custom2Click", custom3Click: "custom3Click" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip  (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["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: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config" }, 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: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n\n\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of config.buttons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <!-- [color]=\"button.name =='delete' ? 'warn' : 'primary'\" -->\n              <button *ngIf=\"!smallScreen || button.name == 'view'\" mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n\n          <!-- <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px; margin-left: 20px;\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button> -->\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$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: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["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: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip  (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row[column.name], column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row[column.name], icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button>\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"] }]
+            args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n\n\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n              {{row[column.name] | currency:'':''}}\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label>{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:smallScreen ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of config.buttons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <!-- [color]=\"button.name =='delete' ? 'warn' : 'primary'\" -->\n              <button *ngIf=\"!smallScreen || button.name == 'view'\" mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n\n          <!-- <button mat-mini-fab color=\"primary\" [matTooltip]=\"viewButton.tip ?? 'view' \" matTooltipPosition=\"above\" style=\"margin-right:5px; margin-left: 20px;\" [ngStyle]=\"{'background-color':viewButton.color}\" [disabled]=\"testDisabled(row,'view')\" *ngIf=\"viewButton && testVisible(row,'view')\" (click)=\"viewModel(row)\">\n            <mat-icon>{{getIcon('view')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom1Button.tip ?? 'custom1' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom1Button.color}\" [disabled]=\"testDisabled(row,'custom1')\" *ngIf=\"!smallScreen && custom1Button && testVisible(row,'custom1')\" (click)=\"custom1(row)\">\n            <mat-icon>{{getIcon('custom1')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom2Button.tip ?? 'custom2' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom2Button.color}\" [disabled]=\"testDisabled(row,'custom2')\" *ngIf=\"!smallScreen && custom2Button && testVisible(row,'custom2')\" (click)=\"custom2(row)\">\n            <mat-icon>{{getIcon('custom2')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"custom3Button.tip ?? 'custom3' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':custom3Button.color}\" [disabled]=\"testDisabled(row,'custom3')\" *ngIf=\"!smallScreen && custom3Button && testVisible(row,'custom3')\" (click)=\"custom3(row)\">\n            <mat-icon>{{getIcon('custom3')}}</mat-icon>\n          </button>\n\n\n          <button mat-mini-fab color=\"primary\" [matTooltip]=\"editButton.tip ?? 'edit' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':editButton.color}\" [disabled]=\"testDisabled(row,'edit')\" *ngIf=\"!smallScreen && editButton && testVisible(row,'edit')\" (click)=\"editModel(row)\">\n            <mat-icon>{{getIcon('edit')}}</mat-icon>\n          </button>\n\n          <button mat-mini-fab color=\"warn\" [matTooltip]=\"deleteButton.tip ?? 'delete' \" matTooltipPosition=\"above\" style=\"margin-right:5px\" [ngStyle]=\"{'background-color':deleteButton.color}\" [disabled]=\"testDisabled(row,'delete')\" *ngIf=\"!smallScreen && deleteButton && testVisible(row,'delete')\" (click)=\"deleteModel(row)\">\n            <mat-icon>{{getIcon('delete')}}</mat-icon>\n          </button> -->\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\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}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}\n"] }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$4.BreakpointObserver }, { type: i3.MatDialog }]; }, propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator']
@@ -3276,17 +3284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], createClick: [{
                 type: Output
-            }], viewClick: [{
-                type: Output
-            }], editClick: [{
+            }], actionClick: [{
                 type: Output
-            }], deleteClick: [{
-                type: Output
-            }], custom1Click: [{
-                type: Output
-            }], custom2Click: [{
-                type: Output
-            }], custom3Click: [{
+            }], inputChange: [{
                 type: Output
             }] } });