Bump angular 18 (#182)

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-    extends: '@vality/eslint-config',
+    extends: '@vality/eslint-config-ng',
     overrides: [
-        ...require('@vality/eslint-config/configs').angular('dsh').overrides,
+        ...require('@vality/eslint-config-ng/configs').angular('dsh').overrides,
-        ...require('@vality/eslint-config/configs').importOrder(['@dsh/**']).overrides,
+        ...require('@vality/eslint-config-ng/configs').importOrder(['@dsh/**']).overrides,
     ],
 };

package.json

@@ -25,36 +25,33 @@
     "spell:fix": "cspell --no-progress --show-suggestions --show-context **"
   },
   "dependencies": {
-    "@angular/animations": "^17.2.1",
+    "@angular/animations": "^18.0.4",
-    "@angular/cdk": "~17.2.0",
+    "@angular/cdk": "~18.0.4",
-    "@angular/common": "^17.2.1",
+    "@angular/common": "^18.0.4",
-    "@angular/compiler": "^17.2.1",
+    "@angular/compiler": "^18.0.4",
-    "@angular/core": "^17.2.1",
+    "@angular/core": "^18.0.4",
-    "@angular/forms": "^17.2.1",
+    "@angular/forms": "^18.0.4",
-    "@angular/material": "~17.2.0",
+    "@angular/material": "~18.0.4",
-    "@angular/material-moment-adapter": "^17.2.0",
+    "@angular/material-moment-adapter": "^18.0.4",
-    "@angular/platform-browser": "^17.2.1",
+    "@angular/platform-browser": "^18.0.4",
-    "@angular/platform-browser-dynamic": "^17.2.1",
+    "@angular/platform-browser-dynamic": "^18.0.4",
-    "@angular/router": "^17.2.1",
+    "@angular/router": "^18.0.4",
     "@ngneat/transloco": "^6.0.4",
     "@ngneat/until-destroy": "^9.0.0",
-    "@sentry/angular-ivy": "^7.100.1",
+    "@vality/ng-core": "18.0.1-pr-63-9e315a6.0",
-    "@sentry/integrations": "^7.100.1",
+    "@vality/swag-anapi-v2": "2.0.1-2eda808.0",
-    "@sentry/tracing": "^7.100.1",
+    "@vality/swag-api-keys-v2": "0.1.2-321124b.0",
-    "@vality/ng-core": "^17.2.1-pr-57-0134d85.0",
+    "@vality/swag-claim-management": "0.1.1-b5248eb.0",
-    "@vality/swag-anapi-v2": "2.0.1-32ed85f.0",
+    "@vality/swag-organizations": "1.0.1-e863566.0",
-    "@vality/swag-api-keys-v2": "0.1.2-f0ece04.0",
+    "@vality/swag-payments": "0.1.3-5760b7e.0",
-    "@vality/swag-claim-management": "0.1.1-6b6711b.0",
+    "@vality/swag-url-shortener": "0.1.1-9659896.0",
-    "@vality/swag-organizations": "1.0.1-de0cd06.0",
+    "@vality/swag-wallet": "0.1.3-54f56db.0",
-    "@vality/swag-payments": "0.1.3-5dc6d9f.0",
-    "@vality/swag-url-shortener": "0.1.0",
-    "@vality/swag-wallet": "0.1.3-3b8984e.0",
     "angular-file": "^3.0.1",
     "apexcharts": "^3.19.2",
     "css-element-queries": "1.2.3",
     "humanize-duration": "^3.19.0",
     "jwt-decode": "^3.1.2",
-    "keycloak-angular": "^15.1.0",
+    "keycloak-angular": "16.0.1",
     "keycloak-js": "^18.0.1",
     "lodash-es": "^4.17.21",
     "moment": "2.29.4",
@@ -67,30 +64,27 @@
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^17.0.0",
+    "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular-devkit/build-angular": "^17.2.0",
+    "@angular-devkit/build-angular": "^18.0.5",
-    "@angular-eslint/builder": "^17.2.0",
+    "@angular-eslint/builder": "^18.0.1",
-    "@angular-eslint/schematics": "^17.2.0",
+    "@angular-eslint/schematics": "^18.0.1",
-    "@angular/cli": "^17.2.0",
+    "@angular/cli": "^18.0.5",
-    "@angular/compiler-cli": "^17.2.1",
+    "@angular/compiler-cli": "^18.0.4",
-    "@angular/language-service": "^17.2.1",
+    "@angular/language-service": "^18.0.4",
     "@ngneat/transloco-keys-manager": "^3.8.0",
     "@ngneat/transloco-optimize": "^5.0.3",
     "@types/d3": "^5.7.0",
     "@types/glob": "^7.1.3",
     "@types/humanize-duration": "^3.18.0",
     "@types/jasmine": "~5.1.4",
-    "@types/jwt-decode": "^3.1.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/moment": "2.13.0",
-    "@types/prettier": "^3.0.0",
     "@vality/cspell-config": "^8.0.1-pr-57-482a037.0",
-    "@vality/eslint-config": "^8.2.0",
+    "@vality/eslint-config-ng": "18.0.1-pr-63-e72dd8e.0",
     "@vality/prettier-config": "3.1.0",
     "cross-env": "^7.0.3",
     "cspell": "^8.3.2",
     "dotenv": "^16.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "glob": "^7.1.6",
     "jasmine-core": "~5.1.1",
     "jasmine-marbles": "0.9.2",
@@ -103,6 +97,6 @@
     "prettier": "^3.1.1",
     "ts-mockito": "^2.6.1",
     "ts-node": "^10.9.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.4.5"
   }
 }

src/app/api/utils/create-api/create-api.ts

@@ -20,11 +20,10 @@ type DeepOnlyMutable<T> = T extends object
 type ApiArgs = [Injector];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type MethodParams<P extends Record<PropertyKey, any>, K extends PropertyKey> = RequiredKeys<
+type MethodParams<P extends Record<PropertyKey, any>, K extends PropertyKey> =
-    Omit<P, K>
+    RequiredKeys<Omit<P, K>> extends never
-> extends never
+        ? void | Overwrite<P, { [N in K]?: P[N] }>
-    ? void | Overwrite<P, { [N in K]?: P[N] }>
+        : Overwrite<P, { [N in K]?: P[N] }>;
-    : Overwrite<P, { [N in K]?: P[N] }>;
 type Method<M, P extends PropertyKey> = M extends (
     ...args: unknown[]
 ) => Observable<HttpResponse<infer R>>

