OPS-241: Replace legacy material (#127)

.browserslistrc

@@ -1,15 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.npmrc

@@ -1 +0,0 @@
-save-exact=true

angular.json

@@ -34,12 +34,13 @@
                             "moment",
                             "flat",
                             "base64-js",
-                            "js-sha256"
+                            "js-sha256",
+                            "utility-types"
                         ],
                         "outputPath": "dist",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": ["zone.js"],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "assets": [
@@ -136,7 +137,7 @@
                     "builder": "@angular-builders/custom-webpack:karma",
                     "options": {
                         "main": "src/test.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": ["zone.js"],
                         "tsConfig": "tsconfig.spec.json",
                         "karmaConfig": "karma.conf.js",
                         "inlineStyleLanguage": "scss",

package-lock.json

@@ -31,7 +31,7 @@
         "@sentry/angular": "7.54.0",
         "@sentry/integrations": "7.54.0",
         "@sentry/tracing": "7.54.0",
-        "@vality/ng-core": "0.7.1-2a1b72f.0",
+        "@vality/ng-core": "15.0.0",
         "@vality/swag-anapi-v2": "2.0.1-38f360b.0",
         "@vality/swag-api-keys": "1.0.1-55db9ab.0",
         "@vality/swag-claim-management": "0.1.1-29260c7.0",
@@ -55,7 +55,7 @@
         "lodash-es": "4.17.21",
         "moment": "2.29.4",
         "ng-apexcharts": "1.7.1",
-        "ngx-mat-select-search": "6.0.0",
+        "ngx-mat-select-search": "7.0.2",
         "rxjs": "7.5.6",
         "short-uuid": "4.2.0",
         "tslib": "2.4.0",
@@ -82,7 +82,6 @@
         "@types/jwt-decode": "^3.1.0",
         "@types/lodash-es": "4.17.6",
         "@types/moment": "2.13.0",
-        "@types/node": "18.6.1",
         "@types/prettier": "2.4.3",
         "@typescript-eslint/eslint-plugin": "5.57.0",
         "@typescript-eslint/parser": "5.57.0",
@@ -106,7 +105,7 @@
         "karma-jasmine": "~4.0.0",
         "karma-jasmine-html-reporter": "^1.5.0",
         "karma-spec-reporter": "0.0.32",
-        "prettier": "2.5.1",
+        "prettier": "~2.8.8",
         "ts-mockito": "^2.6.1",
         "ts-node": "10.9.1",
         "typescript": "4.9.5"
@@ -6008,9 +6007,9 @@
       }
     },
     "node_modules/@vality/ng-core": {
-      "version": "0.7.1-2a1b72f.0",
+      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-0.7.1-2a1b72f.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-15.0.0.tgz",
-      "integrity": "sha512-LhMLijiVuJ0cjZ7UPpCAc5s2svjFJI6+wGq0/zfLs5vBfM43D8BNiGfnD2dARtG6CEaHCuh7wvsTyzNMv+p9/w==",
+      "integrity": "sha512-7ux9yH80Bu7QnONFzmY8BSlxCZojvervVuecZdLAhvCo0/W6/NysOjzt3skSsi4S9I0vEtfaJ2kYpFqfqLjuJA==",
       "dependencies": {
         "@ng-matero/extensions": "^15.0.0",
         "@s-libs/js-core": "^15.2.0",
@@ -13332,14 +13331,14 @@
       }
     },
     "node_modules/ngx-mat-select-search": {
-      "version": "6.0.0",
+      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-7.0.2.tgz",
-      "integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
+      "integrity": "sha512-69vy/mWh7pnnR6rw1BWxO8E4HyylUvvBlmhrtWqXIYqfIx3mfvWuNj0tE1v+ERPg8a4vViFpfilRUUvvbrv1cA==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
-        "@angular/material": "^15.0.0"
+        "@angular/material": "^15.0.0 || ^16.0.0"
       }
     },
     "node_modules/nice-napi": {
@@ -14476,14 +14475,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.5.1",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "prettier": "bin-prettier.js"
       },
       "engines": {
         "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/pretty-bytes": {
@@ -22381,9 +22384,9 @@
       }
     },
     "@vality/ng-core": {
-      "version": "0.7.1-2a1b72f.0",
+      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-0.7.1-2a1b72f.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-15.0.0.tgz",
-      "integrity": "sha512-LhMLijiVuJ0cjZ7UPpCAc5s2svjFJI6+wGq0/zfLs5vBfM43D8BNiGfnD2dARtG6CEaHCuh7wvsTyzNMv+p9/w==",
+      "integrity": "sha512-7ux9yH80Bu7QnONFzmY8BSlxCZojvervVuecZdLAhvCo0/W6/NysOjzt3skSsi4S9I0vEtfaJ2kYpFqfqLjuJA==",
       "requires": {
         "@ng-matero/extensions": "^15.0.0",
         "@s-libs/js-core": "^15.2.0",
@@ -27576,9 +27579,9 @@
       }
     },
     "ngx-mat-select-search": {
-      "version": "6.0.0",
+      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-7.0.2.tgz",
-      "integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
+      "integrity": "sha512-69vy/mWh7pnnR6rw1BWxO8E4HyylUvvBlmhrtWqXIYqfIx3mfvWuNj0tE1v+ERPg8a4vViFpfilRUUvvbrv1cA==",
       "requires": {
         "tslib": "^2.4.0"
       }
@@ -28368,7 +28371,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.5.1",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true
     },
     "pretty-bytes": {

package.json

@@ -48,7 +48,7 @@
     "@sentry/angular": "7.54.0",
     "@sentry/integrations": "7.54.0",
     "@sentry/tracing": "7.54.0",
-    "@vality/ng-core": "0.7.1-2a1b72f.0",
+    "@vality/ng-core": "15.0.0",
     "@vality/swag-anapi-v2": "2.0.1-38f360b.0",
     "@vality/swag-api-keys": "1.0.1-55db9ab.0",
     "@vality/swag-claim-management": "0.1.1-29260c7.0",
@@ -72,7 +72,7 @@
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "ng-apexcharts": "1.7.1",
-    "ngx-mat-select-search": "6.0.0",
+    "ngx-mat-select-search": "7.0.2",
     "rxjs": "7.5.6",
     "short-uuid": "4.2.0",
     "tslib": "2.4.0",
@@ -99,7 +99,6 @@
     "@types/jwt-decode": "^3.1.0",
     "@types/lodash-es": "4.17.6",
     "@types/moment": "2.13.0",
-    "@types/node": "18.6.1",
     "@types/prettier": "2.4.3",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
@@ -123,7 +122,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-spec-reporter": "0.0.32",
-    "prettier": "2.5.1",
+    "prettier": "~2.8.8",
     "ts-mockito": "^2.6.1",
     "ts-node": "10.9.1",
     "typescript": "4.9.5"

src/app/app.module.ts

@@ -3,8 +3,8 @@ import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
-import { MAT_LEGACY_FORM_FIELD_DEFAULT_OPTIONS as MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/legacy-form-field';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import {
     MAT_MOMENT_DATE_ADAPTER_OPTIONS,
     MAT_MOMENT_DATE_FORMATS,

src/app/dadata/dadata.component.html

@@ -6,11 +6,11 @@
             <mat-option *ngFor="let option of options$ | async" [value]="option.label" class="option">
                 <div
                     class="dsh-dadata-autocomplete-option-header"
-                    [innerHTML]="option.label | highlight: control.value"
+                    [innerHTML]="option.label | highlight : control.value"
                 ></div>
                 <div
                     class="dsh-dadata-autocomplete-option-description"
-                    [innerHTML]="option.description | highlight: control.value"
+                    [innerHTML]="option.description | highlight : control.value"
                 ></div>
             </mat-option>
         </ng-container>

src/app/dadata/dadata.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
 import {

src/app/dadata/dadata.module.ts

@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 
 import { FormControlsModule } from '@dsh/components/form-controls';
 import { BootstrapIconModule } from '@dsh/components/indicators';

src/app/dadata/type.ts

@@ -1,2 +1,2 @@
 export const TYPE = ['address', 'party', 'bank', 'fio', 'fmsUnit', 'okved'] as const;
-export type Type = typeof TYPE[number];
+export type Type = (typeof TYPE)[number];

src/app/home/actionbar/actionbar.module.ts

@@ -4,8 +4,8 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatRadioModule } from '@angular/material/radio';
 import { RouterModule } from '@angular/router';
 import { TranslocoModule } from '@ngneat/transloco';
 

src/app/home/actionbar/components/select-active-organization-dialog/select-active-organization-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { Organization } from '@vality/swag-organizations';

src/app/home/actionbar/components/user/user.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Output, Inject } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { TranslocoService } from '@ngneat/transloco';
 import { Organization } from '@vality/swag-organizations';

src/app/home/mobile-grid/mobile-grid.component.scss

@@ -9,6 +9,7 @@
 .dsh-mobile-grid {
     height: 100%;
     width: 100%;
+    background-color: transparent !important;
 
     &-drawer {
         width: 75vw;
@@ -28,7 +29,7 @@
 
     &-toggle-button {
         cursor: pointer;
-        &.mat-icon {
+        &.mat-mdc-icon {
             width: 32px;
             height: 32px;
         }

src/app/home/toolbar/toolbar.component.html

@@ -1,7 +1,7 @@
 <div class="dsh-toolbar" fxLayout fxLayoutGap="24px" fxLayoutAlign="center center">
     <dsh-brand fxFlex fxLayoutAlign="start"></dsh-brand>
     <div fxFlex fxLayoutAlign="center">
-        <nav class="dsh-top-tab-nav-bar" mat-tab-nav-bar>
+        <nav class="dsh-top-tab-nav-bar" mat-tab-nav-bar [tabPanel]="tabPanel">
             <a
                 *ngFor="let link of sectionLinks$ | async"
                 mat-tab-link
@@ -14,6 +14,7 @@
                 {{ link.label }}
             </a>
         </nav>
+        <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
     </div>
     <dsh-actionbar fxFlex fxLayoutAlign="end"></dsh-actionbar>
 </div>

src/app/home/toolbar/toolbar.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 
 import { SectionsLinksModule } from '@dsh/app/shared/services/sections-links';

src/app/sections/claim-section/claims/claims-list/claims-list.component.html

@@ -9,9 +9,7 @@
         <dsh-claim-row [claim]="claim"></dsh-claim-row>
     </ng-container>
     <dsh-show-more-panel *ngIf="hasMore" (showMore)="showMoreElements()" [isLoading]="isLoading"></dsh-show-more-panel>
-    <div *ngIf="isEmptyList" class="mat-headline">
+    <dsh-empty-search-result *ngIf="isEmptyList"></dsh-empty-search-result>
-        <dsh-empty-search-result></dsh-empty-search-result>
-    </div>
     <ng-container *ngIf="isLoading">
         <div fxLayout fxFlexAlign="center">
             <dsh-spinner></dsh-spinner>

src/app/sections/claim-section/claims/claims-list/components/claim-row/claim-row.component.html

@@ -15,7 +15,7 @@
         >
     </dsh-row-label>
     <dsh-row-label fxFlex.gt-sm="30" fxFlex fxLayoutAlign="end center">
-        <span fxHide.lt-md>{{ item.updatedAt | date: 'dd MMMM yyyy, HH:mm' }}</span>
+        <span fxHide.lt-md>{{ item.updatedAt | date : 'dd MMMM yyyy, HH:mm' }}</span>
-        <span fxHide.gt-sm>{{ item.updatedAt | date: 'dd.MM.yyyy, HH:mm' }}</span>
+        <span fxHide.gt-sm>{{ item.updatedAt | date : 'dd.MM.yyyy, HH:mm' }}</span>
     </dsh-row-label>
 </ng-template>

src/app/sections/claim-section/claims/claims-search-filters/components/claim-statuses-filter/claim-statuses-filter.component.html

@@ -2,7 +2,7 @@
     *transloco="let t; scope: 'claim-section'; read: 'claimSection.claimStatusesFilter'"
     [active]="isActive"
     [label]="t('label')"
-    [activeLabel]="t('label') | listLabel: (labels$ | async)"
+    [activeLabel]="t('label') | listLabel : (labels$ | async)"
     [content]="content"
     (save)="save()"
     (clear)="clear()"

src/app/sections/claim-section/claims/claims.module.ts

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatSelectModule } from '@angular/material/select';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { ClaimsService } from '@dsh/app/api/claim-management';

src/app/sections/claim-section/claims/fetch-claims.service.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoTestingModule } from '@ngneat/transloco';
 
 import { FetchClaimsService } from './services/fetch-claims/fetch-claims.service';

src/app/sections/claim-section/claims/services/fetch-claims/fetch-claims.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { Claim } from '@vality/swag-claim-management';
 import { Observable } from 'rxjs';

src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.spec.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 
 import { ApiShopsService } from '@dsh/app/api';

src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { MemberRole, ResourceScopeId, RoleId } from '@vality/swag-organizations';
 import { coerceBoolean } from 'coerce-property';

src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatRadioModule } from '@angular/material/radio';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';

src/app/sections/organization-section/organization-details/change-roles-table/components/select-role-dialog/select-role-dialog.component.spec.ts

@@ -1,10 +1,7 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { By } from '@angular/platform-browser';
 import { RoleId } from '@vality/swag-organizations';
 

src/app/sections/organization-section/organization-details/change-roles-table/components/select-role-dialog/select-role-dialog.component.ts

@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { Validators } from '@angular/forms';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { RoleId } from '@vality/swag-organizations';
 

src/app/sections/organization-section/organization-details/invitations/components/create-invitation-dialog/create-invitation-dialog.component.spec.ts

@@ -1,9 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { TranslocoTestingModule } from '@ngneat/transloco';
 import { InviteeContact } from '@vality/swag-organizations';
 import { Shop } from '@vality/swag-payments';

src/app/sections/organization-section/organization-details/invitations/components/create-invitation-dialog/create-invitation-dialog.component.ts

@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { Validators } from '@angular/forms';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { InviteeContact, MemberRole } from '@vality/swag-organizations';

src/app/sections/organization-section/organization-details/invitations/components/invitation/invitation.component.html

@@ -7,10 +7,10 @@
 
     <div gdColumns="1fr 1fr">
         <dsh-details-item [title]="t('createdAt')">
-            {{ invitation.createdAt | date: 'dd MMMM yyyy, HH:mm' }}
+            {{ invitation.createdAt | date : 'dd MMMM yyyy, HH:mm' }}
         </dsh-details-item>
         <dsh-details-item [title]="t('expiresAt')">
-            {{ invitation.expiresAt | date: 'dd MMMM yyyy, HH:mm' }}
+            {{ invitation.expiresAt | date : 'dd MMMM yyyy, HH:mm' }}
         </dsh-details-item>
     </div>
 

src/app/sections/organization-section/organization-details/invitations/components/invitation/invitation.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 
 import { OrgsService } from '@dsh/app/api/organizations';

src/app/sections/organization-section/organization-details/invitations/components/invitation/invitation.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { InlineObject1, Invitation, Organization } from '@vality/swag-organizations';
 import { filter, switchMap } from 'rxjs/operators';

src/app/sections/organization-section/organization-details/invitations/invitations.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { InvitationListResult } from '@vality/swag-organizations';
 import { cold } from 'jasmine-marbles';

src/app/sections/organization-section/organization-details/invitations/invitations.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, first, shareReplay, switchMap } from 'rxjs/operators';

src/app/sections/organization-section/organization-details/invitations/invitations.module.ts

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatRadioModule } from '@angular/material/radio';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { TranslocoModule } from '@ngneat/transloco';
 

