feat: 🎸 update to latest angular version

ng-apimock · Dec 9, 2022 · 8d74df0 · 8d74df0
1 parent 6041db8
commit 8d74df0
Show file tree

Hide file tree

Showing 15 changed files with 5,415 additions and 3,155 deletions.
diff --git a/angular.json b/angular.json
@@ -30,7 +30,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/theme.scss"
+              "@angular/material/prebuilt-themes/purple-green.css",
+              "src/style.scss"
             ],
             "scripts": [],
             "vendorChunk": true,

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "main": "index.js",
   "scripts": {
     "ng": "ng",
-    "ngapimock": "node test/server.js",
+    "ngapimock": "node test/serve.js",
     "prebuild": "rimraf dist",
     "build": "ng build --configuration=production",
     "lint": "ng lint",
@@ -51,64 +51,64 @@
     "recording"
   ],
   "devDependencies": {
-    "@angular/animations": "13.2.0",
-    "@angular/cdk": "13.2.0",
-    "@angular/common": "13.2.0",
-    "@angular/compiler": "13.2.0",
-    "@angular/core": "13.2.0",
-    "@angular/forms": "13.2.0",
-    "@angular/material": "13.2.0",
-    "@angular/platform-browser": "13.2.0",
-    "@angular/platform-browser-dynamic": "13.2.0",
-    "@angular/router": "13.2.0",
-    "@angular-devkit/build-angular": "13.2.0",
-    "@angular-eslint/builder": "13.0.1",
-    "@angular-eslint/eslint-plugin": "13.0.1",
-    "@angular-eslint/eslint-plugin-template": "13.0.1",
-    "@angular-eslint/schematics": "13.0.1",
-    "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cli": "13.2.0",
-    "@angular/compiler-cli": "13.2.0",
-    "@commitlint/cli": "16.1.0",
-    "@commitlint/config-conventional": "16.0.0",
-    "@ng-apimock/base-client": "3.1.0",
-    "@ng-apimock/core": "3.4.0",
-    "@ng-apimock/protractor-plugin": "2.0.0",
-    "@semantic-release/changelog": "6.0.1",
+    "@angular/animations": "15.0.3",
+    "@angular/cdk": "15.0.3",
+    "@angular/common": "15.0.3",
+    "@angular/compiler": "15.0.3",
+    "@angular/core": "15.0.3",
+    "@angular/forms": "15.0.3",
+    "@angular/material": "15.0.3",
+    "@angular/platform-browser": "15.0.3",
+    "@angular/platform-browser-dynamic": "15.0.3",
+    "@angular/router": "15.0.3",
+    "@angular-devkit/build-angular": "15.0.3",
+    "@angular-eslint/builder": "15.1.0",
+    "@angular-eslint/eslint-plugin": "15.1.0",
+    "@angular-eslint/eslint-plugin-template": "15.1.0",
+    "@angular-eslint/schematics": "15.1.0",
+    "@angular-eslint/template-parser": "15.1.0",
+    "@angular/cli": "15.0.3",
+    "@angular/compiler-cli": "15.0.3",
+    "@commitlint/cli": "17.3.0",
+    "@commitlint/config-conventional": "17.3.0",
+    "@ng-apimock/base-client": "3.3.0",
+    "@ng-apimock/core": "3.6.0",
+    "@ng-apimock/protractor-plugin": "2.1.0",
+    "@semantic-release/changelog": "6.0.2",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.0.2",
-    "@semantic-release/npm": "9.0.0",
+    "@semantic-release/github": "8.0.7",
+    "@semantic-release/npm": "9.0.1",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "@types/chai": "4.3.0",
+    "@types/chai": "4.3.4",
     "@types/cucumber": "6.0.1",
-    "@types/jest": "27.4.0",
-    "@types/node": "17.0.13",
-    "@typescript-eslint/eslint-plugin": "5.10.1",
-    "@typescript-eslint/parser": "5.10.1",
+    "@types/jest": "29.2.4",
+    "@types/node": "18.11.12",
+    "@typescript-eslint/eslint-plugin": "5.46.0",
+    "@typescript-eslint/parser": "5.46.0",
     "angular2-prettyjson": "3.0.1",
-    "body-parser": "1.19.1",
-    "chai": "4.3.6",
-    "commitizen": "4.2.4",
+    "body-parser": "1.20.1",
+    "chai": "4.3.7",
+    "commitizen": "4.2.6",
     "cucumber": "6.0.5",
-    "eslint": "8.8.0",
-    "express": "4.17.2",
-    "husky": "7.0.4",
-    "jest": "27.4.7",
+    "eslint": "8.29.0",
+    "express": "4.18.2",
+    "husky": "8.0.2",
+    "jest": "29.3.1",
     "jest-createspyobj": "2.0.0",
-    "jest-preset-angular": "11.1.0",
-    "lint-staged": "12.3.2",
+    "jest-preset-angular": "12.2.3",
+    "lint-staged": "13.1.0",
     "p-iteration": "1.1.8",
     "protractor": "7.0.0",
-    "protractor-cucumber-framework": "8.2.11",
+    "protractor-cucumber-framework": "8.4.4",
     "rimraf": "3.0.2",
-    "rxjs": "7.5.2",
-    "semantic-release": "19.0.2",
-    "tslib": "2.3.1",
-    "ts-node": "10.4.0",
-    "typescript": "4.5.5",
-    "wait-on": "6.0.0",
-    "zone.js": "~0.11.4"
+    "rxjs": "7.6.0",
+    "semantic-release": "19.0.5",
+    "tslib": "2.4.1",
+    "ts-node": "10.9.1",
+    "typescript": "4.9.4",
+    "wait-on": "6.0.1",
+    "zone.js": "~0.12.0"
   },
   "lint-staged": {
     "**/**.{ts}": [

diff --git a/src/_theme.scss b/src/_theme.scss
@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$ngapimock-primary: mat.define-palette(mat.$green-palette, 500);
+$ngapimock-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$ngapimock-secondary: mat.define-palette(mat.$gray-palette);
+$ngapimock-warn: mat.define-palette(mat.$red-palette);
+
+$ngapimock-theme: mat.define-light-theme((
+        color: (
+                primary: $ngapimock-primary,
+                accent: $ngapimock-accent,
+                warn: $ngapimock-warn
+        )
+));
+
+@include mat.all-component-themes($ngapimock-theme);
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -9,7 +9,7 @@ export const routes: Routes = [
 
 @NgModule({
     imports: [
-        RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })
+        RouterModule.forRoot(routes, { useHash: true })
     ],
     exports: [
         RouterModule

diff --git a/src/app/common/mat-table-filter/filter.component.scss b/src/app/common/mat-table-filter/filter.component.scss
@@ -1,4 +1,5 @@
-@import '../../../theme';
+@use '@angular/material' as mat;
+@use '../../../theme.scss';
 
 :host {
   span {
@@ -27,20 +28,20 @@
     .icon-filter {
       display: inherit;
       padding: .375rem .75rem;
-      background-color: mat-color($ngapimock-app-secondary, 100);
-      border: 1px solid mat-color($ngapimock-app-secondary, 300);
+      background-color: mat.get-color-from-palette(theme.$ngapimock-secondary, 100);
+      border: 1px solid mat.get-color-from-palette(theme.$ngapimock-secondary, 300);
       border-radius: 0 .25rem .25rem 0;
     }
   }
 
   input {
-    border: 1px solid mat-color($ngapimock-app-secondary, 300);
+    border: 1px solid mat.get-color-from-palette(theme.$ngapimock-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette(theme.$ngapimock-secondary, 300);
   }
 }
 
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -1,4 +1,5 @@
-@import '../../theme';
+@use '@angular/material' as mat;
+@use '../../theme.scss';
 
 mat-toolbar-row {
   background: white;
@@ -21,15 +22,15 @@ mat-toolbar-row {
 
     line-height: inherit;
     white-space: nowrap;
-    color: mat-color($ngapimock-app-primary);
+    color: mat.get-color-from-palette(theme.$ngapimock-primary);
   }
 
   .toggler {
     float: right;
     margin-top: 0px;
     padding: 0.25rem 0.75rem;
     font-size: 1.25rem;
-    border: 1px solid mat-color($ngapimock-app-secondary, 300);
+    border: 1px solid mat.get-color-from-palette(theme.$ngapimock-secondary, 300);;
     border-radius: 0.25rem;
     background-color: transparent;
     @media (min-width: 992px) {
@@ -71,19 +72,19 @@ mat-toolbar-row {
           display: block;
           padding: 0 1rem;
           text-decoration: none;
-          color: mat-color($ngapimock-app-secondary, 500);
+          color: mat.get-color-from-palette(theme.$ngapimock-secondary, 500);
 
           @media (min-width: 992px) {
             padding: 0 0.5rem;
           }
         }
         &.active a {
-          color: mat-color($ngapimock-app-secondary, 900);
+          color: mat.get-color-from-palette(theme.$ngapimock-secondary, 900);
         }
       }
 
       &.active a {
-        color: mat-color($ngapimock-app-secondary, 900);
+        color: mat.get-color-from-palette(theme.$ngapimock-secondary, 900);
       }
     }
 
@@ -105,12 +106,11 @@ mat-toolbar-row {
 }
 
 .jumbotron {
-  border-radius: .3rem;
   margin-bottom: 2rem;
   font-size: 1.5rem;
     background: #4caf50;
     color: white;
     text-align: center;
-    padding: 2rem;
+    padding: 1rem;
   }
 
diff --git a/src/app/mocks/overview/overview.component.scss b/src/app/mocks/overview/overview.component.scss
@@ -1,4 +1,6 @@
-@import '../../../theme';
+@use '@angular/material' as mat;
+@use '../../../theme.scss';
+@import '../../../style.scss';
 
 :host {
   /* badge */
@@ -24,13 +26,13 @@
 
     &-get {
       .mat-badge-content {
-        background: mat-color($ngapimock-app-primary, 500);
+        background: mat.get-color-from-palette(theme.$ngapimock-primary, 500);
       }
     }
 
     &-post, &-put, &-patch {
       .mat-badge-content {
-        background: mat-color($ngapimock-app-primary, 800);
+        background: mat.get-color-from-palette(theme.$ngapimock-primary, 800);
       }
     }
   }
@@ -42,7 +44,7 @@
     mat-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat-color($ngapimock-app-primary);
+      color: mat.get-color-from-palette(theme.$ngapimock-primary);
     }
   }
 
@@ -65,13 +67,13 @@
   }
 
   input {
-    border: 1px solid mat-color($ngapimock-app-secondary, 300);
+    border: 1px solid mat.get-color-from-palette(theme.$ngapimock-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette(theme.$ngapimock-primary, 300);
   }
 
 }

diff --git a/src/app/presets/create-preset/create-preset.component.scss b/src/app/presets/create-preset/create-preset.component.scss
@@ -1,4 +1,6 @@
-@import '../../../theme';
+@use '@angular/material' as mat;
+@use '../../../theme.scss';
+@import '../../../style.scss';
 
 :host {
 	.container {
@@ -12,7 +14,7 @@
 	}
 
 	h2 {
-		color: mat-color($ngapimock-app-primary);
+		color: mat.get-color-from-palette(theme.$ngapimock-primary);
 		margin: 0;
 	}
 

diff --git a/src/app/presets/details/details.component.scss b/src/app/presets/details/details.component.scss
@@ -1,4 +1,6 @@
-@import '../../../theme';
+@use '@angular/material' as mat;
+@use '../../../theme.scss';
+@import '../../../style.scss';
 
 :host {
   mat-color-header-row {
@@ -8,7 +10,7 @@
     mat-color-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat-color($ngapimock-app-primary);
+      color: mat.get-color-from-palette(theme.$ngapimock-primary);
     }
   }
 

diff --git a/src/app/presets/overview/overview.component.scss b/src/app/presets/overview/overview.component.scss
@@ -1,5 +1,6 @@
-@import '~@angular/material/theming';
-@import '../../../theme';
+@use '@angular/material' as mat;
+@use '../../../theme.scss';
+@import '../../../style.scss';
 
 :host {
   mat-header-row {
@@ -9,7 +10,7 @@
     mat-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat-color($ngapimock-app-primary);
+      color: mat.get-color-from-palette(theme.$ngapimock-primary);
     }
   }
   mat-footer-cell {
@@ -42,12 +43,12 @@
   }
 
   input {
-    border: 1px solid mat-color($ngapimock-app-secondary, 300);
+    border: 1px solid mat.get-color-from-palette(theme.$ngapimock-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette(theme.$ngapimock-primary, 300);
   }
 }