fix(console): angular 15 (#4809)

* cli core

* update material

* imports

* schematics

* lint

* rm ng-qrcode, ngx-quicklink

* replace qr code lib

* rm shared module as quicklink is removed

* lazy loading imports

* rm public

* chore(deps): bump @grpc/grpc-js from 1.7.1 to 1.8.0 in /console (#4857)

Bumps [@grpc/grpc-js](https://github.com/grpc/grpc-node) from 1.7.1 to 1.8.0.
- [Release notes](https://github.com/grpc/grpc-node/releases)
- [Commits](https://github.com/grpc/grpc-node/compare/v1.7.1...@grpc/grpc-js@1.8.0)

---
updated-dependencies:
- dependency-name: "@grpc/grpc-js"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump libphonenumber-js from 1.10.13 to 1.10.15 in /console (#4861)

Bumps [libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js) from 1.10.13 to 1.10.15.
- [Release notes](https://gitlab.com/catamphetamine/libphonenumber-js/tags)
- [Changelog](https://gitlab.com/catamphetamine/libphonenumber-js/blob/master/CHANGELOG.md)
- [Commits](https://gitlab.com/catamphetamine/libphonenumber-js/compare/v1.10.13...v1.10.15)

---
updated-dependencies:
- dependency-name: libphonenumber-js
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* rxjs

* chore(deps): bump engine.io from 6.2.0 to 6.2.1 in /console (#4734)

Bumps [engine.io](https://github.com/socketio/engine.io) from 6.2.0 to 6.2.1.
- [Release notes](https://github.com/socketio/engine.io/releases)
- [Changelog](https://github.com/socketio/engine.io/blob/main/CHANGELOG.md)
- [Commits](https://github.com/socketio/engine.io/compare/6.2.0...6.2.1)

---
updated-dependencies:
- dependency-name: engine.io
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* lock

* lint

* rm comments

* tsconfig ES2022

* get rid of polyfills file

* use node 18

* rm age policy, legacy components

* packages

* build beta prerelease

* remove pre-release build

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@zitadel.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>

build/console/Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_VERSION=16
+ARG NODE_VERSION=18
 
 #######################
 ## With this step we prepare all node_modules, this helps caching the build

console/angular.json

@@ -20,7 +20,7 @@
             "outputPath": "dist/console",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
             "styles": ["src/styles.scss"],
@@ -124,7 +124,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
@@ -159,5 +159,13 @@
   "cli": {
     "analytics": "2b4e8e6c-f053-4562-b7a6-00c6c06a6791",
     "schematicCollections": ["@angular-eslint/schematics"]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

console/package.json

@@ -12,25 +12,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.9",
+    "@angular/animations": "^15.0.2",
-    "@angular/cdk": "^14.2.3",
+    "@angular/cdk": "^15.0.4",
-    "@angular/common": "^14.2.9",
+    "@angular/common": "^15.0.2",
-    "@angular/compiler": "^14.2.9",
+    "@angular/compiler": "^15.0.2",
-    "@angular/core": "^14.2.9",
+    "@angular/core": "^15.0.2",
-    "@angular/forms": "^14.2.9",
+    "@angular/forms": "^15.0.2",
-    "@angular/material": "^14.2.3",
+    "@angular/material": "^15.0.4",
-    "@angular/material-moment-adapter": "^14.2.3",
+    "@angular/material-moment-adapter": "^15.0.4",
-    "@angular/platform-browser": "^14.2.9",
+    "@angular/platform-browser": "^15.0.2",
-    "@angular/platform-browser-dynamic": "^14.2.9",
+    "@angular/platform-browser-dynamic": "^15.0.2",
-    "@angular/router": "^14.2.9",
+    "@angular/router": "^15.0.2",
-    "@angular/service-worker": "^14.2.9",
+    "@angular/service-worker": "^15.0.2",
     "@ctrl/ngx-codemirror": "^5.1.1",
-    "@grpc/grpc-js": "^1.7.1",
+    "@grpc/grpc-js": "^1.8.1",
     "@ngx-translate/core": "^14.0.0",
     "@types/file-saver": "^2.0.2",
     "@types/google-protobuf": "^3.15.3",
     "@types/uuid": "^8.3.0",
-    "angular-oauth2-oidc": "^13.0.1",
+    "angular-oauth2-oidc": "^15.0.1",
+    "angularx-qrcode": "^15.0.0",
     "buffer": "^6.0.3",
     "codemirror": "^5.65.8",
     "cors": "^2.8.5",
@@ -38,37 +39,36 @@
     "google-proto-files": "^3.0.2",
     "google-protobuf": "^3.21.2",
     "grpc-web": "^1.4.1",
-    "libphonenumber-js": "^1.10.6",
+    "libphonenumber-js": "^1.10.15",
     "material-design-icons-iconfont": "^6.1.1",
     "moment": "^2.29.4",
-    "ng-qrcode": "^7.0.0",
     "ngx-color": "^8.0.3",
-    "ngx-quicklink": "^0.3.0",
+    "rxjs": "~7.8.0",
-    "rxjs": "~7.5.7",
+    "tinycolor2": "^1.5.2",
-    "tinycolor2": "^1.4.2",
     "tslib": "^2.4.1",
     "uuid": "^9.0.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.8",
+    "@angular-devkit/build-angular": "^15.0.2",
-    "@angular-eslint/builder": "^14.1.2",
+    "@angular-eslint/builder": "^15.1.0",
-    "@angular-eslint/eslint-plugin": "^14.1.2",
+    "@angular-eslint/eslint-plugin": "^15.1.0",
-    "@angular-eslint/eslint-plugin-template": "^14.1.2",
+    "@angular-eslint/eslint-plugin-template": "^15.1.0",
-    "@angular-eslint/schematics": "^14.1.2",
+    "@angular-eslint/schematics": "^15.1.0",
-    "@angular-eslint/template-parser": "^14.1.2",
+    "@angular-eslint/template-parser": "^15.1.0",
-    "@angular/cli": "^14.2.8",
+    "@angular/cli": "^15.0.2",
-    "@angular/compiler-cli": "^14.2.9",
+    "@angular/compiler-cli": "^15.0.2",
-    "@angular/language-service": "^14.2.9",
+    "@angular/language-service": "^15.0.4",
     "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.10",
-    "@types/jsonwebtoken": "^8.5.5",
+    "@types/jsonwebtoken": "^9.0.0",
     "@types/node": "^18.8.1",
-    "@typescript-eslint/parser": "5.42.0",
+    "@types/qrcode": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
     "codelyzer": "^6.0.0",
-    "eslint": "^8.26.0",
+    "eslint": "^8.31.0",
-    "jasmine-core": "~4.4.0",
+    "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.1",
     "karma-chrome-launcher": "~3.1.0",
@@ -79,4 +79,4 @@
     "protractor": "~7.0.0",
     "typescript": "^4.8.4"
   }
-}
+}

console/src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { QuicklinkStrategy } from 'ngx-quicklink';
 
 import { AuthGuard } from './guards/auth.guard';
 import { RoleGuard } from './guards/role.guard';
@@ -10,7 +9,7 @@ import { OrgCreateComponent } from './pages/org-create/org-create.component';
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
+    loadChildren: () => import('./pages/home/home.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['.'],
@@ -18,7 +17,7 @@ const routes: Routes = [
   },
   {
     path: 'signedout',
-    loadChildren: () => import('./pages/signedout/signedout.module').then((m) => m.SignedoutModule),
+    loadChildren: () => import('./pages/signedout/signedout.module'),
   },
   {
     path: 'orgs/create',
@@ -27,17 +26,16 @@ const routes: Routes = [
     data: {
       roles: ['(org.create)?(iam.write)?'],
     },
-    loadChildren: () => import('./pages/org-create/org-create.module').then((m) => m.OrgCreateModule),
+    loadChildren: () => import('./pages/org-create/org-create.module'),
   },
   {
     path: 'orgs',
-    loadChildren: () => import('./pages/org-list/org-list.module').then((m) => m.OrgListModule),
+    loadChildren: () => import('./pages/org-list/org-list.module'),
     canActivate: [AuthGuard],
   },
   {
     path: 'granted-projects',
-    loadChildren: () =>
+    loadChildren: () => import('./pages/projects/granted-projects/granted-projects.module'),
-      import('./pages/projects/granted-projects/granted-projects.module').then((m) => m.GrantedProjectsModule),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['project.grant.read'],
@@ -45,7 +43,7 @@ const routes: Routes = [
   },
   {
     path: 'projects',
-    loadChildren: () => import('./pages/projects/projects.module').then((m) => m.ProjectsModule),
+    loadChildren: () => import('./pages/projects/projects.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['project.read'],
@@ -54,11 +52,11 @@ const routes: Routes = [
   {
     path: 'users',
     canActivate: [AuthGuard],
-    loadChildren: () => import('src/app/pages/users/users.module').then((m) => m.UsersModule),
+    loadChildren: () => import('src/app/pages/users/users.module'),
   },
   {
     path: 'instance',
-    loadChildren: () => import('./pages/instance/instance.module').then((m) => m.InstanceModule),
+    loadChildren: () => import('./pages/instance/instance.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['iam.read', 'iam.write'],
@@ -66,7 +64,7 @@ const routes: Routes = [
   },
   {
     path: 'org',
-    loadChildren: () => import('./pages/orgs/org.module').then((m) => m.OrgModule),
+    loadChildren: () => import('./pages/orgs/org.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['org.read'],
@@ -74,7 +72,7 @@ const routes: Routes = [
   },
   {
     path: 'actions',
-    loadChildren: () => import('./pages/actions/actions.module').then((m) => m.ActionsModule),
+    loadChildren: () => import('./pages/actions/actions.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['org.action.read', 'org.flow.read'],
@@ -82,7 +80,7 @@ const routes: Routes = [
   },
   {
     path: 'grants',
-    loadChildren: () => import('./pages/grants/grants.module').then((m) => m.GrantsModule),
+    loadChildren: () => import('./pages/grants/grants.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       context: UserGrantContext.NONE,
@@ -95,8 +93,7 @@ const routes: Routes = [
     children: [
       {
         path: 'project/:projectid/grant/:grantid',
-        loadChildren: () =>
+        loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module'),
-          import('src/app/pages/user-grant-create/user-grant-create.module').then((m) => m.UserGrantCreateModule),
         canActivate: [RoleGuard],
         data: {
           roles: ['user.grant.write'],
@@ -104,8 +101,7 @@ const routes: Routes = [
       },
       {
         path: 'project/:projectid',
-        loadChildren: () =>
+        loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module'),
-          import('src/app/pages/user-grant-create/user-grant-create.module').then((m) => m.UserGrantCreateModule),
         canActivate: [RoleGuard],
         data: {
           roles: ['user.grant.write'],
@@ -113,8 +109,7 @@ const routes: Routes = [
       },
       {
         path: 'user/:userid',
-        loadChildren: () =>
+        loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module'),
-          import('src/app/pages/user-grant-create/user-grant-create.module').then((m) => m.UserGrantCreateModule),
         canActivate: [RoleGuard],
         data: {
           roles: ['user.grant.write'],
@@ -122,8 +117,7 @@ const routes: Routes = [
       },
       {
         path: '',
-        loadChildren: () =>
+        loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module'),
-          import('src/app/pages/user-grant-create/user-grant-create.module').then((m) => m.UserGrantCreateModule),
         canActivate: [RoleGuard],
         data: {
           roles: ['user.grant.write'],
@@ -133,7 +127,7 @@ const routes: Routes = [
   },
   {
     path: 'failed-events',
-    loadChildren: () => import('./pages/failed-events/failed-events.module').then((m) => m.FailedEventsModule),
+    loadChildren: () => import('./pages/failed-events/failed-events.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['iam.read'],
@@ -141,7 +135,7 @@ const routes: Routes = [
   },
   {
     path: 'views',
-    loadChildren: () => import('./pages/iam-views/iam-views.module').then((m) => m.IamViewsModule),
+    loadChildren: () => import('./pages/iam-views/iam-views.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['iam.read'],
@@ -149,7 +143,7 @@ const routes: Routes = [
   },
   {
     path: 'settings',
-    loadChildren: () => import('./pages/instance-settings/instance-settings.module').then((m) => m.InstanceSettingsModule),
+    loadChildren: () => import('./pages/instance-settings/instance-settings.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['iam.read', 'iam.policy.read'],
@@ -158,7 +152,7 @@ const routes: Routes = [
   },
   {
     path: 'domains',
-    loadChildren: () => import('./pages/domains/domains.module').then((m) => m.DomainsModule),
+    loadChildren: () => import('./pages/domains/domains.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['org.read'],
@@ -166,7 +160,7 @@ const routes: Routes = [
   },
   {
     path: 'org-settings',
-    loadChildren: () => import('./pages/org-settings/org-settings.module').then((m) => m.OrgSettingsModule),
+    loadChildren: () => import('./pages/org-settings/org-settings.module'),
     canActivate: [AuthGuard, RoleGuard],
     data: {
       roles: ['policy.read'],
@@ -181,8 +175,6 @@ const routes: Routes = [
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, {
-      preloadingStrategy: QuicklinkStrategy,
-      relativeLinkResolution: 'legacy',
       scrollPositionRestoration: 'enabled',
     }),
   ],

console/src/app/app.module.ts

@@ -7,17 +7,16 @@ import localeIt from '@angular/common/locales/it';
 import localeEn from '@angular/common/locales/en';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
-import { QuicklinkModule } from 'ngx-quicklink';
 import { from, Observable } from 'rxjs';
 import { AuthGuard } from 'src/app/guards/auth.guard';
 import { RoleGuard } from 'src/app/guards/role.guard';
@@ -105,7 +104,6 @@ const authConfig: AuthConfig = {
     }),
     NavModule,
     MatNativeDateModule,
-    QuicklinkModule,
     HasRoleModule,
     InfoOverlayModule,
     BrowserAnimationsModule,

console/src/app/modules/accounts-card/accounts-card.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 

console/src/app/modules/add-key-dialog/add-key-dialog.component.html

@@ -18,7 +18,7 @@
     <mat-datepicker #picker [startAt]="startDate"></mat-datepicker>
     <span cnslError *ngIf="dateControl?.errors?.matDatepickerMin?.min">
       {{ 'USER.MACHINE.CHOOSEDATEAFTER' | translate }}:
-      {{ dateControl.errors?.matDatepickerMin.min.toDate() | localizedDate: 'EEE dd. MMM' }}
+      {{ dateControl.errors?.matDatepickerMin.min.toDate() | localizedDate : 'EEE dd. MMM' }}
     </span>
   </cnsl-form-field>
 </div>

console/src/app/modules/add-key-dialog/add-key-dialog.component.ts

@@ -1,6 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { KeyType } from 'src/app/proto/generated/zitadel/auth_n_key_pb';
 
 export enum AddKeyDialogType {

console/src/app/modules/add-key-dialog/add-key-dialog.module.ts

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';

console/src/app/modules/add-member-dialog/member-create-dialog.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { Observable } from 'rxjs';
 import { GrantedProject, Project } from 'src/app/proto/generated/zitadel/project_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';

console/src/app/modules/add-member-dialog/member-create-dialog.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';

console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.html

@@ -1,6 +1,6 @@
 <span class="title" mat-dialog-title>{{ 'MEMBER.EDITROLE' | translate }}</span>
 <div mat-dialog-content>
-  <p class="desc">{{ 'MEMBER.EDITFOR' | translate: { value: data.user } }}</p>
+  <p class="desc">{{ 'MEMBER.EDITFOR' | translate : { value: data.user } }}</p>
   <div class="roles-selection">
     <mat-checkbox
       class="role-cb"

console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { getMembershipColor } from 'src/app/utils/color';
 
 @Component({

console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';

console/src/app/modules/add-token-dialog/add-token-dialog.component.html

@@ -9,7 +9,7 @@
     <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
     <span cnslError *ngIf="dateControl?.errors?.matDatepickerMin?.min">
       {{ 'USER.PERSONALACCESSTOKEN.ADD.CHOOSEDATEAFTER' | translate }}:
-      {{ dateControl.errors?.matDatepickerMin.min.toDate() | localizedDate: 'EEE dd. MMM' }}
+      {{ dateControl.errors?.matDatepickerMin.min.toDate() | localizedDate : 'EEE dd. MMM' }}
     </span>
   </cnsl-form-field>
 </div>

console/src/app/modules/add-token-dialog/add-token-dialog.component.ts

@@ -1,6 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'cnsl-add-token-dialog',

console/src/app/modules/add-token-dialog/add-token-dialog.module.ts

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';

console/src/app/modules/card/card.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 
 import { CardComponent } from './card.component';
 

console/src/app/modules/changes/changes.component.html

@@ -5,7 +5,7 @@
 <div class="scroll-container">
   <li class="item" *ngFor="let hist of data | async; index as histindex">
     <span *ngIf="hist.values[0].dates[0]" class="date">
-      {{ hist.values[0].dates[0] | timestampToDate | localizedDate: 'dd. MMM YYYY' }}
+      {{ hist.values[0].dates[0] | timestampToDate | localizedDate : 'dd. MMM YYYY' }}
     </span>
     <div class="item" *ngFor="let dayelement of hist.values; index as i">
       <div class="row">
@@ -28,8 +28,8 @@
               <span class="msg">{{ action.localizedMessage }}</span>
               <span
                 class="block"
-                matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MM YYYY, HH:mm' }}"
+                matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate : 'dd. MM YYYY, HH:mm' }}"
-                >{{ dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm' }}</span
+                >{{ dayelement.dates[j] | timestampToDate | localizedDate : 'HH:mm' }}</span
               >
             </div>
           </div>

console/src/app/modules/changes/changes.module.ts

@@ -1,10 +1,10 @@
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollableModule } from 'src/app/directives/scrollable/scrollable.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';

console/src/app/modules/client-keys/client-keys.component.html

@@ -52,14 +52,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.details.creationDate | timestampToDate | localizedDate: 'fromNow' }}
+          {{ key.details.creationDate | timestampToDate | localizedDate : 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.expirationDate | timestampToDate | localizedDate: 'fromNow' }}
+          {{ key.expirationDate | timestampToDate | localizedDate : 'fromNow' }}
         </td>
       </ng-container>
 

console/src/app/modules/client-keys/client-keys.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { Moment } from 'moment';

console/src/app/modules/client-keys/client-keys.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

console/src/app/modules/contributors/contributors.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';
 

console/src/app/modules/create-layout/create-layout.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { CreateLayoutComponent } from './create-layout.component';

console/src/app/modules/detail-layout/detail-layout.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { BackModule } from 'src/app/directives/back/back.module';

console/src/app/modules/edit-text/edit-text.module.ts

@@ -2,9 +2,9 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { InputModule } from 'src/app/modules/input/input.module';

console/src/app/modules/filter-org/filter-org.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

console/src/app/modules/filter-org/filter-org.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 

console/src/app/modules/filter-project/filter-project.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

console/src/app/modules/filter-project/filter-project.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 

console/src/app/modules/filter-user-grants/filter-user-grants.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

console/src/app/modules/filter-user-grants/filter-user-grants.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 

console/src/app/modules/filter-user/filter-user.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
 import { ActivatedRoute, Router } from '@angular/router';
 import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

console/src/app/modules/filter-user/filter-user.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 

console/src/app/modules/filter/filter.module.ts

@@ -2,10 +2,10 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ActionKeysModule } from '../action-keys/action-keys.module';

console/src/app/modules/form-field/form-field.component.ts

@@ -16,7 +16,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
 import { Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 

console/src/app/modules/header/header.module.ts

@@ -2,10 +2,10 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

console/src/app/modules/idp-create/idp-create.component.ts

@@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { Component, Injector, OnDestroy, OnInit, Type } from '@angular/core';
 import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';

console/src/app/modules/idp-create/idp-create.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';
 
@@ -39,4 +39,4 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
     MatProgressBarModule,
   ],
 })
-export class IdpCreateModule {}
+export default class IdpCreateModule {}

console/src/app/modules/idp-table/idp-table.component.html

@@ -151,14 +151,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.CREATIONDATE' | translate }}</th>
         <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-          <span>{{ idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span>{{ idp.details.creationDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="changeDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.CHANGEDATE' | translate }}</th>
         <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-          <span>{{ idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span>{{ idp.details.changeDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 

console/src/app/modules/idp-table/idp-table.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { RouterLink } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';

console/src/app/modules/idp-table/idp-table.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

console/src/app/modules/idp/idp.component.ts

@@ -2,8 +2,8 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { Component, Injector, OnDestroy, Type } from '@angular/core';
 import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
 import { take } from 'rxjs/operators';

console/src/app/modules/idp/idp.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@@ -48,4 +48,4 @@ import { IdpComponent } from './idp.component';
     DetailLayoutModule,
   ],
 })
-export class IdpModule {}
+export default class IdpModule {}

console/src/app/modules/info-overlay/info-overlay.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 

console/src/app/modules/info-row/info-row.component.html

@@ -21,14 +21,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
     <p *ngIf="user && user.details && user.details.creationDate" class="info-row-desc">
-      {{ user.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ user.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
     <p *ngIf="user && user.details && user.details.changeDate" class="info-row-desc">
-      {{ user.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ user.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
@@ -97,14 +97,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
     <p *ngIf="instance && instance.details && instance.details.creationDate" class="info-row-desc">
-      {{ instance.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ instance.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
     <p *ngIf="instance && instance.details && instance.details.changeDate" class="info-row-desc">
-      {{ instance.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ instance.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -144,14 +144,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
     <p *ngIf="org && org.details && org.details.creationDate" class="info-row-desc">
-      {{ org.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ org.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
     <p *ngIf="org && org.details && org.details.changeDate" class="info-row-desc">
-      {{ org.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ org.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -179,14 +179,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
     <p *ngIf="project && project.details && project.details.creationDate" class="info-row-desc">
-      {{ project.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ project.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
     <p *ngIf="project && project.details && project.details.changeDate" class="info-row-desc">
-      {{ project.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ project.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -219,14 +219,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
     <p *ngIf="grantedProject && grantedProject.details && grantedProject.details.creationDate" class="info-row-desc">
-      {{ grantedProject.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ grantedProject.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
     <p *ngIf="grantedProject && grantedProject.details && grantedProject.details.changeDate" class="info-row-desc">
-      {{ grantedProject.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ grantedProject.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -252,14 +252,14 @@
     <div class="info-wrapper">
       <p class="info-row-title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
       <p *ngIf="app && app.details && app.details.creationDate" class="info-row-desc">
-        {{ app.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+        {{ app.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
       </p>
     </div>
 
     <div class="info-wrapper">
       <p class="info-row-title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
       <p *ngIf="app && app.details && app.details.changeDate" class="info-row-desc">
-        {{ app.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+        {{ app.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
       </p>
     </div>
 
@@ -305,14 +305,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'IDP.DETAIL.DATECREATED' | translate }}</p>
     <p class="info-row-desc" *ngIf="idp && idp.details && idp.details.creationDate">
-      {{ idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ idp.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'IDP.DETAIL.DATECHANGED' | translate }}</p>
     <p class="info-row-desc" *ngIf="idp && idp.details && idp.details.changeDate">
-      {{ idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ idp.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 

console/src/app/modules/info-row/info-row.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';

console/src/app/modules/input/input.directive.ts

@@ -17,8 +17,15 @@ import {
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
-import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import {
-import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
+  MAT_LEGACY_FORM_FIELD as MAT_FORM_FIELD,
+  MatLegacyFormField as MatFormField,
+  MatLegacyFormFieldControl as MatFormFieldControl,
+} from '@angular/material/legacy-form-field';
+import {
+  getMatLegacyInputUnsupportedTypeError as getMatInputUnsupportedTypeError,
+  MAT_LEGACY_INPUT_VALUE_ACCESSOR as MAT_INPUT_VALUE_ACCESSOR,
+} from '@angular/material/legacy-input';
 import { Subject } from 'rxjs';
 
 // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { KeyboardShortcut, ORGSHORTCUTS, SIDEWIDESHORTCUTS } from 'src/app/services/keyboard-shortcuts/keyboard-shortcuts';
 

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

console/src/app/modules/machine-keys/machine-keys.component.html

@@ -52,14 +52,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
+          {{ key.details?.creationDate | timestampToDate | localizedDate : 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.expirationDate | timestampToDate | localizedDate: 'fromNow' }}
+          {{ key.expirationDate | timestampToDate | localizedDate : 'fromNow' }}
         </td>
       </ng-container>
 

console/src/app/modules/machine-keys/machine-keys.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { Moment } from 'moment';

console/src/app/modules/machine-keys/machine-keys.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

console/src/app/modules/members-table/members-table.component.html

@@ -99,7 +99,7 @@
             </button>
 
             <button menuActions mat-menu-item [routerLink]="['/users', member.userId]">
-              {{ 'ACTIONS.TABLE.SHOWUSER' | translate: { value: member.displayName } }}
+              {{ 'ACTIONS.TABLE.SHOWUSER' | translate : { value: member.displayName } }}
             </button>
           </cnsl-table-actions>
         </td>

console/src/app/modules/members-table/members-table.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MembersTableComponent } from './members-table.component';

console/src/app/modules/members-table/members-table.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatTable } from '@angular/material/table';
+import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { InstanceMembersDataSource } from 'src/app/pages/instance/instance-members/instance-members-datasource';

console/src/app/modules/members-table/members-table.module.ts

@@ -1,14 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';

console/src/app/modules/memberships-table/memberships-table.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MembershipsTableComponent } from './memberships-table.component';

console/src/app/modules/memberships-table/memberships-table.component.ts

@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { MatTable } from '@angular/material/table';
+import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

console/src/app/modules/memberships-table/memberships-table.module.ts

@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';

console/src/app/modules/meta-layout/meta-layout.module.ts

@@ -1,7 +1,7 @@
 import { LayoutModule } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 
 import { MetaLayoutComponent } from './meta-layout.component';
 

console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html

@@ -1,7 +1,7 @@
 <div class="title-row">
   <h1 class="metadata-title">{{ 'METADATA.TITLE' | translate }}</h1>
   <span class="fill-space"></span>
-  <p *ngIf="ts" class="ts cnsl-secondary-text">{{ ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</p>
+  <p *ngIf="ts" class="ts cnsl-secondary-text">{{ ts | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</p>
   <mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
 </div>
 <p class="desc">{{ 'METADATA.DESCRIPTION' | translate }}</p>

console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { Buffer } from 'buffer';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';

console/src/app/modules/metadata/metadata.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';

console/src/app/modules/metadata/metadata/metadata.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
 

console/src/app/modules/name-dialog/name-dialog.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'cnsl-name-dialog',

console/src/app/modules/name-dialog/name-dialog.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { InputModule } from '../input/input.module';

console/src/app/modules/nav/nav.component.html

@@ -64,7 +64,7 @@
                   [routerLinkActiveOptions]="{ exact: false }"
                   [routerLinkActive]="['active']"
                   [routerLink]="['/settings']"
-                  *ngIf="['iam.read', 'iam.policy.read'] | hasRole: true | async"
+                  *ngIf="['iam.read', 'iam.policy.read'] | hasRole : true | async"
                 >
                   <div class="c_label">
                     <span> {{ 'MENU.SETTINGS' | translate }} </span>

console/src/app/modules/nav/nav.module.ts

@@ -2,17 +2,16 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
-import { SharedModule } from '../shared/shared.module';
 import { NavComponent } from './nav.component';
 
 @NgModule({
@@ -30,7 +29,6 @@ import { NavComponent } from './nav.component';
     MatMenuModule,
     MatButtonModule,
     MatProgressSpinnerModule,
-    SharedModule,
     OverlayModule,
   ],
   exports: [NavComponent],

console/src/app/modules/org-context/org-context.module.ts

@@ -2,10 +2,10 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

console/src/app/modules/org-table/org-table.component.html

@@ -75,7 +75,7 @@
         {{ 'ORG.PAGES.CREATIONDATE' | translate }}
       </th>
       <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
-        {{ org.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
+        {{ org.details?.creationDate | timestampToDate | localizedDate : 'fromNow' }}
       </td>
     </ng-container>
 
@@ -84,7 +84,7 @@
         {{ 'ORG.PAGES.DATECHANGED' | translate }}
       </th>
       <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
-        {{ org.details?.changeDate | timestampToDate | localizedDate: 'fromNow' }}
+        {{ org.details?.changeDate | timestampToDate | localizedDate : 'fromNow' }}
       </td>
     </ng-container>
 

console/src/app/modules/org-table/org-table.component.ts

@@ -1,7 +1,7 @@
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { Component, Input, ViewChild } from '@angular/core';
 import { MatSort, Sort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';

console/src/app/modules/org-table/org-table.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';

console/src/app/modules/paginator/paginator.component.html

@@ -4,7 +4,7 @@
       <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
     </p>
     <p class="ts cnsl-secondary-text" *ngIf="timestamp" data-e2e="timestamp">
-      {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
+      {{ timestamp | timestampToDate | localizedDate : 'EEEE dd. MMM YYYY, HH:mm' }}
     </p>
   </div>
   <span class="fill-space"></span>

console/src/app/modules/paginator/paginator.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';

console/src/app/modules/password-complexity-view/password-complexity-view.component.html

@@ -22,7 +22,7 @@
     </ng-template>
 
     <span class="cnsl-secondary-text"
-      >{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: { value: policy.minLength } }} ({{ password?.value?.length }}/{{
+      >{{ 'USER.PASSWORD.MINLENGTHERROR' | translate : { value: policy.minLength } }} ({{ password?.value?.length }}/{{
         policy.minLength
       }})
     </span>

console/src/app/modules/password-complexity-view/password-complexity-view.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { PasswordComplexityViewComponent } from './password-complexity-view.component';

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html

@@ -47,14 +47,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
+          {{ key.details?.creationDate | timestampToDate | localizedDate : 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm' }}
+          {{ key.expirationDate | timestampToDate | localizedDate : 'EEE dd. MMM YYYY, HH:mm' }}
         </td>
       </ng-container>
 

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts

@@ -1,7 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { Moment } from 'moment';

console/src/app/modules/personal-access-tokens/personal-access-tokens.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

console/src/app/modules/policies/domain-policy/domain-policy.component.ts

@@ -1,5 +1,5 @@
 import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Subscription } from 'rxjs';
 import {
   AddCustomDomainPolicyRequest,

console/src/app/modules/policies/domain-policy/domain-policy.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';

console/src/app/modules/policies/general-settings/general-settings.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 

console/src/app/modules/policies/idp-settings/idp-settings.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { CardModule } from '../../card/card.module';

console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import { MultiFactorType, SecondFactorType } from 'src/app/proto/generated/zitadel/policy_pb';
 
 enum LoginMethodComponentType {

console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';

console/src/app/modules/policies/login-policy/login-policy.component.ts

@@ -1,6 +1,6 @@
 import { Component, Injector, Input, OnInit, Type } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
 import { take } from 'rxjs';
 import {

console/src/app/modules/policies/login-policy/login-policy.module.ts

@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatRippleModule } from '@angular/material/core';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';

console/src/app/modules/policies/login-texts/login-texts.component.html

@@ -10,11 +10,11 @@
     <p class="newer-title" *ngIf="newerVersionExists">{{ 'POLICY.LOGIN_TEXTS.NEWERVERSIONEXISTS' | translate }}</p>
     <p *ngIf="newerPolicyChangeDate && newerVersionExists">
       {{ 'POLICY.LOGIN_TEXTS.CHANGEDATE' | translate }}:
-      {{ newerPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
+      {{ newerPolicyChangeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm:ss' }}
     </p>
     <p class="cnsl-secondary-text" *ngIf="currentPolicyChangeDate">
       {{ 'POLICY.LOGIN_TEXTS.CURRENTDATE' | translate }}:
-      {{ currentPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
+      {{ currentPolicyChangeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm:ss' }}
     </p>
   </div>
   <button [disabled]="!newerVersionExists" color="primary" mat-raised-button (click)="loadData()">

console/src/app/modules/policies/login-texts/login-texts.component.ts

@@ -1,6 +1,6 @@
 import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, from, interval, Observable, of, Subject, Subscription } from 'rxjs';
 import { map, pairwise, startWith, takeUntil } from 'rxjs/operators';

console/src/app/modules/policies/login-texts/login-texts.module.ts

@@ -2,12 +2,12 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';

console/src/app/modules/policies/message-texts/message-texts.component.ts

@@ -1,6 +1,6 @@
 import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatSelectChange } from '@angular/material/select';
+import { MatLegacySelectChange as MatSelectChange } from '@angular/material/legacy-select';
 import { BehaviorSubject, from, Observable, of, Subscription } from 'rxjs';
 import {
   GetCustomPasswordResetMessageTextRequest as AdminGetCustomPasswordResetMessageTextRequest,

console/src/app/modules/policies/message-texts/message-texts.module.ts

@@ -2,11 +2,11 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';

console/src/app/modules/policies/notification-settings/dialog-add-sms-provider/dialog-add-sms-provider.component.ts

@@ -1,6 +1,10 @@
 import { Component, Inject } from '@angular/core';
 import { AbstractControl, FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialog as MatDialog,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 import {
   AddSMSProviderTwilioRequest,
   UpdateSMSProviderTwilioRequest,

console/src/app/modules/policies/notification-settings/notification-settings.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { take } from 'rxjs';
 import {
   AddSMSProviderTwilioRequest,

console/src/app/modules/policies/notification-settings/notification-settings.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 

console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'cnsl-password-dialog',

console/src/app/modules/policies/oidc-configuration/oidc-configuration.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { CardModule } from '../../card/card.module';