tin-spa 2.6.7 → 2.6.9

package/fesm2015/tin-spa.mjs

@@ -578,12 +578,20 @@ Core.nullDate = "01 Jan 1969";
 class DetailsDialogProcessor {
     static processDetailsConfig(detailsConfig, row) {
         var _a;
-        const updatedDetailsConfig = Core.getClone(detailsConfig);
+        const updatedDetailsConfig = Core.getClone(detailsConfig); //{...detailsConfig}
         updatedDetailsConfig.details = row;
+        //Form Config
         updatedDetailsConfig.formConfig.mode = (_a = updatedDetailsConfig.mode) !== null && _a !== void 0 ? _a : "view";
         if (updatedDetailsConfig.heroField && row) {
             updatedDetailsConfig.heroValue = row[updatedDetailsConfig.heroField];
         }
+        //Table configs
+        if (updatedDetailsConfig.tableConfig) {
+            updateTableConfig(updatedDetailsConfig.tableConfig);
+        }
+        if (updatedDetailsConfig.tableConfigs) {
+            updatedDetailsConfig.tableConfigs.forEach(updateTableConfig);
+        }
         function updateTableConfig(tableConfig) {
             tableConfig.heroField = updatedDetailsConfig === null || updatedDetailsConfig === void 0 ? void 0 : updatedDetailsConfig.heroField;
             tableConfig.heroValue = updatedDetailsConfig === null || updatedDetailsConfig === void 0 ? void 0 : updatedDetailsConfig.heroValue;
@@ -592,27 +600,22 @@ class DetailsDialogProcessor {
             tableConfig.tileConfig = null;
             tableConfig.parentData = updatedDetailsConfig.details;
         }
+        //URL
         if (updatedDetailsConfig.tableConfig) {
-            updateTableConfig(updatedDetailsConfig.tableConfig);
+            transformLoadUrl(updatedDetailsConfig.tableConfig);
         }
         if (updatedDetailsConfig.tableConfigs) {
-            updatedDetailsConfig.tableConfigs.forEach(updateTableConfig);
+            updatedDetailsConfig.tableConfigs.forEach(transformLoadUrl);
         }
         function transformLoadUrl(tableConfig) {
             if (tableConfig.loadAction && tableConfig.loadCriteria && tableConfig.loadIDField) {
                 tableConfig.loadAction.url = `${tableConfig.loadAction.url.split('/')[0]}/${tableConfig.loadCriteria}/${updatedDetailsConfig.details[tableConfig.loadIDField]}`;
-                console.log("Transformed");
+                console.log("Transformed", tableConfig.loadAction.url);
             }
             else {
                 console.log("NOT Transformed");
             }
         }
-        if (updatedDetailsConfig.tableConfig) {
-            transformLoadUrl(updatedDetailsConfig.tableConfig);
-        }
-        if (updatedDetailsConfig.tableConfigs) {
-            updatedDetailsConfig.tableConfigs.forEach(transformLoadUrl);
-        }
         return updatedDetailsConfig;
     }
     static initializeConfigs(detailsConfig) {
@@ -1362,6 +1365,66 @@ class DataServiceLib {
             loadAction: { url: 'departments/all/x' },
             formConfig: this.departmentFormConfig
         };
+        //--------------------------Customers-------------------------
+        this.customerFormConfig = {
+            fields: [
+                { name: 'name', type: 'text', required: true },
+                { name: 'phone', type: 'text' },
+                { name: 'contactPerson', type: 'text' },
+                { name: 'email', type: 'text' },
+                { name: 'address', type: 'text', rows: 2, span: true },
+                { name: 'customerTenantID', alias: 'Customer Tenant', type: 'select', optionDisplay: 'name', optionValue: 'tenantID', options: [], nullable: true },
+            ],
+            reset: true,
+        };
+        this.customersTableConfig = {
+            showFilter: true,
+            minColumns: ['name'],
+            flatButtons: true,
+            columns: [
+                { name: 'name', type: 'text' },
+                { name: 'phone', type: 'text' },
+                { name: 'contactPerson', type: 'text' },
+                { name: 'isLinked', type: 'checkbox', alias: 'Linked' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create', dialog: true, action: { url: 'customers?action=create', method: 'post' } },
+                { name: 'view', dialog: true },
+                { name: 'edit', dialog: true, action: { url: 'customers?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'customers?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'customers/all/x' },
+            formConfig: this.customerFormConfig
+        };
+        //--------------------------Suppliers-------------------------
+        this.supplierFormConfig = {
+            fields: [
+                { name: 'name', type: 'text', required: true },
+                { name: 'phone', type: 'text' },
+                { name: 'contactPerson', type: 'text' },
+                { name: 'email', type: 'text' },
+                { name: 'address', type: 'text', rows: 2, span: true },
+            ],
+            reset: true,
+        };
+        this.suppliersTableConfig = {
+            showFilter: true,
+            minColumns: ['name'],
+            flatButtons: true,
+            columns: [
+                { name: 'name', type: 'text' },
+                { name: 'phone', type: 'text' },
+                { name: 'contactPerson', type: 'text' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create', dialog: true, action: { url: 'suppliers?action=create', method: 'post' } },
+                { name: 'view', dialog: true },
+                { name: 'edit', dialog: true, action: { url: 'suppliers?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'suppliers?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'suppliers/all/x' },
+            formConfig: this.supplierFormConfig
+        };
         //---------------------------Other code
         this.listCache = {};
         this.cacheDuration = 5 * 60 * 1000;
@@ -1681,7 +1744,7 @@ class DialogService {
             // heroField : config.heroField,
         };
         if (button.detailsConfig) {
-            dialogConfig = buttonName === 'create' ? button.detailsConfig : DetailsDialogProcessor.processDetailsConfig(button.detailsConfig, row);
+            dialogConfig = buttonName === 'create' ? button.detailsConfig : DetailsDialogProcessor.processDetailsConfig(Object.assign({}, button.detailsConfig), row);
         }
         else {
             dialogConfig = DetailsDialogProcessor.processDetailsConfig(Object.assign({}, dialogConfig), row);
@@ -1790,7 +1853,6 @@ class SuffixComponent {
         this.copyContent = false;
         this.isHovered = false;
         this.clearContent = false;
-        this.value = '';
         this.infoClick = new EventEmitter();
         this.copyClick = new EventEmitter();
         this.clearClick = new EventEmitter();
@@ -2146,11 +2208,12 @@ class DateComponent {
         this.initializeDateControls();
     }
     ngOnChanges(changes) {
+        var _a;
         if (changes['readonly']) {
             this.updateControlState();
         }
         if (changes['value']) {
-            this.control.setValue(new Date(this.value));
+            (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(new Date(this.value));
         }
     }
     initializeDateControls() {
@@ -2161,11 +2224,12 @@ class DateComponent {
         setTimeout(() => this.onChangeEvent(), 5);
     }
     updateControlState() {
+        var _a, _b;
         if (this.readonly) {
-            this.control.disable();
+            (_a = this.control) === null || _a === void 0 ? void 0 : _a.disable();
         }
         else {
-            this.control.enable();
+            (_b = this.control) === null || _b === void 0 ? void 0 : _b.enable();
         }
     }
     onChangeEvent() {
@@ -2264,21 +2328,24 @@ class LabelComponent {
         this.display = "";
         this.value = "";
         this.format = "text";
+        this.suffix = "";
     }
     ngOnInit() {
     }
 }
 LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LabelComponent, selector: "spa-label", inputs: { display: "display", value: "value", format: "format" }, ngImport: i0, template: "<div *ngIf=\"format=='text'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='date'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='datetime'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy HH:mm'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='money'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | currency:'USD':''}} </label> &nbsp;\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LabelComponent, selector: "spa-label", inputs: { display: "display", value: "value", format: "format", suffix: "suffix" }, ngImport: i0, template: "<div *ngIf=\"format=='text'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value}} {{suffix ?? ''}}</label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='date'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='datetime'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy HH:mm'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='money'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | currency:'USD':''}} {{suffix ?? ''}}</label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='number'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | currency:'USD':''}} {{suffix ?? ''}}</label> &nbsp;\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-label', template: "<div *ngIf=\"format=='text'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='date'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='datetime'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy HH:mm'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='money'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | currency:'USD':''}} </label> &nbsp;\r\n</div>\r\n" }]
+            args: [{ selector: 'spa-label', template: "<div *ngIf=\"format=='text'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value}} {{suffix ?? ''}}</label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='date'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='datetime'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | date:'dd/MM/yyyy HH:mm'}} </label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='money'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | currency:'USD':''}} {{suffix ?? ''}}</label> &nbsp;\r\n</div>\r\n\r\n<div *ngIf=\"format=='number'\">\r\n  <label style=\"font-weight: 500\">{{display}} :</label> &nbsp; <label style=\"font-size: 20px; font-weight: 300\">{{value | currency:'USD':''}} {{suffix ?? ''}}</label> &nbsp;\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { display: [{
                 type: Input
             }], value: [{
                 type: Input
             }], format: [{
                 type: Input
+            }], suffix: [{
+                type: Input
             }] } });
 
 class SelectCommonComponent {
@@ -2789,6 +2856,9 @@ class MoneyComponent {
         this.min = 0;
         this.max = 9000000000000000; //Math.max 9000000000000000
         this.infoClick = new EventEmitter();
+        this.copyContent = false;
+        this.clearContent = false;
+        this.isHovered = false;
         //validation
         this.control = new FormControl(this.value, [Validators.required, Validators.min(this.min), Validators.max(this.max)]);
     }
@@ -2812,10 +2882,20 @@ class MoneyComponent {
             this.control.updateValueAndValidity();
         }
     }
+    onMouseEnter() {
+        this.isHovered = true;
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+    }
     onInfoClick(event) {
         event.stopPropagation();
         this.infoClick.emit();
     }
+    clear() {
+        this.value = "";
+        this.valueChange.emit(this.value);
+    }
     changed(x) {
         this.valueChange.emit(x);
     }
@@ -2845,10 +2925,10 @@ class MoneyComponent {
     }
 }
 MoneyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
+MoneyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoneyComponent, selector: "spa-money", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", currency: "currency", required: "required", min: "min", max: "max", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent", suffix: "suffix" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoneyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-money', template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n      <div matSuffix class=\"suffix-icons\">\r\n        <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n          <mat-icon style=\"color: steelblue;\">info</mat-icon>\r\n        </button>\r\n      </div>\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"] }]
+            args: [{ selector: 'spa-money', template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" hideRequiredMarker=\"true\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput appCurrencyInputMask autocomplete=\"off\" style=\"text-align: right;\"\r\n  [min]=\"min\" [max]=\"max\"\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <div matSuffix class=\"suffix-icons\">\r\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\r\n  </div>\r\n\r\n</mat-form-field>\r\n\r\n", styles: ["input.example-right-align{-moz-appearance:textfield}.example-right-align{text-align:right}input.example-right-align::-webkit-outer-spin-button,input.example-right-align::-webkit-inner-spin-button{display:none}.curr{background-color:red}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -2879,6 +2959,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], infoClick: [{
                 type: Output
+            }], copyContent: [{
+                type: Input
+            }], clearContent: [{
+                type: Input
+            }], suffix: [{
+                type: Input
             }] } });
 
 class AttachComponent {
@@ -2981,6 +3067,9 @@ class NumberComponent {
         this.max = 9000000000000000; //Math.max
         this.step = 1;
         this.infoClick = new EventEmitter();
+        this.copyContent = false;
+        this.clearContent = false;
+        this.isHovered = false;
         //validation
         this.control = new FormControl(this.value, [Validators.required, Validators.min(this.min), Validators.max(this.max)]);
     }
@@ -3002,6 +3091,16 @@ class NumberComponent {
             this.control.updateValueAndValidity();
         }
     }
+    onMouseEnter() {
+        this.isHovered = true;
+    }
+    onMouseLeave() {
+        this.isHovered = false;
+    }
+    clear() {
+        this.value = 0;
+        this.valueChange.emit(this.value);
+    }
     onInfoClick(event) {
         event.stopPropagation();
         this.infoClick.emit();
@@ -3029,10 +3128,10 @@ class NumberComponent {
     }
 }
 NumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step", suffix: "suffix", infoMessage: "infoMessage" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, ngImport: i0, template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n    <div matSuffix class=\"suffix-icons\">\n      <label *ngIf=\"suffix\">{{suffix}}</label>\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\n      </button>\n    </div>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberComponent, selector: "spa-number", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", width: "width", required: "required", min: "min", max: "max", step: "step", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress", infoClick: "infoClick" }, ngImport: i0, template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\n  </div>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-number', template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n    <div matSuffix class=\"suffix-icons\">\n      <label *ngIf=\"suffix\">{{suffix}}</label>\n      <button mat-icon-button *ngIf=\"infoMessage\" (click)=\"onInfoClick($event)\" matTooltip=\"Info\" matTooltipPosition=\"above\">\n        <mat-icon style=\"color: steelblue;\">info</mat-icon>\n      </button>\n    </div>\n</mat-form-field>\n" }]
+            args: [{ selector: 'spa-number', template: "\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width ?? '100%'}\" style=\"margin-right: 5px;\">\n  <mat-label>{{display}}</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" [min]=\"min\" [max]=\"max\" [step]=\"step\" [(ngModel)]=\"value\" (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\" />\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n\n  <div matSuffix class=\"suffix-icons\">\n    <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" (clearClick)=\"clear()\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\n  </div>\n</mat-form-field>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -3065,6 +3164,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], infoClick: [{
                 type: Output
+            }], copyContent: [{
+                type: Input
+            }], clearContent: [{
+                type: Input
             }] } });
 
 class ChipsComponent {
@@ -3968,10 +4071,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" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: 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 getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\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 && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"subfield.loadAction\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-text>\r\n\r\n      </ng-container>\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}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.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", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { 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", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: MultiTextComponent, selector: "spa-multi-text", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: MultiSelectComponent, selector: "spa-multi-select", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { 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" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: 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 getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\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 && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" [suffix]=\"field.suffix\"></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"subfield.loadAction\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-text>\r\n\r\n      </ng-container>\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}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.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", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage", "copyContent", "clearContent", "suffix"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { 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", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: MultiTextComponent, selector: "spa-multi-text", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: MultiSelectComponent, selector: "spa-multi-select", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { 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 getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\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 && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" ></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"subfield.loadAction\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-text>\r\n\r\n      </ng-container>\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}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\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 getVisibleFields()\">\r\n\r\n    <ng-container  >\r\n\r\n      <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\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 && config.mode !='create'\">\r\n            <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n\r\n        <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" [suffix]=\"field.suffix\"></spa-label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\r\n\r\n        <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\r\n\r\n        <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\r\n\r\n        <spa-text *ngSwitchCase=\"'password'\" [format]=\"'password'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-text>\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'select'\">\r\n          <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                  $implicit: field,\r\n                  field: field,\r\n                  data: data,\r\n                  testReadOnly: testReadOnly.bind(this),\r\n                  selectChanged: selectChanged.bind(this)\r\n                }\">\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <spa-multi-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\">\r\n        </spa-multi-select>\r\n\r\n        <spa-multi-text *ngSwitchCase=\"'multi-text'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-multi-text>\r\n\r\n\r\n\r\n        <ng-container *ngSwitchCase=\"'composite'\">\r\n          <div class=\"composite-field-container\">\r\n            <div class=\"composite-field-group\">\r\n              <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                <ng-container [ngSwitch]=\"subfield.type\">\r\n\r\n                  <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\"></spa-number>\r\n\r\n                  <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\r\n\r\n                  <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\r\n\r\n                  <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\r\n\r\n                  <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\r\n\r\n                  <ng-container *ngSwitchCase=\"'select'\">\r\n                    <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                    $implicit: field,\r\n                                    field: field,\r\n                                    data: data,\r\n                                    testReadOnly: testReadOnly.bind(this),\r\n                                    selectChanged: selectChanged.bind(this)\r\n                                  }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                  <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\"  [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"subfield.required\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"subfield.loadAction\"></spa-text>\r\n\r\n\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"field.loadAction\"></spa-text>\r\n\r\n      </ng-container>\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}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { dynamicSelectTemplate: [{
                 type: ContentChild,
                 args: ['dynamicSelect']
@@ -4277,10 +4380,11 @@ class SelectInternalComponent extends SelectCommonComponent {
         return createButton && (!createButton.disabled || !createButton.disabled(this.value));
     }
     onPeekClick(event, mode) {
+        var _a;
         event.stopPropagation();
         if (this.detailsConfig) {
             const dynamicData = mode === 'create' ? {} : { [this.detailsConfig.heroField]: this.value };
-            if (mode === 'view' && !this.detailsConfig.buttons.some(b => b.name === 'view')) {
+            if (mode === 'view' && !((_a = this.detailsConfig) === null || _a === void 0 ? void 0 : _a.buttons.some(b => b.name === 'view'))) {
                 this.detailsConfig.buttons.push({ name: 'view', dialog: true });
             }
             this.dialogService.openConfiguredDetailsDialog(mode, dynamicData, this.detailsConfig, DetailsDialogLite).subscribe(result => {
@@ -4945,7 +5049,7 @@ class TableLiteComponent {
         this.updateTableConfiguration();
         this.setupDataLoading();
         this.formDefaults();
-        this.originalTableLoadAction = Core.getClone(this.config.loadAction);
+        this.originalTableLoadAction = Object.assign({}, this.config.loadAction); //Core.getClone(this.config.loadAction);
         this.dataSource = this.data;
         this.tableDataSource = new MatTableDataSource(this.dataSource);
     }
@@ -5079,16 +5183,16 @@ class TableLiteComponent {
         this.searchClick.emit(x);
         this.lastSearch = x;
         if (this.config.searchConfig.searchAction) {
-            this.config.loadAction = Core.getClone(this.config.searchConfig.searchAction);
+            this.config.loadAction = Object.assign({}, this.config.searchConfig.searchAction); //Core.getClone(this.config.searchConfig.searchAction);
             this.loadData(this.config.loadAction, x);
         }
     }
     tileClicked(tile) {
-        this.config.loadAction = Core.getClone(tile.data.action);
+        this.config.loadAction = Object.assign({}, tile.data.action); //Core.getClone(tile.data.action);
         this.refreshClicked();
     }
     tileUnClicked(tile) {
-        this.config.loadAction = Core.getClone(this.originalTableLoadAction);
+        this.config.loadAction = Object.assign({}, this.originalTableLoadAction); //Core.getClone(this.originalTableLoadAction);
         this.refreshClicked();
     }
     refreshClicked() {
@@ -5523,10 +5627,11 @@ class SelectComponent extends SelectCommonComponent {
         return createButton && (!createButton.disabled || !createButton.disabled(this.value));
     }
     onPeekClick(event, mode) {
+        var _a;
         event.stopPropagation();
         if (this.detailsConfig) {
             const dynamicData = mode === 'create' ? {} : { [this.detailsConfig.heroField]: this.value };
-            if (mode === 'view' && !this.detailsConfig.buttons.some(b => b.name === 'view')) {
+            if (mode === 'view' && !((_a = this.detailsConfig) === null || _a === void 0 ? void 0 : _a.buttons.some(b => b.name === 'view'))) {
                 this.detailsConfig.buttons.push({ name: 'view', dialog: true });
             }
             this.dialogService.openConfiguredDetailsDialog(mode, dynamicData, this.detailsConfig, DetailsDialogInternal).subscribe(result => {
@@ -5676,10 +5781,10 @@ class NavMenuComponent {
     }
 }
 NavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: StorageService }, { token: NotificationsService }, { token: i8.SocialAuthService }, { token: i3.BreakpointObserver }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+NavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavMenuComponent, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"  matTooltip=\"Support\">\r\n      <mat-icon >help</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13$1.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i13$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >help</mat-icon> </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"> <mat-icon>logout</mat-icon></button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"] }]
+            args: [{ selector: 'spa-nav-menu', template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light  border-bottom box-shadow mb-3 \" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/bug')\"> <mat-icon >support_agent</mat-icon> </button>\r\n\r\n          <!-- <button mat-icon-button (click)=\"redirectTo('home/admin/notifications')\"> <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button> -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of appConfig.capItems\">\r\n\r\n          <!-- Menu Item -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display-->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/bug')\"  matTooltip=\"Support\">\r\n      <mat-icon >help</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/admin/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <button mat-menu-item  routerLink=\"home/admin/bug\" *ngIf=\"dataService.appConfig.multitenant && smallScreen\">\r\n      <mat-icon>help</mat-icon> <span>Help</span>\r\n    </button>\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'over'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay)\" style=\"height: 40px;font-size: 15px;\" (click)=\"toggle()\">\r\n          <mat-icon style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items -->\r\n          <mat-nav-list *ngFor=\"let capSub of cap.capSubItems\">\r\n\r\n            <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px;\" (click)=\"toggle()\" *ngIf=\"myRole[cap.name] && cap.showMenu\">\r\n              <mat-icon style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n            </mat-list-item>\r\n\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"container-fluid tin-bg-image\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} {{footer}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.toolbar-item-spacer{flex:1 1 auto}.app-container{height:90%;margin:0}.app-sidenav{width:200px}.side-color{background-color:#def0fc}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: AuthService }, { type: StorageService }, { type: NotificationsService }, { type: i8.SocialAuthService }, { type: i3.BreakpointObserver }, { type: DataServiceLib }]; }, propDecorators: { appConfig: [{
                 type: Input
             }], footer: [{
@@ -5833,7 +5938,7 @@ class TableInternalComponent {
         this.updateTableConfiguration();
         this.setupDataLoading();
         this.formDefaults();
-        this.originalTableLoadAction = Core.getClone(this.config.loadAction);
+        this.originalTableLoadAction = Object.assign({}, this.config.loadAction); //Core.getClone(this.config.loadAction);
         this.dataSource = this.data;
         this.tableDataSource = new MatTableDataSource(this.dataSource);
     }
@@ -5967,17 +6072,17 @@ class TableInternalComponent {
         this.searchClick.emit(x);
         this.lastSearch = x;
         if (this.config.searchConfig.searchAction) {
-            this.config.loadAction = Core.getClone(this.config.searchConfig.searchAction);
-            this.originalTableLoadAction = Core.getClone(this.config.searchConfig.searchAction);
+            this.config.loadAction = Object.assign({}, this.config.searchConfig.searchAction); //Core.getClone(this.config.searchConfig.searchAction);
+            this.originalTableLoadAction = Object.assign({}, this.config.searchConfig.searchAction); // Core.getClone(this.config.searchConfig.searchAction);
             this.loadData(this.config.loadAction, x);
         }
     }
     tileClicked(tile) {
-        this.config.loadAction = Core.getClone(tile.data.action);
+        this.config.loadAction = Object.assign({}, tile.data.action); //Core.getClone(tile.data.action);
         this.refreshClicked();
     }
     tileUnClicked(tile) {
-        this.config.loadAction = Core.getClone(this.originalTableLoadAction);
+        this.config.loadAction = Object.assign({}, this.originalTableLoadAction); //Core.getClone(this.originalTableLoadAction);
         this.refreshClicked();
     }
     refreshClicked() {
@@ -6441,7 +6546,7 @@ class TableComponent {
         this.updateTableConfiguration();
         this.setupDataLoading();
         this.formDefaults();
-        this.originalTableLoadAction = Core.getClone(this.config.loadAction);
+        this.originalTableLoadAction = Object.assign({}, this.config.loadAction); //Core.getClone(this.config.loadAction);
         this.dataSource = this.data;
         this.tableDataSource = new MatTableDataSource(this.dataSource);
     }
@@ -6575,17 +6680,17 @@ class TableComponent {
         this.searchClick.emit(x);
         this.lastSearch = x;
         if (this.config.searchConfig.searchAction) {
-            this.config.loadAction = Core.getClone(this.config.searchConfig.searchAction);
-            this.originalTableLoadAction = Core.getClone(this.config.searchConfig.searchAction);
+            this.config.loadAction = Object.assign({}, this.config.searchConfig.searchAction); //Core.getClone(this.config.searchConfig.searchAction);
+            this.originalTableLoadAction = Object.assign({}, this.config.searchConfig.searchAction); //Core.getClone(this.config.searchConfig.searchAction);
             this.loadData(this.config.loadAction, x);
         }
     }
     tileClicked(tile) {
-        this.config.loadAction = Core.getClone(tile.data.action);
+        this.config.loadAction = Object.assign({}, tile.data.action); //Core.getClone(tile.data.action);
         this.refreshClicked();
     }
     tileUnClicked(tile) {
-        this.config.loadAction = Core.getClone(this.originalTableLoadAction);
+        this.config.loadAction = Object.assign({}, this.originalTableLoadAction); //Core.getClone(this.originalTableLoadAction);
         this.refreshClicked();
     }
     refreshClicked() {
@@ -7029,7 +7134,7 @@ class TenantSettingsComponent {
     }
 }
 TenantSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
+TenantSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TenantSettingsComponent, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TenantSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tenant-settings', template: "<div class=\"container\">\r\n\r\n  <div>\r\n\r\n    <label class=\"title\" >Organisation Details</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\r\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\r\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"ownTenant\" >\r\n <!-- Members -->\r\n  <div class=\"mt-3\" >\r\n\r\n    <label class=\"title\" >Members</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\r\n\r\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n<!-- My Organisations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >My Organisations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\r\n\r\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  <!-- My Invitations -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\">My Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\r\n\r\n\r\n    <spa-invitations-table></spa-invitations-table>\r\n\r\n  </div>\r\n\r\n  <!-- Billing -->\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Billing and Subscription</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n\r\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\r\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\r\n      </div>\r\n\r\n  </div>\r\n\r\n    <!-- Email -->\r\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\r\n\r\n  <label class=\"title\">Email Configuration</label>\r\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\r\n\r\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
@@ -7169,58 +7274,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }], ctorParameters: function () { return [{ type: AuthService }]; } });
 
 class CustomersComponent {
-    constructor(dataService, messageService, authService) {
+    constructor(dataService, authService) {
         this.dataService = dataService;
-        this.messageService = messageService;
         this.authService = authService;
-        this.formConfig = {
-            fields: [
-                { name: 'name', type: 'text', required: true },
-                { name: 'phone', type: 'text' },
-                { name: 'contactPerson', type: 'text' },
-                { name: 'email', type: 'text' },
-                { name: 'address', type: 'text', rows: 2, span: true },
-                { name: 'customerTenantID', alias: 'Customer Tenant', type: 'select', optionDisplay: 'name', optionValue: 'tenantID', options: [], nullable: true },
-            ],
-            reset: true,
-        };
-        this.config = {
-            showFilter: true,
-            minColumns: ['name'],
-            flatButtons: true,
-            columns: [
-                { name: 'name', type: 'text' },
-                { name: 'phone', type: 'text' },
-                { name: 'contactPerson', type: 'text' },
-                { name: 'isLinked', type: 'checkbox', alias: 'Linked' },
-            ],
-            buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'customers?action=create', method: 'post' } },
-                { name: 'view', dialog: true },
-                { name: 'edit', dialog: true, action: { url: 'customers?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'customers?action=delete', method: 'post' } },
-            ],
-            loadAction: { url: 'customers/all/x' },
-            formConfig: this.formConfig
-        };
     }
     ngOnInit() {
         // this.loadTenants();
     }
-    loadTenants() {
-        this.dataService.CallApi({ url: 'tenant/available_tenants/x' }).subscribe((apiResponse) => {
-            if (apiResponse.success) {
-                this.formConfig.fields.find(x => x.name == 'customerTenantID').options = apiResponse.data;
-            }
-        });
-    }
 }
-CustomersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomersComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-CustomersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomersComponent, selector: "spa-customers", ngImport: i0, template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
+CustomersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomersComponent, deps: [{ token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+CustomersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomersComponent, selector: "spa-customers", ngImport: i0, template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"dataService.customersTableConfig\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-customers', template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\"></spa-table>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }]; } });
+            args: [{ selector: 'spa-customers', template: "<h4>Customers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"dataService.customersTableConfig\"></spa-table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: AuthService }]; } });
 
 //-------------------------------------------VIEW
 // import { ApiResponse, DataServiceLib, MessageService } from 'projects/tin-spa/src/public-api';
@@ -7254,7 +7321,7 @@ class quantityDialog {
     }
 }
 quantityDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: quantityDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-quantityDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: quantityDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{data.name | titlecase}} {{inv.name}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-grid\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [value]=\"inv.name\" [readonly]=\"true\"></spa-text>\r\n  <spa-text display=\"Description\" [value]=\"inv.description\" [readonly]=\"true\"></spa-text>\r\n  <spa-number display=\"Quantity\" [(value)]=\"quantity\" [hint]=\"'Quantity to ' + data.name\" ></spa-number>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+quantityDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: quantityDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{data.name | titlecase}} {{inv.name}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-grid\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [value]=\"inv.name\" [readonly]=\"true\"></spa-text>\r\n  <spa-text display=\"Description\" [value]=\"inv.description\" [readonly]=\"true\"></spa-text>\r\n  <spa-number display=\"Quantity\" [(value)]=\"quantity\" [hint]=\"'Quantity to ' + data.name\" ></spa-number>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "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: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: quantityDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{data.name | titlecase}} {{inv.name}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-grid\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [value]=\"inv.name\" [readonly]=\"true\"></spa-text>\r\n  <spa-text display=\"Description\" [value]=\"inv.description\" [readonly]=\"true\"></spa-text>\r\n  <spa-number display=\"Quantity\" [(value)]=\"quantity\" [hint]=\"'Quantity to ' + data.name\" ></spa-number>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
@@ -7521,43 +7588,15 @@ class SuppliersComponent {
         this.dataService = dataService;
         this.messageService = messageService;
         this.authService = authService;
-        this.formConfig = {
-            fields: [
-                { name: 'name', type: 'text', required: true },
-                { name: 'phone', type: 'text' },
-                { name: 'contactPerson', type: 'text' },
-                { name: 'email', type: 'text' },
-                { name: 'address', type: 'text', rows: 2, span: true },
-            ],
-            reset: true,
-        };
-        this.suppliersTableConfig = {
-            showFilter: true,
-            minColumns: ['name'],
-            flatButtons: true,
-            columns: [
-                { name: 'name', type: 'text' },
-                { name: 'phone', type: 'text' },
-                { name: 'contactPerson', type: 'text' },
-            ],
-            buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'suppliers?action=create', method: 'post' } },
-                { name: 'view', dialog: true },
-                { name: 'edit', dialog: true, action: { url: 'suppliers?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'suppliers?action=delete', method: 'post' } },
-            ],
-            loadAction: { url: 'suppliers/all/x' },
-            formConfig: this.formConfig
-        };
     }
     ngOnInit() {
     }
 }
 SuppliersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuppliersComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-SuppliersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuppliersComponent, selector: "spa-suppliers", ngImport: i0, template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"suppliersTableConfig\"></spa-table>\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
+SuppliersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuppliersComponent, selector: "spa-suppliers", ngImport: i0, template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"dataService.suppliersTableConfig\"></spa-table>\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["hideTitle", "data", "tileData", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuppliersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-suppliers', template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"suppliersTableConfig\"></spa-table>\n</div>\n\n" }]
+            args: [{ selector: 'spa-suppliers', template: "<h4>Suppliers</h4>\n<hr>\n\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"dataService.suppliersTableConfig\"></spa-table>\n</div>\n\n" }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }]; } });
 
 //-------------------------------------------VIEW
@@ -7616,7 +7655,7 @@ class transactDialog {
     }
 }
 transactDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, deps: [{ token: LoaderService }, { token: MessageService }, { token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-transactDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: transactDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Narration\" [(value)]=\"txn.narration\"></spa-text>\r\n    <spa-select display=\"Category\" [(value)]=\"txn.categoryID\" [options]=\"categories\" optionDisplay=\"name\" optionValue=\"listItemID\" [defaultFirstValue]=\"true\"></spa-select>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+transactDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: transactDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Narration\" [(value)]=\"txn.narration\"></spa-text>\r\n    <spa-select display=\"Category\" [(value)]=\"txn.categoryID\" [options]=\"categories\" optionDisplay=\"name\" optionValue=\"listItemID\" [defaultFirstValue]=\"true\"></spa-select>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "infoMessage"], outputs: ["valueChange", "infoClick"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage", "copyContent", "clearContent", "suffix"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n\r\n\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n  <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n    <spa-select *ngIf=\"action == 'transfer'\" [(value)]=\"txn.destinationID\" display=\"Transfer to\" [options]=\"accounts\" optionDisplay=\"name\" optionValue=\"accountID\"></spa-select>\r\n\r\n    <spa-date display=\"Date\" [(value)]=\"txn.date\"></spa-date>\r\n    <spa-money display=\"Amount\" [(value)]=\"txn.amount\"></spa-money>\r\n    <spa-text display=\"Narration\" [(value)]=\"txn.narration\"></spa-text>\r\n    <spa-select display=\"Category\" [(value)]=\"txn.categoryID\" [options]=\"categories\" optionDisplay=\"name\" optionValue=\"listItemID\" [defaultFirstValue]=\"true\"></spa-select>\r\n\r\n\r\n\r\n  </div>\r\n\r\n</mat-dialog-content>\r\n\r\n\r\n<mat-dialog-actions>\r\n<button mat-button [disabled]=\"isProcessing\" (click)=\"submit()\" cdkFocusInitial>Submit</button>\r\n<button mat-button [disabled]=\"isProcessing\" cdkFocusInitial mat-dialog-close>Cancel</button>\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".info{color:#4682b4;margin-top:5px;margin-right:5px;font-size:18px}.sign{margin-top:5px;font-size:18px}.actionbuttons{gap:1px}button{padding-left:7px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]