UI: Angular15 migration

ui-ngx/package.json

@@ -15,13 +15,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.1.5",
-    "@angular/cdk": "^14.2.7",
+    "@angular/cdk": "^15.1.4",
     "@angular/common": "^15.1.5",
     "@angular/compiler": "^15.1.5",
     "@angular/core": "^15.1.5",
     "@angular/flex-layout": "^15.0.0-beta.42",
     "@angular/forms": "^15.1.5",
-    "@angular/material": "^14.2.7",
+    "@angular/material": "^15.1.4",
     "@angular/platform-browser": "^15.1.5",
     "@angular/platform-browser-dynamic": "^15.1.5",
     "@angular/router": "^15.1.5",
@@ -167,4 +167,4 @@
     "ace-builds": "1.4.13",
     "@date-io/core": "1.3.7"
   }
-}
+}

ui-ngx/src/app/core/auth/auth.service.ts

@@ -42,7 +42,7 @@ import { DashboardInfo } from '@shared/models/dashboard.models';
 import { PageData } from '@app/shared/models/page/page-data';
 import { AdminService } from '@core/http/admin.service';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
 import { AlertDialogComponent } from '@shared/components/dialog/alert-dialog.component';
 import { OAuth2ClientInfo, PlatformType } from '@shared/models/oauth2.models';
 import { isMobileApp } from '@core/utils';

ui-ngx/src/app/core/core.module.ts

@@ -33,9 +33,9 @@ import {
 } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TbMissingTranslationHandler } from './translate/missing-translate-handler';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';

ui-ngx/src/app/core/services/dialog.service.ts

@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from '@core/auth/auth.service';
 import {

ui-ngx/src/app/core/services/script/node-script-test.service.ts

@@ -18,7 +18,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { RuleChainService } from '@core/http/rule-chain.service';
 import { switchMap } from 'rxjs/operators';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   NodeScriptTestDialogComponent,
   NodeScriptTestDialogData

ui-ngx/src/app/modules/common/modules-map.ts

@@ -33,40 +33,40 @@ import * as AngularCdkOverlay from '@angular/cdk/overlay';
 import * as AngularCdkPortal from '@angular/cdk/portal';
 import * as AngularCdkBidi from '@angular/cdk/bidi';
 import * as AngularCdkPlatform from '@angular/cdk/platform';
-import * as AngularMaterialAutocomplete from '@angular/material/autocomplete';
+import * as AngularMaterialAutocomplete from '@angular/material/legacy-autocomplete';
 import * as AngularMaterialBadge from '@angular/material/badge';
 import * as AngularMaterialBottomSheet from '@angular/material/bottom-sheet';
-import * as AngularMaterialButton from '@angular/material/button';
+import * as AngularMaterialButton from '@angular/material/legacy-button';
 import * as AngularMaterialButtonToggle from '@angular/material/button-toggle';
-import * as AngularMaterialCard from '@angular/material/card';
-import * as AngularMaterialCheckbox from '@angular/material/checkbox';
-import * as AngularMaterialChips from '@angular/material/chips';
-import * as AngularMaterialCore from '@angular/material/core';
+import * as AngularMaterialCard from '@angular/material/legacy-card';
+import * as AngularMaterialCheckbox from '@angular/material/legacy-checkbox';
+import * as AngularMaterialChips from '@angular/material/legacy-chips';
+import * as AngularMaterialCore from '@angular/material/legacy-core';
 import * as AngularMaterialDatepicker from '@angular/material/datepicker';
-import * as AngularMaterialDialog from '@angular/material/dialog';
+import * as AngularMaterialDialog from '@angular/material/legacy-dialog';
 import * as AngularMaterialDivider from '@angular/material/divider';
 import * as AngularMaterialExpansion from '@angular/material/expansion';
-import * as AngularMaterialFormField from '@angular/material/form-field';
+import * as AngularMaterialFormField from '@angular/material/legacy-form-field';
 import * as AngularMaterialGridList from '@angular/material/grid-list';
 import * as AngularMaterialIcon from '@angular/material/icon';
-import * as AngularMaterialInput from '@angular/material/input';
-import * as AngularMaterialList from '@angular/material/list';
-import * as AngularMaterialMenu from '@angular/material/menu';
-import * as AngularMaterialPaginator from '@angular/material/paginator';
-import * as AngularMaterialProgressBar from '@angular/material/progress-bar';
-import * as AngularMaterialProgressSpinner from '@angular/material/progress-spinner';
-import * as AngularMaterialRadio from '@angular/material/radio';
-import * as AngularMaterialSelect from '@angular/material/select';
+import * as AngularMaterialInput from '@angular/material/legacy-input';
+import * as AngularMaterialList from '@angular/material/legacy-list';
+import * as AngularMaterialMenu from '@angular/material/legacy-menu';
+import * as AngularMaterialPaginator from '@angular/material/legacy-paginator';
+import * as AngularMaterialProgressBar from '@angular/material/legacy-progress-bar';
+import * as AngularMaterialProgressSpinner from '@angular/material/legacy-progress-spinner';
+import * as AngularMaterialRadio from '@angular/material/legacy-radio';
+import * as AngularMaterialSelect from '@angular/material/legacy-select';
 import * as AngularMaterialSidenav from '@angular/material/sidenav';
-import * as AngularMaterialSlideToggle from '@angular/material/slide-toggle';
-import * as AngularMaterialSlider from '@angular/material/slider';
-import * as AngularMaterialSnackBar from '@angular/material/snack-bar';
+import * as AngularMaterialSlideToggle from '@angular/material/legacy-slide-toggle';
+import * as AngularMaterialSlider from '@angular/material/legacy-slider';
+import * as AngularMaterialSnackBar from '@angular/material/legacy-snack-bar';
 import * as AngularMaterialSort from '@angular/material/sort';
 import * as AngularMaterialStepper from '@angular/material/stepper';
-import * as AngularMaterialTable from '@angular/material/table';
-import * as AngularMaterialTabs from '@angular/material/tabs';
+import * as AngularMaterialTable from '@angular/material/legacy-table';
+import * as AngularMaterialTabs from '@angular/material/legacy-tabs';
 import * as AngularMaterialToolbar from '@angular/material/toolbar';
-import * as AngularMaterialTooltip from '@angular/material/tooltip';
+import * as AngularMaterialTooltip from '@angular/material/legacy-tooltip';
 import * as AngularMaterialTree from '@angular/material/tree';
 import * as DragDropModule from '@angular/cdk/drag-drop';
 import * as HttpClientModule from '@angular/common/http';

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, Inject, OnInit } 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';

ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts

