feat(prettier): add prettier

.prettierignore

@@ -4,3 +4,8 @@
 /.nx/cache
 /.nx/workspace-data
 .angular
+*.yaml
+*.yml
+*.md
+*.js
+*.json

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.component.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package.json

@@ -28,7 +28,14 @@
     "lint": "stylelint projects/libs/**/*.scss --config=stylelint-config.json && tslint --project ./tsconfig.json --config tslint.json",
     "release": "pnpm build && pnpm stamp",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "serve:ssr:universal-demo-app": "node dist/universal-demo-app/server/server.mjs"
+    "serve:ssr:universal-demo-app": "node dist/universal-demo-app/server/server.mjs",
+    "format": "nx format:write --all",
+    "format:write": "nx format:write --all",
+    "format:check": "nx format:check --all",
+    "update": "nx migrate latest",
+    "dep-graph": "nx dep-graph",
+    "help": "nx help",
+    "nx": "nx"
   },
   "private": true,
   "requiredAngularVersion": ">=19.0.0",
@@ -95,7 +102,7 @@
     "nx": "20.4.4",
     "postcss": "^8.5.2",
     "postcss-scss": "^4.0.9",
-    "prettier": "^2.8.8",
+    "prettier": "^3.4.2",
     "postcss-url": "~10.1.3",
     "protractor": "^7.0.0",
     "stylelint": "^15.11.0",

projects/apps/demo-app/src/app/app.config.ts

@@ -33,7 +33,7 @@ export const appConfig: ApplicationConfig = {
       FlexLayoutModule.withConfig({
         useColumnBasisZero: false,
         printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs'],
-      })
+      }),
     ),
     YBA_BREAKPOINT_PROVIDER,
     {

projects/apps/demo-app/src/app/app.routes.ts

@@ -16,14 +16,14 @@ export const DEMO_APP_ROUTES: Routes = [
     path: 'responsive',
     loadChildren: () =>
       import('./responsive/responsive.module').then(
-        (m) => m.DocsResponsiveModule
+        (m) => m.DocsResponsiveModule,
       ),
   },
   {
     path: 'stackoverflow',
     loadChildren: () =>
       import('./stack-overflow/stack-overflow.module').then(
-        (m) => m.DocsStackOverflowModule
+        (m) => m.DocsStackOverflowModule,
       ),
   },
 ];

projects/apps/demo-app/src/app/grid/docs-grid/docs-grid.component.spec.ts

