Merge pull request #2005 from valor-software/alex-migrate-to-angular-18

feat(angular-18): added angular 18 support

Author: lexasq

.gitignore

@@ -54,3 +54,4 @@ Thumbs.db
 .angular
 
 .nx/cache
+.nx/workspace-data

README.md

@@ -94,7 +94,7 @@ changes to start using the library right away.
 <table role="table">
  <tbody><tr>
   <td></td>
-  <td colspan="6">ng2-chart version</td>
+  <td colspan="7">ng2-chart version</td>
  </tr>
 
  <tr>
@@ -105,6 +105,7 @@ changes to start using the library right away.
   <td>v4.x</td>
   <td>v5.x</td>
   <td>v6.x</td>
+  <td>v7.x</td>
  </tr>
 
  <tr>
@@ -197,6 +198,17 @@ changes to start using the library right away.
   <td>✓</td>
  </tr>
 
+ <tr>
+  <td>18</td>
+  <td></td>
+  <td></td>
+  <td></td>
+  <td></td>
+  <td></td>
+  <td></td>
+  <td>✓</td>
+ </tr>
+
 </tbody></table>
 
 ## API

apps/ng2-charts-demo/src/styles.scss

@@ -6,41 +6,41 @@
 @include mat.core();
 
 // Define a light theme
-$light-theme: mat.define-light-theme(
+$light-theme: mat.m2-define-light-theme(
   (
     color: (
-      primary: mat.define-palette(mat.$deep-purple-palette),
-      accent: mat.define-palette(mat.$amber-palette),
+      primary: mat.m2-define-palette(mat.$m2-deep-purple-palette),
+      accent: mat.m2-define-palette(mat.$m2-amber-palette),
     ),
     // Only include `typography` and `density` in the default dark theme.
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
     density: 0,
   )
 );
 
 // Define a dark theme
-$dark-theme: mat.define-dark-theme(
+$dark-theme: mat.m2-define-dark-theme(
   (
     color: (
-      primary: mat.define-palette(mat.$deep-purple-palette, 300, 100, 500),
-      accent: mat.define-palette(mat.$amber-palette),
+      primary: mat.m2-define-palette(mat.$m2-deep-purple-palette, 300, 100, 500),
+      accent: mat.m2-define-palette(mat.$m2-amber-palette),
     ),
   )
 );
 
 @mixin page-header-color($theme) {
   // Get the color config from the theme.
-  $color-config: mat.get-color-config($theme);
+  $color-config: mat.m2-get-color-config($theme);
 
   // Get the primary color palette from the color-config.
   $primary-palette: map.get($color-config, 'primary');
 
   .bd-pageheader {
-    color: mat.get-color-from-palette($primary-palette, '500-contrast');
+    color: mat.m2-get-color-from-palette($primary-palette, '500-contrast');
     background-image: linear-gradient(
       to bottom,
-      mat.get-color-from-palette($primary-palette, 700) 0,
-      mat.get-color-from-palette($primary-palette, 500) 100%
+      mat.m2-get-color-from-palette($primary-palette, 700) 0,
+      mat.m2-get-color-from-palette($primary-palette, 500) 100%
     );
   }
 }

libs/ng2-charts-schematics/src/ng-add/steps/add-ng2-charts-provider.ts

@@ -11,10 +11,14 @@ const PACKAGE_NAME = 'ng2-charts';
  * Patches `app.config.ts` by adding our provider
  */
 export function addChartsProviderToMain(options: Schema): Rule {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   return async (host: Tree) => {
     const workspace = await getWorkspace(host);
     const projectName =
       options.project || (workspace.extensions['defaultProject'] as string);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     const project = getProjectFromWorkspace(workspace, options.project);
 
     if (!project) {

libs/ng2-charts/package.json

@@ -1,12 +1,12 @@
 {
-  "version": "6.0.2",
+  "version": "7.0.0",
   "name": "ng2-charts",
   "description": "Reactive, responsive, beautiful charts for Angular based on Chart.js",
   "peerDependencies": {
-    "@angular/platform-browser": ">=17.0.0",
-    "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0",
-    "@angular/cdk": ">=17.0.0",
+    "@angular/platform-browser": ">=18.0.0",
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/cdk": ">=18.0.0",
     "chart.js": "^3.4.0 || ^4.0.0",
     "rxjs": "^6.5.3 || ^7.4.0"
   },