src/app/app.component.ts

@@ -1,18 +1,15 @@
-import { Component, OnInit, isDevMode } from '@angular/core';
+import { Component, isDevMode } from '@angular/core';
-import * as sentry from '@sentry/angular-ivy';
-import { take } from 'rxjs/operators';
 
 import { LanguageService, Language } from '@dsh/app/language';
 
 import { BootstrapService } from './bootstrap.service';
-import { ContextOrganizationService } from './shared';
 
 @Component({
     selector: 'dsh-root',
     templateUrl: 'app.component.html',
     providers: [BootstrapService],
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
     bootstrapped$ = this.bootstrapService.bootstrapped$;
     isDev = isDevMode();
 
@@ -22,16 +19,9 @@ export class AppComponent implements OnInit {
 
     constructor(
         private bootstrapService: BootstrapService,
-        private contextOrganizationService: ContextOrganizationService,
         public languageService: LanguageService,
     ) {}
 
-    ngOnInit(): void {
-        this.contextOrganizationService.organization$
-            .pipe(take(1))
-            .subscribe(({ party }) => sentry.setUser({ id: party }));
-    }
-
     async setLanguage(language: Language) {
         await this.languageService.set(language);
         window.location.reload();

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule, isDevMode } from '@angular/core';
+import { APP_INITIALIZER, LOCALE_ID, NgModule, isDevMode } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import {
     DateAdapter,
@@ -18,9 +18,7 @@ import {
 } from '@angular/material-moment-adapter';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
 import { TranslocoModule, provideTransloco, TRANSLOCO_SCOPE } from '@ngneat/transloco';
-import * as sentry from '@sentry/angular-ivy';
 import { QUERY_PARAMS_SERIALIZERS } from '@vality/ng-core';
 import { FlexLayoutModule } from 'ng-flex-layout';
 
@@ -45,13 +43,12 @@ import { IconsModule, IconsService } from './icons';
 import { initializer } from './initializer';
 import { LanguageService } from './language';
 import { SectionsModule } from './sections';
-import { SentryErrorHandler } from './sentry-error-handler.service';
-import { SentryHttpInterceptor } from './sentry-http-interceptor';
 import { ThemeManager } from './theme-manager';
 import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
 
 @NgModule({
     declarations: [AppComponent],
+    bootstrap: [AppComponent],
     imports: [
         CommonModule,
         BrowserModule,
@@ -60,7 +57,6 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
         AuthModule,
         HomeModule,
         KeycloakAngularModule,
-        HttpClientModule,
         TranslocoModule,
         ErrorModule,
         IconsModule,
@@ -83,14 +79,7 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
         {
             provide: APP_INITIALIZER,
             useFactory: initializer,
-            deps: [
+            deps: [ConfigService, KeycloakService, LanguageService, ThemeManager, IconsService],
-                ConfigService,
-                KeycloakService,
-                LanguageService,
-                ThemeManager,
-                IconsService,
-                sentry.TraceService,
-            ],
             multi: true,
         },
         {
@@ -123,25 +112,12 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
             loader: TranslocoHttpLoaderService,
         }),
         { provide: ENV, useValue: environment },
-        {
-            provide: ErrorHandler,
-            useClass: SentryErrorHandler,
-        },
-        {
-            provide: HTTP_INTERCEPTORS,
-            useClass: SentryHttpInterceptor,
-            multi: true,
-        },
-        {
-            provide: sentry.TraceService,
-            deps: [Router],
-        },
         {
             provide: QUERY_PARAMS_SERIALIZERS,
             useValue: [createDateRangeWithPresetSerializer()],
         },
         { provide: TRANSLOCO_SCOPE, useValue: 'app' },
+        provideHttpClient(withInterceptorsFromDi()),
     ],
-    bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/auth/role-access.service.ts

@@ -31,9 +31,8 @@ export class RoleAccessService {
         return this.contextOrganizationService.member$.pipe(
             map((member) => {
                 const memberRoles = member.roles.map((r) => r.roleId);
-                return roleAccessNames[type](
+                return roleAccessNames[type]((access) =>
-                    (access) =>
+                    ROLE_ACCESSES_OBJECT[access]?.some((role) => memberRoles.includes(role)),
-                        ROLE_ACCESSES_OBJECT[access]?.some((role) => memberRoles.includes(role)),
                 );
             }),
         );

src/app/config/config.spec.ts

@@ -1,4 +1,5 @@
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { getTestBed, TestBed } from '@angular/core/testing';
 
 import { config, mockConfig } from './config-stub';
@@ -7,8 +8,12 @@ import { ConfigService } from './config.service';
 describe('ConfigService', () => {
     function createService() {
         TestBed.configureTestingModule({
-            imports: [HttpClientTestingModule],
+            imports: [],
-            providers: [ConfigService],
+            providers: [
+                ConfigService,
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+            ],
         });
         const injector = getTestBed();
         const service: ConfigService = injector.inject(ConfigService);

src/app/home/brand/brand.module.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
@@ -6,8 +6,9 @@ import { RouterModule } from '@angular/router';
 import { BrandComponent } from './brand.component';
 
 @NgModule({
-    imports: [RouterModule, MatIconModule, HttpClientModule],
     declarations: [BrandComponent],
     exports: [BrandComponent],
+    imports: [RouterModule, MatIconModule],
+    providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class BrandModule {}

src/app/home/mobile-grid/mobile-menu/components/mobile-menu-nav-item/_mobile-menu-nav-item-theme.scss

@@ -4,12 +4,12 @@
     $primary: map-get($theme, primary);
 
     .dsh-mobile-nav-item-active {
-        color: mat.get-color-from-palette($primary, default);
+        color: mat.m2-get-color-from-palette($primary, default);
     }
 }
 
 @mixin dsh-mobile-menu-nav-item-typography($config) {
     .dsh-mobile-menu-nav-item {
-        @include mat.typography-level($config, title);
+        @include mat.m2-typography-level($config, title);
     }
 }

src/app/home/mobile-grid/mobile-menu/components/mobile-user-bar/_mobile-user-bar-theme.scss

@@ -2,6 +2,6 @@
 
 @mixin dsh-mobile-user-bar-typography($config) {
     .dsh-mobile-user-bar-username {
-        @include mat.typography-level($config, body-2);
+        @include mat.m2-typography-level($config, body-2);
     }
 }

src/app/init-sentry.ts

@@ -1,25 +0,0 @@
-import * as sentry from '@sentry/angular-ivy';
-import { Integrations } from '@sentry/tracing';
-import isNil from 'lodash-es/isNil';
-
-import { environment } from '../environments';
-
-export const initSentry = (dsn: string): void => {
-    if (isNil(dsn)) {
-        return null;
-    }
-    sentry.init({
-        dsn,
-        integrations: [
-            new Integrations.BrowserTracing({
-                routingInstrumentation: sentry.routingInstrumentation,
-            }),
-        ],
-
-        // Set tracesSampleRate to 1.0 to capture 100%
-        // of transactions for performance monitoring.
-        tracesSampleRate: 1,
-        autoSessionTracking: true,
-        environment: environment.production ? 'production' : 'development',
-    });
-};

src/app/initializer.ts

@@ -3,7 +3,6 @@ import { environment } from '../environments';
 import { KeycloakService } from './auth/keycloak';
 import { ConfigService } from './config';
 import { IconsService } from './icons';
-import { initSentry } from './init-sentry';
 import { LanguageService } from './language';
 import { ThemeManager } from './theme-manager';
 
@@ -20,7 +19,6 @@ export const initializer =
             configService.init({ configUrl: environment.appConfigPath }).then(() =>
                 Promise.all([
                     themeManager.init(),
-                    initSentry(configService.sentryDsn),
                     keycloakService.init({
                         config: environment.authConfigPath,
                         initOptions: {

src/app/sections/payment-section/analytics/percent-difference/_percent-difference-theme.scss

@@ -5,10 +5,10 @@
     $warn: map-get($theme, warn);
 
     .positive-percent-difference {
-        color: mat.get-color-from-palette($accent, default);
+        color: mat.m2-get-color-from-palette($accent, default);
     }
 
     .negative-percent-difference {
-        color: mat.get-color-from-palette($warn, 300);
+        color: mat.m2-get-color-from-palette($warn, 300);
     }
 }

src/app/sections/payment-section/balances/_balances-theme.scss

@@ -5,7 +5,7 @@
 
     .dsh-balances {
         &-title {
-            color: mat.get-color-from-palette($foreground, secondary-text);
+            color: mat.m2-get-color-from-palette($foreground, secondary-text);
         }
     }
 }
@@ -13,13 +13,13 @@
 @mixin dsh-balances-typography($config) {
     .dsh-balances {
         &-title {
-            @include mat.typography-level($config, caption);
+            @include mat.m2-typography-level($config, caption);
         }
         &-balance-lg {
-            @include mat.typography-level($config, title);
+            @include mat.m2-typography-level($config, title);
         }
         &-balance-md {
-            @include mat.typography-level($config, subheading-2);
+            @include mat.m2-typography-level($config, subheading-2);
         }
     }
 }

src/app/sections/payment-section/no-shops-alert/_no-shops-alert-theme.scss

@@ -4,12 +4,12 @@
     $primary: map-get($theme, primary);
 
     .dsh-no-shops-action {
-        color: mat.get-color-from-palette($primary, default);
+        color: mat.m2-get-color-from-palette($primary, default);
     }
 }
 
 @mixin dsh-no-shops-alert-typography($config) {
     .dsh-no-shops-content {
-        @include mat.typography-level($config, subheading-2);
+        @include mat.m2-typography-level($config, subheading-2);
     }
 }

src/app/sections/payment-section/operations/operations.component.html

@@ -4,7 +4,7 @@
     fxLayout="column"
     fxLayoutGap="32px"
 >
-    <nav mat-tab-nav-bar>
+    <nav [tabPanel]="tabPanel" mat-tab-nav-bar>
         <ng-container *ngFor="let link of links">
             <a
                 #rla="routerLinkActive"
@@ -18,8 +18,8 @@
             </a>
         </ng-container>
     </nav>
-    <div>
+    <mat-tab-nav-panel #tabPanel>
         <router-outlet></router-outlet>
-    </div>
+    </mat-tab-nav-panel>
 </div>
 <dsh-scroll-up [hideAfter]="200"></dsh-scroll-up>

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/create-refund.service.ts

@@ -12,10 +12,10 @@ export class CreateRefundService {
 
     createRefund(data: CreateRefundDialogData): Observable<CreateRefundDialogResponse> {
         return this.dialog
-            .open<CreateRefundDialogComponent, CreateRefundDialogData>(
+            .open<
                 CreateRefundDialogComponent,
-                { data },
+                CreateRefundDialogData
-            )
+            >(CreateRefundDialogComponent, { data })
             .afterClosed();
     }
 }

src/app/sections/payment-section/operations/payments/payments-panels/payments-panels.component.spec.ts

@@ -1,4 +1,5 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,6 +36,7 @@ describe('PaymentsPanelsComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
+            declarations: [PaymentsPanelsComponent, MockRowHeaderComponent, MockRowComponent],
             imports: [
                 FlexLayoutModule,
                 SpinnerModule,
@@ -44,7 +46,6 @@ describe('PaymentsPanelsComponent', () => {
                 ShowMorePanelModule,
                 PaymentsDetailsModule,
                 NoopAnimationsModule,
-                HttpClientTestingModule,
                 TranslocoTestingModule.withLangs(
                     {
                         ru: {
@@ -57,7 +58,7 @@ describe('PaymentsPanelsComponent', () => {
                     },
                 ),
             ],
-            declarations: [PaymentsPanelsComponent, MockRowHeaderComponent, MockRowComponent],
+            providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
         }).compileComponents();
     });
 

src/app/sections/payment-section/shops/services/shops-balance/shops-balance.service.ts

@@ -15,12 +15,11 @@ export class ShopsBalanceService {
             return of([]);
         }
         return this.analyticsService.getCurrentShopBalances({ shopIDs }).pipe(
-            map(
+            map(({ result }) =>
-                ({ result }) =>
+                result?.map(({ id, amountResults = [] }) => ({
-                    result?.map(({ id, amountResults = [] }) => ({
+                    id,
-                        id,
+                    data: amountResults?.length ? amountResults[0] : null,
-                        data: amountResults?.length ? amountResults[0] : null,
+                })),
-                    })),
             ),
             catchError((err) => {
                 console.error(err);

src/app/sentry-error-handler.service.ts

@@ -1,58 +0,0 @@
-import { ErrorHandler as AngularErrorHandler, Injectable } from '@angular/core';
-import * as sentry from '@sentry/angular-ivy';
-
-import { extractError } from '@dsh/utils';
-
-import { environment } from '../environments';
-
-/**
- * Options used to configure the behavior of the Angular ErrorHandler.
- */
-export interface ErrorHandlerOptions {
-    logErrors?: boolean;
-}
-
-/**
- * Implementation of Angular's ErrorHandler provider that can be used as a drop-in replacement for the stock one.
- */
-@Injectable({ providedIn: 'root' })
-export class SentryErrorHandler implements AngularErrorHandler {
-    private readonly options: ErrorHandlerOptions;
-
-    constructor() {
-        this.options = {
-            logErrors: !environment.production,
-        };
-    }
-
-    /**
-     * Method called for every value captured through the ErrorHandler
-     */
-    public handleError(error: unknown): void {
-        const extractedError = extractError(error) || 'Handled unknown error';
-
-        this.captureChunkLoadError(extractedError);
-
-        // Capture handled exception and send it to Sentry.
-        sentry.captureException(extractedError);
-
-        if (this.options.logErrors) {
-            // eslint-disable-next-line no-console
-            console.error(extractedError);
-        }
-    }
-
-    private captureChunkLoadError(error: { message?: string }): void {
-        const chunkFailedMessage = /Loading chunk [\d]+ failed/;
-        const chunkLoadError = /ChunkLoadError [\d]+ failed/;
-        const errorMessage = error?.message;
-        if (!errorMessage) {
-            return;
-        }
-        if (chunkFailedMessage.test(errorMessage) || chunkLoadError.test(errorMessage)) {
-            // TODO Temporary log for checking error capture efficiency
-            sentry.captureMessage('Chunk load error captured');
-            window.location.reload();
-        }
-    }
-}

src/app/sentry-http-interceptor.ts

@@ -1,21 +0,0 @@
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import * as sentry from '@sentry/angular-ivy';
-import isNil from 'lodash-es/isNil';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class SentryHttpInterceptor implements HttpInterceptor {
-    intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-        return next.handle(req).pipe(
-            catchError((resp) => {
-                const xRequestId = req.headers.get('x-request-id');
-                if (!isNil(xRequestId)) {
-                    sentry.setTag('x-request-id', xRequestId);
-                }
-                return throwError(resp);
-            }),
-        );
-    }
-}

src/components/buttons/button/_button-theme.scss

@@ -34,33 +34,36 @@
             &.dsh-primary {
                 @include button(
                     map-get($background, card),
-                    mat.get-color-from-palette($primary, default)
+                    mat.m2-get-color-from-palette($primary, default)
                 );
-                @include focused-background(mat.get-color-from-palette($primary, default, 0.88));
+                @include focused-background(mat.m2-get-color-from-palette($primary, default, 0.88));
 
                 &:hover:not(:disabled) {
-                    background: mat.get-color-from-palette($primary, default, 0.88) !important;
+                    background: mat.m2-get-color-from-palette($primary, default, 0.88) !important;
                 }
             }
 
             &.dsh-accent {
                 @include button(
                     map-get($background, card),
-                    mat.get-color-from-palette($accent, default)
+                    mat.m2-get-color-from-palette($accent, default)
                 );
-                @include focused-background(mat.get-color-from-palette($primary, default, 0.88));
+                @include focused-background(mat.m2-get-color-from-palette($primary, default, 0.88));
 
                 &:hover:not(:disabled) {
-                    background: mat.get-color-from-palette($primary, default, 0.88) !important;
+                    background: mat.m2-get-color-from-palette($primary, default, 0.88) !important;
                 }
             }
 
             &.dsh-warn {
-                @include button(map-get($background, card), mat.get-color-from-palette($warn, 400));
+                @include button(
-                @include focused-background(mat.get-color-from-palette($warn, default, 0.88));
+                    map-get($background, card),
+                    mat.m2-get-color-from-palette($warn, 400)
+                );
+                @include focused-background(mat.m2-get-color-from-palette($warn, default, 0.88));
 
                 &:hover:not(:disabled) {
-                    background: mat.get-color-from-palette($warn, default, 0.88) !important;
+                    background: mat.m2-get-color-from-palette($warn, default, 0.88) !important;
                 }
             }
 
@@ -71,29 +74,29 @@
 
         &-text-button {
             &.dsh-primary {
-                @include button(mat.get-color-from-palette($primary, default), transparent);
+                @include button(mat.m2-get-color-from-palette($primary, default), transparent);
-                @include focused-background(mat.get-color-from-palette($primary, default, 0.12));
+                @include focused-background(mat.m2-get-color-from-palette($primary, default, 0.12));
 
                 &:hover:not(:disabled) {
-                    background: mat.get-color-from-palette($primary, default, 0.2) !important;
+                    background: mat.m2-get-color-from-palette($primary, default, 0.2) !important;
                 }
             }
 
             &.dsh-accent {
-                @include button(mat.get-color-from-palette($primary, default), transparent);
+                @include button(mat.m2-get-color-from-palette($primary, default), transparent);
-                @include focused-background(mat.get-color-from-palette($primary, default, 0.12));
+                @include focused-background(mat.m2-get-color-from-palette($primary, default, 0.12));
 
                 &:hover:not(:disabled) {
-                    background: mat.get-color-from-palette($primary, default, 0.2) !important;
+                    background: mat.m2-get-color-from-palette($primary, default, 0.2) !important;
                 }
             }
 
             &.dsh-warn {
-                @include button(mat.get-color-from-palette($warn, 400), transparent);
+                @include button(mat.m2-get-color-from-palette($warn, 400), transparent);
-                @include focused-background(mat.get-color-from-palette($warn, default, 0.88));
+                @include focused-background(mat.m2-get-color-from-palette($warn, default, 0.88));
 
                 &:hover:not(:disabled) {
-                    background: mat.get-color-from-palette($warn, default, 0.2) !important;
+                    background: mat.m2-get-color-from-palette($warn, default, 0.2) !important;
                 }
             }
 
@@ -108,22 +111,25 @@
             &.dsh-primary {
                 @include button(
                     map-get($background, card),
-                    mat.get-color-from-palette($primary, default)
+                    mat.m2-get-color-from-palette($primary, default)
                 );
-                @include focused-background(mat.get-color-from-palette($primary, 300));
+                @include focused-background(mat.m2-get-color-from-palette($primary, 300));
             }
 
             &.dsh-accent {
                 @include button(
                     map-get($background, card),
-                    mat.get-color-from-palette($accent, default)
+                    mat.m2-get-color-from-palette($accent, default)
                 );
-                @include focused-background(mat.get-color-from-palette($accent, 200));
+                @include focused-background(mat.m2-get-color-from-palette($accent, 200));
             }
 
             &.dsh-warn {
-                @include button(map-get($background, card), mat.get-color-from-palette($warn, 400));
+                @include button(
-                @include focused-background(mat.get-color-from-palette($warn, 300));
+                    map-get($background, card),
+                    mat.m2-get-color-from-palette($warn, 400)
+                );
+                @include focused-background(mat.m2-get-color-from-palette($warn, 300));
             }
 
             &:disabled {
@@ -139,9 +145,9 @@
         &-text-button,
         &-icon-button {
             font: {
-                family: mat.font-family($config, button);
+                family: mat.m2-font-family($config, button);
-                size: mat.font-size($config, button);
+                size: mat.m2-font-size($config, button);
-                weight: mat.font-weight($config, button);
+                weight: mat.m2-font-weight($config, button);
             }
         }
     }

src/components/charts/_charts-theme.scss

@@ -7,16 +7,16 @@
 
     .apexcharts {
         &-text {
-            fill: mat.get-color-from-palette($foreground, text);
+            fill: mat.m2-get-color-from-palette($foreground, text);
         }
 
         &-legend-text {
-            color: mat.get-color-from-palette($foreground, text) !important;
+            color: mat.m2-get-color-from-palette($foreground, text) !important;
         }
 
         &-tooltip {
             @include dsh-shadow($theme);
-            background-color: mat.get-color-from-palette($background, card);
+            background-color: mat.m2-get-color-from-palette($background, card);
         }
     }
 }
@@ -27,9 +27,9 @@
         line-height: 20px;
 
         font: {
-            family: mat.font-family($config, caption) !important;
+            family: mat.m2-font-family($config, caption) !important;
-            size: mat.font-size($config, caption) !important;
+            size: mat.m2-font-size($config, caption) !important;
-            weight: mat.font-weight($config, caption) !important;
+            weight: mat.m2-font-weight($config, caption) !important;
         }
     }
 }

src/components/date-range-filter/_date-range-filter-theme.scss

@@ -2,7 +2,7 @@
 
 @mixin dsh-date-range-filter-theme($theme) {
     .dsh-date-range-filter-preset-active {
-        color: mat.get-color-from-palette(map-get($theme, primary));
+        color: mat.m2-get-color-from-palette(map-get($theme, primary));
         font-weight: 500;
     }
 }

src/components/filter/components/filter-button/_filter-button-theme.scss

@@ -10,27 +10,27 @@
         color: map-get($foreground, text);
 
         &:hover:enabled {
-            border-color: mat.get-color-from-palette($primary, default);
+            border-color: mat.m2-get-color-from-palette($primary, default);
         }
 
         &-active:enabled {
-            border-color: mat.get-color-from-palette($primary, default);
+            border-color: mat.m2-get-color-from-palette($primary, default);
-            color: mat.get-color-from-palette($primary, default);
+            color: mat.m2-get-color-from-palette($primary, default);
-            background-color: mat.get-color-from-palette($primary, default, 0.14);
+            background-color: mat.m2-get-color-from-palette($primary, default, 0.14);
         }
 
         &:disabled {
-            color: mat.get-color-from-palette($foreground, disabled-text, 0.38);
+            color: mat.m2-get-color-from-palette($foreground, disabled-text, 0.38);
         }
     }
 }
 
 @mixin dsh-filter-button-typography($config) {
     .dsh-filter-button {
-        @include mat.typography-level($config, body-1);
+        @include mat.m2-typography-level($config, body-1);
 
         &-active {
-            @include mat.typography-level($config, body-2);
+            @include mat.m2-typography-level($config, body-2);
         }
     }
 }

src/components/form-controls/format-input/format-input.component.html

@@ -6,7 +6,7 @@
     [ngClass]="{
         'dsh-format-input-element': true,
         'mat-input-element': true,
-        'dsh-format-input-element-full-size': !size
+        'dsh-format-input-element-full-size': !size,
     }"
     [placeholder]="placeholder"
     (change)="writeValue($event.target.value)"

src/components/indicators/last-updated/_last-updated-theme.scss

@@ -4,7 +4,7 @@
     $foreground: map-get($theme, foreground);
 
     .dsh-last-updated {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
 }
 
@@ -14,6 +14,6 @@
     }
 
     .dsh-last-updated {
-        @include mat.typography-level($config, caption);
+        @include mat.m2-typography-level($config, caption);
     }
 }

src/components/indicators/status/_status-theme.scss

@@ -44,6 +44,6 @@
 
 @mixin dsh-status-typography($config) {
     .dsh-status-label {
-        @include mat.typography-level($config, body-1);
+        @include mat.m2-typography-level($config, body-1);
     }
 }

src/components/layout/accordion/accordion-item-content-header/_accordion-item-content-header-theme.scss

@@ -4,12 +4,12 @@
     $foreground: map-get($theme, foreground);
 
     .dsh-accordion-item-content-header-label {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
 }
 
 @mixin dsh-accordion-item-content-header-typography($config) {
     .dsh-accordion-item-content-header-label {
-        @include mat.typography-level($config, caption);
+        @include mat.m2-typography-level($config, caption);
     }
 }

src/components/layout/alert/_alert-theme.scss

@@ -4,6 +4,6 @@
     $primary: map-get($theme, primary);
 
     .dsh-alert {
-        background-color: mat.get-color-from-palette($primary, default, 0.12);
+        background-color: mat.m2-get-color-from-palette($primary, default, 0.12);
     }
 }

src/components/layout/card/_card-theme.scss

@@ -6,20 +6,20 @@
 
     .dsh-card {
         @include dsh-shadow($theme);
-        background-color: mat.get-color-from-palette($background, card);
+        background-color: mat.m2-get-color-from-palette($background, card);
     }
 }
 
 @mixin dsh-card-typography($config) {
     .dsh-card {
-        font-family: mat.font-family($config);
+        font-family: mat.m2-font-family($config);
     }
 
     .dsh-card-header .dsh-card-title {
-        font-size: mat.font-size($config, title);
+        font-size: mat.m2-font-size($config, title);
     }
 
     .dsh-card-content {
-        font-size: mat.font-size($config, body-1);
+        font-size: mat.m2-font-size($config, body-1);
     }
 }

src/components/layout/collapse/collapse.component.spec.ts

@@ -1,4 +1,5 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { Component } from '@angular/core';
 import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { MatIconRegistry } from '@angular/material/icon';
@@ -34,8 +35,9 @@ describe('CollapseComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [CollapseModule, NoopAnimationsModule, HttpClientTestingModule],
             declarations: [MockCollapseComponent, MockCollapseUpComponent],
+            imports: [CollapseModule, NoopAnimationsModule],
+            providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
         }).compileComponents();
     });
 

src/components/layout/details-item/_details-item-theme.scss

@@ -5,7 +5,7 @@
 
     .dsh-details-item {
         &-title {
-            color: mat.get-color-from-palette($foreground, secondary-text);
+            color: mat.m2-get-color-from-palette($foreground, secondary-text);
         }
     }
 }
@@ -13,11 +13,11 @@
 @mixin dsh-details-item-typography($config) {
     .dsh-details-item {
         &-title {
-            @include mat.typography-level($config, caption);
+            @include mat.m2-typography-level($config, caption);
         }
 
         &-content {
-            @include mat.typography-level($config, body-1);
+            @include mat.m2-typography-level($config, body-1);
         }
     }
 }

src/components/layout/dropdown/_dropdown-theme.scss

@@ -10,13 +10,13 @@
 
         &,
         &-triangle {
-            background-color: mat.get-color-from-palette($background, card);
+            background-color: mat.m2-get-color-from-palette($background, card);
         }
     }
 }
 
 @mixin dsh-dropdown-typography($config) {
     .dsh-dropdown {
-        @include mat.typography-level($config, body-1);
+        @include mat.m2-typography-level($config, body-1);
     }
 }

src/components/layout/limited-list/_limited-list-theme.scss

@@ -6,11 +6,11 @@
 
     .dsh-limited-list {
         &-title {
-            color: mat.get-color-from-palette($foreground, secondary-text);
+            color: mat.m2-get-color-from-palette($foreground, secondary-text);
         }
 
         &-show-more {
-            color: mat.get-color-from-palette($primary, default);
+            color: mat.m2-get-color-from-palette($primary, default);
         }
     }
 }

src/components/layout/link-label/_link-label-theme.scss

@@ -3,6 +3,6 @@
 @mixin dsh-link-label-typography($config) {
     .dsh-link-label-content {
         text-decoration: underline;
-        @include mat.typography-level($config, body-1);
+        @include mat.m2-typography-level($config, body-1);
     }
 }

src/components/layout/panel/_panel-theme.scss

@@ -16,10 +16,10 @@
     .dsh-panel {
         @include panel(map-get($background, card));
         &-primary {
-            @include panel(mat.get-color-from-palette($primary, 50));
+            @include panel(mat.m2-get-color-from-palette($primary, 50));
         }
         &-accent {
-            @include panel(mat.get-color-from-palette($accent, 50));
+            @include panel(mat.m2-get-color-from-palette($accent, 50));
         }
     }
 }
@@ -27,9 +27,9 @@
 @mixin dsh-panel-typography($config) {
     .dsh-panel-header-content {
         font: {
-            family: mat.font-family($config, body-1);
+            family: mat.m2-font-family($config, body-1);
-            size: mat.font-size($config, body-1);
+            size: mat.m2-font-size($config, body-1);
-            weight: mat.font-weight($config, body-1);
+            weight: mat.m2-font-weight($config, body-1);
         }
     }
 }

src/components/layout/panel/panel.component.html

@@ -2,7 +2,7 @@
     [ngClass]="{
         'dsh-panel': true,
         'dsh-panel-primary': color === 'primary',
-        'dsh-panel-accent': color === 'accent'
+        'dsh-panel-accent': color === 'accent',
     }"
 >
     <ng-content></ng-content>

src/components/layout/row/_row-theme.scss

@@ -6,13 +6,13 @@
     $primary: map-get($theme, primary);
 
     .dsh-row {
-        background-color: mat.get-color-from-palette($background, card);
+        background-color: mat.m2-get-color-from-palette($background, card);
         &.dsh-primary {
-            background-color: mat.get-color-from-palette($primary, 50);
+            background-color: mat.m2-get-color-from-palette($primary, 50);
         }
 
         &-header-label {
-            color: mat.get-color-from-palette($foreground, secondary-text);
+            color: mat.m2-get-color-from-palette($foreground, secondary-text);
         }
     }
 }