src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.spec.ts

@@ -1,8 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 
 import { OrgsService } from '@dsh/app/api/organizations';
 import { ErrorService } from '@dsh/app/shared';

src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/edit-roles-dialog.component.ts

@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { MemberRole } from '@vality/swag-organizations';
 import { BehaviorSubject, defer, forkJoin, of, Subscription } from 'rxjs';

src/app/sections/organization-section/organization-details/members/components/member/member.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 
 import { OrgsService } from '@dsh/app/api/organizations';

src/app/sections/organization-section/organization-details/members/components/member/member.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, Output } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Member, Organization } from '@vality/swag-organizations';
 import { filter, switchMap } from 'rxjs/operators';

src/app/sections/organization-section/organization-details/members/members.module.ts

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { OrganizationsModule as OrganizationsAPIModule } from '@dsh/app/api/organizations';

src/app/sections/organization-section/organization-details/organization-details.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { OrganizationManagementModule } from '@dsh/app/shared/services/organization-management/organization-management.module';

src/app/sections/organization-section/organizations/components/create-organization-dialog/create-organization-dialog.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 import { TranslocoTestingModule } from '@ngneat/transloco';
 import { of, throwError } from 'rxjs';

src/app/sections/organization-section/organizations/components/create-organization-dialog/create-organization-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { BehaviorSubject, switchMap } from 'rxjs';

