codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.scss

@@ -2,44 +2,36 @@
 
 cc-global-configuration-button button {
 	margin: 0;
+	padding: 0;
 
 	cc-action-icon {
-		margin-left: 4px;
+		margin-left: 12px;
 	}
 
 	&:hover cc-action-icon {
-		background-color: rgb(0, 124, 112);
+		background-color: theme.$cc-emphasized-color;
 	}
 }
 
-.cc-global-configuration-dialog .mat-dialog-container {
-	width: 50vw;
-	padding: 0;
-
-	.cc-global-configuration-align-right {
-		float: right;
-
-		.close-button {
-			padding-bottom: 5px;
-		}
-	}
+.cc-global-configuration-dialog .mat-mdc-dialog-container {
+	width: 36vw;
+	min-width: 600px;
 
 	.cc-global-configuration-dialog-content {
-		margin: 8px;
-		padding: 0 15px;
-	}
-
-	[mat-dialog-close] {
-		color: theme.$cc-primary-color;
+		padding: 0 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 26px;
 	}
 
 	cc-map-layout-selection,
 	cc-display-quality-selection {
-		display: block;
-		margin-bottom: 8px;
-
 		> mat-form-field {
 			width: 100%;
+
+			.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+				display: none;
+			}
 		}
 
 		.cc-tree-maps-max-tree-map-files {
@@ -49,21 +41,23 @@ cc-global-configuration-button button {
 	}
 
 	.cc-global-configuration-toggle-option {
-		margin-bottom: 16px;
-
-		mat-slide-toggle {
-			display: block;
-			margin-bottom: 8px;
-		}
+		display: flex;
+		flex-direction: column;
+		gap: inherit;
 	}
 
-	.weblink {
-		display: block;
-		color: rgba(0, 0, 0, 0.870588);
-		text-decoration: none;
+	.cc-global-configuration-links-list {
+		display: flex;
+		gap: 16px;
+
+		.weblink {
+			display: block;
+			color: rgba(0, 0, 0, 0.870588);
+			text-decoration: none;
 
-		i {
-			margin-right: 16px;
+			.fa {
+				margin: 8px;
+			}
 		}
 	}
 }

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.component.ts

@@ -1,14 +1,15 @@
-import "./globalConfigurationButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { GlobalConfigurationDialogComponent } from "./globalConfigurationDialog/globalConfigurationDialog.component"
 
 @Component({
 	selector: "cc-global-configuration-button",
-	template: require("./globalConfigurationButton.component.html")
+	templateUrl: "./globalConfigurationButton.component.html",
+	styleUrls: ["./globalConfigurationButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class GlobalConfigurationButtonComponent {
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	showGlobalConfiguration() {
 		this.dialog.open(GlobalConfigurationDialogComponent, {

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationButton.module.ts

@@ -10,7 +10,6 @@ import { MapLayoutSelectionModule } from "./globalConfigurationDialog/mapLayoutS
 @NgModule({
 	imports: [MaterialModule, ResetSettingsButtonModule, MapLayoutSelectionModule, DisplayQualitySelectionModule, ActionIconModule],
 	declarations: [GlobalConfigurationButtonComponent, GlobalConfigurationDialogComponent],
-	exports: [GlobalConfigurationButtonComponent],
-	entryComponents: [GlobalConfigurationDialogComponent]
+	exports: [GlobalConfigurationButtonComponent]
 })
 export class GlobalConfigurationButtonModule {}

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/displayQualitySelection/displayQualitySelection.component.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
 	<mat-label>Display Quality</mat-label>
 	<mat-select [value]="sharpnessMode$ | async" (selectionChange)="handleSelectedSharpnessModeChanged($event)">
 		<mat-option *ngFor="let sharpnessMode of sharpnessModes" [value]="sharpnessMode">

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/displayQualitySelection/displayQualitySelection.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSelectChange } from "@angular/material/select"
 import { SharpnessMode } from "../../../../../codeCharta.model"
 import { Store } from "../../../../../state/angular-redux/store"
@@ -7,13 +7,14 @@ import { sharpnessModeSelector } from "../../../../../state/store/appSettings/sh
 
 @Component({
 	selector: "cc-display-quality-selection",
-	template: require("./displayQualitySelection.component.html")
+	templateUrl: "./displayQualitySelection.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DisplayQualitySelectionComponent {
 	sharpnessModes = Object.values(SharpnessMode)
 	sharpnessMode$ = this.store.select(sharpnessModeSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleSelectedSharpnessModeChanged(event: MatSelectChange) {
 		this.store.dispatch(setSharpnessMode(event.value))

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.html

@@ -1,18 +1,7 @@
 <mat-toolbar color="primary">Global Configuration</mat-toolbar>
 
 <div class="cc-global-configuration-dialog-content">
-	<div class="cc-global-configuration-align-right">
-		<cc-reset-settings-button
-			[settingsKeys]="[
-				'appSettings.hideFlatBuildings',
-				'appSettings.isWhiteBackground',
-				'appSettings.resetCameraIfNewFileIsLoaded',
-				'appSettings.layoutAlgorithm',
-				'appSettings.maxTreeMapFiles'
-			]"
-			tooltip="Reset global settings to their defaults"
-		></cc-reset-settings-button>
-	</div>
+	<div class="cc-global-configuration-align-right"></div>
 
 	<cc-map-layout-selection></cc-map-layout-selection>
 	<cc-display-quality-selection></cc-display-quality-selection>
@@ -35,17 +24,31 @@
 		</mat-slide-toggle>
 	</div>
 
-	<a class="weblink" href="https://github.com/MaibornWolff/codecharta/blob/main/README.md" target="_blank" rel="noopener noreferrer">
-		<em class="fa fa-external-link icon-link"></em>Manual
-	</a>
-	<a class="weblink" href="https://github.com/MaibornWolff/codecharta/" target="_blank" rel="noopener noreferrer">
-		<em class="fa fa-external-link icon-link"></em>Github
-	</a>
-	<a class="weblink" href="https://github.com/MaibornWolff/codecharta/wiki" target="_blank" rel="noopener noreferrer">
-		<em class="fa fa-external-link icon-link"></em>Wiki
-	</a>
+	<cc-reset-settings-button
+		[settingsKeys]="[
+			'appSettings.hideFlatBuildings',
+			'appSettings.isWhiteBackground',
+			'appSettings.resetCameraIfNewFileIsLoaded',
+			'appSettings.layoutAlgorithm',
+			'appSettings.maxTreeMapFiles'
+		]"
+		tooltip="Reset global settings to their defaults"
+		label="Reset global settings"
+	></cc-reset-settings-button>
 
-	<div class="cc-global-configuration-align-right">
-		<button class="close-button" mat-button mat-dialog-close>CLOSE</button>
+	<div class="cc-global-configuration-links-list">
+		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/blob/main/README.md" target="_blank" rel="noopener noreferrer">
+			<em class="fa fa-external-link icon-link"></em>How-to
+		</a>
+		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/" target="_blank" rel="noopener noreferrer">
+			<em class="fa fa-external-link icon-link"></em>Github
+		</a>
+		<a class="weblink" href="https://github.com/MaibornWolff/codecharta/wiki" target="_blank" rel="noopener noreferrer">
+			<em class="fa fa-external-link icon-link"></em>Wiki
+		</a>
 	</div>
+
+	<mat-dialog-actions align="end">
+		<button mat-button mat-dialog-close cdkFocusInitial>Close</button>
+	</mat-dialog-actions>
 </div>

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/globalConfigurationDialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSlideToggleChange } from "@angular/material/slide-toggle"
 import { Store } from "../../../../state/angular-redux/store"
 import { setScreenshotToClipboardEnabled } from "../../../../state/store/appSettings/enableClipboard/screenshotToClipboardEnabled.actions"
@@ -14,7 +14,8 @@ import { resetCameraIfNewFileIsLoadedSelector } from "../../../../state/store/ap
 import { GlobalSettingsHelper } from "../../../../util/globalSettingsHelper"
 
 @Component({
-	template: require("./globalConfigurationDialog.component.html")
+	templateUrl: "./globalConfigurationDialog.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class GlobalConfigurationDialogComponent {
 	screenshotToClipboardEnabled$ = this.store.select(screenshotToClipboardEnabledSelector)
@@ -23,7 +24,7 @@ export class GlobalConfigurationDialogComponent {
 	hideFlatBuildings$ = this.store.select(hideFlatBuildingsSelector)
 	resetCameraIfNewFileIsLoaded$ = this.store.select(resetCameraIfNewFileIsLoadedSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleResetCameraIfNewFileIsLoadedChanged(event: MatSlideToggleChange) {
 		this.store.dispatch(setResetCameraIfNewFileIsLoaded(event.checked))

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
 	<mat-label>Map Layout</mat-label>
 	<mat-select [value]="layoutAlgorithm$ | async" (selectionChange)="handleSelectedLayoutAlgorithmChanged($event)">
 		<mat-option *ngFor="let layoutAlgorithm of layoutAlgorithms" [value]="layoutAlgorithm">

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.spec.ts

@@ -1,50 +1,53 @@
-import { TestBed } from "@angular/core/testing"
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
+import { ComponentFixture, TestBed } from "@angular/core/testing"
+import { screen } from "@testing-library/angular"
 import { LayoutAlgorithm } from "../../../../../codeCharta.model"
 import { setLayoutAlgorithm } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.actions"
 import { Store } from "../../../../../state/store/store"
 import { MapLayoutSelectionComponent } from "./mapLayoutSelection.component"
 import { MapLayoutSelectionModule } from "./mapLayoutSelection.module"
+import { HarnessLoader } from "@angular/cdk/testing"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { MatSelectHarness } from "@angular/material/select/testing"
+import { MatInputHarness } from "@angular/material/input/testing"
+
+let loader: HarnessLoader
+let fixture: ComponentFixture<MapLayoutSelectionComponent>
 
 describe("MapLayoutSelectionComponent", () => {
 	beforeEach(() => {
 		Store["initialize"]()
 		TestBed.configureTestingModule({
-			imports: [MapLayoutSelectionModule]
-		})
+			imports: [MapLayoutSelectionModule],
+			declarations: [MapLayoutSelectionComponent]
+		}).compileComponents()
+		fixture = TestBed.createComponent(MapLayoutSelectionComponent)
+		loader = TestbedHarnessEnvironment.loader(fixture)
 	})
 
 	it("should change map layout selection", async () => {
-		const { detectChanges } = await render(MapLayoutSelectionComponent, { excludeComponentDeclaration: true })
-		detectChanges()
-
-		const initialLayoutSelection = screen.getByText("Squarified TreeMap")
-		expect(initialLayoutSelection).not.toBe(null)
+		const select = await loader.getHarness(MatSelectHarness)
+		expect(await select.getValueText()).toBe("Squarified TreeMap")
 
-		fireEvent.click(initialLayoutSelection)
-		const anotherLayoutOption = screen.getByText("StreetMap")
-		fireEvent.click(anotherLayoutOption)
-		await waitForElementToBeRemoved(() => screen.getByRole("listbox"))
-		expect(screen.getByText("StreetMap")).not.toBe(null)
+		await select.open()
+		await select.clickOptions({ text: "StreetMap" })
+		expect(await select.getValueText()).toBe("StreetMap")
 	})
 
 	it("should not display max tree map files slider when layout selection is NOT 'TreeMapStreet'", async () => {
-		await render(MapLayoutSelectionComponent, { excludeComponentDeclaration: true })
+		await loader.getHarness(MatSelectHarness)
 		expect(screen.queryByText("Maximum TreeMap Files")).toBe(null)
 	})
 
 	it("should display max tree map files slider when layout selection is 'TreeMapStreet'", async () => {
 		Store.dispatch(setLayoutAlgorithm(LayoutAlgorithm.TreeMapStreet))
-		await render(MapLayoutSelectionComponent, { excludeComponentDeclaration: true })
-
+		const select = await loader.getHarness(MatSelectHarness)
+		expect(await select.getValueText()).toBe("TreeMapStreet")
 		expect(screen.queryByText("Maximum TreeMap Files")).not.toBe(null)
-		const maxTreeMapFilesValue = "100"
-		expect(screen.queryByText(maxTreeMapFilesValue)).not.toBe(null)
 
-		const inputField = screen.getByRole("spinbutton") as HTMLInputElement
-		await userEvent.type(inputField, "42", { initialSelectionStart: 0, initialSelectionEnd: 3 })
-		await waitForElementToBeRemoved(() => screen.queryByText(maxTreeMapFilesValue))
-		expect(screen.queryByText("42")).not.toBe(null)
+		const input = await loader.getHarness(MatInputHarness)
+		expect(await input.getValue()).toBe("100")
+
+		await input.setValue("42")
+		expect(await input.getValue()).toBe("42")
 	})
 })

package/app/codeCharta/ui/toolBar/globalConfigurationButton/globalConfigurationDialog/mapLayoutSelection/mapLayoutSelection.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSelectChange } from "@angular/material/select"
 import { LayoutAlgorithm } from "../../../../../codeCharta.model"
 import { Store } from "../../../../../state/angular-redux/store"
@@ -6,18 +6,19 @@ import { setLayoutAlgorithm } from "../../../../../state/store/appSettings/layou
 import { layoutAlgorithmSelector } from "../../../../../state/store/appSettings/layoutAlgorithm/layoutAlgorithm.selector"
 import { setMaxTreeMapFiles } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.actions"
 import { maxTreeMapFilesSelector } from "../../../../../state/store/appSettings/maxTreeMapFiles/maxTreeMapFiles.selector"
-import debounce from "lodash.debounce"
+import { debounce } from "../../../../../util/debounce"
 
 @Component({
 	selector: "cc-map-layout-selection",
-	template: require("./mapLayoutSelection.component.html")
+	templateUrl: "./mapLayoutSelection.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapLayoutSelectionComponent {
 	layoutAlgorithms = Object.values(LayoutAlgorithm)
 	layoutAlgorithm$ = this.store.select(layoutAlgorithmSelector)
 	maxTreeMapFiles$ = this.store.select(maxTreeMapFilesSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleSelectedLayoutAlgorithmChanged(event: MatSelectChange) {
 		this.store.dispatch(setLayoutAlgorithm(event.value))

package/app/codeCharta/ui/toolBar/hoveredNodePathPanel/hoveredNodePathPanel.component.ts

@@ -1,14 +1,15 @@
-import "./hoveredNodePathPanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { hoveredNodePathPanelDataSelector } from "./hoveredNodePathPanelData.selector"
 
 @Component({
 	selector: "cc-hovered-node-path-panel",
-	template: require("./hoveredNodePathPanel.component.html")
+	templateUrl: "./hoveredNodePathPanel.component.html",
+	styleUrls: ["./hoveredNodePathPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class HoveredNodePathPanelComponent {
 	hoveredNodePathPanelData$ = this.store.select(hoveredNodePathPanelDataSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/toolBar/loadingMapProgressSpinner/loadingMapProgressSpinner.component.ts

@@ -1,17 +1,18 @@
-import "./loadingMapProgressSpinner.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../state/angular-redux/store"
 import { isLoadingMapSelector } from "../../../state/store/appSettings/isLoadingMap/isLoadingMap.selector"
 
 @Component({
 	selector: "cc-loading-map-progress-spinner",
-	template: require("./loadingMapProgressSpinner.component.html")
+	templateUrl: "./loadingMapProgressSpinner.component.html",
+	styleUrls: ["./loadingMapProgressSpinner.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class LoadingMapProgressSpinnerComponent {
 	isLoadingMap$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.isLoadingMap$ = store.select(isLoadingMapSelector)
 	}
 }

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.html

@@ -1,12 +1,9 @@
-<button title="Enabling presentation mode will change the hovering effect so that it simulates a flashlight">
-	<span>Presentation mode</span>
-
+<mat-slide-toggle
+	[checked]="isPresentationModeEnabled$ | async"
+	(change)="setPresentationModeEnabled($event)"
+	[title]="(isPresentationModeEnabled$ | async) ? 'Disable flashlight hover effect' : 'Enable flashlight hover effect'"
+	aria-label="Presentation Mode Toggle"
+>
 	<i class="presentation-mode-icon fa fa-television"></i>
-
-	<mat-slide-toggle
-		[checked]="isPresentationModeEnabled$ | async"
-		(change)="setPresentationModeEnabled($event)"
-		[title]="(isPresentationModeEnabled$ | async) ? 'Disable presentation mode' : 'Enable presentation mode'"
-	>
-	</mat-slide-toggle>
-</button>
+	Presentation Mode
+</mat-slide-toggle>

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.scss

@@ -1,6 +1,7 @@
 cc-presentation-mode-button {
-	.presentation-mode-icon,
-	mat-slide-toggle {
-		margin-left: 8px;
+	mat-slide-toggle.mat-mdc-slide-toggle div.mdc-form-field {
+		font-size: 10pt;
+		flex-direction: row-reverse;
+		gap: 12px;
 	}
 }

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.spec.ts

@@ -13,9 +13,9 @@ describe("presentationModeButtonComponent", () => {
 
 	it("should toggle presentation mode", async () => {
 		const { container } = await render(PresentationModeButtonComponent, { excludeComponentDeclaration: true })
-		expect(screen.getByTitle("Enable presentation mode")).toBeTruthy()
+		expect(screen.getByTitle("Enable flashlight hover effect")).toBeTruthy()
 
 		await userEvent.click(container.querySelector("mat-slide-toggle label"))
-		expect(screen.getByTitle("Disable presentation mode")).toBeTruthy()
+		expect(screen.getByTitle("Disable flashlight hover effect")).toBeTruthy()
 	})
 })

package/app/codeCharta/ui/toolBar/presentationModeButton/presentationModeButton.component.ts

@@ -1,18 +1,19 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatSlideToggleChange } from "@angular/material/slide-toggle"
 import { Store } from "../../../state/angular-redux/store"
 import { setPresentationMode } from "../../../state/store/appSettings/isPresentationMode/isPresentationMode.actions"
 import { isPresentationModeSelector } from "../../../state/store/appSettings/isPresentationMode/isPresentationMode.selector"
-import "./presentationModeButton.component.scss"
 
 @Component({
 	selector: "cc-presentation-mode-button",
-	template: require("./presentationModeButton.component.html")
+	templateUrl: "./presentationModeButton.component.html",
+	styleUrls: ["./presentationModeButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class PresentationModeButtonComponent {
 	isPresentationModeEnabled$ = this.store.select(isPresentationModeSelector)
 
-	constructor(@Inject(Store) private readonly store: Store) {}
+	constructor(private readonly store: Store) {}
 
 	setPresentationModeEnabled(event: MatSlideToggleChange) {
 		this.store.dispatch(setPresentationMode(event.checked))

package/app/codeCharta/ui/toolBar/toolBar.component.scss

@@ -2,15 +2,13 @@
 
 cc-tool-bar {
 	display: flex;
+	gap: 8px;
+	padding-left: 8px;
 	align-items: center;
 	background-color: #f0f0f0;
 	height: 35px;
 	border-bottom: 1px solid #cdcdcd;
 
-	cc-action-icon {
-		margin-left: 8px;
-	}
-
 	.right-aligned {
 		position: absolute;
 		right: 4px;

package/app/codeCharta/ui/toolBar/toolBar.component.ts

@@ -1,17 +1,17 @@
-import "./toolBar.component.scss"
-
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { hoveredNodeIdSelector } from "../../state/store/appStatus/hoveredNodeId/hoveredNodeId.selector"
 import { experimentalFeaturesEnabledSelector } from "../../state/store/appSettings/enableExperimentalFeatures/experimentalFeaturesEnabled.selector"
 
 @Component({
 	selector: "cc-tool-bar",
-	template: require("./toolBar.component.html")
+	templateUrl: "./toolBar.component.html",
+	styleUrls: ["./toolBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ToolBarComponent {
 	hoveredNodeId$ = this.store.select(hoveredNodeIdSelector)
 	experimentalFeaturesEnabled$ = this.store.select(experimentalFeaturesEnabledSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

package/app/codeCharta/ui/toolBar/toolBar.module.ts

@@ -27,7 +27,6 @@ import { LoadingMapProgressSpinnerModule } from "./loadingMapProgressSpinner/loa
 		GlobalConfigurationButtonModule
 	],
 	declarations: [ToolBarComponent],
-	exports: [ToolBarComponent],
-	entryComponents: [ToolBarComponent]
+	exports: [ToolBarComponent]
 })
 export class ToolBarModule {}

package/app/codeCharta/ui/toolBar/uploadFilesButton/uploadFiles.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from "@angular/core"
+import { Injectable } from "@angular/core"
 import { LoadFileService } from "../../../services/loadFile/loadFile.service"
 import { Store } from "../../../state/angular-redux/store"
 import { setIsLoadingFile } from "../../../state/store/appSettings/isLoadingFile/isLoadingFile.actions"
@@ -12,7 +12,7 @@ import { readFiles } from "../../../util/uploadFiles/readFiles"
 export class UploadFilesService {
 	isUploading = false
 
-	constructor(@Inject(Store) private store: Store, @Inject(LoadFileService) private loadFileService: LoadFileService) {}
+	constructor(private store: Store, private loadFileService: LoadFileService) {}
 
 	uploadFiles() {
 		const ccFileInput = createCCFileInput()

package/app/codeCharta/ui/toolBar/uploadFilesButton/uploadFilesButton.component.ts

@@ -1,13 +1,14 @@
-import "./uploadFilesButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { UploadFilesService } from "./uploadFiles.service"
 
 @Component({
 	selector: "cc-upload-files-button",
-	template: require("./uploadFilesButton.component.html")
+	templateUrl: "./uploadFilesButton.component.html",
+	styleUrls: ["./uploadFilesButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class UploadFilesButtonComponent {
-	constructor(@Inject(UploadFilesService) private uploadFilesService: UploadFilesService) {}
+	constructor(private uploadFilesService: UploadFilesService) {}
 
 	uploadFiles() {
 		this.uploadFilesService.uploadFiles()

package/app/codeCharta/ui/viewCube/centerMapButton/centerMapButton.component.ts

@@ -1,13 +1,14 @@
-import "./centerMapButton.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { ThreeOrbitControlsService } from "../../codeMap/threeViewer/threeOrbitControls.service"
 
 @Component({
 	selector: "cc-center-map-button",
-	template: require("./centerMapButton.component.html")
+	templateUrl: "./centerMapButton.component.html",
+	styleUrls: ["./centerMapButton.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class CenterMapButtonComponent {
-	constructor(@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService) {}
+	constructor(private threeOrbitControlsService: ThreeOrbitControlsService) {}
 
 	centerMap() {
 		this.threeOrbitControlsService.autoFitTo()

package/app/codeCharta/ui/viewCube/viewCube.component.spec.ts

@@ -4,7 +4,7 @@ import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
 import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera"
 import { ThreeCameraService } from "../codeMap/threeViewer/threeCamera.service"
 import { Color, Mesh, Vector3, WebGLRenderer } from "three"
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 import { ViewCubeComponent } from "./viewCube.component"
 
 describe("ViewCubeComponent", () => {
@@ -17,7 +17,7 @@ describe("ViewCubeComponent", () => {
 		viewCubeMouseEventsService = { init: jest.fn() } as unknown as ViewCubeMouseEventsService
 		threeOrbitControlsService.controls = {
 			target: new Vector3(1, 2, 3)
-		} as OrbitControls
+		} as unknown as OrbitControls
 		ViewCubeComponent.prototype["initRenderer"] = jest.fn()
 		ViewCubeComponent.prototype["onAnimationFrame"] = jest.fn()
 		const elementReference = { nativeElement: {} as HTMLElement }

package/app/codeCharta/ui/viewCube/viewCube.component.ts

@@ -14,11 +14,12 @@ import {
 import { ViewCubemeshGenerator } from "./viewCube.meshGenerator"
 import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitControls.service"
 import { ViewCubeMouseEventsService } from "./viewCube.mouseEvents.service"
-import { Component, ElementRef, Inject, OnInit } from "@angular/core"
+import { Component, ElementRef, OnInit, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-view-cube",
-	template: require("./viewCube.component.html")
+	templateUrl: "./viewCube.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ViewCubeComponent implements OnInit {
 	private lights: Group
@@ -39,9 +40,9 @@ export class ViewCubeComponent implements OnInit {
 	}
 
 	constructor(
-		@Inject(ElementRef) private elementReference: ElementRef,
-		@Inject(ThreeOrbitControlsService) private threeOrbitControlsService: ThreeOrbitControlsService,
-		@Inject(ViewCubeMouseEventsService) private viewCubeMouseEvents: ViewCubeMouseEventsService
+		private elementReference: ElementRef,
+		private threeOrbitControlsService: ThreeOrbitControlsService,
+		private viewCubeMouseEvents: ViewCubeMouseEventsService
 	) {}
 
 	ngOnInit() {