tin-spa 2.1.0 → 2.1.2

package/fesm2020/tin-spa.mjs

@@ -185,6 +185,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class Core {
+    static camelToWords(value) {
+        if (!value)
+            return value;
+        if (typeof value !== 'string')
+            return value;
+        if (value.length == 0)
+            return value;
+        let v = value.charAt(0).toUpperCase() + value.substring(1);
+        return v.replace(/([A-Z]+)*([A-Z][a-z])/g, "$1 $2");
+    }
+    static generateObject(fields) {
+        let data = {};
+        fields.forEach(field => {
+            if (field.type != 'section' && field.type != 'blank') {
+                data[field.name] = this.getInitialValue(field);
+            }
+        });
+        return data;
+    }
+    static resetObject(fields, data) {
+        fields.forEach(field => {
+            if (field.type != 'section' && field.type != 'blank') {
+                data[field.name] = this.getInitialValue(field);
+            }
+        });
+    }
+    static validateObject(fields, data) {
+        console.log("Validations");
+        for (let field of fields) {
+            let name = this.camelToWords(field.name);
+            let d = data[field.name];
+            console.log(name);
+            if (field.required) {
+                if (!d)
+                    return `${name} is required`;
+                if (field.type == 'text') {
+                    if (d == '')
+                        return `Please enter ${name}`;
+                    if (field.min && d.length < field.min)
+                        return `Minimum  ${name} length is ${field.min}`;
+                    if (field.max && d.length > field.max)
+                        return `Maximum ${name} length is ${field.max}`;
+                }
+                else if (field.type == 'number' || field.type == 'money' || field.type == 'date') {
+                    if (field.min && d < field.min)
+                        return `Minimum  ${name} is ${field.min}`;
+                    if (field.max && d > field.max)
+                        return `Maximum ${name} is ${field.max}`;
+                }
+                else if (field.type == 'select') {
+                    if (d == '')
+                        return `Please select ${name}`;
+                }
+            }
+        }
+        ;
+        return '';
+    }
+    static getInitialValue(field) {
+        if (field.defaultValue) {
+            return field.defaultValue;
+        }
+        switch (field.type) {
+            case 'text':
+                return '';
+            case 'money':
+                return 0;
+            case 'number':
+                return 0;
+            case 'date':
+                return '';
+            case 'checkbox':
+                return false;
+            case 'select':
+                return null;
+            default:
+                return null;
+        }
+    }
     static getClone(x) {
         return JSON.parse(JSON.stringify(x));
     }
@@ -1015,7 +1094,7 @@ class TextComponent {
         this.type = "";
         this.leave = new EventEmitter();
         this.enterPress = new EventEmitter();
-        this.rows = "";
+        this.rows = 1;
         this.width = "100%";
         //Autocomplete items
         this.options = [];
@@ -1030,6 +1109,9 @@ class TextComponent {
         this.control = new FormControl(this.value, [Validators.required, Validators.minLength(this.min), Validators.maxLength(this.max), Validators.pattern(this.regex)]);
     }
     ngOnInit() {
+        if (!this.options) {
+            this.options = [];
+        }
         if (this.options.length > 0) {
             this.initFilter();
         }
@@ -1110,10 +1192,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 == '' && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows != ''  && 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 == '' && format=='text' && options.length>0 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextComponent, selector: "spa-text", inputs: { readonly: "readonly", hint: "hint", display: "display", placeholder: "placeholder", value: "value", format: "format", type: "type", rows: "rows", width: "width", options: "options", optionValue: "optionValue", required: "required", min: "min", max: "max", regex: "regex" }, outputs: { valueChange: "valueChange", leave: "leave", enterPress: "enterPress" }, ngImport: i0, template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"rows == '' && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows != ''  && 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 == '' && format=='text' && options.length>0 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
+            args: [{ selector: 'spa-text', template: "\r\n<!-- General Text -->\r\n<mat-form-field *ngIf=\"(!rows || rows == 1) && (format=='text' || format =='date') && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\" >\r\n<mat-label *ngIf=\"format=='text'\">{{display}}</mat-label>\r\n<mat-label *ngIf=\"format=='date'\">{{display | date:'dd/MM/yyyy'}}</mat-label>\r\n<input matInput autocomplete=\"off\" [(ngModel)]=\"value\"  (change)=\"changed()\" (blur)=\"leaved()\" (keyup.enter)=\"enterPressed()\" [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"/>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n<!-- password -->\r\n<mat-form-field *ngIf=\"format=='password'\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n  <mat-label>{{display}}</mat-label>\r\n  <input matInput [type]=\"hide ? 'password' : 'text'\" (keyup.enter)=\"enterPressed()\" (change)=\"changed()\" (blur)=\"leaved()\" [(ngModel)]=\"value\" autocomplete=\"off\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\">\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n  <button mat-icon-button matSuffix (click)=\"hide = !hide\" [attr.aria-label]=\"'Hide password'\" [attr.aria-pressed]=\"hide\">\r\n    <mat-icon style=\"font-size: 18px;\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<!-- TextArea copy - Only change input to textarea and change ngif to not -->\r\n\r\n<mat-form-field *ngIf=\"rows > 1  && options.length==0\" hideRequiredMarker=\"true\" [hintLabel]=\"hint\"  [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n<mat-label>{{display}}</mat-label>\r\n<textarea matInput autocomplete=\"off\" [rows]=\"rows\" [(ngModel)]=\"value\" (change)=\"changed()\" (keyup.enter)=\"enterPressed()\" [placeholder]=\"placeholder\" [formControl]=\"control\" [required]=\"required\" [readonly]=\"readonly\"></textarea>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<!-- Auto Complete-->\r\n\r\n  <mat-form-field  *ngIf=\"(!rows || rows == 1) && format=='text' && options.length>0 \" [hintLabel]=\"hint\" [ngStyle]=\"{'width':width}\" style=\"margin-right: 5px;\">\r\n    <mat-label>{{display}}</mat-label>\r\n    <input [type]=\"type\" [placeholder]=\"placeholder\"  (change)=\"changed()\" matInput [formControl]=\"myControl\"  [matAutocomplete]=\"auto\" [required]=\"required\"  [readonly]=\"readonly\">\r\n    <mat-error *ngIf=\"control.invalid\">{{validate(myControl)}}</mat-error>\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"changed()\">\r\n\r\n      <ng-container *ngIf=\"!multiDimension\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          {{option}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"multiDimension\">\r\n        <mat-option *ngFor=\"let row of filteredOptions | async\" [value]=\"row[optionValue]\">\r\n          {{row[optionValue]}}\r\n        </mat-option>\r\n      </ng-container>\r\n\r\n\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
                 type: Input
             }], hint: [{
@@ -1206,54 +1288,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class DateComponent {
     constructor() {
-        this.date = new FormControl(new Date());
+        this.required = true;
+        this.min = "2023-11-05";
+        this.max = "9999-01-01";
+        this.readonly = false;
+        this.hint = "";
         this.value = Core.nowDate(true);
         this.display = "";
-        this.readonly = false;
+        this.placeholder = "";
         this.width = "100%";
-        this.min = "1900-01-01";
-        this.max = "9999-01-01";
         this.valueChange = new EventEmitter();
+        this.control = new FormControl(new Date());
     }
     ngOnInit() {
         this.minDate = new FormControl(new Date(this.min));
         this.maxDate = new FormControl(new Date(this.max));
         if (!this.value || this.value == "") {
-            this.date = new FormControl(new Date());
+            this.control = new FormControl(new Date());
             ;
         }
         setTimeout(() => { this.onChangeEvent(); }, 5);
         if (this.readonly) {
-            this.date.disable();
+            this.control.disable();
         }
         else {
-            this.date.enable();
+            this.control.enable();
         }
     }
     ngOnChanges() {
-        this.date = new FormControl(new Date(this.value));
+        this.control = new FormControl(new Date(this.value));
     }
     onChangeEvent() {
-        let d = Core.getFormatedDate2(this.date.value, true);
+        let d = Core.getFormatedDate2(this.control.value, true);
         this.valueChange.emit(d);
     }
+    validate(control) {
+        if (control.hasError('matDatepickerMin')) {
+            return `Minimun date is ${this.min}`;
+        }
+        if (control.hasError('matDatepickerMax')) {
+            return `Maximum date is ${this.max}`;
+        }
+        return "";
+    }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { value: "value", display: "display", readonly: "readonly", width: "width", min: "min", max: "max" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"date\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ 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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"date\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n</mat-form-field>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { required: [{
                 type: Input
-            }], display: [{
+            }], min: [{
+                type: Input
+            }], max: [{
                 type: Input
             }], readonly: [{
                 type: Input
-            }], width: [{
+            }], hint: [{
                 type: Input
-            }], min: [{
+            }], value: [{
                 type: Input
-            }], max: [{
+            }], display: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], width: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -1620,15 +1720,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class MoneyComponent {
     constructor() {
         this.readonly = false;
+        this.hint = "";
         this.display = "";
-        this.value = "";
         this.placeholder = "";
-        this.valueChange = new EventEmitter();
-        this.enterPress = new EventEmitter();
-        this.leave = new EventEmitter();
+        this.value = "";
         this.width = "100%";
-        this.hint = "";
         this.currency = "";
+        this.valueChange = new EventEmitter();
+        this.leave = new EventEmitter();
+        this.enterPress = new EventEmitter();
+        //validation input
+        this.required = true;
+        this.min = 0;
+        this.max = 9000000000000000; //Math.max 9000000000000000
+        //validation
+        this.control = new FormControl(this.value, [Validators.required, Validators.min(this.min), Validators.max(this.max)]);
     }
     ngOnInit() {
         if (this.placeholder == "") {
@@ -1637,40 +1743,77 @@ class MoneyComponent {
     }
     ngOnChanges() {
     }
+    ngAfterViewInit() {
+        this.initControl(this.control);
+    }
+    initControl(control) {
+        if (this.readonly) {
+            control.setValidators(null);
+            control.updateValueAndValidity();
+        }
+        if (!this.required && !this.readonly) {
+            control.setValidators([Validators.min(this.min), Validators.max(this.max)]);
+            this.control.updateValueAndValidity();
+        }
+    }
     changed(x) {
         this.valueChange.emit(x);
     }
+    leaved() {
+        this.leave.emit();
+    }
     enterPressed() {
         this.enterPress.emit();
     }
-    leaved() {
-        this.leave.emit();
+    validate(control) {
+        if (this.required && control.hasError('required')) {
+            return `Required`;
+        }
+        if (parseFloat(this.value) < this.min) {
+            return `Minimun value is ${this.min}`;
+        }
+        if (parseFloat(this.value) > this.max) {
+            return `Maximum value is ${this.max}`;
+        }
+        if (control.hasError('min')) {
+            return `Minimun value is ${this.min}`;
+        }
+        if (control.hasError('max')) {
+            return `Maximum value is ${this.max}`;
+        }
+        return "";
     }
 }
 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", display: "display", value: "value", placeholder: "placeholder", width: "width", hint: "hint", currency: "currency" }, outputs: { valueChange: "valueChange", enterPress: "enterPress", leave: "leave" }, usesOnChanges: true, ngImport: i0, template: "\r\n\r\n<mat-form-field [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\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.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\"  [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.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.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 [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\r\n  [ngModel]=\"value\" (ngModelChange)=\"changed($event)\" (keyup.enter)=\"enterPressed()\" (blur)=\"leaved()\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" />\r\n  <span *ngIf=\"currency!=''\" matPrefix>{{currency}}&nbsp;</span>\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\"  [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: [{
+                type: Input
             }], display: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], value: [{
                 type: Input
-            }], placeholder: [{
+            }], width: [{
+                type: Input
+            }], currency: [{
                 type: Input
             }], valueChange: [{
                 type: Output
-            }], enterPress: [{
-                type: Output
             }], leave: [{
                 type: Output
-            }], width: [{
+            }], enterPress: [{
+                type: Output
+            }], required: [{
                 type: Input
-            }], hint: [{
+            }], min: [{
                 type: Input
-            }], currency: [{
+            }], max: [{
                 type: Input
             }] } });
 
@@ -2169,10 +2312,10 @@ class NumberComponent {
         this.display = "";
         this.placeholder = "";
         this.value = 0;
+        this.width = "100%";
         this.valueChange = new EventEmitter();
         this.leave = new EventEmitter();
         this.enterPress = new EventEmitter();
-        this.width = "100%";
         //validation input
         this.required = true;
         this.min = 0;
@@ -2182,6 +2325,22 @@ class NumberComponent {
         this.control = new FormControl(this.value, [Validators.required, Validators.min(this.min), Validators.max(this.max)]);
     }
     ngOnInit() {
+        if (this.placeholder == "") {
+            this.placeholder = "Enter " + this.display;
+        }
+    }
+    ngAfterViewInit() {
+        this.initControl(this.control);
+    }
+    initControl(control) {
+        if (this.readonly) {
+            control.setValidators(null);
+            control.updateValueAndValidity();
+        }
+        if (!this.required && !this.readonly) {
+            control.setValidators([Validators.minLength(this.min), Validators.maxLength(this.max)]);
+            this.control.updateValueAndValidity();
+        }
     }
     changed() {
         this.valueChange.emit(this.value);
@@ -2197,10 +2356,10 @@ class NumberComponent {
             return `Required`;
         }
         if (control.hasError('min')) {
-            return `Minimun length is ${this.min}`;
+            return `Minimun value is ${this.min}`;
         }
         if (control.hasError('max')) {
-            return `Maximum length is ${this.max}`;
+            return `Maximum value is ${this.max}`;
         }
         return "";
     }
@@ -2220,14 +2379,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], width: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], leave: [{
                 type: Output
             }], enterPress: [{
                 type: Output
-            }], width: [{
-                type: Input
             }], required: [{
                 type: Input
             }], min: [{
@@ -2260,55 +2419,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 class FormComponent {
-    constructor() { }
+    constructor(messageService, dataService) {
+        this.messageService = messageService;
+        this.dataService = dataService;
+        this.buttonDisplay = "Submit";
+        this.isProcessing = false;
+        this.multiColumn = false;
+        this.buttonClick = new EventEmitter();
+    }
     ngOnInit() {
-        if (!this.fields) {
-            this.fields = this.config.fields;
+        if (!this.config.fields) {
+            this.messageService.toast("Please Configure Form Fields");
+            return;
+        }
+        if (!this.data) {
+            this.messageService.toast("Please Configure Form Data");
+            return;
+        }
+        this.fields = this.config.fields;
+        if (this.config.multiColumn) {
+            this.multiColumn = this.config.multiColumn;
         }
-        if (this.config.mode == "create" && !this.data) {
-            this.generateObject();
+        else {
+            this.multiColumn = this.fields.length > 2;
+        }
+        if (this.config?.button?.display) {
+            this.buttonDisplay = this.config.button.display;
         }
     }
     ngOnChanges() {
         console.log("changed");
     }
-    generateObject() {
-        this.data = {};
-        this.fields.forEach(field => {
-            this.data[field.name] = this.getInitialValue(field.type);
-        });
-    }
-    getInitialValue(type) {
-        switch (type) {
-            case 'text':
-                return '';
-            case 'money':
-                return 0;
-            case 'number':
-                return 0;
-            case 'date':
-                return '';
-            case 'checkbox':
-                return false;
-            case 'select':
-                return null;
-            default:
-                return null;
+    buttonClicked() {
+        console.log("Button Clicked");
+        this.buttonClick.emit(this.data);
+        console.log(this.data);
+        let button = this.config.button;
+        if (!button) {
+            return;
+        }
+        //validation
+        let resp = Core.validateObject(this.fields, this.data);
+        if (resp != '') {
+            this.messageService.toast(resp);
+            return;
+        }
+        if (button.confirm) {
+            this.messageService.confirm(`${button.confirm.message}`).subscribe((result) => {
+                if (result == "yes") {
+                    this.processCall(button);
+                }
+            });
+        }
+        else {
+            this.processCall(button);
         }
     }
-    createClicked() {
-        console.log(this.data);
+    processCall(button) {
+        if (!button.action)
+            return;
+        this.isProcessing = true;
+        this.dataService.CallApi(button.action, this.data).subscribe((apiResponse) => {
+            this.isProcessing = false;
+            if (apiResponse.success) {
+                if (button.action.successMessage) {
+                    this.messageService.toast(button.action.successMessage);
+                }
+                else {
+                    this.messageService.toast("Submitted");
+                }
+                if (this.config.reset) {
+                    Core.resetObject(this.fields, this.data);
+                }
+            }
+            else {
+                this.messageService.toast("Error: " + apiResponse.message);
+            }
+        });
     }
 }
-FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { data: "data", config: "config" }, usesOnChanges: true, ngImport: i0, template: "\n<div class=\"tin-grid\">\n\n  <div *ngFor=\"let field of fields\" >\n\n    <ng-container [ngSwitch]=\"field.type\">\n\n      <spa-text *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-text>\n\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-number>\n\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-money>\n\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\n\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" ></spa-date>\n\n      <spa-select *ngSwitchCase=\"'select'\"\n        [display]=\"field.name | camelToWords\"\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\n      </spa-select>\n\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-text>\n\n    </ng-container>\n\n  </div>\n\n\n\n\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\n    <button mat-raised-button color=\"primary\" (click)=\"createClicked()\"  cdkFocusInitial>{{config.button.name}}</button>\n  </div>\n\n\n</div>\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.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: ["value", "display", "readonly", "width", "min", "max"], 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", "display", "value", "placeholder", "width", "hint", "currency"], outputs: ["valueChange", "enterPress", "leave"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] });
+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: { data: "data", config: "config" }, outputs: { buttonClick: "buttonClick" }, 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' ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\r\n\r\n      <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n        <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n      </div>\r\n\r\n      <label *ngSwitchCase=\"'blank'\">.</label>\r\n\r\n      <spa-text  *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"isProcessing\" (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: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step"], outputs: ["valueChange", "leave", "enterPress"] }, { 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: "\n<div class=\"tin-grid\">\n\n  <div *ngFor=\"let field of fields\" >\n\n    <ng-container [ngSwitch]=\"field.type\">\n\n      <spa-text *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-text>\n\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-number>\n\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-money>\n\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\n\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" ></spa-date>\n\n      <spa-select *ngSwitchCase=\"'select'\"\n        [display]=\"field.name | camelToWords\"\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\n      </spa-select>\n\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-text>\n\n    </ng-container>\n\n  </div>\n\n\n\n\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\n    <button mat-raised-button color=\"primary\" (click)=\"createClicked()\"  cdkFocusInitial>{{config.button.name}}</button>\n  </div>\n\n\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+            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' ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\r\n\r\n      <div *ngSwitchCase=\"'section'\" class=\"title\">\r\n        <label style=\"font-size: larger;\">{{field.name | camelToWords}}</label>\r\n      </div>\r\n\r\n      <label *ngSwitchCase=\"'blank'\">.</label>\r\n\r\n      <spa-text  *ngSwitchCase=\"'text'\" [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n      <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-number>\r\n\r\n      <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-money>\r\n\r\n      <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\"></spa-check>\r\n\r\n      <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.name | camelToWords\" [(value)]=\"data[field.name]\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"config.mode =='view'\" ></spa-date>\r\n\r\n      <spa-select *ngSwitchCase=\"'select'\"\r\n        [display]=\"field.name | camelToWords\"\r\n        [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" >\r\n      </spa-select>\r\n\r\n      <spa-select *ngSwitchCase=\"'multi-select'\"\r\n      [display]=\"field.name | camelToWords\"\r\n      [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay\" [optionValue]=\"field.optionValue\" [(value)]=\"data[field.name]\" [readonly]=\"config.mode =='view'\" [multiple]=\"true\">\r\n      </spa-select>\r\n\r\n      <spa-text *ngSwitchDefault [display]=\"field.name | camelToWords\" [options]=\"field.options\" [optionValue]=\"field.optionValue\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" [required]=\"field.required\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"config.mode =='view'\"></spa-text>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"isProcessing\" (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: { data: [{
                 type: Input
             }], config: [{
                 type: Input
+            }], buttonClick: [{
+                type: Output
             }] } });
 
 class detailsDialog {
@@ -2327,46 +2527,27 @@ class detailsDialog {
         this.formConfig.mode = this.data.mode;
         this.smallScreen = this.data.smallScreen;
         if (this.formConfig.mode == "create") {
-            this.details = this.generateObject();
+            this.details = Core.generateObject(this.formConfig.fields);
         }
         else {
             this.details = this.data.details;
         }
         this.isLoadComplete = true;
     }
-    generateObject() {
-        let d = {};
-        this.formConfig.fields.forEach(property => {
-            d[property.name] = this.getInitialValue(property.type);
-        });
-        return d;
-    }
     setMode(newMode) {
         this.formConfig.mode = newMode;
     }
-    getInitialValue(type) {
-        switch (type) {
-            case 'text':
-                return '';
-            case 'money':
-                return 0;
-            case 'number':
-                return 0;
-            case 'date':
-                return '';
-            case 'checkbox':
-                return false;
-            case 'select':
-                return null;
-            default:
-                return null;
-        }
-    }
     create() {
         console.log(this.details);
+        //validation
+        let resp = Core.validateObject(this.formConfig.fields, this.details);
+        if (resp != '') {
+            this.messageService.toast(resp);
+            return;
+        }
         let b = this.tableConfig.buttons.find(x => x.name == "create");
-        if (!b) {
-            this.dialogRef.close({ message: 'success', data: this.details });
+        if (!b || !b.action) {
+            this.dialogRef.close({ message: 'emit', data: this.details });
             return;
         }
         this.isProcessing = true;
@@ -2388,9 +2569,15 @@ class detailsDialog {
     }
     edit() {
         console.log("Edit");
+        //validation
+        let resp = Core.validateObject(this.formConfig.fields, this.details);
+        if (resp != '') {
+            this.messageService.toast(resp);
+            return;
+        }
         let b = this.tableConfig.buttons.find(x => x.name == "edit");
-        if (!b) {
-            this.dialogRef.close({ message: 'success', data: this.details });
+        if (!b || !b.action) {
+            this.dialogRef.close({ message: 'emit', data: this.details });
             return;
         }
         this.isProcessing = true;
@@ -2440,7 +2627,7 @@ class detailsDialog {
     }
 }
 detailsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-detailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: detailsDialog, selector: "app-viewModel", ngImport: i0, template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["data", "config"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+detailsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: detailsDialog, selector: "app-viewModel", ngImport: i0, template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["data", "config"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: detailsDialog, decorators: [{
             type: Component,
             args: [{ selector: 'app-viewModel', template: "\r\n<div class=\"row d-flex align-items-center mt-0\">\r\n\r\n  <div class=\"col\">\r\n    <h2 mat-dialog-title>{{formConfig.mode | titlecase}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='view'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-mini-fab color=\"primary\" (click)=\"setMode('edit')\"><mat-icon>edit</mat-icon></button>\r\n  </div>\r\n\r\n  <div *ngIf=\"smallScreen && formConfig.mode=='edit'\" class=\"col d-flex justify-content-end\">\r\n    <button mat-icon-button  (click)=\"setMode('view')\"><mat-icon>done</mat-icon></button>\r\n  </div>\r\n\r\n</div>\r\n<mat-dialog-content class=\"mat-typography\">\r\n\r\n<div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n\r\n<spa-form [data]=\"details\" [config]=\"formConfig\"></spa-form>\r\n\r\n</div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n<div>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='create'\" (click)=\"create()\" cdkFocusInitial>Submit</button>\r\n<button mat-raised-button [disabled]=\"isProcessing\" color=\"primary\" *ngIf=\"formConfig.mode=='edit'\" (click)=\"edit()\" cdkFocusInitial>Submit</button>\r\n<button mat-stroked-button color=\"primary\" mat-dialog-close>Cancel</button>\r\n</div>\r\n<div class=\"col d-flex justify-content-end\">\r\n<button mat-icon-button [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'\"><mat-icon>delete</mat-icon></button>\r\n</div>\r\n\r\n\r\n</mat-dialog-actions>\r\n\r\n\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"] }]
@@ -2590,12 +2777,12 @@ class TableComponent {
         // this.doAction('view', x);
     }
     create(x) {
-        console.log("Create");
+        console.log("Create " + x);
         this.createClick.emit(x);
         this.doAction('create', x);
     }
     edit(x) {
-        console.log("Edit");
+        console.log("Edit " + x);
         this.editClick.emit(x);
         this.doAction('edit', x);
     }
@@ -2654,10 +2841,13 @@ class TableComponent {
             data: { mode: "create", config: this.config, smallScreen: this.smallScreen }
         });
         dialogRef.afterClosed().subscribe((result) => {
-            if (result.message) {
+            if (result.message == "success") {
                 this.create(result.data);
                 this.refreshClicked();
             }
+            else if (result.message == "emit") {
+                this.create(result.data);
+            }
         });
     }
     editModel(row) {
@@ -2675,10 +2865,13 @@ class TableComponent {
             data: { mode: "edit", config: this.config, details: row, smallScreen: this.smallScreen },
         });
         dialogRef.afterClosed().subscribe((result) => {
-            if (result.message) {
+            if (result.message == "success") {
                 this.edit(result.data);
                 this.refreshClicked();
             }
+            else if (result.message == "emit") {
+                this.edit(result.data);
+            }
         });
     }
     deleteModel(row) {
@@ -2700,6 +2893,8 @@ class TableComponent {
             return;
         if (b.action && buttonName != 'delete')
             return;
+        if (!b.action)
+            return;
         this.dataService.CallApi(b.action, row).subscribe((apiResponse) => {
             if (apiResponse.success) {
                 if (b.action.successMessage) {
@@ -2711,7 +2906,7 @@ class TableComponent {
                 this.refreshClicked();
             }
             else {
-                this.messageService.toast("Error: " + apiResponse);
+                this.messageService.toast("Error: " + apiResponse.message);
             }
         });
     }
@@ -2722,12 +2917,13 @@ class TableComponent {
                 this.dataSource = apiResponse.data;
                 this.tableDataSource = new MatTableDataSource(apiResponse.data);
                 this.tableDataSource.paginator = this.tablePaginator;
-                // if (apiResponse.success){
-                //   this.tableDataSource = new MatTableDataSource(apiResponse.data);
-                //   this.tableDataSource.paginator = this.tablePaginator;
-                // }else{
-                //   this.messageService.toast("Error: " + JSON.stringify(apiResponse));
-                // }
+                if (apiResponse.success) {
+                    this.tableDataSource = new MatTableDataSource(apiResponse.data);
+                    this.tableDataSource.paginator = this.tablePaginator;
+                }
+                else {
+                    this.messageService.toast("Error: " + JSON.stringify(apiResponse));
+                }
             });
         }
     }
@@ -3034,10 +3230,9 @@ SpaIndexModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 SpaIndexModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SpaIndexModule, declarations: [LoginComponent, SignupComponent, RecoverAccountComponent], imports: [i2.ReactiveFormsModule, CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        // SpaMatModule,
         TinSpaModule], exports: [CommonModule,
         FormsModule,
-        // SpaMatModule,
+        TinSpaModule,
         LoginComponent,
         SignupComponent,
         RecoverAccountComponent] });
@@ -3045,9 +3240,9 @@ SpaIndexModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        // SpaMatModule,
         TinSpaModule, CommonModule,
-        FormsModule] });
+        FormsModule,
+        TinSpaModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaIndexModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3057,13 +3252,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        // SpaMatModule,
                         TinSpaModule
                     ],
                     exports: [
                         CommonModule,
                         FormsModule,
-                        // SpaMatModule,
+                        TinSpaModule,
                         LoginComponent,
                         SignupComponent,
                         RecoverAccountComponent,
@@ -3238,19 +3432,18 @@ SpaUserModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
 SpaUserModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, declarations: [ChangePasswordComponent, ProfileComponent], imports: [i2.ReactiveFormsModule, CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        // SpaMatModule,
         TinSpaModule], exports: [CommonModule,
         FormsModule,
-        // SpaMatModule,
+        TinSpaModule,
         ChangePasswordComponent,
         ProfileComponent] });
 SpaUserModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, imports: [ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: "never" }),
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        // SpaMatModule,
         TinSpaModule, CommonModule,
-        FormsModule] });
+        FormsModule,
+        TinSpaModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaUserModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3260,13 +3453,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        // SpaMatModule,
                         TinSpaModule
                     ],
                     exports: [
                         CommonModule,
                         FormsModule,
-                        // SpaMatModule,
+                        TinSpaModule,
                         ChangePasswordComponent,
                         ProfileComponent,
                     ],