src/app/sections/organization-section/organizations/components/organization/organization.component.spec.ts

@@ -1,12 +1,8 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import {
-    MatLegacyDialog as MatDialog,
-    MatLegacyDialogModule as MatDialogModule,
-    MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslocoTestingModule } from '@ngneat/transloco';

src/app/sections/organization-section/organizations/components/organization/organization.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Organization } from '@vality/swag-organizations';
 import isNil from 'lodash-es/isNil';

src/app/sections/organization-section/organizations/components/organizations-list/organizations-list.component.html

@@ -24,7 +24,7 @@
                     <dsh-accordion-item-content-header (collapse)="accordionItem.collapse($event)">
                         <div fxLayout fxLayoutAlign="space-between">
                             <div>{{ organization.id }}</div>
-                            <div>{{ organization.createdAt | date: 'dd MMMM yyyy, HH:mm' }}</div>
+                            <div>{{ organization.createdAt | date : 'dd MMMM yyyy, HH:mm' }}</div>
                         </div>
                     </dsh-accordion-item-content-header>
                     <dsh-organization [organization]="organization" (changed)="changed.emit()"></dsh-organization>

src/app/sections/organization-section/organizations/components/rename-organization-dialog/rename-organization-dialog.component.spec.ts

@@ -1,11 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
+import { MatFormFieldModule } from '@angular/material/form-field';
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+import { MatInputModule } from '@angular/material/input';
-} from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslocoTestingModule } from '@ngneat/transloco';