@@ -20,10 +20,10 @@
 @mixin dsh-row-typography($config) {
     .dsh-row {
         &-header-label {
-            @include mat.typography-level($config, body-2);
+            @include mat.m2-typography-level($config, body-2);
         }
         &-label {
-            @include mat.typography-level($config, body-1);
+            @include mat.m2-typography-level($config, body-1);
         }
     }
 }

src/components/link/_link-theme.scss

@@ -8,6 +8,6 @@
 
 @mixin dsh-link-typography($config) {
     .dsh-link {
-        @include mat.typography-level($config, body-1);
+        @include mat.m2-typography-level($config, body-1);
     }
 }

src/components/navigation/breadcrumb/_breadcrumb-theme.scss

@@ -10,6 +10,6 @@
 
 @mixin dsh-breadcrumb-typography($config) {
     .dsh-breadcrumb {
-        @include mat.typography-level($config, subheading-2);
+        @include mat.m2-typography-level($config, subheading-2);
     }
 }

src/components/navigation/navbar-item/_navbar-item-theme.scss

@@ -4,12 +4,12 @@
     $primary: map-get($theme, primary);
 
     .dsh-navbar-item-active {
-        background: mat.get-color-from-palette($primary, default, 0.12);
+        background: mat.m2-get-color-from-palette($primary, default, 0.12);
     }
 }
 
 @mixin dsh-navbar-item-typography($config) {
     .dsh-navbar-item-content {
-        @include mat.typography-level($config, subheading-2);
+        @include mat.m2-typography-level($config, subheading-2);
     }
 }