@@ -23,7 +23,7 @@ import { EntityType, EntityTypeResource, entityTypeTranslations } from '@shared/
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { Direction } from '@shared/models/page/sort-order';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { TimePageLink } from '@shared/models/page/page-link';
 import { Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';

ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.ts

@@ -17,7 +17,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
 import { DialogService } from '@core/services/dialog.service';

ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts

@@ -25,7 +25,7 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-import { TooltipPosition } from '@angular/material/tooltip';
+import { LegacyTooltipPosition as TooltipPosition } from '@angular/material/legacy-tooltip';
 import { AliasInfo, IAliasController } from '@core/api/widget-api.models';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TranslateService } from '@ngx-translate/core';

ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/alias/entity-alias-select.component.ts

@@ -35,7 +35,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { EntityAlias } from '@shared/models/alias.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
-import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatLegacyAutocomplete as MatAutocomplete, MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
 import { EntityAliasSelectCallbacks } from './entity-alias-select.component.models';
 import { ENTER } from '@angular/cdk/keycodes';
 import { ErrorStateMatcher } from '@angular/material/core';

ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -30,12 +30,12 @@ import {
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { PageLink } from '@shared/models/page/page-link';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { fromEvent, merge } from 'rxjs';

ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild } 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ActionStatus, AuditLog } from '@shared/models/audit-log.models';

ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts

@@ -30,7 +30,7 @@ import { AuditLogService } from '@core/http/audit-log.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { Direction } from '@shared/models/page/sort-order';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { TimePageLink } from '@shared/models/page/page-link';
 import { Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';

ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.ts

@@ -18,7 +18,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { AuditLogService } from '@core/http/audit-log.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { AuditLogMode } from '@shared/models/audit-log.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { UserId } from '@shared/models/id/user-id';

ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.ts

@@ -15,7 +15,7 @@
 ///
 
 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -96,7 +96,7 @@ import {
 import { WidgetComponentService } from '../../components/widget/widget-component.service';
 import { UntypedFormBuilder } from '@angular/forms';
 import { ItemBufferService } from '@core/services/item-buffer.service';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   EntityAliasesDialogComponent,
   EntityAliasesDialogData
@@ -144,7 +144,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import cssjs from '@core/css/css';
 import { DOCUMENT } from '@angular/common';
 import { IAliasController } from '@core/api/widget-api.models';
-import { MatButton } from '@angular/material/button';
+import { MatLegacyButton as MatButton } from '@angular/material/legacy-button';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { tap } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.ts

@@ -18,7 +18,7 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/cor
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Dashboard, WidgetLayout } from '@shared/models/dashboard.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { Widget } from '@shared/models/widget.models';

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
@@ -45,7 +45,7 @@ import {
   LayoutWidthType
 } from '@home/components/dashboard-page/layout/layout.models';
 import { Subscription } from 'rxjs';
-import { MatTooltip } from '@angular/material/tooltip';
+import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;

ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { AfterViewInit, Component, ElementRef, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
@@ -29,7 +29,7 @@ import {
   DashboardStatesDatasource
 } from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component.models';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -52,7 +52,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { IAliasController, IStateController } from '@app/core/api/widget-api.models';
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
 import { SafeStyle } from '@angular/platform-browser';
 import { distinct } from 'rxjs/operators';
 import { ResizeObserver } from '@juggle/resize-observer';

ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';

ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/edge/edge-downlink-table-config.ts

@@ -32,7 +32,7 @@ import {
 import { TimePageLink } from '@shared/models/page/page-link';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';

ui-ngx/src/app/modules/home/components/edge/edge-downlink-table.component.ts

@@ -17,7 +17,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
 import { EdgeDownlinkTableConfig } from './edge-downlink-table-config';

ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, ComponentFactoryResolver, Inject, Injector, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -32,8 +32,8 @@ import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { MAX_SAFE_PAGE_SIZE, PageLink, PageQueryParam, TimePageLink } from '@shared/models/page/page-link';
-import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort, SortDirection } from '@angular/material/sort';
 import { EntitiesDataSource } from '@home/models/datasource/entity-datasource';
 import { catchError, debounceTime, distinctUntilChanged, map, skip, tap } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts

@@ -41,7 +41,7 @@ import { EntityComponent } from './entity.component';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 import { Observable, ReplaySubject, Subscription } from 'rxjs';
-import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import { MatLegacyTab as MatTab, MatLegacyTabGroup as MatTabGroup } from '@angular/material/legacy-tabs';
 import { EntityTabsComponent } from '@home/components/entity/entity-tabs.component';
 import { deepClone, mergeDeep } from '@core/utils';
 import { entityIdEquals } from '@shared/models/id/entity-id';

ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts

@@ -20,7 +20,7 @@ import { AfterViewInit, Directive, Input, OnInit, QueryList, ViewChildren } from
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
-import { MatTab } from '@angular/material/tabs';
+import { MatLegacyTab as MatTab } from '@angular/material/legacy-tabs';
 import { BehaviorSubject } from 'rxjs';
 import { Authority } from '@app/shared/models/authority.enum';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';

ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild } 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 

ui-ngx/src/app/modules/home/components/event/event-table-config.ts

@@ -25,7 +25,7 @@ import { DebugEventType, Event, EventType, FilterEventBody } from '@shared/model
 import { TimePageLink } from '@shared/models/page/page-link';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EventService } from '@app/core/http/event.service';
 import { EventTableHeaderComponent } from '@home/components/event/event-table-header.component';

ui-ngx/src/app/modules/home/components/event/event-table.component.ts

@@ -17,7 +17,7 @@
 import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
 import { EventTableConfig } from './event-table-config';

ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.ts

@@ -17,7 +17,7 @@
 import { Component, forwardRef, Inject, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComplexFilterPredicateInfo, EntityKeyValueType } from '@shared/models/query/query.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { deepClone } from '@core/utils';
 import { ComplexFilterPredicateDialogData } from '@home/components/filter/filter-component.models';
 import { COMPLEX_FILTER_PREDICATE_DIALOG_COMPONENT_TOKEN } from '@home/components/tokens';

ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.ts

@@ -36,7 +36,7 @@ import {
   EntityKeyValueType,
   KeyFilterPredicateInfo
 } from '@shared/models/query/query.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { map } from 'rxjs/operators';
 import { ComponentType } from '@angular/cdk/portal';
 import { COMPLEX_FILTER_PREDICATE_DIALOG_COMPONENT_TOKEN } from '@home/components/tokens';

ui-ngx/src/app/modules/home/components/filter/filter-select.component.ts

@@ -32,7 +32,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { IAliasController } from '@core/api/widget-api.models';
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
-import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatLegacyAutocomplete as MatAutocomplete, MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
 import { ENTER } from '@angular/cdk/keycodes';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { FilterSelectCallbacks } from '@home/components/filter/filter-select.component.models';