src/app/sections/organization-section/organizations/components/rename-organization-dialog/rename-organization-dialog.component.ts

@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { FormBuilder, FormGroup } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { BehaviorSubject } from 'rxjs';

src/app/sections/organization-section/organizations/organizations.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 import { TranslocoTestingModule } from '@ngneat/transloco';
 import { of } from 'rxjs';

src/app/sections/organization-section/organizations/organizations.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter } from 'rxjs/operators';
 

src/app/sections/organization-section/organizations/organizations.module.ts

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { OrganizationsModule as OrganizationsAPIModule } from '@dsh/app/api/organizations';

src/app/sections/payment-section/analytics/analytics.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { BarChartModule, DonutChartModule } from '@dsh/components/charts';

src/app/sections/payment-section/analytics/average-payment/average-payment.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/bar-chart-item/bar-chart-item.component.html

@@ -1,6 +1,6 @@
 <dsh-card class="bar-chart" *transloco="let c; scope: 'components'; read: 'components.shared'">
     <dsh-card-title fxLayoutAlign="space-between">
-        <h1 class="mat-title">{{ title }}</h1>
+        <h1 class="mat-h2">{{ title }}</h1>
         <dsh-spinner *ngIf="isLoading" size="30" [type]="spinnerType"></dsh-spinner>
     </dsh-card-title>
     <dsh-card-content *transloco="let t; scope: 'payment-section'; read: 'paymentSection.analytics'">