src/components/navigation/state-nav/_state-nav-theme.scss

@@ -19,16 +19,16 @@
             // The class order directly affects the order of applying styles (for example, both .warn and .selected)
             &.success {
                 mat-icon {
-                    @include fill(mat.get-color-from-palette($accent, default));
+                    @include fill(mat.m2-get-color-from-palette($accent, default));
                 }
             }
             &.warn {
                 mat-icon {
-                    @include fill(mat.get-color-from-palette($warn, 300));
+                    @include fill(mat.m2-get-color-from-palette($warn, 300));
                 }
             }
             &.selected {
-                color: mat.get-color-from-palette($primary, default);
+                color: mat.m2-get-color-from-palette($primary, default);
             }
         }
 
@@ -40,15 +40,15 @@
 
                 // The class order directly affects the order of applying styles (for example, both .warn and .selected)
                 &.success {
-                    background: mat.get-color-from-palette($accent, default);
+                    background: mat.m2-get-color-from-palette($accent, default);
                     color: map-get($accent-text, 300);
                 }
                 &.warn {
-                    background: mat.get-color-from-palette($warn, 300);
+                    background: mat.m2-get-color-from-palette($warn, 300);
                     color: map-get($warn-text, 300);
                 }
                 &.selected {
-                    background: mat.get-color-from-palette($primary, default);
+                    background: mat.m2-get-color-from-palette($primary, default);
                     color: map-get($primary-text, 400);
                 }
             }