@@ -9,9 +9,8 @@ describe('DocsGridComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    imports: [DocsGridModule]
-})
-    .compileComponents();
+      imports: [DocsGridModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

projects/apps/demo-app/src/app/grid/docs-grid/docs-grid.component.ts

@@ -1,14 +1,14 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-    selector: 'demo-docs-grid',
-    template: `
+  selector: 'demo-docs-grid',
+  template: `
     <demo-grid-layout class="small-demo"></demo-grid-layout>
     <demo-grid-nested class="small-demo"></demo-grid-nested>
     <demo-grid-minmax class="small-demo"></demo-grid-minmax>
     <demo-grid-position class="small-demo"></demo-grid-position>
     <demo-grid-overlay class="small-demo"></demo-grid-overlay>
   `,
-    standalone: false
+  standalone: false,
 })
 export class DocsGridComponent {}

projects/apps/demo-app/src/app/grid/grid-layout/grid-layout.component.spec.ts

@@ -9,9 +9,8 @@ describe('GridLayoutComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    imports: [DocsGridModule],
-})
-    .compileComponents();
+      imports: [DocsGridModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

projects/apps/demo-app/src/app/grid/grid-layout/grid-layout.component.ts

@@ -1,32 +1,39 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 // Example taken from https://gridbyexample.com/examples/example13/
 /* tslint:disable */
 @Component({
-    selector: 'demo-grid-layout',
-    template: `
+  selector: 'demo-grid-layout',
+  template: `
     <mat-card class="card-demo">
       <mat-card-title>Basic Responsive Grid App</mat-card-title>
       <mat-card-content class="containerX">
         <div class="colorNested box" style="height: auto;">
-          <div gdAreas.xs="header | sidebar | content | sidebar2 | footer" gdGap="1em"
-               gdColumns.xs="none"
-               gdAreas.sm="header header | sidebar content | sidebar2 sidebar2 | footer footer"
-               gdColumns.sm="20%!"
-               gdAreas.gt-sm="header header header | sidebar content sidebar2 | footer footer footer"
-               gdColumns.gt-sm="120px auto 120px" gdGap.gt-sm="20px" [ngStyle]="{'max-width': 'auto'}"
-               [ngStyle.gt-sm]="{'max-width': '600px'}">
+          <div
+            gdAreas.xs="header | sidebar | content | sidebar2 | footer"
+            gdGap="1em"
+            gdColumns.xs="none"
+            gdAreas.sm="header header | sidebar content | sidebar2 sidebar2 | footer footer"
+            gdColumns.sm="20%!"
+            gdAreas.gt-sm="header header header | sidebar content sidebar2 | footer footer footer"
+            gdColumns.gt-sm="120px auto 120px"
+            gdGap.gt-sm="20px"
+            [ngStyle]="{ 'max-width': 'auto' }"
+            [ngStyle.gt-sm]="{ 'max-width': '600px' }"
+          >
             <div class="blocks one" gdArea="header">Header</div>
             <div class="blocks two" gdArea="sidebar">Sidebar</div>
             <div class="blocks three" gdArea="sidebar2">Sidebar 2</div>
-            <div class="blocks four" gdArea="content">Content
-              <br /> More content than we had before so this column is now quite tall.</div>
+            <div class="blocks four" gdArea="content">
+              Content <br />
+              More content than we had before so this column is now quite tall.
+            </div>
             <div class="blocks five" gdArea="footer">Footer</div>
           </div>
         </div>
       </mat-card-content>
     </mat-card>
   `,
-    standalone: false
+  standalone: false,
 })
 export class GridLayoutComponent {}

projects/apps/demo-app/src/app/grid/grid-minmax/grid-minmax.component.spec.ts

@@ -9,9 +9,8 @@ describe('GridMinmaxComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-    imports: [DocsGridModule]
-})
-    .compileComponents();
+      imports: [DocsGridModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

projects/apps/demo-app/src/app/grid/grid-minmax/grid-minmax.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 // Example taken from https://gridbyexample.com/examples/example29/
 @Component({
-    selector: 'demo-grid-minmax',
-    template: `
+  selector: 'demo-grid-minmax',
+  template: `
     <mat-card class="card-demo">
       <mat-card-title>Grid with Minmax</mat-card-title>
       <mat-card-content class="containerX">
@@ -15,7 +15,9 @@ import { Component } from '@angular/core';
             <div class="box">D</div>
             <div class="box">E</div>
             <div class="box">F</div>
-            <div class="box" gdColumn="auto / span 2" gdRow="auto / span 2">G</div>
+            <div class="box" gdColumn="auto / span 2" gdRow="auto / span 2">
+              G
+            </div>
             <div class="box">H</div>
             <div class="box">I</div>
             <div class="box">J</div>
@@ -27,15 +29,17 @@ import { Component } from '@angular/core';
       </mat-card-content>
     </mat-card>
   `,
-    styles: [`.box {
-    /*background-color: #444;*/
-    /*color: #fff;*/
-    border-radius: 5px;
-    padding: 20px;
-    font-size: 150%;
-
-  }`],
-    standalone: false
+  styles: [
+    `
+      .box {
+        /*background-color: #444;*/
+        /*color: #fff;*/
+        border-radius: 5px;
+        padding: 20px;
+        font-size: 150%;
+      }
+    `,
+  ],
+  standalone: false,
 })
-export class GridMinmaxComponent {
-}
+export class GridMinmaxComponent {}