src/app/sections/payment-section/analytics/donut-chart-item/donut-chart-item.component.html

@@ -1,6 +1,6 @@
 <dsh-card *transloco="let c; scope: 'components'; read: 'components.shared'">
     <dsh-card-title fxLayoutAlign="space-between">
-        <h1 class="mat-title">{{ title }}</h1>
+        <h1 class="mat-h2">{{ title }}</h1>
         <dsh-spinner *ngIf="isLoading" size="30" [type]="spinnerType"></dsh-spinner>
     </dsh-card-title>
     <dsh-card-content *transloco="let t; scope: 'payment-section'; read: 'paymentSection.analytics'" fxFlexFill>

src/app/sections/payment-section/analytics/payments-amount/payments-amount.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/payments-count/payments-count.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/payments-error-distribution/error-distribution.ts

@@ -1,7 +1,7 @@
 import { KNOWN_ERRORS } from './known-errors';
 
 export interface ErrorDistribution {
-    errorCode: typeof KNOWN_ERRORS[number] | 'other';
+    errorCode: (typeof KNOWN_ERRORS)[number] | 'other';
     percents: number;
     subErrors: ErrorDistribution[];
 }

src/app/sections/payment-section/analytics/payments-error-distribution/sub-errors-to-error-distribution.ts

@@ -5,8 +5,8 @@ import { ErrorDistribution } from './error-distribution';
 import { KNOWN_ERRORS } from './known-errors';
 
 function getDistributionErrorCode(errorCode: string): ErrorDistribution['errorCode'] {
-    return KNOWN_ERRORS.includes(errorCode as typeof KNOWN_ERRORS[number])
+    return KNOWN_ERRORS.includes(errorCode as (typeof KNOWN_ERRORS)[number])
-        ? (errorCode as typeof KNOWN_ERRORS[number])
+        ? (errorCode as (typeof KNOWN_ERRORS)[number])
         : 'other';
 }
 