@@ -3570,10 +3762,10 @@ class RolesComponent {
     }
 }
 RolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$3.Router }, { token: AuthService }, { token: DataServiceLib }, { token: i4.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container mb-5\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n    <div class=\"col-2\">\r\n\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n    <div class=\"col-1\">\r\n\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\" style=\"margin-right:1em;margin-top:5px\" matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\" style=\"margin-left:10px\" *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%;padding-left:2em\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\">\r\n\r\n\r\n        <div class=\"row\" style=\"margin-right:20px;\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\" font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"row\" style=\"margin-right:20px;margin-left: 0px; \" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox   color=\"primary\" style=\" font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"row\" style=\"margin-right:20px;margin-left: 0px;\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox   color=\"primary\" style=\"font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <!-- <button mat-mini-fab color=\"warn\" (click)=\"editRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button> -->\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i14.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+RolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RolesComponent, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i14.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RolesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "spa-roles", template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container mb-5\">\r\n\r\n  <div class=\"row justify-content-between\" style=\"padding-bottom: 10px;padding-left:10px\">\r\n    <div class=\"col-2\">\r\n\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n    <div class=\"col-1\">\r\n\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\" style=\"margin-right:1em;margin-top:5px\" matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\" style=\"margin-left:10px\" *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%;padding-left:2em\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"row\" style=\"margin-left: 2em;\">\r\n\r\n\r\n        <div class=\"row\" style=\"margin-right:20px;\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\" font-size:12px; width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"row\" style=\"margin-right:20px;margin-left: 0px; \" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox   color=\"primary\" style=\" font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"row\" style=\"margin-right:20px;margin-left: 0px;\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox   color=\"primary\" style=\"font-size:12px; width: 200px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <!-- <button mat-mini-fab color=\"warn\" (click)=\"editRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button> -->\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
+            args: [{ selector: "spa-roles", template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-mini-fab color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon class=\"refreshIcon\">refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <h4>{{role.roleName}}</h4>\r\n      <hr />\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capItem.name]\">{{capItem.display}}</mat-checkbox>\r\n\r\n          <div class=\"tin-row\"  *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n            <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubItem.name]\">{{capSubItem.display}}</mat-checkbox>\r\n\r\n            <div class=\"tin-row\"  *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n              <mat-checkbox color=\"primary\" style=\"min-width: 200px;\" [(ngModel)]=\"role[capSubSubItem.name]\">{{capSubSubItem.display}}</mat-checkbox>\r\n\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-mini-fab color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n        </button>\r\n\r\n        <button mat-mini-fab color=\"warn\" (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.refreshIcon{font-size:22px!important;margin-top:-7px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: HttpService }, { type: i1$3.Router }, { type: AuthService }, { type: DataServiceLib }, { type: i4.MatDialog }, { type: MessageService }]; } });
 
 class CreateAccountComponent {
@@ -3647,10 +3839,9 @@ SpaAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         SettingsComponent], imports: [i2.ReactiveFormsModule, CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        // SpaMatModule,
         TinSpaModule], exports: [CommonModule,
         FormsModule,
-        // SpaMatModule,
+        TinSpaModule,
         UsersComponent,
         RolesComponent,
         addRoleDialog,
@@ -3661,9 +3852,9 @@ SpaAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        // SpaMatModule,
         TinSpaModule, CommonModule,
-        FormsModule] });
+        FormsModule,
+        TinSpaModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpaAdminModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3680,13 +3871,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        // SpaMatModule,
                         TinSpaModule
                     ],
                     exports: [
                         CommonModule,
                         FormsModule,
-                        // SpaMatModule,
+                        TinSpaModule,
                         UsersComponent,
                         RolesComponent,
                         addRoleDialog,