tin-spa 2.1.21 → 2.1.22

package/fesm2015/tin-spa.mjs

@@ -242,9 +242,9 @@ class Core {
                 continue;
             let name = (_a = field.alias) !== null && _a !== void 0 ? _a : this.camelToWords(field.name);
             let d = data[field.name];
-            console.log(name);
+            console.log(name + ' ' + d);
             if (field.required) {
-                if (!d)
+                if (d == undefined || d == null)
                     return `${name} is required`;
                 if (field.type == 'text') {
                     if (d == '')
@@ -261,7 +261,7 @@ class Core {
                         return `Maximum ${name} is ${field.max}`;
                 }
                 else if (field.type == 'select') {
-                    if (d == '')
+                    if (typeof (d) == 'string' && d == '')
                         return `Please select ${name}`;
                 }
             }
@@ -1006,6 +1006,7 @@ class DataServiceLib {
         this.capInventory = new CapItem;
         this.capAccounts = new CapItem;
         this.capSuppliers = new CapItem;
+        this.capTasks = new CapItem;
         this.tmpProfileuserName = "";
         this.appConfig.appName = "App-Name";
         this.appConfig.logo = "./assets/logo.png";
@@ -1050,7 +1051,7 @@ class DataServiceLib {
         this.capPlans.link = "home/admin/plans";
         this.capGeneral.name = "cap11";
         this.capGeneral.display = "General";
-        this.capGeneral.capSubItems = [this.capCustomers, this.capInventory, this.capAccounts, this.capSuppliers];
+        this.capGeneral.capSubItems = [this.capCustomers, this.capInventory, this.capAccounts, this.capSuppliers, this.capTasks];
         this.capCustomers.name = "cap12";
         this.capCustomers.display = "Customers";
         this.capCustomers.link = "home/admin/customers";
@@ -1067,6 +1068,10 @@ class DataServiceLib {
         this.capSuppliers.display = "Suppliers";
         this.capSuppliers.link = "home/admin/suppliers";
         this.capSuppliers.icon = "groups";
+        this.capTasks.name = "cap16";
+        this.capTasks.display = "Tasks";
+        this.capTasks.link = "home/admin/tasks";
+        this.capTasks.icon = "task_alt";
     }
     UpdateAppConfig(config) {
         this.appConfigSource.next(config);
@@ -1352,10 +1357,10 @@ class TextComponent {
     }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
+            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field class=\"spa-text\" *ngIf=\"format=='password'\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hideRequiredMarker]=\"!required\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [(ngModel)]=\"value\" (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -1449,7 +1454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class DateComponent {
     constructor() {
         this.required = true;
-        this.min = "2023-11-05";
+        this.min = "1900-01-01";
         this.max = "9999-01-01";
         this.readonly = false;
         this.hint = "";
@@ -1579,6 +1584,7 @@ class SelectComponent {
     constructor() {
         this.width = "100%";
         this.readonly = false;
+        this.required = true;
         this.readonlyMode = "";
         this.hint = "";
         this.placeholder = "";
@@ -1608,14 +1614,16 @@ class SelectComponent {
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { width: "width", readonly: "readonly", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "spa-select", inputs: { width: "width", readonly: "readonly", required: "required", readonlyMode: "readonlyMode", hint: "hint", placeholder: "placeholder", multiple: "multiple", display: "display", value: "value", options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", optionDisplayExtra: "optionDisplayExtra" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" [hideRequiredMarker]=\"!required\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\"  >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n  <!-- <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint> -->\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-select', template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\"  [ngStyle]=\"{'width':width}\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\" >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n  <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint>\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n" }]
+            args: [{ selector: 'spa-select', template: "\r\n<mat-form-field *ngIf=\"readonlyMode==''\"  floatLabel=\"always\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" [hideRequiredMarker]=\"!required\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <mat-select [(value)]=\"value\" (selectionChange)=\"changed()\" [multiple]=\"multiple\" [disabled]=\"readonly\" [placeholder]=\"placeholder\"  >\r\n    <mat-option *ngFor=\"let row of options\" [value]=\"row[optionValue]\">\r\n      {{row[optionDisplay]}} <label *ngIf=\"optionDisplayExtra!='' && row[optionDisplayExtra] && row[optionDisplayExtra] != ''\">({{row[optionDisplayExtra]}})</label>\r\n    </mat-option>\r\n  </mat-select>\r\n  <!-- <mat-hint *ngIf=\"hint!=''\">{{hint}}</mat-hint> -->\r\n</mat-form-field>\r\n\r\n<!-- ReadOnlyModes original, text, label -->\r\n<!-- <spa-text *ngIf=\"readonlyMode=='text' && readonly\" [display]=\"display\" [(value)]=\"displayValue\" [readonly]=\"true\" ></spa-text> -->\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { width: [{
                 type: Input
             }], readonly: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], readonlyMode: [{
                 type: Input
             }], hint: [{
@@ -1950,10 +1958,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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" 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</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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" 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</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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CurrencyInputMaskDirective, selector: "[appCurrencyInputMask]" }] });
 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\"  [ngStyle]=\"{'width':width}\" 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</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}\" 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</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: [{
@@ -2013,7 +2021,7 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionComponent, selector: "spa-option", inputs: { options: "options", optionValue: "optionValue", optionDisplay: "optionDisplay", readonly: "readonly", type: "type", value: "value", display: "display", show: "show" }, outputs: { valueChange: "valueChange", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-option', template: "\r\n<div class=\"tin-row gap-0\">\r\n\r\n<mat-checkbox color=\"primary\" style=\"margin-right:5px\" [(ngModel)]=\"show\" (change)=\"resetValue()\" labelPosition=\"after\">{{display}}</mat-checkbox>\r\n\r\n<mat-form-field style=\"margin-right:5px;width: 0px;\" >\r\n<input matInput />\r\n</mat-form-field>\r\n\r\n\r\n<ng-container *ngIf=\"show\" [ngSwitch]=\"type\">\r\n\r\n  <spa-date *ngSwitchCase=\"'date'\" [display]=\"display\"  [(value)]=\"value\"  (valueChange)=\"dateChanged($event)\"></spa-date>\r\n\r\n  <spa-select *ngSwitchCase=\"'select'\" [display]=\"display\"  [options]=\"options\" [optionDisplay]=\"optionDisplay\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\">\r\n  </spa-select>\r\n\r\n  <spa-text *ngSwitchDefault [display]=\"display\" (keyup.enter)=\"enterPressed()\" [options]=\"options\" [optionValue]=\"optionValue\" [(value)]=\"value\" (valueChange)=\"changed()\"></spa-text>\r\n\r\n</ng-container>\r\n\r\n</div>\r\n" }]
@@ -2610,10 +2618,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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+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" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-number', template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n" }]
+            args: [{ selector: 'spa-number', template: "<!-- <mat-form-field style=\"width:300px\">\n  <mat-label>Nostro Balance</mat-label>\n  <input matInput autocomplete=\"off\" type=\"number\" min=\"0.00\" step=\"0.01\" [(ngModel)]=\"bid.balance\" placeholder=\"Nostro Balance\" />\n</mat-form-field> -->\n\n\n<mat-form-field hideRequiredMarker=\"true\" [hintLabel]=\"hint\" [hideRequiredMarker]=\"!required\" [ngStyle]=\"{'width':width}\" 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</mat-form-field>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -2922,10 +2930,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\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]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit')  || config.mode =='view'\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [multiple]=\"true\">\r\n        </spa-select>\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\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]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit')  || config.mode =='view'\" [hint]=\"field.hint\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\"></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]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [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])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [multiple]=\"true\" [hint]=\"field.hint\">\r\n        </spa-select>\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [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]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\"></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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-form', template: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\">\r\n\r\n  <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n\r\n    <ng-container *ngIf=\"!field.hidden\" >\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]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit')  || config.mode =='view'\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-money>\r\n\r\n        <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [multiple]=\"true\">\r\n        </spa-select>\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue ?? 'value'\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\"></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}\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 *ngIf=\"!field.hidden\" >\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]=\"config.fileAction\" [path]=\"field.path\" [folderName]=\"data[field.keyFiledName]\" ></spa-viewer>\r\n          </div>\r\n        </ng-container>\r\n\r\n\r\n        <label *ngSwitchCase=\"'blank'\"></label>\r\n\r\n        <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit')  || config.mode =='view'\" [hint]=\"field.hint\"></spa-number>\r\n\r\n        <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\"></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]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" ></spa-check>\r\n\r\n        <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\"></spa-date>\r\n\r\n        <spa-select *ngSwitchCase=\"'select'\" [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])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\">\r\n        </spa-select>\r\n\r\n        <spa-select *ngSwitchCase=\"'multi-select'\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [multiple]=\"true\" [hint]=\"field.hint\">\r\n        </spa-select>\r\n\r\n        <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [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]=\"(field.readonly && config.mode =='edit') || config.mode =='view'\" [hint]=\"field.hint\"></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}\n"] }]
         }], ctorParameters: function () { return [{ type: MessageService }, { type: DataServiceLib }]; }, propDecorators: { files: [{
                 type: Input
             }], data: [{
@@ -3559,7 +3567,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i3$4.BreakpointObserver }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles  [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "spa-table", inputs: { data: "data", config: "config", reload: "reload" }, outputs: { dataLoad: "dataLoad", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles  [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["showText", "showButton", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "data", "reload"], outputs: ["tileClick"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config"], outputs: ["searchClick"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-table', template: "\n<spa-search *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\"></spa-search>\n\n<div class=\"top\">\n\n  <div class=\"tin-row\" >\n    <button *ngIf=\"createButton\" id=\"btnNew\" mat-raised-button color=\"primary\" style=\"margin-right: 10px;\" (click)=\"newModel()\">{{createButton.display}}</button>\n    <!-- <spa-tiles *ngIf=\"config.tileConfig\" [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles> -->\n  </div>\n\n  <div *ngIf=\"config.tileConfig && !smallScreen\" style=\"min-width: 75%;\">\n    <spa-tiles  [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n  </div>\n\n  <div *ngIf=\"config.showFilter\" class=\"d-flex justify-content-end\">\n    <spa-filter [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" (refreshClick)=\"refreshClicked()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\n  <spa-tiles [reload]=\"tileReload\" [config]=\"config.tileConfig\"></spa-tiles>\n</div>\n\n<div *ngIf=\"config.title\" class=\"title\">\n  <label style=\"font-size: larger;\">{{config.title | camelToWords}}</label>\n</div>\n\n<div>\n\n  <p *ngIf=\"!config\"><em>Configure Table</em></p>\n  <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n\n\n  <div *ngIf=\"dataSource\">\n\n\n    <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\n      <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.alias ?? column.name | camelToWords }}</th>\n        <td mat-cell *matCellDef=\"let row;\" >\n\n          <ng-container [ngSwitch]=\"column.type\">\n\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n              <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'select'\">\n              <spa-select [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\" ></spa-select>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'chip'\">\n              <mat-chip-list>\n                <mat-chip (click)=\"viewModel(row)\" [ngStyle]=\"{'background-color':getColor(row[column.name], column?.options)}\" style=\"font-size: 12px;\"> {{row[column.name]}} </mat-chip>\n                  <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n                  <ng-container *ngFor=\"let icon of column.icons\">\n                    <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n                  </ng-container>\n              </mat-chip-list>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'icon'\">\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'date'\">\n              {{row[column.name] | date : 'dd/MM/yyyy'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'datetime'\">\n              {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <!-- <ng-container *ngSwitchCase=\"'spinner'\">\n                <mat-spinner [diameter]=\"20\">\n\n                </mat-spinner>\n            </ng-container> -->\n\n            <ng-container *ngSwitchCase=\"'money'\">\n\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name] | currency:'':''}}</label>\n\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <label [ngStyle]=\"{'color': testColorCondition(row, column.color) ? column.color.name : ''}\">{{row[column.name]}}</label>\n              <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"column.icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\n\n              <ng-container *ngFor=\"let icon of column.icons\">\n                <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"icon?.tip\" matTooltipPosition=\"above\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\n              </ng-container>\n\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\n\n\n          <ng-container *ngFor=\"let button of displayedButtons\">\n\n            <ng-container *ngIf=\"button.name != 'create' && testVisible(row,button.name)\">\n\n              <button  mat-mini-fab  [matTooltip]=\"button.tip ?? button.name \" matTooltipPosition=\"above\" style=\"margin-right:5px\"\n              [ngStyle]=\"{'background-color':getButtonColor(button, row)}\"\n              [disabled]=\"testDisabled(row,button.name)\"  (click)=\"actionClicked(button.name, row)\">\n                <mat-icon>{{getIcon(button.name)}}</mat-icon>\n              </button>\n\n            </ng-container>\n\n            <ng-container *ngIf=\"button.name != 'create' && !testVisible(row,button.name)\">\n              <label style=\"margin-right: 35px;\"></label>\n            </ng-container>\n\n          </ng-container>\n\n\n        </td>\n      </ng-container>\n\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': config.greyOut && config.greyOut(row)}\"></tr>\n    </table>\n\n  </div>\n\n  <mat-paginator #tablePaginator [pageSizeOptions]=\"[10, 20, 50]\" showFirstLastButtons></mat-paginator>\n\n</div>\n\n<p *ngIf=\"dataSource?.length == 0\"><em>No Data</em></p>\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}\n"] }]
@@ -3695,7 +3703,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 }], 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=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-2\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-col mb-2\" 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;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\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\">Request 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\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Member 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\"></spa-table>\r\n\r\n  </div>\r\n\r\n\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=\"myTenant && 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  <div class=\"mt-5\"><label>.</label></div>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+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=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-2\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-col mb-2\" 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;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\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\">Request 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\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Member 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\"></spa-table>\r\n\r\n  </div>\r\n\r\n\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=\"myTenant && 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  <div class=\"mt-5\"><label>.</label></div>\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
 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=\"myTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\r\n\r\n      <div class=\"tin-col mb-2\" *ngIf=\"ownTenant\" style=\"max-width: 500px;\">\r\n        <spa-text display=\"Name\" [(value)]=\"myTenant.name\" hint=\"This name will be displayed to all members of your organisation.\" style=\"min-width: 300px;\"> </spa-text>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"renameTenant()\">Save</button>\r\n      </div>\r\n\r\n      <div class=\"tin-col mb-2\" 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;\"></spa-select>\r\n        <button mat-stroked-button color=\"primary\" (click)=\"switchTenant()\">Switch</button>\r\n      </div>\r\n\r\n      <div *ngIf=\"ownTenant\">\r\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\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\">Request 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\"></spa-table>\r\n\r\n  </div>\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Invitations</label>\r\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\r\n    <label class=\"subtitle text-muted\">The following are requests for you to join other organisations.</label>\r\n\r\n    <spa-table [config]=\"invTableConfig\"></spa-table>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\r\n\r\n    <label class=\"title\" >Member 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\"></spa-table>\r\n\r\n  </div>\r\n\r\n\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=\"myTenant && 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  <div class=\"mt-5\"><label>.</label></div>\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"] }]