src/app/sections/payment-section/analytics/percent-difference/percent-difference.component.html

@@ -4,6 +4,6 @@
     [class.negative-percent-difference]="percents < 0"
     [class.positive-percent-difference]="percents > 0"
 >
-    {{ percents >= 0 ? '+' : '' }}{{ percents | percent: '1.0-2':'en' }}
+    {{ percents >= 0 ? '+' : '' }}{{ percents | percent : '1.0-2' : 'en' }}
 </div>
 <ng-template #noPercents>-</ng-template>

src/app/sections/payment-section/analytics/refunds-amount/refunds-amount.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/stat-item/stat-item.component.html

@@ -6,13 +6,13 @@
             fxLayoutAlign="space-between"
             fxLayoutGap="10px"
         >
-            <h2 *ngIf="!isLoading" class="mat-title stat-item-title">
+            <h2 *ngIf="!isLoading" class="mat-h2 stat-item-title">
                 <div *ngIf="statData?.current; else noData">
                     <div *ngIf="hideCurrency; else showCurrency">
                         {{ statData.current | number }}
                     </div>
                     <ng-template #showCurrency>
-                        {{ statData.current | amountCurrency: statData.currency:'short' }}
+                        {{ statData.current | amountCurrency : statData.currency : 'short' }}
                     </ng-template>
                 </div>
                 <ng-template #noData>

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

@@ -10,7 +10,7 @@
             *ngFor="let balance of balances$ | async"
             [ngClass]="(balancesCount$ | async) <= 3 ? 'dsh-balances-balance-lg' : 'dsh-balances-balance-md'"
         >
-            {{ balance.amount | amountCurrency: balance.currency:'short' }}
+            {{ balance.amount | amountCurrency : balance.currency : 'short' }}
         </div>
     </ng-container>
     <ng-template #elseBlock><div class="dsh-balances-balance-lg">--/--</div></ng-template>

src/app/sections/payment-section/integrations/api-key/api-key.module.ts

@@ -2,7 +2,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/integrations/api-keys/api-keys-list/api-keys-list.component.html

@@ -21,7 +21,7 @@
                     {{ apiKey.name }}
                 </dsh-row-label>
                 <dsh-row-label fxFlex="25" fxHide.lt-md>{{
-                    apiKey.createdAt | date: 'dd MMMM yyyy, HH:mm'
+                    apiKey.createdAt | date : 'dd MMMM yyyy, HH:mm'
                 }}</dsh-row-label>
                 <dsh-row-label fxFlex="25" fxHide.lt-md>{{ apiKey.status }}</dsh-row-label>
             </dsh-row>
@@ -30,7 +30,7 @@
                     <dsh-accordion-item-content-header (collapse)="accordionItem.collapse($event)">
                         <div fxLayout="row" fxLayoutAlign="space-between center">
                             <div>{{ t('details') }} #{{ apiKey.id }}</div>
-                            <div>{{ apiKey.createdAt | date: 'dd MMMM yyyy, HH:mm' }}</div>
+                            <div>{{ apiKey.createdAt | date : 'dd MMMM yyyy, HH:mm' }}</div>
                         </div>
                     </dsh-accordion-item-content-header>
                     <div fxLayout="column" fxLayoutGap="24px">
@@ -44,7 +44,7 @@
                                 <div class="dsh-body-1">{{ apiKey.status }}</div>
                             </dsh-details-item>
                             <dsh-details-item [title]="t('createdAt')">
-                                <div class="dsh-body-1">{{ apiKey.createdAt | date: 'dd MMMM yyyy, HH:mm' }}</div>
+                                <div class="dsh-body-1">{{ apiKey.createdAt | date : 'dd MMMM yyyy, HH:mm' }}</div>
                             </dsh-details-item>
                         </div>
                         <mat-divider></mat-divider>

src/app/sections/payment-section/integrations/api-keys/components/api-key-create-dialog/api-key-create-dialog.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { Component, Injector } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule, NonNullableFormBuilder } from '@angular/forms';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { DialogSuperclass } from '@vality/ng-core';

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

@@ -3,7 +3,7 @@
     fxLayout="column"
     fxLayoutGap="32px"
 >
-    <nav mat-tab-nav-bar>
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel">
         <a
             mat-tab-link
             *ngFor="let link of links"
