diff --git a/package.json b/package.json
index fcaa8dff775fc6b1b3e197e6e4c275386e65aee0..db5b8f9e3d2d82ad00cbf76609206ec4b99b1ed3 100644
--- a/package.json
+++ b/package.json
@@ -23,24 +23,25 @@
"author": "",
"license": "ISC",
"devDependencies": {
- "@angular/animations": "^7.2.15",
- "@angular/cdk": "^7.3.7",
+ "@angular/animations": "^9.0.0",
+ "@angular/cdk": "^9.0.0",
"@angular/cdk-experimental": "^7.3.7",
- "@angular/common": "^7.2.15",
- "@angular/compiler": "^7.2.15",
- "@angular/compiler-cli": "^7.2.15",
- "@angular/core": "^7.2.15",
- "@angular/elements": "^7.2.15",
- "@angular/forms": "^7.2.15",
+ "@angular/common": "^9.0.0",
+ "@angular/compiler": "^9.0.0",
+ "@angular/compiler-cli": "^9.0.0",
+ "@angular/core": "^9.0.0",
+ "@angular/elements": "^9.0.0",
+ "@angular/forms": "^9.0.0",
"@angular/http": "^7.2.15",
- "@angular/language-service": "^7.2.15",
- "@angular/material": "^7.3.7",
- "@angular/platform-browser": "^7.2.15",
- "@angular/platform-browser-dynamic": "^7.2.15",
- "@angular/router": "^7.2.15",
+ "@angular/language-service": "^9.0.0",
+ "@angular/material": "^9.0.0",
+ "@angular/platform-browser": "^9.0.0",
+ "@angular/platform-browser-dynamic": "^9.0.0",
+ "@angular/router": "^9.0.0",
+ "@material/dialog": "^4.0.0",
"@ngrx/effects": "^7.4.0",
"@ngrx/store": "^7.4.0",
- "@ngtools/webpack": "^6.0.5",
+ "@ngtools/webpack": "^9.0.1",
"@types/jasmine": "^3.3.12",
"@types/node": "^12.0.0",
"@types/webpack-env": "^1.13.6",
@@ -71,24 +72,24 @@
"kg-dataset-previewer": "0.0.10",
"lodash.merge": "^4.6.2",
"mini-css-extract-plugin": "^0.8.0",
- "ngx-bootstrap": "3.0.1",
+ "ngx-bootstrap": "^5.3.2",
"node-sass": "^4.12.0",
"protractor": "^5.4.2",
"raw-loader": "^0.5.1",
"reflect-metadata": "^0.1.12",
- "rxjs": "6.5.1",
+ "rxjs": "6.5.4",
"sass-loader": "^7.2.0",
"showdown": "^1.9.1",
"ts-loader": "^4.3.0",
"ts-node": "^8.1.0",
- "typescript": "3.2",
+ "typescript": "^3.7.5",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.2",
"webpack-closure-compiler": "^2.1.6",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2",
- "zone.js": "^0.9.1"
+ "zone.js": "^0.10.2"
},
"dependencies": {
"hbp-connectivity-component": "^0.1.0"
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 3dcb365b3f578d52eb83be5b462fabdc23dfe487..f0385c8e45bf12f32381cc81dbd200e757b0f645 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -28,7 +28,6 @@ import { AtlasViewerAPIServices } from "./atlasViewer.apiService.service";
import { AtlasViewerConstantsServices, UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW } from "./atlasViewer.constantService.service";
import { WidgetServices } from "./widgetUnit/widgetService.service";
-import { MatBottomSheet, MatBottomSheetRef, MatDialog, MatDialogRef, MatSnackBar, MatSnackBarRef } from "@angular/material";
import { TabsetComponent } from "ngx-bootstrap/tabs";
import { LocalFileService } from "src/services/localFile.service";
import { LoggingService } from "src/services/logging.service";
@@ -42,6 +41,9 @@ import { getViewer, isSame } from "src/util/fn";
import { NehubaContainer } from "../ui/nehubaContainer/nehubaContainer.component";
import { colorAnimation } from "./atlasViewer.animation"
import { MouseHoverDirective } from "src/util/directives/mouseOver.directive";
+import {MatBottomSheet, MatBottomSheetRef} from "@angular/material/bottom-sheet";
+import {MatSnackBar, MatSnackBarRef} from "@angular/material/snack-bar";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
/**
* TODO
diff --git a/src/atlasViewer/widgetUnit/widgetUnit.component.ts b/src/atlasViewer/widgetUnit/widgetUnit.component.ts
index de623a93463b4d2cfcdd21ed8f1141e4aa7dd261..3b1db532cbcbdb60f334a5e09689ac9b9ad39b06 100644
--- a/src/atlasViewer/widgetUnit/widgetUnit.component.ts
+++ b/src/atlasViewer/widgetUnit/widgetUnit.component.ts
@@ -13,7 +13,7 @@ import { WidgetServices } from "./widgetService.service";
})
export class WidgetUnit implements OnInit, OnDestroy {
- @ViewChild('container', {read: ViewContainerRef}) public container: ViewContainerRef
+ @ViewChild('container', {read: ViewContainerRef, static: true}) public container: ViewContainerRef
@HostBinding('attr.state')
public state: 'docked' | 'floating' = 'docked'
diff --git a/src/components/confirmDialog/confirmDialog.component.ts b/src/components/confirmDialog/confirmDialog.component.ts
index c26e524716eac8b4d2c6a3eff12b8780c43452e2..c27500612afb8eec97047344c7662343cf569c75 100644
--- a/src/components/confirmDialog/confirmDialog.component.ts
+++ b/src/components/confirmDialog/confirmDialog.component.ts
@@ -1,5 +1,5 @@
import { Component, Inject, Input } from "@angular/core";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
@Component({
selector: 'confirm-dialog-component',
diff --git a/src/components/dialog/dialog.component.ts b/src/components/dialog/dialog.component.ts
index bc8828143a862c28655047cee163f0b6e6baebae..969cbc13548a2d6fc3a8f2b9b2666579343cd336 100644
--- a/src/components/dialog/dialog.component.ts
+++ b/src/components/dialog/dialog.component.ts
@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
import { fromEvent, Observable, Subscription } from "rxjs";
import { filter, share } from "rxjs/operators";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
@Component({
selector: 'dialog-component',
diff --git a/src/components/markdown/markdown.component.ts b/src/components/markdown/markdown.component.ts
index 3fc84636c9df293d65c3caf744ed45c4a71c8a7b..1e3d918f15280ff9b75c348aa9319da6550ae755 100644
--- a/src/components/markdown/markdown.component.ts
+++ b/src/components/markdown/markdown.component.ts
@@ -30,7 +30,7 @@ export class MarkdownDom implements OnChanges, OnInit {
}
}
- @ViewChild('ngContentWrapper', {read : ElementRef})
+ @ViewChild('ngContentWrapper', {read : ElementRef, static: true})
public contentWrapper: ElementRef
}
diff --git a/src/services/dialogService.service.ts b/src/services/dialogService.service.ts
index 8fda9fc2e309ff56115b0849c3d480dfee4bd03e..05911fdc7eb56741c4789f666d8c39ce90be1dd9 100644
--- a/src/services/dialogService.service.ts
+++ b/src/services/dialogService.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from "@angular/core";
-import { MatDialog, MatDialogRef } from "@angular/material";
import { ConfirmDialogComponent } from "src/components/confirmDialog/confirmDialog.component";
import { DialogComponent } from "src/components/dialog/dialog.component";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
@Injectable({
providedIn: 'root',
diff --git a/src/services/uiService.service.ts b/src/services/uiService.service.ts
index 9c65624f306538c566bb894f39589f8581542407..26917c95d54f317b74020ef93d04fa36f17425a8 100644
--- a/src/services/uiService.service.ts
+++ b/src/services/uiService.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from "@angular/core";
-import { MatSnackBar, MatSnackBarConfig } from "@angular/material";
import { AtlasViewerAPIServices } from "src/atlasViewer/atlasViewer.apiService.service";
import { ToastHandler } from "src/util/pluginHandlerClasses/toastHandler";
+import {MatSnackBar, MatSnackBarConfig} from "@angular/material/snack-bar";
@Injectable({
providedIn: 'root',
diff --git a/src/ui/config/config.component.ts b/src/ui/config/config.component.ts
index 221a79337d487e24eb863c5c9d9fc27e7bd85bba..4eef2b4403cc18034229655a65f8befc97d866a2 100644
--- a/src/ui/config/config.component.ts
+++ b/src/ui/config/config.component.ts
@@ -1,5 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core'
-import { MatSliderChange, MatSlideToggleChange } from '@angular/material';
import { select, Store } from '@ngrx/store';
import { combineLatest, Observable, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith } from 'rxjs/operators';
@@ -8,6 +7,8 @@ import { NG_VIEWER_ACTION_TYPES, SUPPORTED_PANEL_MODES } from 'src/services/stat
import { VIEWER_CONFIG_ACTION_TYPES, StateInterface as ViewerConfiguration } from 'src/services/state/viewerConfig.store'
import { IavRootStoreInterface } from 'src/services/stateStore.service';
import { isIdentityQuat } from '../nehubaContainer/util';
+import {MatSlideToggleChange} from "@angular/material/slide-toggle";
+import {MatSliderChange} from "@angular/material/slider";
const GPU_TOOLTIP = `Higher GPU usage can cause crashes on lower end machines`
const ANIMATION_TOOLTIP = `Animation can cause slowdowns in lower end machines`
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
index 8d3ad0fd8df80eae0373600c9176766cd6f0a384..d40fee0933041d63a08b9dad2e5617839721db44 100644
--- a/src/ui/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -36,7 +36,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy, A
public defaultColorMap: Map<string, Map<number, {red: number, green: number, blue: number}>>
public math = Math
- @ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef
+ @ViewChild('connectivityComponent', {read: ElementRef, static: true}) public connectivityComponentElement: ElementRef
constructor(
private store$: Store<any>,
diff --git a/src/ui/databrowserModule/databrowser.service.ts b/src/ui/databrowserModule/databrowser.service.ts
index b9e069839ecd0308f483643a3a9b4ab559688641..b635bd463ad63894356af48e3af1ed94bf72d898 100644
--- a/src/ui/databrowserModule/databrowser.service.ts
+++ b/src/ui/databrowserModule/databrowser.service.ts
@@ -1,6 +1,5 @@
import { HttpClient } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
-import { ComponentRef } from "@angular/core/src/render3";
+import {ComponentRef, Injectable, OnDestroy} from "@angular/core";
import { select, Store } from "@ngrx/store";
import { BehaviorSubject, combineLatest, from, fromEvent, Observable, of, Subscription } from "rxjs";
import { catchError, debounceTime, distinctUntilChanged, filter, map, shareReplay, switchMap, tap, withLatestFrom } from "rxjs/operators";
diff --git a/src/ui/databrowserModule/databrowser.useEffect.ts b/src/ui/databrowserModule/databrowser.useEffect.ts
index 4529a75447575ff32e38ae13658f779b3240b128..f59176760a1dde918e854dbd722b645bb841a668 100644
--- a/src/ui/databrowserModule/databrowser.useEffect.ts
+++ b/src/ui/databrowserModule/databrowser.useEffect.ts
@@ -12,7 +12,7 @@ import { KgSingleDatasetService } from "./kgSingleDatasetService.service";
import { determinePreviewFileType, PREVIEW_FILE_TYPES } from "./preview/previewFileIcon.pipe";
import { GLSL_COLORMAP_JET } from "src/atlasViewer/atlasViewer.constantService.service";
import { SHOW_BOTTOM_SHEET } from "src/services/state/uiState.store";
-import { MatSnackBar, MatDialog } from "@angular/material";
+import {MatSnackBar} from "@angular/material/snack-bar";
const savedFav$ = of(window.localStorage.getItem(LOCAL_STORAGE_CONST.FAV_DATASET)).pipe(
map(string => JSON.parse(string)),
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
index 9dae8425811fec73ef377b61573ddb341cda54e9..15a950c512ce27168d3e08b7412107ecea9f4f21 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
@@ -1,11 +1,11 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Optional} from "@angular/core";
-import { MAT_DIALOG_DATA } from "@angular/material";
import {
AtlasViewerConstantsServices,
DatabrowserService,
KgSingleDatasetService,
SingleDatasetBase,
} from "../singleDataset.base";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
@Component({
selector: 'single-dataset-view',
diff --git a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts
index 59a931934d054847ef9e49862af3ead35a6a7f2e..08dcdc171aeae8d7ff935fe2a2662a2178b3f119 100644
--- a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts
+++ b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.component.ts
@@ -4,8 +4,9 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/
KgSingleDatasetService,
AtlasViewerConstantsServices,
} from "../singleDataset.base";
-import { MatDialog, MatSnackBar } from "@angular/material";
import { SingleDatasetView } from "../detailedView/singleDataset.component";
+import {MatDialog} from "@angular/material/dialog";
+import {MatSnackBar} from "@angular/material/snack-bar";
@Component({
selector: 'single-dataset-list-view',
diff --git a/src/ui/layerbrowser/layerbrowser.component.ts b/src/ui/layerbrowser/layerbrowser.component.ts
index ff5df6f6f90b7eb7f13ff242dcfa52fa4c261073..e4058dbe89db9ad207a30ff0941df5f6ce80af92 100644
--- a/src/ui/layerbrowser/layerbrowser.component.ts
+++ b/src/ui/layerbrowser/layerbrowser.component.ts
@@ -8,7 +8,7 @@ import { NG_VIEWER_ACTION_TYPES } from "src/services/state/ngViewerState.store";
import { getViewer } from "src/util/fn";
import { INgLayerInterface } from "../../atlasViewer/atlasViewer.component";
import { FORCE_SHOW_SEGMENT, getNgIds, isDefined, REMOVE_NG_LAYER, safeFilter, ViewerStateInterface } from "../../services/stateStore.service";
-import { MatSliderChange } from "@angular/material";
+import {MatSliderChange} from "@angular/material/slider";
@Component({
selector : 'layer-browser',
diff --git a/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.component.ts b/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.component.ts
index 7d8c1de62bef47543e0a8029ee0d8a733f202f93..df18cdd160fa371af8df8a9d4ac229898b199358 100644
--- a/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.component.ts
+++ b/src/ui/nehubaContainer/mobileOverlay/mobileOverlay.component.ts
@@ -31,9 +31,9 @@ div:not(.active) > span:before
export class MobileOverlay implements OnInit, OnDestroy {
@Input() public tunableProperties: string [] = []
@Output() public deltaValue: EventEmitter<{delta: number, selectedProp: string}> = new EventEmitter()
- @ViewChild('initiator', {read: ElementRef}) public initiator: ElementRef
- @ViewChild('mobileMenuContainer', {read: ElementRef}) public menuContainer: ElementRef
- @ViewChild('intersector', {read: ElementRef}) public intersector: ElementRef
+ @ViewChild('initiator', {read: ElementRef, static: true}) public initiator: ElementRef
+ @ViewChild('mobileMenuContainer', {read: ElementRef, static: true}) public menuContainer: ElementRef
+ @ViewChild('intersector', {read: ElementRef, static: true}) public intersector: ElementRef
private _onDestroySubject: Subject<boolean> = new Subject()
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 57f033a841748584ad4fa859fc88c1be5c166f40..15ab15977a0f2839d443ea4164dfa959bb217fb7 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -75,7 +75,7 @@ const scanFn: (acc: [boolean, boolean, boolean], curr: CustomEvent) => [boolean,
export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
- @ViewChild('container', {read: ViewContainerRef}) public container: ViewContainerRef
+ @ViewChild('container', {read: ViewContainerRef, static: true}) public container: ViewContainerRef
private nehubaViewerFactory: ComponentFactory<NehubaViewerUnit>
diff --git a/src/ui/searchSideNav/searchSideNav.component.ts b/src/ui/searchSideNav/searchSideNav.component.ts
index 2bbacbb6e0e8ede1e19f55d4e7102ae237301fcd..ccc9b068fa8d4a492d881e0587368a531baba131 100644
--- a/src/ui/searchSideNav/searchSideNav.component.ts
+++ b/src/ui/searchSideNav/searchSideNav.component.ts
@@ -1,5 +1,4 @@
import { Component, EventEmitter, OnDestroy, Output, TemplateRef, ViewChild } from "@angular/core";
-import { MatDialog, MatDialogRef, MatSnackBar } from "@angular/material";
import { select, Store } from "@ngrx/store";
import {Observable, Subscription} from "rxjs";
import { filter, map, mapTo, scan, startWith } from "rxjs/operators";
@@ -15,6 +14,8 @@ import { LayerBrowser } from "../layerbrowser/layerbrowser.component";
import { trackRegionBy } from '../viewerStateController/regionHierachy/regionHierarchy.component'
import { determinePreviewFileType, PREVIEW_FILE_TYPES } from "../databrowserModule/preview/previewFileIcon.pipe";
import { DS_PREVIEW_URL } from 'src/util/constants'
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {MatSnackBar} from "@angular/material/snack-bar";
@Component({
selector: 'search-side-nav',
diff --git a/src/ui/sharedModules/angularMaterial.module.ts b/src/ui/sharedModules/angularMaterial.module.ts
index f780ed86929a9b73958e8dbbe593afe0319f922a..67a76f2bfeeb97f148019a880bde7e75b3f54c4d 100644
--- a/src/ui/sharedModules/angularMaterial.module.ts
+++ b/src/ui/sharedModules/angularMaterial.module.ts
@@ -1,34 +1,31 @@
-import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'
-import {
- MAT_DIALOG_DEFAULT_OPTIONS,
- MatAutocompleteModule,
- MatBadgeModule,
- MatBottomSheetModule,
- MatButtonModule,
- MatCardModule,
- MatCheckboxModule,
- MatChipsModule,
- MatDialogConfig,
- MatDialogModule,
- MatDividerModule,
- MatExpansionModule,
- MatGridListModule,
- MatIconModule,
- MatInputModule,
- MatListModule,
- MatMenuModule,
- MatRippleModule,
- MatSelectModule,
- MatSidenavModule,
- MatSliderModule,
- MatSlideToggleModule,
- MatSnackBarModule,
- MatTabsModule,
- MatTooltipModule,
-} from '@angular/material';
+import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig, MatDialogModule} from "@angular/material/dialog";
+import {MatButtonModule} from "@angular/material/button";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+import {MatCardModule} from "@angular/material/card";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {NgModule} from "@angular/core";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatBadgeModule} from "@angular/material/badge";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatSelectModule} from "@angular/material/select";
+import {MatChipsModule} from "@angular/material/chips";
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'
+import {MatInputModule} from "@angular/material/input";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {MatListModule} from "@angular/material/list";
+import {MatBottomSheetModule} from "@angular/material/bottom-sheet";
+import {MatRippleModule} from "@angular/material/core";
+import {MatSliderModule} from "@angular/material/slider";
import {DragDropModule} from "@angular/cdk/drag-drop";
-import { NgModule } from '@angular/core';
+import {MatGridListModule} from "@angular/material/grid-list";
+import {MatIconModule} from "@angular/material/icon";
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatMenuModule} from "@angular/material/menu";
+
const defaultDialogOption: MatDialogConfig = new MatDialogConfig()
diff --git a/src/ui/signinBanner/signinBanner.components.ts b/src/ui/signinBanner/signinBanner.components.ts
index 2025b38e7ce95275b8a853b2f9dee44783a93d5f..0e9c9cc975dc52743682910823bee131cd6d5af7 100644
--- a/src/ui/signinBanner/signinBanner.components.ts
+++ b/src/ui/signinBanner/signinBanner.components.ts
@@ -7,12 +7,13 @@ import {
TemplateRef,
ViewChild
} from "@angular/core";
-import { MatBottomSheet, MatDialog, MatDialogRef } from "@angular/material";
import { select, Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { AuthService, IUser } from "src/services/auth.service";
import { IavRootStoreInterface, IDataEntry } from "src/services/stateStore.service";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {MatBottomSheet} from "@angular/material/bottom-sheet";
@Component({
selector: 'signin-banner',
diff --git a/src/ui/viewerStateController/regionSearch/regionSearch.component.ts b/src/ui/viewerStateController/regionSearch/regionSearch.component.ts
index a5c3b12a235d91ec21c7ec569b6ab5b1685e6c3d..0b013fd3c6a2f82a9c1fb6f913c0a45a002e62fe 100644
--- a/src/ui/viewerStateController/regionSearch/regionSearch.component.ts
+++ b/src/ui/viewerStateController/regionSearch/regionSearch.component.ts
@@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from "@angular/core";
import { FormControl } from "@angular/forms";
-import { MatAutocompleteSelectedEvent, MatDialog } from "@angular/material";
import { select, Store } from "@ngrx/store";
import { combineLatest, Observable } from "rxjs";
import { debounceTime, distinctUntilChanged, filter, map, shareReplay, startWith, take, tap } from "rxjs/operators";
@@ -10,6 +9,8 @@ import { ADD_TO_REGIONS_SELECTION_WITH_IDS, CHANGE_NAVIGATION, SELECT_REGIONS }
import { generateLabelIndexId, getMultiNgIdsRegionsLabelIndexMap, IavRootStoreInterface } from "src/services/stateStore.service";
import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "../viewerState.base";
import { LoggingService } from "src/services/logging.service";
+import {MatDialog} from "@angular/material/dialog";
+import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
const filterRegionBasedOnText = searchTerm => region => region.name.toLowerCase().includes(searchTerm.toLowerCase())
|| (region.relatedAreas && region.relatedAreas.some(relatedArea => relatedArea.name && relatedArea.name.toLowerCase().includes(searchTerm.toLowerCase())))
diff --git a/src/ui/viewerStateController/viewerState.base.ts b/src/ui/viewerStateController/viewerState.base.ts
index 6a3804835b723ac36106c27806be836211ceba6a..870eed9cd2f10f2df135bada867662b2f541e4aa 100644
--- a/src/ui/viewerStateController/viewerState.base.ts
+++ b/src/ui/viewerStateController/viewerState.base.ts
@@ -1,11 +1,12 @@
import { OnInit, TemplateRef, ViewChild } from "@angular/core";
-import { MatBottomSheet, MatBottomSheetRef, MatSelectChange } from "@angular/material";
import { select, Store } from "@ngrx/store";
import { Observable, Subscription } from "rxjs";
import { distinctUntilChanged, filter, shareReplay } from "rxjs/operators";
import { DialogService } from "src/services/dialogService.service";
import { RegionSelection } from "src/services/state/userConfigState.store";
import { IavRootStoreInterface, SELECT_REGIONS, USER_CONFIG_ACTION_TYPES } from "src/services/stateStore.service";
+import {MatSelectChange} from "@angular/material/select";
+import {MatBottomSheet, MatBottomSheetRef} from "@angular/material/bottom-sheet";
const ACTION_TYPES = {
SINGLE_CLICK_ON_REGIONHIERARCHY: 'SINGLE_CLICK_ON_REGIONHIERARCHY',
diff --git a/src/ui/viewerStateController/viewerStateCFull/viewerState.component.ts b/src/ui/viewerStateController/viewerStateCFull/viewerState.component.ts
index b1200c808523a2fc75b667016bca27465c97e3dd..5ef23c6282ac4ea8fccb0982f43b1e1f961a574e 100644
--- a/src/ui/viewerStateController/viewerStateCFull/viewerState.component.ts
+++ b/src/ui/viewerStateController/viewerStateCFull/viewerState.component.ts
@@ -1,10 +1,10 @@
import { Component } from "@angular/core";
-import { MatBottomSheet } from "@angular/material";
import { Store } from "@ngrx/store";
import { DialogService } from "src/services/dialogService.service";
import { IavRootStoreInterface } from "src/services/stateStore.service";
import { ViewerStateBase } from '../viewerState.base'
+import {MatBottomSheet} from "@angular/material/bottom-sheet";
@Component({
selector: 'viewer-state-controller',
diff --git a/src/ui/viewerStateController/viewerStateCMini/viewerStateMini.component.ts b/src/ui/viewerStateController/viewerStateCMini/viewerStateMini.component.ts
index c59b21bab288ae507a0e268a2a901d33e540c1c2..66ff71b0c37b93d3ecba2c26980e90b1fa4f22f5 100644
--- a/src/ui/viewerStateController/viewerStateCMini/viewerStateMini.component.ts
+++ b/src/ui/viewerStateController/viewerStateCMini/viewerStateMini.component.ts
@@ -1,10 +1,10 @@
import { Component } from "@angular/core";
-import { MatBottomSheet } from "@angular/material";
import { Store } from "@ngrx/store";
import { DialogService } from "src/services/dialogService.service";
import { IavRootStoreInterface } from "src/services/stateStore.service";
import { ViewerStateBase } from '../viewerState.base'
+import {MatBottomSheet} from "@angular/material/bottom-sheet";
@Component({
selector: 'viewer-state-mini',
diff --git a/src/util/directives/dragDrop.directive.ts b/src/util/directives/dragDrop.directive.ts
index f8f82509fef2e88d23bed73241fed5a8f255c7b0..4f2689b7bfa41878098fa1c6d87c15c45c20e7be 100644
--- a/src/util/directives/dragDrop.directive.ts
+++ b/src/util/directives/dragDrop.directive.ts
@@ -1,7 +1,7 @@
import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output } from "@angular/core";
-import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from "@angular/material";
import { fromEvent, merge, Observable, of, Subscription } from "rxjs";
import { debounceTime, map, scan, switchMap } from "rxjs/operators";
+import {MatSnackBar, MatSnackBarRef, SimpleSnackBar} from "@angular/material/snack-bar";
@Directive({
selector: '[drag-drop]',