@@ -4087,7 +4095,7 @@ class accountDialog {
     }
 }
 accountDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: accountDialog, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-accountDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: accountDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\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 [disabled]=\"isProcessing\" 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}\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: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+accountDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: accountDialog, selector: "app-quanityDiag", ngImport: i0, template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\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 [disabled]=\"isProcessing\" 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}\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: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: accountDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-quanityDiag', template: "\r\n<h2 mat-dialog-title>{{action | titlecase}}</h2>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-col\" style=\"font-size:14px\">\r\n\r\n  <spa-text display=\"Name\" [(value)]=\"account.name\" ></spa-text>\r\n  <spa-text display=\"Description\" [(value)]=\"account.description\" ></spa-text>\r\n  <spa-select display=\"Currency\" [(value)]=\"account.currency\" [options]=\"currencies\" optionDisplay=\"name\" optionValue=\"value\"></spa-select>\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 [disabled]=\"isProcessing\" 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}\n"] }]
@@ -4257,7 +4265,7 @@ class transactDialog {
     }
 }
 transactDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: transactDialog, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: i3.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=\"Reference\" [(value)]=\"txn.reference\"></spa-text>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "pipe", type: i1.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=\"Reference\" [(value)]=\"txn.reference\"></spa-text>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "pipe", type: i1.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=\"Reference\" [(value)]=\"txn.reference\"></spa-text>\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}\n"] }]
