[NIFI-13539] upgrade to angular 18.0.7 (#9072)

* [NIFI-13539] upgrade to angular 18.0.7

* update deps

* update package-lock.json

* rebase and address review feedback

* remove unused dev dep

This closes #9072

nifi-frontend/src/main/frontend/.gitignore

@@ -43,4 +43,5 @@ Thumbs.db
 
 
 .nx/cache
+.nx/workspace-data
 .angular

nifi-frontend/src/main/frontend/.prettierignore

@@ -36,3 +36,5 @@ src/styles.scss
 Thumbs.db
 
 .angular
+
+/.nx/workspace-data

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts

@@ -27,7 +27,7 @@ import {
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../environments/environment';
-import { HttpClientModule, HttpClientXsrfModule, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideHttpClient, withInterceptors, withXsrfConfiguration } from '@angular/common/http';
 import { NavigationActionTiming, RouterState, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { rootReducers } from './state';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
@@ -44,15 +44,11 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
 
 @NgModule({
     declarations: [AppComponent],
+    bootstrap: [AppComponent],
     imports: [
         BrowserModule,
         AppRoutingModule,
         BrowserAnimationsModule,
-        HttpClientModule,
-        HttpClientXsrfModule.withOptions({
-            cookieName: '__Secure-Request-Token',
-            headerName: 'Request-Token'
-        }),
         StoreModule.forRoot(rootReducers),
         StoreRouterConnectingModule.forRoot({
             routerState: RouterState.Minimal,
@@ -68,8 +64,13 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
     providers: [
         disableAnimations === 'true' ? provideNoopAnimations() : provideAnimations(),
         { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
-        provideHttpClient(withInterceptors([]))
-    ],
-    bootstrap: [AppComponent]
+        provideHttpClient(
+            withInterceptors([]),
+            withXsrfConfiguration({
+                cookieName: '__Secure-Request-Token',
+                headerName: 'Request-Token'
+            })
+        )
+    ]
 })
 export class AppModule {}

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss

@@ -26,12 +26,12 @@
 
 // Plus imports for other components in your app.
 @use 'libs/shared/src/assets/fonts/flowfont/flowfont.css';
-@use 'font-awesome/css/font-awesome.min.css';
 @use 'codemirror/lib/codemirror.css';
 @use 'codemirror/addon/fold/foldgutter.css';
 @use 'codemirror/addon/hint/show-hint.css';
 @use 'codemirror/addon/lint/lint.css';
 
+@import 'font-awesome';
 @import 'libs/shared/src/assets/themes/supplemental';
 // To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark
 @import 'libs/shared/src/assets/themes/material';

nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss

@@ -20,15 +20,15 @@
 
 @mixin generate-theme($material-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($material-theme-color-config, is-dark);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
 
     .splash {
         background-color: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);

nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts

@@ -28,7 +28,7 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../environments/environment';
-import { HttpClientModule, HttpClientXsrfModule, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideHttpClient, withInterceptors, withXsrfConfiguration } from '@angular/common/http';
 import { NavigationActionTiming, RouterState, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { rootReducers } from './state';
 import { CurrentUserEffects } from './state/current-user/current-user.effects';
@@ -65,15 +65,11 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
 
 @NgModule({
     declarations: [AppComponent],
+    bootstrap: [AppComponent],
     imports: [
         BrowserModule,
         AppRoutingModule,
         BrowserAnimationsModule,
-        HttpClientModule,
-        HttpClientXsrfModule.withOptions({
-            cookieName: '__Secure-Request-Token',
-            headerName: 'Request-Token'
-        }),
         StoreModule.forRoot(rootReducers),
         StoreRouterConnectingModule.forRoot({
             routerState: RouterState.Minimal,
@@ -109,8 +105,13 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
     providers: [
         disableAnimations === 'true' ? provideNoopAnimations() : provideAnimations(),
         { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
-        provideHttpClient(withInterceptors([authInterceptor, loadingInterceptor, pollingInterceptor]))
-    ],
-    bootstrap: [AppComponent]
+        provideHttpClient(
+            withInterceptors([authInterceptor, loadingInterceptor, pollingInterceptor]),
+            withXsrfConfiguration({
+                cookieName: '__Secure-Request-Token',
+                headerName: 'Request-Token'
+            })
+        )
+    ]
 })
 export class AppModule {}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the palettes from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -32,40 +32,46 @@
     $supplemental-theme-caution-palette: map.get($supplemental-theme-color-config, 'warn');
 
     // Get hues from palette
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
-    $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
+    $material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
 
     // Canvas colors
-    $supplemental-theme-surface-palette-default: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-default: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         default
     );
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-success-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-success-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-success-palette,
         lighter
     );
-    $supplemental-theme-success-palette-50: mat.get-color-from-palette($supplemental-theme-success-palette, 50);
-    $supplemental-theme-success-palette-900: mat.get-color-from-palette($supplemental-theme-success-palette, 900);
-    $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
-    $supplemental-theme-caution-palette-darker: mat.get-color-from-palette($supplemental-theme-caution-palette, darker);
+    $supplemental-theme-success-palette-50: mat.m2-get-color-from-palette($supplemental-theme-success-palette, 50);
+    $supplemental-theme-success-palette-900: mat.m2-get-color-from-palette($supplemental-theme-success-palette, 900);
+    $material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
+    $supplemental-theme-caution-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-caution-palette,
+        darker
+    );
 
     // Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
     $drop-shadow-color: black;
     $connection-drop-shadow-color: if($is-dark, black, white);
 
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss

@@ -20,22 +20,25 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
 
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss

@@ -20,7 +20,7 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss

@@ -20,15 +20,18 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -29,13 +29,16 @@
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
 
     #birdseye {
         background: if(

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss

@@ -20,15 +20,18 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -30,19 +30,22 @@
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
-    $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -29,11 +29,14 @@
 
     // Get hues from palette
     $is-dark: map-get($material-theme-color-config, is-dark);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss

@@ -20,18 +20,21 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palettes from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
 
     .search-container {
         &:hover,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss

@@ -20,15 +20,18 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palettes from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/logout/feature/_logout.component-theme.scss

@@ -20,15 +20,15 @@
 
 @mixin generate-theme($material-theme, $nifi-theme) {
     // Get the color config from the theme.
-    $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+    $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
 
     // Get the color palettes from the color-config.
     $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($nifi-theme-color-config, is-dark);
-    $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
-    $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+    $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+    $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
 
     .logout-background {
         background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter)

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -30,19 +30,22 @@
 
     // Get hues from palette
     $is-dark: map-get($material-theme-color-config, is-dark);
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
-    $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+    $material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss

@@ -20,18 +20,21 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palettes from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
 
     .provenance-event-table {
         .lineage {

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -30,11 +30,11 @@
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
 
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
+    $material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
 
     #lineage {
         canvas,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss

@@ -20,15 +20,18 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palettes from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -30,17 +30,20 @@
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss

@@ -20,24 +20,24 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($material-theme-color-config, is-dark);
-    $material-theme-primary-palette-lighter-contrast: mat.get-color-from-palette(
+    $material-theme-primary-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $material-theme-primary-palette,
         lighter-contrast
     );
-    $material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
+    $material-theme-primary-palette-darker-contrast: mat.m2-get-color-from-palette(
         $material-theme-primary-palette,
         darker-contrast
     );
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
 
     .nifi-navigation {
         background-color: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss

@@ -20,18 +20,18 @@
 
 @mixin generate-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -29,12 +29,15 @@
 
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, 'lighter');
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, 'lighter');
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
 
     .hint-pattern {
         color: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);

nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss

@@ -54,11 +54,11 @@
 
 // Plus imports for other components in your app.
 @use 'libs/shared/src/assets/fonts/flowfont/flowfont.css';
-@use 'font-awesome/css/font-awesome.min.css';
 @use 'codemirror/lib/codemirror.css';
 @use 'codemirror/addon/fold/foldgutter.css';
 @use 'codemirror/addon/hint/show-hint.css';
 
+@import 'font-awesome';
 @import 'libs/shared/src/assets/themes/supplemental';
 // To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark
 @import 'libs/shared/src/assets/themes/material';

nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss

@@ -302,7 +302,7 @@
 
 @mixin generate-material-theme($material-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
 
     // Get the palettes
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -311,11 +311,11 @@
 
     // colors from the theme palettes
     $is-dark: map-get($material-theme-color-config, is-dark);
-    $material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
+    $material-theme-primary-palette-darker-contrast: mat.m2-get-color-from-palette(
         $material-theme-primary-palette,
         darker-contrast
     );
-    $material-theme-primary-palette-lighter-contrast: mat.get-color-from-palette(
+    $material-theme-primary-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $material-theme-primary-palette,
         lighter-contrast
     );
@@ -324,15 +324,15 @@
         $material-theme-primary-palette-darker-contrast,
         $material-theme-primary-palette-lighter-contrast
     );
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
-    $material-theme-accent-palette-lighter: mat.get-color-from-palette($material-theme-accent-palette, lighter);
-    $material-theme-accent-palette-darker: mat.get-color-from-palette($material-theme-accent-palette, darker);
-    $material-theme-warn-palette-default: mat.get-color-from-palette($material-theme-warn-palette, default);
-    $material-theme-warn-palette-lighter: mat.get-color-from-palette($material-theme-warn-palette, lighter);
-    $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
+    $material-theme-accent-palette-lighter: mat.m2-get-color-from-palette($material-theme-accent-palette, lighter);
+    $material-theme-accent-palette-darker: mat.m2-get-color-from-palette($material-theme-accent-palette, darker);
+    $material-theme-warn-palette-default: mat.m2-get-color-from-palette($material-theme-warn-palette, default);
+    $material-theme-warn-palette-lighter: mat.m2-get-color-from-palette($material-theme-warn-palette, lighter);
+    $material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
 
     // semantic classes for the material theme
 
@@ -439,7 +439,7 @@
 
 @mixin generate-supplemental-theme($supplemental-theme) {
     // Get the color config from the theme.
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palettes from the color-config.
     $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
@@ -448,17 +448,20 @@
 
     // default/lighter/darker colors from the supplemental theme palettes
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
-    $supplemental-theme-surface-palette-default: mat.get-color-from-palette($supplemental-theme-surface-palette);
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-default: mat.m2-get-color-from-palette($supplemental-theme-surface-palette);
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );
@@ -472,20 +475,26 @@
         $supplemental-theme-surface-palette-darker-contrast,
         $supplemental-theme-surface-palette-lighter-contrast
     );
-    $supplemental-theme-success-palette-default: mat.get-color-from-palette(
+    $supplemental-theme-success-palette-default: mat.m2-get-color-from-palette(
         $supplemental-theme-success-palette,
         default
     );
-    $supplemental-theme-success-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-success-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-success-palette,
         lighter
     );
-    $supplemental-theme-success-palette-darker: mat.get-color-from-palette($supplemental-theme-success-palette, darker);
-    $supplemental-theme-caution-palette-default: mat.get-color-from-palette(
+    $supplemental-theme-success-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-success-palette,
+        darker
+    );
+    $supplemental-theme-caution-palette-default: mat.m2-get-color-from-palette(
         $supplemental-theme-caution-palette,
         default
     );
-    $supplemental-theme-caution-palette-darker: mat.get-color-from-palette($supplemental-theme-caution-palette, darker);
+    $supplemental-theme-caution-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-caution-palette,
+        darker
+    );
 
     // semantic classes for contrast colors determined based on the light/dark mode of the theme.
 

nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss

@@ -20,8 +20,8 @@
 
 @mixin generate-codemirror-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -31,24 +31,27 @@
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
 
-    $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
-    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
-    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
+    $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
 
-    $supplemental-theme-surface-palette-default: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-default: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         default
     );
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
-    $supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
+    $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         darker-contrast
     );
-    $supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter-contrast
     );

nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss

@@ -50,8 +50,8 @@
 
 @mixin generate-theme($material-theme, $supplemental-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
-    $supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
+    $material-theme-color-config: mat.m2-get-color-config($material-theme);
+    $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
 
     // Get the color palette from the color-config.
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
@@ -61,20 +61,23 @@
     // Get hues from palette
     $is-dark: map-get($supplemental-theme-color-config, is-dark);
 
-    $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+    $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
         $supplemental-theme-surface-palette,
         lighter
     );
-    $supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+    $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
+        $supplemental-theme-surface-palette,
+        darker
+    );
     $selected-row-color: if(
         $is-dark,
-        mat.get-color-from-palette($material-theme-accent-palette, darker),
-        mat.get-color-from-palette($material-theme-accent-palette, lighter)
+        mat.m2-get-color-from-palette($material-theme-accent-palette, darker),
+        mat.m2-get-color-from-palette($material-theme-accent-palette, lighter)
     );
     $header-surface: if(
         $is-dark,
-        mat.get-color-from-palette($material-theme-primary-palette),
-        mat.get-color-from-palette($material-theme-primary-palette, darker)
+        mat.m2-get-color-from-palette($material-theme-primary-palette),
+        mat.m2-get-color-from-palette($material-theme-primary-palette, darker)
     );
 
     .listing-table {

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss

@@ -51,7 +51,7 @@ $material-primary-light-palette: (
     )
 );
 
-$material-accent-light-palette: mat.$brown-palette;
+$material-accent-light-palette: mat.$m2-brown-palette;
 
 $warn-light-palette: (
     50: #ffebee,
@@ -90,43 +90,43 @@ $warn-dark-palette: $warn-light-palette;
 // default hue: must have enough contrast on top of the mat-app-background (#fafafa). For light mode this is a minimum of 600 up to 900. It needs to be dark enough to be displayed on top of the darker hue.
 // lighter hue: is used for the flow run status icons, PG banner run status icons, RPG banner run status icons as well as PG banner background color, RPG banner background color. For light mode this is a minimum of 600 up to 900.
 // darker hue: is used for the navigation header background color. It needs to have enough contrast with the default hue since the default hue is displayed on top of the darker hue. In this case the darker hue is 300 so 900 was chosen for the default hue.
-$material-primary-light: mat.define-palette($material-primary-light-palette, 900, 600, 300);
+$material-primary-light: mat.m2-define-palette($material-primary-light-palette, 900, 600, 300);
 // accent material palette:
 //
 // default hue: must have enough contrast on top of the mat-app-background (#fafafa). For light mode this is a minimum of 600 up to 900.
 // lighter hue: snackbar action button text color, Should be light as the action button is on a dark background in light mode.
 // darker hue: nothing
-$material-accent-light: mat.define-palette($material-accent-light-palette, 500, 100, 700);
+$material-accent-light: mat.m2-define-palette($material-accent-light-palette, 500, 100, 700);
 // warn material palette color default hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 600 up to 900.
-$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
+$warn-light: mat.m2-define-palette($warn-light-palette, 400, 200, 900);
 
 @use '@fontsource/roboto/latin.css' as roboto-normal;
 @use '@fontsource/roboto/latin-300-italic.css' as roboto-light-italic;
 @use '@fontsource/roboto/latin-400-italic.css' as roboto-normal-italic;
 
 //https://m2.material.io/design/typography/the-type-system.html#type-scale
-$typography-config: mat.define-typography-config(
+$typography-config: mat.m2-define-typography-config(
     $font-family: Roboto,
     // All `<h2>` native elements or use: `.text-xl font-bold`, `.mat-h2`, or `.mat-headline-6`
-    $headline-6: mat.define-typography-level(18px, 28px, 700),
+    $headline-6: mat.m2-define-typography-level(18px, 28px, 700),
     // All `<h3>` native elements or use: `.text-2xl font-bold`, `.mat-h3`, or `.mat-subtitle-1`
-    $subtitle-1: mat.define-typography-level(20px, 28px, 700),
+    $subtitle-1: mat.m2-define-typography-level(20px, 28px, 700),
     // All <th> native elements or use: `.mat-body-strong` or `.mat-subtitle-2`
-    $subtitle-2: mat.define-typography-level(14px, 20px, 700),
+    $subtitle-2: mat.m2-define-typography-level(14px, 20px, 700),
     // All `<h4>` native elements or use: `.text-base`, `.mat-h4`, or `.mat-body-1`
-    $body-1: mat.define-typography-level(14px, 20px, 400),
+    $body-1: mat.m2-define-typography-level(14px, 20px, 400),
     // Any body text or use: `.mat-body` or `.mat-body-2`
-    $body-2: mat.define-typography-level(14px, 20px, 400),
+    $body-2: mat.m2-define-typography-level(14px, 20px, 400),
     // Smaller body and hint text like <mat-error> or <mat-hint> or use: `.text-sm`, `.mat-small`, or`.mat-caption`
-    $caption: mat.define-typography-level(12px, 16px, 400, $letter-spacing: 0.4px),
+    $caption: mat.m2-define-typography-level(12px, 16px, 400, $letter-spacing: 0.4px),
     // Buttons and anchors.
-    $button: mat.define-typography-level(14px, 20px, 400)
+    $button: mat.m2-define-typography-level(14px, 20px, 400)
 );
 
 @include mat.typography-hierarchy($typography-config);
 
 // Create the theme objects. We can extract the values we need from the theme passed into the mixins.
-$material-theme-light: mat.define-light-theme(
+$material-theme-light: mat.m2-define-light-theme(
     (
         color: (
             primary: $material-primary-light,
@@ -145,18 +145,18 @@ $material-theme-light: mat.define-light-theme(
 // default hue: default is used for the navigation header background color. It must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 200 to 400. It needs to be light enough to have the darker hue displayed on top of it.
 // lighter hue: is used for the flow run status icons, PG banner run status icons, RPG banner run status icons as well as PG banner background color, RPG banner background color. For light mode this is a minimum of 50 up to 200.
 // darker hue: is used for the PG banner background color, RPG banner background color. For light mode this is a minimum of 700 to 900 (or A700). It needs to be dark enough to be displayed on top of the default hue.
-$material-primary-dark: mat.define-palette($material-primary-dark-palette, 400, 200, A700);
+$material-primary-dark: mat.m2-define-palette($material-primary-dark-palette, 400, 200, A700);
 // accent material palette color default hue must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 300 up to 500.
 // accent material palette:
 //
 // default hue: must have enough contrast on top of the mat-app-background (#303030). For light mode this is a minimum of 300 up to 400.
 // lighter hue: nothing
 // darker hue: snackbar action button text color, Should be darker as the action button is on a light background in dark mode.
-$material-accent-dark: mat.define-palette($material-accent-dark-palette, 200, 100, 900);
+$material-accent-dark: mat.m2-define-palette($material-accent-dark-palette, 200, 100, 900);
 // warn material palette color default hue must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 300 up to 500.
-$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 300);
+$warn-dark: mat.m2-define-palette($warn-dark-palette, 600, 200, 300);
 
-$material-theme-dark: mat.define-dark-theme(
+$material-theme-dark: mat.m2-define-dark-theme(
     (
         color: (
             primary: $material-primary-dark,

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss

@@ -26,33 +26,33 @@ $material-accent-dark-palette: $material-accent-light-palette;
 $warn-dark-palette: $warn-light-palette;
 
 // Define the palettes for your theme
-$material-primary-light: mat.define-palette($material-primary-light-palette, 800, 500, 200);
-$material-accent-light: mat.define-palette($material-accent-light-palette, 600, 50, A700);
-$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
+$material-primary-light: mat.m2-define-palette($material-primary-light-palette, 800, 500, 200);
+$material-accent-light: mat.m2-define-palette($material-accent-light-palette, 600, 50, A700);
+$warn-light: mat.m2-define-palette($warn-light-palette, 400, 200, 900);
 
 //https://m2.material.io/design/typography/the-type-system.html#type-scale
-$typography-config: mat.define-typography-config(
+$typography-config: mat.m2-define-typography-config(
     $font-family: 'Comic Sans MS, Tahoma',
     //h2
-    $headline-6: mat.define-typography-level(16px, 24px, 400, $letter-spacing: 0.5px),
+    $headline-6: mat.m2-define-typography-level(16px, 24px, 400, $letter-spacing: 0.5px),
     //h3
-    $subtitle-1: mat.define-typography-level(20px, 20px, 700),
+    $subtitle-1: mat.m2-define-typography-level(20px, 20px, 700),
     //h4
-    $subtitle-2: mat.define-typography-level(14px, 26px, 400, $letter-spacing: 0.4375px),
+    $subtitle-2: mat.m2-define-typography-level(14px, 26px, 400, $letter-spacing: 0.4375px),
     //body
-    $body-1: mat.define-typography-level(16px, 24px, 400),
+    $body-1: mat.m2-define-typography-level(16px, 24px, 400),
     //body2
-    $body-2: mat.define-typography-level(14px, 14px, 400),
+    $body-2: mat.m2-define-typography-level(14px, 14px, 400),
     //caption <mat-error> or <mat-hint>
-    $caption: mat.define-typography-level(12px, 20px, 400, $letter-spacing: 0.4px),
+    $caption: mat.m2-define-typography-level(12px, 20px, 400, $letter-spacing: 0.4px),
     //button
-    $button: mat.define-typography-level(16px, 24px, 400)
+    $button: mat.m2-define-typography-level(16px, 24px, 400)
 );
 
 @include mat.typography-hierarchy($typography-config);
 
 // Create the theme objects. We can extract the values we need from the theme passed into the mixins.
-$material-theme-light: mat.define-light-theme(
+$material-theme-light: mat.m2-define-light-theme(
     (
         color: (
             primary: $material-primary-light,
@@ -65,11 +65,11 @@ $material-theme-light: mat.define-light-theme(
 );
 
 // Create the color palettes used in our dark theme.
-$material-primary-dark: mat.define-palette($material-primary-dark-palette, 200, 100, 800);
-$material-accent-dark: mat.define-palette($material-accent-dark-palette, 200, A100, 900);
-$warn-dark: mat.define-palette($warn-dark-palette, 500, 200, 700);
+$material-primary-dark: mat.m2-define-palette($material-primary-dark-palette, 200, 100, 800);
+$material-accent-dark: mat.m2-define-palette($material-accent-dark-palette, 200, A100, 900);
+$warn-dark: mat.m2-define-palette($warn-dark-palette, 500, 200, 700);
 
-$material-theme-dark: mat.define-dark-theme(
+$material-theme-dark: mat.m2-define-dark-theme(
     (
         color: (
             primary: $material-primary-dark,

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/supplemental.scss

@@ -106,11 +106,11 @@ $caution-palette: (
 
 // surface palette default color hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 600 up to 900.
 // For the lighter and darker hues these are used as the surface colors for canvas components, the birdseye, navigate/operate palettes etc. When the theme is in light mode the lighter hue is used as the surface color and the darker hue sets the contrast color hue.
-$surface-light-palette: mat.define-palette($surface-palette, 600, 100, 900);
-$success-light-palette: mat.define-palette($success-palette, 400, 200, 800);
-$caution-light-palette: mat.define-palette($caution-palette, A400, A200, A700);
+$surface-light-palette: mat.m2-define-palette($surface-palette, 600, 100, 900);
+$success-light-palette: mat.m2-define-palette($success-palette, 400, 200, 800);
+$caution-light-palette: mat.m2-define-palette($caution-palette, A400, A200, A700);
 
-$supplemental-theme-light: mat.define-light-theme(
+$supplemental-theme-light: mat.m2-define-light-theme(
     (
         color: (
             primary: $surface-light-palette,
@@ -122,11 +122,11 @@ $supplemental-theme-light: mat.define-light-theme(
 
 // surface palette default color hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 300 up to 500.
 // For the lighter and darker hues these are used as the surface colors for canvas components, the birdseye, navigate/operate palettes etc. When the theme is in dark mode the darker hue is used as the surface color and the lighter hue sets the contrast color hue.
-$surface-dark-palette: mat.define-palette($surface-palette, 500, 200, 800);
-$success-dark-palette: mat.define-palette($success-palette, 400, 200, 800);
-$caution-dark-palette: mat.define-palette($caution-palette, A400, A200, A700);
+$surface-dark-palette: mat.m2-define-palette($surface-palette, 500, 200, 800);
+$success-dark-palette: mat.m2-define-palette($success-palette, 400, 200, 800);
+$caution-dark-palette: mat.m2-define-palette($caution-palette, A400, A200, A700);
 
-$supplemental-theme-dark: mat.define-dark-theme(
+$supplemental-theme-dark: mat.m2-define-dark-theme(
     (
         color: (
             primary: $surface-dark-palette,

nifi-frontend/src/main/frontend/package.json

@@ -14,22 +14,23 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^17.1.3",
-        "@angular/cdk": "^17.1.2",
-        "@angular/common": "^17.1.3",
-        "@angular/compiler": "^17.1.3",
-        "@angular/core": "^17.1.3",
-        "@angular/forms": "^17.1.3",
-        "@angular/material": "^17.1.2",
-        "@angular/platform-browser": "^17.1.3",
-        "@angular/platform-browser-dynamic": "^17.1.3",
-        "@angular/router": "^17.1.3",
+        "@angular/animations": "18.0.7",
+        "@angular/cdk": "18.0.6",
+        "@angular/common": "18.0.7",
+        "@angular/compiler": "18.0.7",
+        "@angular/core": "18.0.7",
+        "@angular/forms": "18.0.7",
+        "@angular/material": "18.0.6",
+        "@angular/platform-browser": "18.0.7",
+        "@angular/platform-browser-dynamic": "18.0.7",
+        "@angular/router": "18.0.7",
         "@ctrl/ngx-codemirror": "^7.0.0",
         "@fontsource/roboto": "^5.0.12",
-        "@ngrx/effects": "^17.1.0",
-        "@ngrx/router-store": "^17.1.0",
-        "@ngrx/store": "^17.1.0",
-        "@ngrx/store-devtools": "^17.1.0",
+        "@ngrx/effects": "18.0.1",
+        "@ngrx/operators": "^18.0.0",
+        "@ngrx/router-store": "18.0.1",
+        "@ngrx/store": "18.0.1",
+        "@ngrx/store-devtools": "18.0.1",
         "@types/js-beautify": "^1.14.3",
         "codemirror": "^5.65.16",
         "d3": "^7.8.5",
@@ -44,24 +45,23 @@
         "zone.js": "0.14.4"
     },
     "devDependencies": {
-        "@angular-builders/jest": "^17.0.2",
-        "@angular-devkit/build-angular": "17.2.0",
-        "@angular-devkit/core": "~17.1.3",
-        "@angular-devkit/schematics": "~17.1.3",
-        "@angular-eslint/builder": "17.2.1",
-        "@angular-eslint/eslint-plugin": "17.2.1",
-        "@angular-eslint/eslint-plugin-template": "17.2.1",
-        "@angular-eslint/schematics": "17.2.1",
-        "@angular-eslint/template-parser": "17.2.1",
-        "@angular/cli": "~17.1.3",
-        "@angular/compiler-cli": "^17.1.3",
+        "@angular-builders/jest": "^18.0.0",
+        "@angular-devkit/build-angular": "18.0.7",
+        "@angular-devkit/core": "18.0.7",
+        "@angular-devkit/schematics": "18.0.7",
+        "@angular-eslint/eslint-plugin": "18.1.0",
+        "@angular-eslint/eslint-plugin-template": "18.1.0",
+        "@angular-eslint/template-parser": "18.1.0",
+        "@angular/build": "18.0.7",
+        "@angular/cli": "~18.0.0",
+        "@angular/compiler-cli": "18.0.7",
         "@happy-dom/jest-environment": "^14.10.1",
-        "@nx/angular": "18.1.3",
-        "@nx/eslint": "^19.1.1",
-        "@nx/eslint-plugin": "^19.1.1",
-        "@nx/jest": "18.3.4",
-        "@nx/workspace": "18.1.3",
-        "@schematics/angular": "~17.1.3",
+        "@nx/angular": "19.4.2",
+        "@nx/eslint": "19.4.2",
+        "@nx/eslint-plugin": "19.4.2",
+        "@nx/jest": "19.4.2",
+        "@nx/workspace": "19.4.2",
+        "@schematics/angular": "18.0.7",
         "@types/codemirror": "^5.60.15",
         "@types/d3": "^7.4.3",
         "@types/humanize-duration": "^3.27.3",
@@ -69,6 +69,7 @@
         "@types/webfontloader": "^1.6.38",
         "@typescript-eslint/eslint-plugin": "6.21.0",
         "@typescript-eslint/parser": "6.21.0",
+        "@typescript-eslint/utils": "^8.0.0-alpha.28",
         "autoprefixer": "^10.4.16",
         "env-cmd": "^10.1.0",
         "eslint": "^8.51.0",
@@ -76,14 +77,14 @@
         "eslint-plugin-prettier": "^5.0.1",
         "happy-dom": "^14.10.1",
         "jest": "^29.7.0",
-        "jest-preset-angular": "^14.0.3",
+        "jest-preset-angular": "14.1.1",
         "ng-mocks": "^14.12.2",
-        "ng-packagr": "^17.1.2",
-        "nx": "18.1.3",
+        "ng-packagr": "18.0.0",
+        "nx": "19.4.2",
         "postcss": "^8.4.32",
         "prettier": "^3.2.5",
         "tailwindcss": "^3.3.6",
-        "typescript": "5.3.3"
+        "typescript": "5.4.5"
     },
     "engines": {
         "node": ">=22.0.0"