Upgrade to angular 18 (#237)

* Upgrade to angular 18

* Update package json and workflows

* Fixe linting

* Remove type cypress to make it work again

Author: michelu89

.github/workflows/push_request_check.yml

@@ -43,7 +43,7 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
 
       - name: Install node modules (Dev)
-        run: npm install
+        run: npm install --legacy-peer-deps # When @nx/angular plugin is updated, this flag can be removed
         working-directory: core
 
       - name: Identifying and reporting lint patterns

.github/workflows/tagged_release.yml

@@ -166,7 +166,7 @@ jobs:
         shell: pwsh
 
       - name: Install node modules
-        run: npm install
+        run: npm install --legacy-peer-deps # When @nx/angular plugin is updated, this flag can be removed
         working-directory: core
 
       - name: Set app version (Unix)

core/.gitignore

@@ -0,0 +1 @@
+.nx/cache

core/.prettierignore

@@ -5,3 +5,5 @@
 /.vscode
 /assembly
 /.angular
+
+/.nx/cache

core/apps/ame-e2e/project.json

@@ -18,11 +18,8 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["apps/ame-e2e/**/*.{js,ts}"]
-      }
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
     }
   }
 }

core/apps/ame-e2e/tsconfig.cypress.json

@@ -2,7 +2,7 @@
   "allowJs": true,
   "extends": "../../tsconfig.json",
   "include": ["src/integration/**/*.ts", "src/support/*.ts", "../../node_modules/cypress"],
-  "types": ["cypress", "mocha", "cypress-real-events"],
+  "types": ["mocha", "cypress-real-events"],
   "resolve": {
     "extensions": [".js", ".jsx", ".ts", ".tsx"]
   }

core/apps/ame/project.json

@@ -78,10 +78,10 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "ame:build:production"
+          "buildTarget": "ame:build:production"
         },
         "development": {
-          "browserTarget": "ame:build:development"
+          "buildTarget": "ame:build:development"
         }
       },
       "defaultConfiguration": "development"
@@ -90,32 +90,28 @@
       "executor": "ngx-build-plus:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "ame:build:production"
+          "buildTarget": "ame:build:production"
         },
         "development": {
-          "browserTarget": "ame:build:development"
+          "buildTarget": "ame:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "ame:build"
+        "buildTarget": "ame:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
-      "options": {
-        "lintFilePatterns": ["apps/ame/src/**/*.ts", "apps/ame/src/**/*.html"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/ame"],
       "options": {
-        "jestConfig": "apps/ame/jest.config.js",
-        "passWithNoTests": true
+        "jestConfig": "apps/ame/jest.config.js"
       }
     }
   }

core/apps/ame/src/assets/samm-units.js

@@ -11,7 +11,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-var sammUDefinition = {
+const sammUDefinition = {
   quantityKinds: {
     absoluteActivity: {name: 'absoluteActivity', label: 'absolute activity'},
     absorbance: {name: 'absorbance', label: 'absorbance'},

core/apps/ame/src/assets/styles/theme.scss

@@ -121,14 +121,34 @@ $ame-warn-light: (
   ),
 );
 
-$ame-light-theme: mat.define-light-theme(
+$ame-primary-light: mat.m2-define-palette(mat.$m2-indigo-palette);
+$ame-accent-light: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
+$ame-warn-light: mat.m2-define-palette(mat.$m2-red-palette);
+
+$ame-light-theme: mat.m2-define-light-theme(
   (
     color: (
-      primary: mat.define-palette($ame-primary-light),
-      accent: mat.define-palette($ame-accent-light),
-      warn: mat.define-palette($ame-warn-light),
+      primary: $ame-primary-light,
+      accent: $ame-accent-light,
+      warn: $ame-warn-light,
     ),
   )
 );
 
+.mat-mdc-mini-fab.mat-accent {
+  --mat-fab-small-foreground-color: var(--ame-font) !important;
+}
+
+.mat-badge-medium .mat-badge-content {
+  position: absolute;
+  width: 22px !important;
+  height: 22px !important;
+  line-height: 22px !important;
+  font-size: 14px !important;
+  font-family: sans-serif;
+  background: var(--ame-blue-500);
+  color: white;
+  right: -13px !important;
+}
+
 @include mat.all-component-themes($ame-light-theme);

core/apps/ame/src/styles.scss

@@ -11,9 +11,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@import './assets/styles/colors.scss';
-@import './assets/styles/theme.scss';
-@import './assets/styles/shape-label.scss';
+@use './assets/styles/colors';
+@use './assets/styles/theme';
+@use './assets/styles/shape-label';
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
 * {
@@ -134,46 +134,46 @@ mat-icon {
 }
 
 .characteristic {
-  background-color: $characteristic-color;
+  background-color: colors.$characteristic-color;
 }
 
 .constraint {
-  background-color: $constraint-color;
+  background-color: colors.$constraint-color;
 }
 
 .entity,
 .entityValue,
 .abstractentity,
 .abstractEntity,
 .abstract-entity {
-  background-color: $entity-color;
+  background-color: colors.$entity-color;
 }
 
 .unit {
-  background-color: $unit-color;
+  background-color: colors.$unit-color;
 }
 
 .property,
 .abstractproperty,
 .abstractProperty,
 .abstract-property {
-  background-color: $property-color;
+  background-color: colors.$property-color;
 }
 
 .operation {
-  background-color: $operation-color;
+  background-color: colors.$operation-color;
 }
 
 .aspect {
-  background-color: $aspect-color;
+  background-color: colors.$aspect-color;
 }
 
 .trait {
-  background-color: $trait-color;
+  background-color: colors.$trait-color;
 }
 
 .event {
-  background-color: $event-color;
+  background-color: colors.$event-color;
 }
 
 .mxTooltip {