@@ -4347,6 +4355,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'spa-transactions', template: "<h4>Transactions ({{account?.name}})</h4>\n<hr>\n\n<div class=\"d-flex justify-content-between\" style=\" font-size: 14px;\" >\n\n  <div *ngIf=\"account\" class=\"tin-row actionbuttons\">\n    <label style=\"margin-right: 5px;\">{{account?.currency}}</label>\n    <label style=\"font-size: 34px;margin-right: 20px;\">{{account?.balance | currency : '' : ''}}</label>\n    <div *ngIf=\"!smallScreen; then buttons\" ></div>\n  </div>\n\n  <div *ngIf=\"!smallScreen\">\n    <spa-filter (refreshClick)=\"loadData()\"></spa-filter>\n  </div>\n\n</div>\n\n<div *ngIf=\"smallScreen\" style=\"margin-bottom: 10px;\"></div>\n\n<div *ngIf=\"smallScreen; then buttons\" ></div>\n\n<ng-template #buttons >\n  <div class=\"tin-row actionbuttons\">\n    <button mat-stroked-button style=\"color: green;\" (click)=\"transact('income','')\"><mat-icon class=\"sign\">add</mat-icon>Income</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: red;\" (click)=\"transact('expense','')\"><mat-icon class=\"sign\">remove</mat-icon>Expense</button> <mat-icon class=\"info\">info</mat-icon>\n    <button mat-stroked-button style=\"color: orange;\" (click)=\"transact('transfer','')\" ><mat-icon class=\"sign\">sync_alt</mat-icon>Transfer</button> <mat-icon class=\"info\">info</mat-icon>\n  </div>\n</ng-template>\n\n\n\n<div style=\" font-size: 14px;\">\n  <spa-table [config]=\"config\" [data]=\"transactions\" [reload]=\"reload\" (dataLoad)=\"loadData()\" (actionClick)=\"actionClicked($event)\"></spa-table>\n</div>\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}\n"] }]
         }], ctorParameters: function () { return [{ type: DataServiceLib }, { type: MessageService }, { type: i3$4.BreakpointObserver }, { type: i3.MatDialog }]; } });
 