@@ -59,7 +59,7 @@
 @mixin dsh-state-nav-typography($config) {
     .dsh-state-nav {
         &-item {
-            @include mat.typography-level($config, subheading-2);
+            @include mat.m2-typography-level($config, subheading-2);
         }
     }
 }

src/styles/dsh/styles/_dsh-base-typography.scss

@@ -2,19 +2,19 @@
 
 @function dsh-typography-config(
     $font-family: 'Roboto, "Helvetica Neue", sans-serif',
-    $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+    $display-4: mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
-    $display-3: mat.define-typography-level(56px, 64px, 400, $letter-spacing: -0.02em),
+    $display-3: mat.m2-define-typography-level(56px, 64px, 400, $letter-spacing: -0.02em),
-    $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+    $display-2: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-    $display-1: mat.define-typography-level(34px, 48px, 400),
+    $display-1: mat.m2-define-typography-level(34px, 48px, 400),
-    $headline: mat.define-typography-level(24px, 32px, 400),
+    $headline: mat.m2-define-typography-level(24px, 32px, 400),
-    $title: mat.define-typography-level(20px, 32px, 500),
+    $title: mat.m2-define-typography-level(20px, 32px, 500),
-    $subheading-2: mat.define-typography-level(16px, 32px, 400),
+    $subheading-2: mat.m2-define-typography-level(16px, 32px, 400),
-    $subheading-1: mat.define-typography-level(15px, 24px, 400),
+    $subheading-1: mat.m2-define-typography-level(15px, 24px, 400),
-    $body-2: mat.define-typography-level(14px, 24px, 500),
+    $body-2: mat.m2-define-typography-level(14px, 24px, 500),
-    $body-1: mat.define-typography-level(14px, 24px, 400),
+    $body-1: mat.m2-define-typography-level(14px, 24px, 400),
-    $caption: mat.define-typography-level(12px, 16px, 400),
+    $caption: mat.m2-define-typography-level(12px, 16px, 400),
-    $button: mat.define-typography-level(14px, 16px, 500),
+    $button: mat.m2-define-typography-level(14px, 16px, 500),
-    $input: mat.define-typography-level(14px, 1.15, 400)
+    $input: mat.m2-define-typography-level(14px, 1.15, 400)
 ) {
     // Declare an initial map with all of the levels.
     $config: (
@@ -54,7 +54,7 @@
 
     // Add the base font family to the config.
     @return map-merge(
-        map-merge(mat.define-typography-config(), $config),
+        map-merge(mat.m2-define-typography-config(), $config),
         (
             font-family: $font-family,
         )
@@ -72,65 +72,65 @@
 @mixin dsh-base-typography($config, $selector: '.dsh-typography') {
     .dsh-headline,
     #{$selector} h1 {
-        @include mat.typography-level($config, headline);
+        @include mat.m2-typography-level($config, headline);
         margin: 0;
     }
 
     .dsh-title,
     #{$selector} h2 {
-        @include mat.typography-level($config, title);
+        @include mat.m2-typography-level($config, title);
         margin: 0;
     }
 
     .dsh-subheading-2,
     #{$selector} h3 {
-        @include mat.typography-level($config, subheading-2);
+        @include mat.m2-typography-level($config, subheading-2);
         margin: 0;
     }
 
     .dsh-subheading-1,
     #{$selector} h4 {
-        @include mat.typography-level($config, subheading-1);
+        @include mat.m2-typography-level($config, subheading-1);
         margin: 0;
     }
 
     .dsh-body-2 {
-        @include mat.typography-level($config, body-2);
+        @include mat.m2-typography-level($config, body-2);
     }
 
     .dsh-body-1,
     #{$selector} {
