Merge pull request NationalBankBelgium#48 from SuperITMan/feature/upg…

…rade-prettier-and-reformat-code

Feature/upgrade prettier and reformat code

.cz-config.js

@@ -26,8 +26,7 @@ module.exports = {
 		},
 		{
 			value: "ci",
-			name:
-				"ci:       Changes to our CI configuration files and scripts (example scopes: GitHub Actions, Travis, Circle, BrowserStack, SauceLabs)"
+			name: "ci:       Changes to our CI configuration files and scripts (example scopes: GitHub Actions, Travis, Circle, BrowserStack, SauceLabs)"
 		},
 		{
 			value: "chore",

.prettierignore

@@ -1,3 +1,4 @@
+.angular/
 .git/
 .github/
 .idea/

.prettierrc.js

@@ -1 +1 @@
-module.exports = require("@nationalbankbelgium/code-style/prettier/2.3.x");
+module.exports = require("@nationalbankbelgium/code-style/prettier/3.1.x");

README.md

@@ -17,16 +17,17 @@
 
 NgxFormErrors is heavily inspired in these projects:
 
--   [valdr](https://github.com/netceteragroup/valdr): a model centric approach to AngularJS form validation
--   [ngx-errors](https://github.com/UltimateAngular/ngx-errors): a declarative validation errors library for Angular Reactive Forms
--   [ngx-valdemort](https://github.com/Ninja-Squad/ngx-valdemort): consistent validation error messages for Angular Reactive forms
+- [valdr](https://github.com/netceteragroup/valdr): a model centric approach to AngularJS form validation
+- [ngx-errors](https://github.com/UltimateAngular/ngx-errors): a declarative validation errors library for Angular Reactive Forms
+- [ngx-valdemort](https://github.com/Ninja-Squad/ngx-valdemort): consistent validation error messages for Angular Reactive forms
 
 ## Why NgxFormErrors?
 
 Let's just have a look at the following example:
 
 ### Plain Reactive Forms approach
 
+<!-- prettier-ignore -->
 ```html
 <input type="text" formControlName="foo" />
 
@@ -48,6 +49,7 @@ This easily becomes messy and cumbersome as soon as you have multiple fields. An
 
 Your component template is cleaner :wink:
 
+<!-- prettier-ignore -->
 ```html
 <input type="text" formControlName="foo" />
 <!--or-->
@@ -59,6 +61,7 @@ Your component template is cleaner :wink:
 
 You decide how to display the messages by defining your own Error component :sunglasses:
 
+<!-- prettier-ignore -->
 ```html
 <!-- Error component's template -->
 
@@ -75,6 +78,7 @@ You decide how to display the messages by defining your own Error component :sun
 
 And the messages are centralized in a service :astonished:
 
+<!-- prettier-ignore -->
 ```typescript
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NgxFormErrorsMessageService, NgxFormErrorsModule } from "@nationalbankbelgium/ngx-form-errors";
@@ -121,11 +125,11 @@ npm install @nationalbankbelgium/ngx-form-errors
 
 NgxFormErrors is built with [ng-packagr](https://github.com/ng-packagr/ng-packagr) which means that the final package implements the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview) providing the following bundles:
 
--   FESM2015
--   FESM5
--   ESM2015
--   ESM5
--   UMD
+- FESM2015
+- FESM5
+- ESM2015
+- ESM5
+- UMD
 
 So it can be consumed by [Angular CLI](https://github.com/angular/angular-cli), [Webpack](https://github.com/webpack/webpack) or [SystemJS](https://github.com/systemjs/systemjs).
 
@@ -143,19 +147,19 @@ To know how to release NgxFormErrors, refer to [this page](/RELEASE.md).
 
 ### Christopher Cortes
 
--   [@GitHub](https://github.com/christophercr)
+- [@GitHub](https://github.com/christophercr)
 
 ### Alexis Georges
 
--   [@GitHub](https://github.com/SuperITMan)
+- [@GitHub](https://github.com/SuperITMan)
 
 ## License
 
 This project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).
 
 ## Documentation
 
--   [Developer Guide](/docs/DEV_GUIDE.md)
+- [Developer Guide](/docs/DEV_GUIDE.md)
 
 ## Thank you notes :)
 

demo-app/ng12/angular.json

@@ -22,18 +22,10 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "node_modules/normalize.css/normalize.css",
-              "src/styles/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
+              "includePaths": ["src/styles"]
             },
             "scripts": [],
             "vendorChunk": true,
@@ -100,29 +92,18 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "styles": [
-              "node_modules/normalize.css/normalize.css",
-              "src/styles/styles.scss"
-            ],
+            "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
+              "includePaths": ["src/styles"]
             },
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "e2e": {

demo-app/ng12/src/app/app.component.spec.ts

@@ -1,41 +1,37 @@
-import { ComponentFixture, TestBed, waitForAsync} from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
 import { RouterTestingModule } from "@angular/router/testing";
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 
 describe("AppComponent", () => {
-  let fixture: ComponentFixture<AppComponent>;
-  let component: AppComponent;
+	let fixture: ComponentFixture<AppComponent>;
+	let component: AppComponent;
 
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();
-  }));
+	beforeEach(waitForAsync(() => {
+		return TestBed.configureTestingModule({
+			imports: [RouterTestingModule],
+			declarations: [AppComponent],
+			schemas: [NO_ERRORS_SCHEMA]
+		}).compileComponents();
+	}));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AppComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AppComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
 
-  it("should create the app", () => {
-    expect(fixture).toBeDefined();
-    expect(component).toBeDefined();
-  });
+	it("should create the app", () => {
+		expect(fixture).toBeDefined();
+		expect(component).toBeDefined();
+	});
 
-  it("should render title in a h1 tag", () => {
-    fixture.detectChanges();
-    const compiled: HTMLElement = fixture.debugElement.nativeElement;
-    const h1Element = compiled.querySelector("h1");
-    expect(h1Element).toBeTruthy();
-    // tslint:disable-next-line:no-non-null-assertion
-    expect(h1Element!.textContent).toContain("Ngx-Form-Errors");
-  });
+	it("should render title in a h1 tag", () => {
+		fixture.detectChanges();
+		const compiled: HTMLElement = fixture.debugElement.nativeElement;
+		const h1Element = compiled.querySelector("h1");
+		expect(h1Element).toBeTruthy();
+		// tslint:disable-next-line:no-non-null-assertion
+		expect(h1Element!.textContent).toContain("Ngx-Form-Errors");
+	});
 });

demo-app/ng12/src/app/app.module.ts

@@ -39,28 +39,28 @@ import { NgxFormsExampleComponent, ReactiveFormsExampleComponent, TemplateDriven
 		NavigationComponent,
 		CardComponent
 	],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    FormsModule,
-    HttpClientModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatInputModule,
-    MatToolbarModule,
-    MatListModule,
-    MatSidenavModule,
-    MatIconModule,
-    ReactiveFormsModule,
-    TranslateModule.forRoot(),
-    NgxFormErrorsModule.forRoot({
-      formErrorComponent: TranslatedFormErrorComponent
-    })
-  ],
+	imports: [
+		BrowserModule,
+		BrowserAnimationsModule,
+		AppRoutingModule,
+		FormsModule,
+		HttpClientModule,
+		MatButtonModule,
+		MatButtonToggleModule,
+		MatCardModule,
+		MatFormFieldModule,
+		MatGridListModule,
+		MatInputModule,
+		MatToolbarModule,
+		MatListModule,
+		MatSidenavModule,
+		MatIconModule,
+		ReactiveFormsModule,
+		TranslateModule.forRoot(),
+		NgxFormErrorsModule.forRoot({
+			formErrorComponent: TranslatedFormErrorComponent
+		})
+	],
 	exports: [LanguageSelectorComponent],
 	providers: [],
 	entryComponents: [SimpleFormErrorComponent, TranslatedFormErrorComponent],

demo-app/ng12/src/app/components/card/card.component.ts

@@ -39,5 +39,4 @@ export class CardComponent {
 				break;
 		}
 	}
-
 }

demo-app/ng12/src/app/components/card/card.theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use "~@angular/material" as mat;
 @mixin card-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);

demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use "~@angular/material" as mat;
 @mixin language-selector-theme($theme) {
   $primary: map-get($theme, primary);
 

demo-app/ng12/src/app/components/navigation/navigation.component.ts

@@ -10,5 +10,4 @@ const componentName = "navigation";
 export class NavigationComponent {
 	@HostBinding("class")
 	public cssClass: string = componentName;
-
 }

demo-app/ng12/src/app/components/navigation/navigation.theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use "~@angular/material" as mat;
 @mixin app-navigation-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);