+class TasksComponent {
+    constructor(dataService, messageService, authService) {
+        this.dataService = dataService;
+        this.messageService = messageService;
+        this.authService = authService;
+        this.statuses = [
+            { name: 'Not Started', value: 0 },
+            { name: 'In-Progress', value: 1 },
+            { name: 'Completed', value: 2 },
+        ];
+        this.formConfig = {
+            fields: [
+                { name: 'name', type: 'text', span: true, required: true },
+                { name: 'status', type: 'select', options: this.statuses, defaultValue: 0, required: true },
+                { name: 'dueDate', type: 'date' },
+                { name: 'assignee', type: 'select', optionDisplay: 'name', optionValue: 'userName' },
+            ],
+            reset: true,
+        };
+        this.config = {
+            showFilter: true,
+            minColumns: ['name'],
+            logResponse: true,
+            columns: [
+                { name: 'name', type: 'text' },
+                { name: 'status', type: 'text' },
+                { name: 'dueDate', type: 'date' },
+                { name: 'assigneeName', alias: 'assignee', type: 'text' },
+                { name: 'createdDate', alias: 'Created', type: 'date' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create', dialog: true, action: { url: 'general/tasks?action=create', method: 'post' } },
+                { name: 'view', dialog: true },
+                { name: 'edit', dialog: true, action: { url: 'general/tasks?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'general/tasks?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'general/tasks/x' },
+            formConfig: this.formConfig
+        };
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.dataService.CallApi({ url: 'tenant/members/x' }).subscribe((api) => {
+            this.formConfig.fields.find(x => x.name == 'assignee').options = api.data;
+            this.formConfig.fields.find(x => x.name == 'assignee').defaultValue = this.authService.currentUser;
+        });
+    }
+}
+TasksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+TasksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TasksComponent, selector: "spa-tasks", ngImport: i0, template: "<h4>Tasks</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: ["data", "config", "reload"], outputs: ["dataLoad", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TasksComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-tasks', template: "<h4>Tasks</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 }]; } });
+
 class TinSpaModule {
 }
 TinSpaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TinSpaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -4355,7 +4420,7 @@ TinSpaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent, SearchComponent, ViewerComponent, viewerDialog,
         TenantSettingsComponent, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
         SuppliersComponent,
