fix(lib): upgraded angular material to v12

Author: AnthonyNahas

demo/src/material_theme.scss

@@ -1,24 +1,25 @@
+@use '~@angular/material' as mat;
 @import '../node_modules/@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$candy-app-primary: mat-palette($mat-blue);
-$candy-app-accent:  mat-palette($mat-deep-purple, A200, A100, A400);
+$candy-app-primary: mat.define-palette(mat.$blue-palette);
+$candy-app-accent:  mat.define-palette(mat.$deep-purple-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$candy-app-warn:    mat-palette($mat-red);
+$candy-app-warn:    mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($candy-app-theme);
+@include mat.all-component-themes($candy-app-theme);

package-lock.json

@@ -35,13 +35,13 @@
   "dependencies": {
     "@angular-material-extensions/pages": "^4.0.0",
     "@angular/animations": "^12.0.3",
-    "@angular/cdk": "^11.2.10",
+    "@angular/cdk": "^12.0.3",
     "@angular/common": "^12.0.3",
     "@angular/compiler": "^12.0.3",
     "@angular/core": "^12.0.3",
     "@angular/flex-layout": "^10.0.0-beta.32",
     "@angular/forms": "^12.0.3",
-    "@angular/material": "^11.2.10",
+    "@angular/material": "^12.0.3",
     "@angular/platform-browser": "^12.0.3",
     "@angular/platform-browser-dynamic": "^12.0.3",
     "@angular/platform-server": "^12.0.3",