@@ -15,8 +15,8 @@
             <span>{{ link.label$ | async }}</span>
         </a>
     </nav>
-    <div>
+    <mat-tab-nav-panel #tabPanel>
         <router-outlet></router-outlet>
-    </div>
+    </mat-tab-nav-panel>
 </div>
 <dsh-scroll-up></dsh-scroll-up>

src/app/sections/payment-section/integrations/integrations.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { LayoutModule } from '@dsh/components/layout';

src/app/sections/payment-section/integrations/payment-link/create-invoice-template/create-invoice-template.component.html

@@ -89,7 +89,7 @@
             </ng-container>
             <mat-divider></mat-divider>
             <div fxLayout fxLayoutGap="24px" fxLayoutAlign="space-between center">
-                <div>{{ c('form.cart.summary') }}: {{ summary$ | async | currency: form.value.currency }}</div>
+                <div>{{ c('form.cart.summary') }}: {{ summary$ | async | currency : form.value.currency }}</div>
                 <button dsh-text-button color="accent" (click)="addProduct()">
                     {{ c('form.cart.add') }}
                 </button>

src/app/sections/payment-section/integrations/payment-link/create-invoice-template/create-invoice-template.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormArray } from '@angular/forms';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { InvoiceLineTaxVAT, InvoiceTemplateAndToken, Shop } from '@vality/swag-payments';
 import moment from 'moment';

src/app/sections/payment-section/integrations/payment-link/create-invoice-template/create-invoice-template.module.ts

@@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatRadioModule } from '@angular/material/radio';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatSelectModule } from '@angular/material/select';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { TranslocoModule } from '@ngneat/transloco';
 

src/app/sections/payment-section/integrations/payment-link/create-invoice-template/create-invoice-template.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { UntypedFormArray, UntypedFormBuilder } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import {
     InvoiceLineTaxMode,
     InvoiceLineTaxVAT,

src/app/sections/payment-section/integrations/payment-link/payment-link.module.ts

@@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatRadioModule } from '@angular/material/radio';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatSelectModule } from '@angular/material/select';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { ActionsModule } from '@dsh/app/shared/components/actions';

src/app/sections/payment-section/integrations/webhooks/create-webhook/create-webhook-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { filter } from 'rxjs/operators';
 

src/app/sections/payment-section/integrations/webhooks/create-webhook/create-webhook.module.ts

@@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatRadioModule } from '@angular/material/radio';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatSelectModule } from '@angular/material/select';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';

src/app/sections/payment-section/integrations/webhooks/create-webhook/create-webhook.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Observable, Subject } from 'rxjs';
 import { filter, switchMap, takeUntil } from 'rxjs/operators';
 

src/app/sections/payment-section/integrations/webhooks/delete-webhook/delete-webhook.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { combineLatest, Observable, of, Subject } from 'rxjs';
 import { catchError, filter, switchMap, takeUntil } from 'rxjs/operators';

src/app/sections/payment-section/integrations/webhooks/receive-webhooks.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { Webhook } from '@vality/swag-payments';
 import sortBy from 'lodash-es/sortBy';

src/app/sections/payment-section/integrations/webhooks/webhook-details/webhook-details.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { WebhookApiKeyModule } from '@dsh/app/shared/components';

src/app/sections/payment-section/integrations/webhooks/webhook-list/webhook-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { Webhook, WebhookScope } from '@vality/swag-payments';
 

src/app/sections/payment-section/integrations/webhooks/webhook-list/webhook-list.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { ApiModelRefsModule } from '@dsh/app/shared/pipes';

src/app/sections/payment-section/integrations/webhooks/webhooks.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 
 import { CreateWebhookService } from './create-webhook';

src/app/sections/payment-section/integrations/webhooks/webhooks.module.ts

@@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatSelectModule } from '@angular/material/select';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/operations/invoices/create-invoice/components/create-invoice-dialog/create-invoice-dialog.component.ts

@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { FormControl } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Shop } from '@vality/swag-payments';

src/app/sections/payment-section/operations/invoices/create-invoice/create-invoice.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService, TranslocoTestingModule } from '@ngneat/transloco';
 import { Shop } from '@vality/swag-payments';
 import { cold } from 'jasmine-marbles';

src/app/sections/payment-section/operations/invoices/create-invoice/create-invoice.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { PaymentInstitution, Shop } from '@vality/swag-payments';
 import { Observable, of, ReplaySubject } from 'rxjs';