-        TransactionsComponent, transactDialog, ListDialogComponent], imports: [SpaMatModule,
+        TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent], imports: [SpaMatModule,
         HttpClientModule,
         CurrencyInputModule,
         NgxDocViewerModule], exports: [TinSpaComponent,
@@ -4421,7 +4486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         AttachComponent, ChipsComponent, LoaderComponent, NavMenuComponent, TableComponent, detailsDialog, FormComponent, CamelToWordsPipe, NumberComponent, SearchComponent, ViewerComponent, viewerDialog,
                         TenantSettingsComponent, TenantsComponent, BugComponent, MembershipComponent, PlansComponent, CustomersComponent, InventoryComponent, quantityDialog, AccountsComponent, accountDialog,
                         SuppliersComponent,
-                        TransactionsComponent, transactDialog, ListDialogComponent,
+                        TransactionsComponent, transactDialog, ListDialogComponent, TasksComponent,
                     ],
                     imports: [
                         SpaMatModule,
@@ -4870,7 +4935,7 @@ class ProfileComponent {
     }
 }
 ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: HttpService }, { token: i1$3.Router }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProfileComponent, selector: "spa-profile", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProfileComponent, selector: "spa-profile", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-profile', template: "\r\n<h4>Profile</h4>\r\n<hr>\r\n\r\n<div class=\"container tin-grid-auto\" style=\"font-size:14px;\">\r\n\r\n  <div class=\"tin-center centa\">\r\n    <div class=\"profileImage\">{{initials}}</div>\r\n    <mat-label id=\"lbluserName\" >{{profile?.userName}}</mat-label>\r\n  </div>\r\n\r\n  <div>\r\n\r\n    <spa-text id=\"txtFirstName\" display=\"First Name\" [(value)]=\"profile.firstName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtLastName\" display=\"Last Name\" [(value)]=\"profile.lastName\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-text id=\"txtAuth\" display=\"Authentication\" [(value)]=\"profile.authType\" [readonly]=\"true\"></spa-text>\r\n    <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"profile.email\" [readonly]=\"selfProfile\"></spa-text>\r\n    <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"profile.roleID\" [readonly]=\"selfProfile\"></spa-select>\r\n\r\n    <button id=\"btnUpdate\" class=\"w-100\"   mat-raised-button color=\"primary\" *ngIf=\"!selfProfile\" [disabled]=\"isProcessing\" (click)=\"updateProfile()\">Update Profile</button>\r\n  </div>\r\n\r\n\r\n  <div class=\"tin-center centa\">\r\n    <a mat-button id=\"lnkUserManager\" style=\"margin-left: 1em\" *ngIf=\"!selfProfile\" (click)=\"gotoUsers()\">User Manager</a>\r\n    <a mat-button id=\"lnkChangePassword\" style=\"margin-left: 1em\" *ngIf=\"(selfProfile || myRole[dataService.capUsers.name]) && profile.authType=='local'\" (click)=\"changePassword()\">Change Password</a>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".centa{display:flex;flex-direction:column}.profileImage{width:150px;height:150px;border-radius:50%;background:#512DA8;font-size:50px;color:#fff;text-align:center;line-height:150px;margin:20px 0 0}#lbluserName{font-size:20px;font-style:italic}\n"] }]
