tin-spa 2.1.1 → 2.1.2

package/fesm2020/tin-spa.mjs

@@ -185,22 +185,36 @@ 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 => {
-            data[field.name] = this.getInitialValue(field);
+            if (field.type != 'section' && field.type != 'blank') {
+                data[field.name] = this.getInitialValue(field);
+            }
         });
         return data;
     }
     static resetObject(fields, data) {
         fields.forEach(field => {
-            data[field.name] = this.getInitialValue(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 = field.name;
+            let name = this.camelToWords(field.name);
             let d = data[field.name];
             console.log(name);
             if (field.required) {
@@ -1095,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();
         }
@@ -2482,10 +2499,10 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormComponent, selector: "spa-form", inputs: { 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 ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\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: [""], 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" }] });
+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: "\r\n<div [ngClass]=\"multiColumn ? 'tin-grid' : 'tin-col'\" >\r\n\r\n  <div [ngClass]=\"field.span ? 'span-col' : ''\" *ngFor=\"let field of fields\">\r\n\r\n    <ng-container [ngSwitch]=\"field.type\">\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" }]
+            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: [{
@@ -3213,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] });
@@ -3224,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: [{
@@ -3236,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,
@@ -3417,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: [{
@@ -3439,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,
                     ],
@@ -3826,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,
@@ -3840,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: [{
@@ -3859,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,