ui-ngx/src/app/modules/home/components/filter/filter-text.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, UntypedFormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { KeyFilter, keyFiltersToText } from '@shared/models/query/query.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';

ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/filter/filter-user-info.component.ts

@@ -22,7 +22,7 @@ import {
   KeyFilterPredicateUserInfo, NumericOperation,
   StringOperation
 } from '@shared/models/query/query.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   FilterUserInfoDialogComponent,
   FilterUserInfoDialogData

ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.ts

@@ -17,7 +17,7 @@
 import { Component, Inject, InjectionToken } from '@angular/core';
 import { IAliasController } from '@core/api/widget-api.models';
 import { Filter, FilterInfo } from '@shared/models/query/query.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { deepClone } from '@core/utils';
 import { UserFilterDialogComponent, UserFilterDialogData } from '@home/components/filter/user-filter-dialog.component';
 

ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts

@@ -24,7 +24,7 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-import { TooltipPosition } from '@angular/material/tooltip';
+import { LegacyTooltipPosition as TooltipPosition } from '@angular/material/legacy-tooltip';
 import { IAliasController } from '@core/api/widget-api.models';
 import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TranslateService } from '@ngx-translate/core';
@@ -39,7 +39,7 @@ import {
 } from '@home/components/filter/filters-edit-panel.component';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { UserFilterDialogComponent, UserFilterDialogData } from '@home/components/filter/user-filter-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'tb-filters-edit',

ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, ElementRef, Inject, OnDestroy, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.ts

@@ -35,7 +35,7 @@ import {
   KeyFilterInfo,
   keyFilterInfosToKeyFilters
 } from '@shared/models/query/query.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { deepClone } from '@core/utils';
 import { KeyFilterDialogComponent, KeyFilterDialogData } from '@home/components/filter/key-filter-dialog.component';
 import { EntityId } from '@shared/models/id/entity-id';

ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts

@@ -15,7 +15,7 @@
 ///
 
 import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, Renderer2, ViewChild } 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts

@@ -32,7 +32,7 @@ import {
   EntityAliasFilter,
   EntityAliasInfo
 } from '@shared/models/alias.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ImportDialogComponent, ImportDialogData } from '@home/components/import-export/import-dialog.component';
 import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, map, mergeMap, tap } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts

@@ -24,7 +24,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.ts

@@ -25,7 +25,7 @@ import {
   Validator,
   Validators
 } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { AlarmCondition, AlarmConditionType } from '@shared/models/device.models';

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts

@@ -26,7 +26,7 @@ import {
   Validators
 } from '@angular/forms';
 import { AlarmRule } from '@shared/models/device.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isDefinedAndNotNull } from '@core/utils';
 import {

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.ts

@@ -22,7 +22,7 @@ import {
   AlarmScheduleTypeTranslationMap, dayOfWeekTranslations,
   getAlarmScheduleRangeText, utcTimestampToTimeOfDay
 } from '@shared/models/device.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   AlarmScheduleDialogComponent,
   AlarmScheduleDialogData

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts

@@ -38,7 +38,7 @@ import {
   utcTimestampToTimeOfDay
 } from '@shared/models/device.models';
 import { isDefined, isDefinedAndNotNull } from '@core/utils';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
 import { getDefaultTimezone } from '@shared/models/time/time.models';
 
 @Component({

ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.ts

@@ -28,7 +28,7 @@ import {
   Validators
 } from '@angular/forms';
 import { AlarmRule, alarmRuleValidator } from '@shared/models/device.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Subscription } from 'rxjs';
 import { AlarmSeverity, alarmSeverityTranslations } from '@shared/models/alarm.models';
 import { EntityId } from '@shared/models/id/entity-id';

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.ts

@@ -26,9 +26,9 @@ import {
   Validators
 } from '@angular/forms';
 import { AlarmRule, DeviceProfileAlarm, deviceProfileAlarmValidator } from '@shared/models/device.models';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
 import { EntityId } from '@shared/models/id/entity-id';
 import { UtilsService } from '@core/services/utils.service';
 

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.ts

@@ -33,7 +33,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DeviceProfileAlarm, deviceProfileAlarmValidator } from '@shared/models/device.models';
 import { guid } from '@core/utils';
 import { Subscription } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({

ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts

@@ -37,8 +37,8 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { entityIdEquals } from '@shared/models/id/entity-id';
 import { TruncatePipe } from '@shared//pipe/truncate.pipe';
 import { ENTER } from '@angular/cdk/keycodes';
-import { MatDialog } from '@angular/material/dialog';
-import { MatAutocomplete } from '@angular/material/autocomplete';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatLegacyAutocomplete as MatAutocomplete } from '@angular/material/legacy-autocomplete';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';
 import { AssetProfileId } from '@shared/models/id/asset-profile-id';

ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.ts

@@ -24,7 +24,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts

@@ -39,12 +39,12 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { entityIdEquals } from '@shared/models/id/entity-id';
 import { TruncatePipe } from '@shared//pipe/truncate.pipe';
 import { ENTER } from '@angular/cdk/keycodes';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DeviceProfileId } from '@shared/models/id/device-profile-id';
 import { DeviceProfile, DeviceProfileInfo, DeviceProfileType, DeviceTransportType } from '@shared/models/device.models';
 import { DeviceProfileService } from '@core/http/device-profile.service';
 import { DeviceProfileDialogComponent, DeviceProfileDialogData } from './device-profile-dialog.component';
-import { MatAutocomplete } from '@angular/material/autocomplete';
+import { MatLegacyAutocomplete as MatAutocomplete } from '@angular/material/legacy-autocomplete';
 import { AddDeviceProfileDialogComponent, AddDeviceProfileDialogData } from './add-device-profile-dialog.component';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';

ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.ts

@@ -24,7 +24,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.ts

@@ -20,7 +20,7 @@ import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
-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 { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { AttributesNameValueMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.ts

@@ -19,7 +19,7 @@ import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_AC
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isEmpty, isUndefinedOrNull } from '@core/utils';
 import { Lwm2mAttributesDialogComponent, Lwm2mAttributesDialogData } from './lwm2m-attributes-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { AttributesNameValueMap } from './lwm2m-profile-config.models';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.ts

@@ -20,7 +20,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import {
   ServerConfigType,
   ServerConfigTypeTranslationMap

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.ts

@@ -28,7 +28,7 @@ import { of, Subscription } from 'rxjs';
 import { ServerSecurityConfig } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DialogService } from '@core/services/dialog.service';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Lwm2mBootstrapAddConfigServerDialogComponent } from '@home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component';
 import { mergeMap } from 'rxjs/operators';
 import { DeviceProfileService } from '@core/http/device-profile.service';

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.ts

@@ -20,7 +20,7 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
-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';
 
 export interface Lwm2mObjectAddInstancesData {
   instancesId: Set<number>;

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.ts

@@ -26,7 +26,7 @@ import {
 import { INSTANCES_ID_VALUE_MAX, INSTANCES_ID_VALUE_MIN } from './lwm2m-profile-config.models';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
 
 @Component({
   selector: 'tb-profile-lwm2m-object-add-instances-list',

ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.ts

@@ -30,7 +30,7 @@ import {
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Instance, ObjectLwM2M } from './lwm2m-profile-config.models';
 import { deepClone, isDefinedAndNotNull, isEqual } from '@core/utils';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   Lwm2mObjectAddInstancesData,
   Lwm2mObjectAddInstancesDialogComponent

ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.ts

@@ -31,7 +31,7 @@ import { entityIdEquals } from '@shared/models/id/entity-id';
 import { TruncatePipe } from '@shared//pipe/truncate.pipe';
 import { ENTER } from '@angular/cdk/keycodes';
 import { TenantProfile } from '@shared/models/tenant.model';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { TenantProfileDialogComponent, TenantProfileDialogData } from './tenant-profile-dialog.component';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';

ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.ts

@@ -24,7 +24,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.ts

@@ -15,7 +15,7 @@
 ///
 
 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.ts

@@ -24,7 +24,7 @@ import {
   NG_VALUE_ACCESSOR,
   Validator
 } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   RateLimitsDetailsDialogComponent,
   RateLimitsDetailsDialogData

ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts

@@ -26,12 +26,12 @@ import {
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { PageLink } from '@shared/models/page/page-link';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { EntityRelationService } from '@core/http/entity-relation.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';

ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts

@@ -28,7 +28,7 @@ import { BaseData } from '@shared/models/base-data';
 import { EntityService } from '@core/http/entity.service';
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
 import { RuleChainService } from '@core/http/rule-chain.service';
-import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
 import { RuleChainType } from '@app/shared/models/rule-chain.models';
 
 @Component({

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts

@@ -33,7 +33,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models';
-import { MatCheckbox } from '@angular/material/checkbox';
+import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { RemoveOtherEntitiesConfirmComponent } from '@home/components/vc/remove-other-entities-confirm.component';
 

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts

@@ -37,7 +37,7 @@ import { getAceDiff } from '@shared/models/ace/ace.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { entityExportDataToJsonString, VersionLoadResult } from '@shared/models/vc.models';
 import { Ace } from 'ace-builds';
-import { MatButton } from '@angular/material/button';
+import { MatLegacyButton as MatButton } from '@angular/material/legacy-button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { EntityVersionRestoreComponent } from '@home/components/vc/entity-version-restore.component';
 

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

@@ -39,7 +39,7 @@ import { PageLink } from '@shared/models/page/page-link';
 import { catchError, debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators';
 import { EntityVersion, VersionCreationResult, VersionLoadResult } from '@shared/models/vc.models';
 import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
@@ -48,7 +48,7 @@ import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autoco
 import { isNotEmptyStr } from '@core/utils';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { EntityVersionCreateComponent } from '@home/components/vc/entity-version-create.component';
-import { MatButton } from '@angular/material/button';
+import { MatLegacyButton as MatButton } from '@angular/material/legacy-button';
 import { EntityVersionRestoreComponent } from '@home/components/vc/entity-version-restore.component';
 import { EntityVersionDiffComponent } from '@home/components/vc/entity-version-diff.component';
 import { ComplexVersionCreateComponent } from '@home/components/vc/complex-version-create.component';

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts

@@ -30,11 +30,11 @@ import { TranslateService } from '@ngx-translate/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, first, tap } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, ElementRef, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {

ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts

@@ -38,7 +38,7 @@ import {
 } from '@angular/forms';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { EntityService } from '@core/http/entity.service';
 import { DataKeysCallbacks } from '@home/components/widget/data-keys.component.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';

ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts

@@ -42,8 +42,8 @@ import { filter, map, mergeMap, publishReplay, refCount, share, tap } from 'rxjs
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { TranslateService } from '@ngx-translate/core';
-import { MatAutocomplete } from '@angular/material/autocomplete';
-import { MatChipInputEvent, MatChipList } from '@angular/material/chips';
+import { MatLegacyAutocomplete as MatAutocomplete } from '@angular/material/legacy-autocomplete';
+import { MatLegacyChipInputEvent as MatChipInputEvent, MatLegacyChipList as MatChipList } from '@angular/material/legacy-chips';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { DataKey, DatasourceType, JsonSettingsSchema, Widget, widgetType } from '@shared/models/widget.models';
@@ -54,7 +54,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
 import { DialogService } from '@core/services/dialog.service';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {
   DataKeyConfigDialogComponent,
   DataKeyConfigDialogData

ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog-container.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-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 {
   Component,
   ComponentFactory,

ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { Directive, InjectionToken } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';

ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts

@@ -16,7 +16,7 @@
 
 import { Inject, Injectable, Type } from '@angular/core';
 import { Observable } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from '@core/auth/auth.service';
 import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';

ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts

@@ -23,7 +23,7 @@ import {
   ViewChild,
   ViewContainerRef
 } 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 { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';

ui-ngx/src/app/modules/home/components/widget/lib/alarm-filter-panel.component.ts

@@ -22,7 +22,7 @@ import {
   alarmSeverityTranslations
 } from '@shared/models/alarm.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { OverlayRef } from '@angular/cdk/overlay';
 

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -53,7 +53,7 @@ import { BehaviorSubject, forkJoin, fromEvent, merge, Observable, Subscription }
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { entityTypeTranslations } from '@shared/models/entity-type.models';
 import { debounceTime, distinctUntilChanged, map, take, tap } from 'rxjs/operators';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort, SortDirection } from '@angular/material/sort';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import {
@@ -105,7 +105,7 @@ import {
   AlarmDetailsDialogComponent,
   AlarmDetailsDialogData
 } from '@home/components/alarm/alarm-details-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { DialogService } from '@core/services/dialog.service';
 import { AlarmService } from '@core/http/alarm.service';

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts

@@ -44,7 +44,7 @@ import { KeyValue } from '@angular/common';
 import * as _moment from 'moment';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { MatSelect } from '@angular/material/select';
+import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
 import { Subscription } from 'rxjs';
 import { HistoryWindowType, TimewindowType } from '@shared/models/time/time.models';
 import { isDefined } from '@core/utils';