-        @include mat.typography-level($config, body-1);
+        @include mat.m2-typography-level($config, body-1);
         p {
             margin: 0;
         }
     }
 
     .dsh-caption {
-        @include mat.typography-level($config, caption);
+        @include mat.m2-typography-level($config, caption);
     }
 
     .dsh-display-4,
     #{$selector} .dsh-display-4 {
-        @include mat.typography-level($config, display-4);
+        @include mat.m2-typography-level($config, display-4);
         margin: 0;
     }
 
     .dsh-display-3,
     #{$selector} .dsh-display-3 {
-        @include mat.typography-level($config, display-3);
+        @include mat.m2-typography-level($config, display-3);
         margin: 0;
     }
 
     .dsh-display-2,
     #{$selector} .dsh-display-2 {
-        @include mat.typography-level($config, display-2);
+        @include mat.m2-typography-level($config, display-2);
         margin: 0;
     }
 
     .dsh-display-1,
     #{$selector} .dsh-display-1 {
-        @include mat.typography-level($config, display-1);
+        @include mat.m2-typography-level($config, display-1);
         margin: 0;
     }
 }

src/styles/mat/styles/_mat-radio-button.scss

@@ -19,9 +19,9 @@
 @mixin mat-radio-button-override-typography($config) {
     .mat-mdc-radio-button {
         font: {
-            family: mat.font-family($config, body-1);
+            family: mat.m2-font-family($config, body-1);
-            size: mat.font-size($config, body-1);
+            size: mat.m2-font-size($config, body-1);
-            weight: mat.font-weight($config, body-1);
+            weight: mat.m2-font-weight($config, body-1);
         }
     }
 }