@@ -5312,7 +5377,7 @@ class CreateAccountComponent {
     }
 }
 CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateAccountComponent, deps: [{ token: HttpService }, { token: MessageService }, { token: DataServiceLib }, { token: AuthService }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
-CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateAccountComponent, selector: "spa-create-account", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<h4>Create User</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px; max-width: 70%;\">\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\" (valueChange)=\"check()\" ></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"register.email\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"register.roleID\"></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }] });
+CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateAccountComponent, selector: "spa-create-account", inputs: { appConfig: "appConfig" }, ngImport: i0, template: "<h4>Create User</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px; max-width: 70%;\">\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\" (valueChange)=\"check()\" ></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"register.email\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"register.roleID\"></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["readonly", "hint", "display", "placeholder", "value", "format", "type", "rows", "width", "options", "optionValue", "required", "min", "max", "regex"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["width", "readonly", "required", "readonlyMode", "hint", "placeholder", "multiple", "display", "value", "options", "optionValue", "optionDisplay", "optionDisplayExtra"], outputs: ["valueChange"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value"], outputs: ["valueChange", "click", "check", "uncheck"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateAccountComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-create-account', template: "<h4>Create User</h4>\r\n\r\n<hr/>\r\n\r\n<div class=\"container tin-grid\" style=\"font-size:14px; max-width: 70%;\">\r\n\r\n  <spa-text id=\"txtUserName\" display=\"Username\" [(value)]=\"register.userName\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboAuth\" display=\"Authentication Type\" [options]=\"authTypes\" optionDisplay=\"name\" optionValue=\"value\" [(value)]=\"register.authType\" (valueChange)=\"check()\" ></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-text id=\"txtFirstName\" display=\"FirstName\" [(value)]=\"register.firstName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n  <spa-text id=\"txtLastName\" display=\"LastName\" [(value)]=\"register.lastName\" [readonly]=\"register.authType =='AD'\"></spa-text>\r\n\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtPassword\" display=\"Password\" format=\"password\" [(value)]=\"register.password\" ></spa-text>\r\n\r\n  <spa-text *ngIf=\"register.authType == 'local'\" id=\"txtConfirmPassword\" display=\"Confirm Password\" format=\"password\" [(value)]=\"confirmPassword\" ></spa-text>\r\n\r\n  <spa-text id=\"txtEmail\" display=\"Email\" [(value)]=\"register.email\"></spa-text>\r\n\r\n  &nbsp;\r\n\r\n  <spa-select id=\"cboRole\" display=\"Role\" [options]=\"roles\" optionDisplay=\"roleName\" optionValue=\"roleID\" [(value)]=\"register.roleID\"></spa-select>\r\n\r\n  &nbsp;\r\n\r\n  <spa-check display=\"Open profile after creation\" [(value)]=\"openProfile\"></spa-check>\r\n\r\n  <div class=\"span-col-center\">\r\n    <button id=\"btnCreate\" [disabled]=\"register.authType ==''\" mat-raised-button color=\"primary\" (click)=\"create()\" cdkFocusInitial>Create</button>\r\n  </div>\r\n\r\n\r\n\r\n</div>\r\n\r\n\r\n" }]
@@ -5436,6 +5501,7 @@ const routes$1 = [
     { path: "suppliers", component: SuppliersComponent },
     { path: "accounts", component: AccountsComponent },
     { path: "transactions", component: TransactionsComponent },
+    { path: "tasks", component: TasksComponent },
 ];
 class AdminRoutingModule {
 }