Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/theme/_content.scss

@@ -25,7 +25,7 @@
   mifosx-savings-account-view {
     .account-card {
       margin: 0 auto;
-      max-width: 80rem;
+      max-width: 90rem;
       width: 90%;
       padding: 0;
 

src/theme/_dark_content.scss

@@ -52,7 +52,7 @@
   mifosx-savings-account-view {
     .account-card {
       margin: 0 auto;
-      max-width: 80rem;
+      max-width: 90rem;
       width: 90%;
       padding: 0;
 

src/theme/deeppurple-amber.scss

@@ -1,15 +1,18 @@
 @use '@angular/material' as mat;
 
-$deeppurple-amber-primary: mat.define-palette(mat.$deep-purple-palette, 500, 300, 700);
-$deeppurple-amber-accent: mat.define-palette(mat.$amber-palette, 400, 200, 600);
-$deeppurple-amber-warn: mat.define-palette(mat.$red-palette);
+$deeppurple-amber-color-config: (
+  primary: mat.define-palette(mat.$deep-purple-palette, 500, 300, 700),
+  accent: mat.define-palette(mat.$amber-palette, 400, 200, 600),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
 $deeppurple-amber-theme: mat.define-light-theme(
-  $deeppurple-amber-primary,
-  $deeppurple-amber-accent,
-  $deeppurple-amber-warn
+  (
+    color: $deeppurple-amber-color-config,
+    density: 0
+  )
 );
 
 .deeppurple-amber-theme {
-  @include mat.all-component-themes($deeppurple-amber-theme);
+  @include mat.all-component-colors($deeppurple-amber-theme);
 }

src/theme/indigo-pink.scss

@@ -1,11 +1,17 @@
 @use '@angular/material' as mat;
 
-$indigo-pink-primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700);
-$indigo-pink-accent: mat.define-palette(mat.$pink-palette, 400, 200, 600);
-$indigo-pink-warn: mat.define-palette(mat.$red-palette);
+$indigo-pink-color-config: (
+  primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700),
+  accent: mat.define-palette(mat.$pink-palette, 400, 200, 600),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
-$indigo-pink-theme: mat.define-light-theme($indigo-pink-primary, $indigo-pink-accent, $indigo-pink-warn);
+$indigo-pink-theme: mat.define-light-theme(
+  (
+    color: $indigo-pink-color-config
+  )
+);
 
 .indigo-pink-theme {
-  @include mat.all-component-themes($indigo-pink-theme);
+  @include mat.all-component-colors($indigo-pink-theme);
 }

src/theme/mifosx-theme.scss

@@ -10,30 +10,50 @@
 @use '../app/shares/shares-account-view/shares-account-view.component-theme.scss' as *;
 @use 'content' as *;
 @use 'dark_content' as *;
-@use 'pictonblue-yellowgreen' as *;
 
-// 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.all-component-typographies();
+
+$mifosx-typography-level: mat.define-typography-level(
+  $font-family: Roboto,
+  $font-weight: 400,
+  $font-size: 1rem,
+  $line-height: 1.5,
+  $letter-spacing: normal
+);
+
 @include mat.core();
 
 /* ################################## Light theme ################################### */
 
-// 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. Available color palettes: https://material.io/design/color/
-$mifosx-app-primary: mat.define-palette($primary-palette);
-$mifosx-app-accent: mat.define-palette($accent-palette);
+$mifosx-color-config: (
+  primary: mat.define-palette($primary-palette),
+  accent: mat.define-palette($accent-palette),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
-// The warn palette is optional (defaults to red).
-$mifosx-app-warn: mat.define-palette(mat.$red-palette);
+$mifosx-typography: mat.define-typography-config(
+  $body-1: $mifosx-typography-level,
+  $body-2: $mifosx-typography-level,
+  $headline-1: $mifosx-typography-level,
+  $headline-2: $mifosx-typography-level,
+  $headline-3: $mifosx-typography-level,
+  $headline-4: $mifosx-typography-level,
+  $headline-5: $mifosx-typography-level,
+  $headline-6: $mifosx-typography-level,
+  $button: $mifosx-typography-level
+);
 
-// Create the theme object (a Sass map containing all of the palettes).
-$mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn);
+$mifosx-density: 0;
 
-// 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.
+$mifosx-app-theme: mat.define-light-theme(
+  (
+    color: $mifosx-color-config,
+    typography: $mifosx-typography,
+    density: $mifosx-density
+  )
+);
+
+@include mat.typography-hierarchy($mifosx-typography);
 @include mat.all-component-themes($mifosx-app-theme);
 @include groups-view-component-theme($mifosx-app-theme);
 @include centers-view-component-theme($mifosx-app-theme);
@@ -43,17 +63,20 @@ $mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accen
 
 /* ################################## Dark theme ################################### */
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-$mifosx-app-dark-primary: mat.define-palette($dark-primary-palette);
-$mifosx-app-dark-accent: mat.define-palette($dark-accent-palette);
-$mifosx-app-dark-warn: mat.define-palette(mat.$red-palette);
+$mifosx-dark-color-config: (
+  primary: mat.define-palette($dark-primary-palette),
+  accent: mat.define-palette($dark-accent-palette),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
-// Create the theme object (a Sass map containing all of the palettes).
-$mifosx-app-dark-theme: mat.define-dark-theme($mifosx-app-dark-primary, $mifosx-app-dark-accent, $mifosx-app-dark-warn);
+$mifosx-app-dark-theme: mat.define-dark-theme(
+  (
+    color: $mifosx-dark-color-config
+  )
+);
 
-// Include theme styles for core and each component used in your app.
 .dark-theme {
-  @include mat.all-component-themes($mifosx-app-dark-theme);
+  @include mat.all-component-colors($mifosx-app-dark-theme);
   @include groups-view-component-theme($mifosx-app-dark-theme);
   @include centers-view-component-theme($mifosx-app-dark-theme);
   @include dashboard-component-theme($mifosx-app-dark-theme);

src/theme/pictonblue-yellowgreen.scss

@@ -1,17 +1,17 @@
 @use '@angular/material' as mat;
 
-$pictonblue-yellowgreen-primary: mat.define-palette(mat.$blue-palette, 400, 200, 600);
-
-$pictonblue-yellowgreen-accent: mat.define-palette(mat.$light-green-palette, 400, 200, 600);
-
-$pictonblue-yellowgreen-warn: mat.define-palette(mat.$red-palette);
+$pictonblue-yellowgreen-color-config: (
+  primary: mat.define-palette(mat.$blue-palette, 400, 200, 600),
+  accent: mat.define-palette(mat.$light-green-palette, 400, 200, 600),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
 $pictonblue-yellowgreen-theme: mat.define-light-theme(
-  $pictonblue-yellowgreen-primary,
-  $pictonblue-yellowgreen-accent,
-  $pictonblue-yellowgreen-warn
+  (
+    color: $pictonblue-yellowgreen-color-config
+  )
 );
 
 .pictonblue-yellowgreen-theme {
-  @include mat.all-component-themes($pictonblue-yellowgreen-theme);
+  @include mat.all-component-colors($pictonblue-yellowgreen-theme);
 }

src/theme/pink-bluegrey.scss

@@ -1,11 +1,17 @@
 @use '@angular/material' as mat;
 
-$pink-bluegrey-primary: mat.define-palette(mat.$pink-palette, 500, 300, 700);
-$pink-bluegrey-accent: mat.define-palette(mat.$blue-grey-palette, 400, 200, 600);
-$pink-bluegrey-warn: mat.define-palette(mat.$red-palette);
+$pink-bluegrey-color-config: (
+  primary: mat.define-palette(mat.$pink-palette, 500, 300, 700),
+  accent: mat.define-palette(mat.$blue-grey-palette, 400, 200, 600),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
-$pink-bluegrey-theme: mat.define-light-theme($pink-bluegrey-primary, $pink-bluegrey-accent, $pink-bluegrey-warn);
+$pink-bluegrey-theme: mat.define-light-theme(
+  (
+    color: $pink-bluegrey-color-config
+  )
+);
 
 .pink-bluegrey-theme {
-  @include mat.all-component-themes($pink-bluegrey-theme);
+  @include mat.all-component-colors($pink-bluegrey-theme);
 }

src/theme/purple-green.scss

@@ -1,11 +1,17 @@
 @use '@angular/material' as mat;
 
-$purple-green-primary: mat.define-palette(mat.$purple-palette, 500, 300, 700);
-$purple-green-accent: mat.define-palette(mat.$green-palette, 400, 200, 600);
-$purple-green-warn: mat.define-palette(mat.$red-palette);
+$purple-green-color-config: (
+  primary: mat.define-palette(mat.$purple-palette, 500, 300, 700),
+  accent: mat.define-palette(mat.$green-palette, 400, 200, 600),
+  warn: mat.define-palette(mat.$red-palette)
+);
 
-$purple-green-theme: mat.define-light-theme($purple-green-primary, $purple-green-accent, $purple-green-warn);
+$purple-green-theme: mat.define-light-theme(
+  (
+    color: $purple-green-color-config
+  )
+);
 
 .purple-green-theme {
-  @include mat.all-component-themes($purple-green-theme);
+  @include mat.all-component-colors($purple-green-theme);
 }