src/styles/mat/styles/_mat-tabs.scss

@@ -50,14 +50,14 @@
 @mixin mat-tabs-override-typography($config) {
     .mat-mdc-tab-links {
         .mat-mdc-tab-link {
-            @include mat.typography-level($config, subheading-1);
+            @include mat.m2-typography-level($config, subheading-1);
         }
     }
 
     .dsh-top-tab-nav-bar {
         .mat-mdc-tab-links {
             .mat-mdc-tab-link {
-                @include mat.typography-level($config, subheading-2);
+                @include mat.m2-typography-level($config, subheading-2);
             }
         }
     }

src/styles/themes/eastern.scss

@@ -6,32 +6,32 @@ $background: (
     // Overrides
     background: #f0f7f7,
     // Custom
-    hover: map-get(mat.$grey-palette, 200),
+    hover: map-get(mat.$m2-grey-palette, 200),
-    selected-button: map-get(mat.$grey-palette, 100)
+    selected-button: map-get(mat.$m2-grey-palette, 100)
 );
 
 $foreground: (
     // Overrides
     // Custom
     contrast-text: $light-text,
-    light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
+    light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
-    border: map-get(mat.$grey-palette, 200)
+    border: map-get(mat.$m2-grey-palette, 200)
 );
 
 $config: (
     // Overrides
     color:
         (
-            primary: mat.define-palette($dsh-eastern, 700),
+            primary: mat.m2-define-palette($dsh-eastern, 700),
-            accent: mat.define-palette($dsh-eastern, 700),
+            accent: mat.m2-define-palette($dsh-eastern, 700),
-            warn: mat.define-palette($dsh-warn, 300),
+            warn: mat.m2-define-palette($dsh-warn, 300),
         ),
     is-dark: false,
     // Custom
     name: 'eastern',
-    success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
+    success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
-    pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
+    pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
-    warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
+    warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
 );
 
 @include theme($config, $background, $foreground);

src/styles/themes/main.scss

@@ -6,29 +6,29 @@ $background: (
     // Overrides
     background: #f1f7fb,
     // Custom
-    hover: map-get(mat.$grey-palette, 200),
+    hover: map-get(mat.$m2-grey-palette, 200),
-    selected-button: map-get(mat.$grey-palette, 100)
+    selected-button: map-get(mat.$m2-grey-palette, 100)
 );
 
 $foreground: (
     // Overrides
     // Custom
     contrast-text: $light-text,
-    light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
+    light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
-    border: map-get(mat.$grey-palette, 200)
+    border: map-get(mat.$m2-grey-palette, 200)
 );
 
 $config: (
     // Overrides
-    primary: mat.define-palette($dsh-slateblue, 400),
+    primary: mat.m2-define-palette($dsh-slateblue, 400),
-    accent: mat.define-palette($dsh-palegreen, 300),
+    accent: mat.m2-define-palette($dsh-palegreen, 300),
-    warn: mat.define-palette($dsh-warn, 300),
+    warn: mat.m2-define-palette($dsh-warn, 300),
     is-dark: false,
     // Custom
     name: 'main',
-    success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
+    success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
-    pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
+    pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
-    warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
+    warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
 );
 
 @include theme($config, $background, $foreground);

src/styles/themes/persian-green.scss

@@ -6,32 +6,32 @@ $background: (
     // Overrides
     background: #ecf4f4,
     // Custom
-    hover: map-get(mat.$grey-palette, 200),
+    hover: map-get(mat.$m2-grey-palette, 200),
-    selected-button: map-get(mat.$grey-palette, 100)
+    selected-button: map-get(mat.$m2-grey-palette, 100)
 );
 
 $foreground: (
     // Overrides
     // Custom
     contrast-text: $light-text,
-    light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
+    light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
-    border: map-get(mat.$grey-palette, 200)
+    border: map-get(mat.$m2-grey-palette, 200)
 );
 
 $config: (
     // Overrides
     color:
         (
-            primary: mat.define-palette($dsh-smalt, 900),
+            primary: mat.m2-define-palette($dsh-smalt, 900),
-            accent: mat.define-palette($dsh-persian-green, 400),
+            accent: mat.m2-define-palette($dsh-persian-green, 400),
-            warn: mat.define-palette($dsh-warn, 300),
+            warn: mat.m2-define-palette($dsh-warn, 300),
         ),
     is-dark: false,
     // Custom
     name: 'persian-green',
-    success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
+    success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
-    pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
+    pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
-    warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
+    warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
 );
 
 @include theme($config, $background, $foreground);

src/styles/themes/solitude.scss

@@ -6,32 +6,32 @@ $background: (
     // Overrides
     background: #f5f5f7,
     // Custom (deprecated)
-    hover: map-get(mat.$grey-palette, 200),
+    hover: map-get(mat.$m2-grey-palette, 200),
-    selected-button: map-get(mat.$grey-palette, 100)
+    selected-button: map-get(mat.$m2-grey-palette, 100)
 );
 
 $foreground: (
     // Overrides
     // Custom
     contrast-text: $light-text,
-    light-text: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette), 500),
+    light-text: mat.m2-get-color-from-palette(mat.m2-define-palette(mat.$m2-grey-palette), 500),
-    border: map-get(mat.$grey-palette, 200)
+    border: map-get(mat.$m2-grey-palette, 200)
 );
 
 $config: (
     // Overrides
     color:
         (
-            primary: mat.define-palette($dsh-black, 900),
+            primary: mat.m2-define-palette($dsh-black, 900),
-            accent: mat.define-palette($dsh-black, 900),
+            accent: mat.m2-define-palette($dsh-black, 900),
-            warn: mat.define-palette($dsh-warn, 300),
+            warn: mat.m2-define-palette($dsh-warn, 300),
         ),
     is-dark: false,
     // Custom
     name: 'solitude',
-    success-base: mat.get-color-from-palette(mat.define-palette($dsh-success), 400),
+    success-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-success), 400),
-    pending-base: mat.get-color-from-palette(mat.define-palette($dsh-pending), 800),
+    pending-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-pending), 800),
-    warn-base: mat.get-color-from-palette(mat.define-palette($dsh-warn), 300)
+    warn-base: mat.m2-get-color-from-palette(mat.m2-define-palette($dsh-warn), 300)
 );
 
 @include theme($config, $background, $foreground);

src/styles/utils/_shadow.scss

@@ -8,7 +8,7 @@
 
 @mixin dsh-shadow($theme) {
     $primary: map-get($theme, primary);
-    $shadow-color: mat.get-color-from-palette($primary, default);
+    $shadow-color: mat.m2-get-color-from-palette($primary, default);
 
     box-shadow: #{get-shadow($shadow-color, 0.12)} !important;
 }