refactor: 💡 upgrade to angular 13

✅ Closes: #132 #131 #129 #128 #126 #112 #108 #106 #46
ng-apimock · Nov 7, 2021 · 3f21b29 · 3f21b29
1 parent 608c9eb
commit 3f21b29
Show file tree

Hide file tree

Showing 16 changed files with 2,975 additions and 4,251 deletions.
diff --git a/angular.json b/angular.json
@@ -30,7 +30,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/theme.scss"
             ],
             "scripts": [],
             "vendorChunk": true,

diff --git a/package.json b/package.json
@@ -50,67 +50,65 @@
     "recording"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.1.3",
-    "@angular-eslint/builder": "12.3.1",
-    "@angular-eslint/eslint-plugin": "12.3.1",
-    "@angular-eslint/eslint-plugin-template": "12.3.1",
-    "@angular-eslint/schematics": "12.3.1",
-    "@angular-eslint/template-parser": "12.3.1",
-    "@angular/cli": "12.1.3",
-    "@angular/compiler-cli": "12.1.3",
-    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-conventional": "13.1.0",
+    "@angular-devkit/build-angular": "13.0.1",
+    "@angular-eslint/builder": "12.6.1",
+    "@angular-eslint/eslint-plugin": "12.6.1",
+    "@angular-eslint/eslint-plugin-template": "12.6.1",
+    "@angular-eslint/schematics": "12.6.1",
+    "@angular-eslint/template-parser": "12.6.1",
+    "@angular/cli": "13.0.1",
+    "@angular/compiler-cli": "13.0.0",
+    "@commitlint/cli": "14.1.0",
+    "@commitlint/config-conventional": "14.1.0",
     "@ng-apimock/base-client": "3.1.0",
-    "@ng-apimock/core": "3.0.3",
+    "@ng-apimock/core": "3.2.0",
     "@ng-apimock/protractor-plugin": "2.0.0",
-    "@semantic-release/changelog": "5.0.1",
-    "@semantic-release/commit-analyzer": "8.0.1",
-    "@semantic-release/git": "9.0.0",
-    "@semantic-release/github": "7.2.3",
-    "@semantic-release/npm": "7.1.3",
-    "@semantic-release/release-notes-generator": "9.0.3",
-    "@types/chai": "4.2.21",
+    "@semantic-release/changelog": "6.0.1",
+    "@semantic-release/commit-analyzer": "9.0.1",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/github": "8.0.2",
+    "@semantic-release/npm": "8.0.3",
+    "@semantic-release/release-notes-generator": "10.0.2",
+    "@types/chai": "4.2.22",
     "@types/cucumber": "6.0.1",
-    "@types/jest": "26.0.24",
-    "@types/node": "16.4.5",
-    "@typescript-eslint/eslint-plugin": "4.28.5",
-    "@typescript-eslint/parser": "4.28.5",
+    "@types/jest": "27.0.2",
+    "@types/node": "16.11.6",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "angular2-prettyjson": "3.0.1",
     "body-parser": "1.19.0",
     "chai": "4.3.4",
     "commitizen": "4.2.4",
-    "connect": "3.7.0",
-    "connect-modrewrite": "0.10.2",
     "cucumber": "6.0.5",
-    "eslint": "7.31.0",
-    "husky": "7.0.1",
-    "jest": "27.0.6",
+    "eslint": "8.2.0",
+    "express": "4.17.1",
+    "husky": "7.0.4",
+    "jest": "27.3.1",
     "jest-createspyobj": "2.0.0",
-    "jest-preset-angular": "9.0.5",
-    "lint-staged": "11.1.1",
+    "jest-preset-angular": "10.1.0",
+    "lint-staged": "11.2.6",
     "p-iteration": "1.1.8",
     "protractor": "7.0.0",
-    "protractor-cucumber-framework": "8.2.2",
+    "protractor-cucumber-framework": "8.2.7",
     "rimraf": "3.0.2",