src/app/sections/payment-section/operations/invoices/invoices-list/components/invoice-row/invoice-row.component.html

@@ -3,7 +3,7 @@
         {{ invoice.product }}
     </dsh-row-label>
     <dsh-row-label fxFlex.gt-md="10">
-        <span class="dsh-body-2">{{ invoice.amount | amountCurrency: invoice.currency }}</span>
+        <span class="dsh-body-2">{{ invoice.amount | amountCurrency : invoice.currency }}</span>
     </dsh-row-label>
     <dsh-row-label fxFlex.gt-md="10" fxHide.lt-md>
         <dsh-status
@@ -11,7 +11,7 @@
             >{{ (invoiceStatusDict$ | async)?.[invoice.status] }}</dsh-status
         >
     </dsh-row-label>
-    <dsh-row-label fxFlex.gt-md="20">{{ invoice.createdAt | date: 'dd MMMM yyyy, HH:mm' }}</dsh-row-label>
+    <dsh-row-label fxFlex.gt-md="20">{{ invoice.createdAt | date : 'dd MMMM yyyy, HH:mm' }}</dsh-row-label>
     <dsh-row-label fxFlex.gt-md="20" fxHide.lt-md>
         {{ invoice.shopID | shopDetails }}
     </dsh-row-label>

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService, TranslocoTestingModule } from '@ngneat/transloco';
 import { cold } from 'jasmine-marbles';
 import { of } from 'rxjs';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
 import { Observable, ReplaySubject } from 'rxjs';
 import { filter, switchMap, take } from 'rxjs/operators';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/components/cancel-invoice-dialog/cancel-invoice-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { FormControl } from '@ngneat/reactive-forms';
 
 import { CancelInvoiceDialogResponse } from '../../types/cancel-invoice-dialog-response';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/components/invoice-actions/invoice-actions.component.html

@@ -3,7 +3,7 @@
     fxLayoutGap="24px"
     *transloco="let t; scope: 'payment-section'; read: 'paymentSection.operations.invoices.actions'"
 >
-    <div class="mat-title">
+    <div class="mat-h2">
         {{ t('title') }}
     </div>
     <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="24px">

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/components/invoice-actions/invoice-actions.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Output } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Invoice } from '@vality/swag-payments';
 

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/components/invoice-cart-info/cart-info/invoice-cart-line.component.html

@@ -8,7 +8,7 @@
         {{ line.product }}
     </dsh-details-item>
     <dsh-details-item [title]="t('price')">
-        {{ line.price | amountCurrency: currency }}
+        {{ line.price | amountCurrency : currency }}
     </dsh-details-item>
     <dsh-details-item [title]="t('quantity')">
         {{ line.quantity }}

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/components/invoice-cart-info/invoice-cart-info.component.html

@@ -3,7 +3,7 @@
     fxLayoutGap="24px"
     *transloco="let t; scope: 'payment-section'; read: 'paymentSection.operations.invoices.cartInfo'"
 >
-    <div class="mat-title">
+    <div class="mat-h2">
         {{ t('title') }}
     </div>
     <ng-container *ngFor="let line of cart; index as i">

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/components/invoice-payments/invoice-payments.component.html

@@ -3,7 +3,7 @@
     fxLayoutGap="24px"
     *transloco="let t; scope: 'payment-section'; read: 'paymentSection.operations.invoices.payments'"
 >
-    <div class="mat-title">
+    <div class="mat-h2">
         {{ t('title') }}
     </div>
     <div *ngFor="let payment of payments$ | async as payments; index as i" fxLayout="column" fxLayoutGap="24px">

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/create-payment-link-dialog/create-payment-link-dialog.component.ts

@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-    MatLegacyDialogRef as MatDialogRef,
-    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
 import { FormControl } from '@ngneat/reactive-forms';
 import { BehaviorSubject, defer, merge, Subject } from 'rxjs';
 import { mapTo, switchMap } from 'rxjs/operators';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/components/cancel-invoice-dialog/fulfill-invoice-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { FormControl } from '@ngneat/reactive-forms';
 
 import { FulfillInvoiceDialogResponse } from '../../types/fulfill-invoice-dialog-response';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/fulfill-invoice.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/fulfill-invoice.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService, TranslocoTestingModule } from '@ngneat/transloco';
 import { cold } from 'jasmine-marbles';
 import { of } from 'rxjs';