-    "semantic-release": "17.4.4",
-    "serve-static": "1.14.1",
-    "ts-node": "10.1.0",
-    "typescript": "4.3.5",
+    "semantic-release": "18.0.0",
+    "ts-node": "10.4.0",
+    "typescript": "4.4.4",
     "wait-on": "6.0.0"
   },
   "dependencies": {
-    "@angular/animations": "12.1.3",
-    "@angular/cdk": "12.1.3",
-    "@angular/common": "12.1.3",
-    "@angular/compiler": "12.1.3",
-    "@angular/core": "12.1.3",
-    "@angular/forms": "12.1.3",
-    "@angular/material": "12.1.3",
-    "@angular/platform-browser": "12.1.3",
-    "@angular/platform-browser-dynamic": "12.1.3",
-    "@angular/router": "12.1.3",
-    "rxjs": "7.2.0",
-    "tslib": "2.3.0",
+    "@angular/animations": "13.0.0",
+    "@angular/cdk": "13.0.0",
+    "@angular/common": "13.0.0",
+    "@angular/compiler": "13.0.0",
+    "@angular/core": "13.0.0",
+    "@angular/forms": "13.0.0",
+    "@angular/material": "13.0.0",
+    "@angular/platform-browser": "13.0.0",
+    "@angular/platform-browser-dynamic": "13.0.0",
+    "@angular/router": "13.0.0",
+    "rxjs": "7.4.0",
+    "tslib": "2.3.1",
     "zone.js": "~0.11.4"
   },
   "lint-staged": {

diff --git a/src/app/common/mat-table-filter/filter.component.scss b/src/app/common/mat-table-filter/filter.component.scss
@@ -1,5 +1,4 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
   span {
@@ -28,20 +27,20 @@
     .icon-filter {
       display: inherit;
       padding: .375rem .75rem;
-      background-color: mat.get-color-from-palette($ngApimock-demoApplication-secondary, 100);
-      border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+      background-color: mat-color($ngapimock-app-secondary, 100);
+      border: 1px solid mat-color($ngapimock-app-secondary, 300);
       border-radius: 0 .25rem .25rem 0;
     }
   }
 
   input {
-    border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette($ngApimock-demoApplication-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
   }
 }
 
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -1,16 +1,12 @@
-@use '~@angular/material' as mat;
-@include mat.core();
-
-$grey-palette: mat.define-palette(mat.$grey-palette);
-$green-palette: mat.define-palette(mat.$green-palette);
+@import '../../theme';
 
 mat-toolbar-row {
   background: white;
   position: relative;
   padding: 0.5rem 3rem;
   font-weight: normal;
   display: block;
-  height: auto;
+  height: auto !important;
 
   @media (min-width: 992px) {
     display: flex;
@@ -25,15 +21,15 @@ mat-toolbar-row {
 
     line-height: inherit;
     white-space: nowrap;
-    color: mat.get-color-from-palette($green-palette);
+    color: mat-color($ngapimock-app-primary);
   }
 
   .toggler {
     float: right;
     margin-top: 0px;
     padding: 0.25rem 0.75rem;
     font-size: 1.25rem;
-    border: 1px solid mat.get-color-from-palette($grey-palette, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
     border-radius: 0.25rem;
     background-color: transparent;
     @media (min-width: 992px) {
@@ -75,19 +71,19 @@ mat-toolbar-row {
           display: block;
           padding: 0 1rem;
           text-decoration: none;
-          color: mat.get-color-from-palette($grey-palette, 500);
+          color: mat-color($ngapimock-app-secondary, 500);
 
           @media (min-width: 992px) {
             padding: 0 0.5rem;
           }
         }
         &.active a {
-          color: mat.get-color-from-palette($grey-palette, 900);
+          color: mat-color($ngapimock-app-secondary, 900);
         }
       }
 
       &.active a {
-        color: mat.get-color-from-palette($grey-palette, 900);
+        color: mat-color($ngapimock-app-secondary, 900);
       }
     }
 

diff --git a/src/app/mocks/overview/overview.component.scss b/src/app/mocks/overview/overview.component.scss
@@ -1,5 +1,4 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
   /* badge */
@@ -25,13 +24,13 @@
 
     &-get {
       .mat-badge-content {
-        background: mat.get-color-from-palette($ngApimock-demoApplication-primary, 500);
+        background: mat-color($ngapimock-app-primary, 500);
       }
     }
 
     &-post, &-put, &-patch {
       .mat-badge-content {
-        background: mat.get-color-from-palette($ngApimock-demoApplication-primary, 800);
+        background: mat-color($ngapimock-app-primary, 800);
       }
     }
   }
@@ -43,7 +42,7 @@
     mat-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+      color: mat-color($ngapimock-app-primary);
     }
   }
 
@@ -66,13 +65,13 @@
   }
 
   input {
-    border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette($ngApimock-demoApplication-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-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,5 +1,4 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
 	.container {
@@ -13,7 +12,7 @@
 	}
 
 	h2 {
-		color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+		color: mat-color($ngapimock-app-primary);
 		margin: 0;
 	}
 

diff --git a/src/app/presets/details/details.component.scss b/src/app/presets/details/details.component.scss
@@ -1,15 +1,14 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '../../../theme';
 
 :host {
-  mat-header-row {
+  mat-color-header-row {
     min-height: 30px;
     padding-left: 0px;
 
-    mat-header-cell {
+    mat-color-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+      color: mat-color($ngapimock-app-primary);
     }
   }
 

diff --git a/src/app/presets/overview/overview.component.scss b/src/app/presets/overview/overview.component.scss
@@ -1,5 +1,5 @@
-@use '~@angular/material' as mat;
-@import '~src/styles';
+@import '~@angular/material/theming';
+@import '../../../theme';
 
 :host {
   mat-header-row {
@@ -9,7 +9,7 @@
     mat-header-cell {
       padding-left: 10px;
       font-size: 16px;
-      color: mat.get-color-from-palette($ngApimock-demoApplication-primary);
+      color: mat-color($ngapimock-app-primary);
     }
   }
   mat-footer-cell {
@@ -21,21 +21,33 @@
     padding: 0 10px 0 10px;
   }
 
-  .mat-column-key, .mat-column-value  {
-    flex: 0 0 45%;
+  .mat-column-name  {
+    flex: 0 0 75%;
   }
 
   .mat-column-options {
-    flex: 0 0 10%;
+    flex: 0 0 25%;
+  }
+
+  mat-header-cell.mat-column-options {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 28px;
+  }
+
+  mat-cell.mat-column-options {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 24px;
   }
 
   input {
-    border: 1px solid mat.get-color-from-palette($ngApimock-demoApplication-secondary, 300);
+    border: 1px solid mat-color($ngapimock-app-secondary, 300);
   }
 
   input:focus {
     z-index: 10;
     outline: none !important;
-    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette($ngApimock-demoApplication-primary, 300);
+    box-shadow: 0 0 0 0.2rem mat-color($ngapimock-app-primary, 300);
   }
 }
diff --git a/src/app/recordings/details/details.component.scss b/src/app/recordings/details/details.component.scss
@@ -1,5 +1,3 @@
-@import '~src/styles';
-
 :host {
     pre {
       ::ng-deep span {