codecharta-visualization 1.114.0 → 1.115.1

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

@@ -1,11 +1,12 @@
-import { Component } from "@angular/core"
-import "./searchPanel.component.scss"
+import { Component, ViewEncapsulation } from "@angular/core"
 
 export type SearchPanelMode = "minimized" | "treeView" | "blacklist"
 
 @Component({
 	selector: "cc-search-panel",
-	template: require("./searchPanel.component.html")
+	templateUrl: "./searchPanel.component.html",
+	styleUrls: ["./searchPanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class SearchPanelComponent {
 	searchPanelMode: SearchPanelMode = "minimized"

package/app/codeCharta/ui/searchPanel/searchPanelModeSelector/searchPanelModeSelector.component.html

@@ -1,23 +1,9 @@
-<section layout="row" layout-align="center center" class="mode-chooser">
-	<button
-		mat-button
-		class="state-selector-button left"
-		id="tree-view"
-		[class.current]="searchPanelMode === 'treeView'"
-		(click)="updateSearchPanelMode('treeView')"
-		title="Folder structure"
-	>
+<mat-button-toggle-group [value]="searchPanelMode">
+	<mat-button-toggle id="tree-view" value="tree-view" (click)="updateSearchPanelMode('treeView')">
 		<i class="fa fa-sitemap"></i>
-	</button>
-	<button
-		mat-button
-		class="state-selector-button right"
-		id="blacklist"
-		[class.current]="searchPanelMode === 'blacklist'"
-		(click)="updateSearchPanelMode('blacklist')"
-		title="Excluded and flattened buildings"
-	>
+	</mat-button-toggle>
+	<mat-button-toggle id="blacklist" value="blacklist" (click)="updateSearchPanelMode('blacklist')">
 		<i class="fa fa-eye-slash"></i>
 		<div class="has-blacklist-items-indicator" [hidden]="hideBlacklistItemsIndicator$ | async"></div>
-	</button>
-</section>
+	</mat-button-toggle>
+</mat-button-toggle-group>

package/app/codeCharta/ui/searchPanel/searchPanelModeSelector/searchPanelModeSelector.component.scss

@@ -1,10 +1,8 @@
 cc-search-panel-mode-selector {
-	vertical-align: top;
-	.mode-chooser {
-		display: inline-block;
-		margin-right: 10px;
-		margin-bottom: 3px;
-		font-size: 0px;
+	mat-button-toggle-group {
+		height: 100%;
+		align-items: center;
+		font-size: 12px;
 	}
 
 	.has-blacklist-items-indicator {

package/app/codeCharta/ui/searchPanel/searchPanelModeSelector/searchPanelModeSelector.component.ts

@@ -1,13 +1,14 @@
-import "./searchPanelModeSelector.component.scss"
 import { SearchPanelMode } from "../searchPanel.component"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { Observable } from "rxjs"
 import { hideBlacklistItemsIndicatorSelector } from "./hideBlacklistItemsIndicator.selector"
 
 @Component({
 	selector: "cc-search-panel-mode-selector",
-	template: require("./searchPanelModeSelector.component.html")
+	templateUrl: "./searchPanelModeSelector.component.html",
+	styleUrls: ["./searchPanelModeSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class SearchPanelModeSelectorComponent {
 	@Input() searchPanelMode: SearchPanelMode
@@ -15,7 +16,7 @@ export class SearchPanelModeSelectorComponent {
 
 	hideBlacklistItemsIndicator$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.hideBlacklistItemsIndicator$ = store.select(hideBlacklistItemsIndicatorSelector)
 	}
 }

package/app/codeCharta/ui/searchPanel/sortingButton/sortingButton.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from "@angular/core"
+import { Component, OnInit, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -7,12 +7,13 @@ import { sortingOrderAscendingSelector } from "../../../state/store/appSettings/
 
 @Component({
 	selector: "cc-sorting-button",
-	template: require("./sortingButton.component.html")
+	templateUrl: "./sortingButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class SortingButtonComponent implements OnInit {
 	sortingOrderAscending$: Observable<boolean>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.sortingOrderAscending$ = this.store.select(sortingOrderAscendingSelector)

package/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.spec.ts

@@ -28,7 +28,7 @@ describe("SortingOptionComponent", () => {
 		expect(screen.getByText("Name")).toBeTruthy()
 
 		// it offers all possible sorting Options, when clicking on it
-		const selectBoxTrigger = screen.getByRole("combobox").querySelector(".mat-select-trigger") as HTMLElement
+		const selectBoxTrigger = screen.getByRole("combobox").firstChild as HTMLElement
 		fireEvent.click(selectBoxTrigger)
 		const selectOptionsWrapper = screen.getByRole("listbox")
 		for (const option of Object.values(SortingOption)) {

package/app/codeCharta/ui/searchPanel/sortingOption/sortingOption.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { SortingOption } from "../../../codeCharta.model"
@@ -8,13 +8,14 @@ import { sortingOrderSelector } from "../../../state/store/dynamicSettings/sorti
 
 @Component({
 	selector: "cc-sorting-option",
-	template: require("./sortingOption.component.html")
+	templateUrl: "./sortingOption.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class SortingOptionComponent {
 	sortingOptions = Object.values(SortingOption)
 	selectedSortingOption$: Observable<SortingOption>
 
-	constructor(@Inject(Store) private store: Store) {
+	constructor(private store: Store) {
 		this.selectedSortingOption$ = store.select(sortingOrderSelector)
 	}
 

package/app/codeCharta/ui/slider/slider.component.html

@@ -1,23 +1,19 @@
 <div class="cc-slider-container">
-	<label>{{ label }}</label>
-	<mat-slider
-		[disabled]="disabled"
-		[step]="this.step"
-		[min]="this.min"
-		[max]="this.max"
-		[value]="this.value"
-		(input)="this.handleSliderOnChange($event)"
-	>
-	</mat-slider>
-	<mat-form-field>
-		<input
-			matInput
-			[disabled]="disabled"
-			type="number"
-			[value]="this.value"
-			(input)="this.handleInputOnChange($event)"
-			[min]="this.min"
-			[max]="this.max"
-		/>
-	</mat-form-field>
+	<mat-label class="label">{{ label }}</mat-label>
+	<div class="slider-with-input">
+		<mat-slider [disabled]="disabled" [step]="step" [min]="min" [max]="max">
+			<input matSliderThumb [value]="value" (input)="handleInputOnChange($event)" />
+		</mat-slider>
+		<mat-form-field appearance="outline">
+			<input
+				matInput
+				type="number"
+				[value]="value"
+				[disabled]="disabled"
+				(input)="handleInputOnChange($event)"
+				[min]="min"
+				[max]="max"
+			/>
+		</mat-form-field>
+	</div>
 </div>

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

@@ -1,31 +1,48 @@
 cc-slider {
 	width: 100%;
+	margin-top: 8px;
+
+	.label {
+		margin-left: 10px;
+	}
 
 	.cc-slider-container {
-		position: relative;
 		display: flex;
+		flex-direction: column;
 
-		label {
-			position: absolute;
-			top: 0;
-			font-size: 0.8em;
-			color: grey;
-			left: 4px;
-		}
+		.slider-with-input {
+			display: flex;
+			align-items: center;
 
-		mat-slider {
-			flex: 1;
-			margin-right: 8px;
-			margin-left: -4px;
-		}
+			mat-slider {
+				margin: 0px 12px;
+				flex: 2;
+			}
+
+			mat-form-field {
+				flex: 1;
+				height: 32px;
+
+				.mat-mdc-text-field-wrapper {
+					padding: 0px 12px;
+
+					.mat-mdc-form-field-flex {
+						align-self: center;
+
+						.mat-mdc-form-field-infix {
+							padding: 0;
+							min-height: 28px;
 
-		mat-form-field {
-			width: 50px;
-			height: 48px;
+							.mat-mdc-input-element {
+								min-height: inherit;
+							}
+						}
+					}
+				}
 
-			.mat-form-field-infix {
-				border-top-width: 0;
-				padding-top: 16px;
+				.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+					display: none;
+				}
 			}
 		}
 	}

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

@@ -1,56 +1,56 @@
-import { TestBed } from "@angular/core/testing"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { drag } from "../../util/testUtils/drag"
+import { HarnessLoader } from "@angular/cdk/testing"
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed"
+import { ComponentFixture, TestBed } from "@angular/core/testing"
+import { MatInputHarness } from "@angular/material/input/testing"
+import { MatSliderHarness } from "@angular/material/slider/testing"
 import { SliderComponent } from "./slider.component"
 import { SliderModule } from "./slider.module"
 
+let loader: HarnessLoader
+let fixture: ComponentFixture<SliderComponent>
+
 describe("SliderComponent", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			imports: [SliderModule]
-		})
+			imports: [SliderModule],
+			declarations: [SliderComponent]
+		}).compileComponents()
+		fixture = TestBed.createComponent(SliderComponent)
+		loader = TestbedHarnessEnvironment.loader(fixture)
 	})
 
 	it("should update given value on input changes", async () => {
 		let value = 21
-		await render(SliderComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				value,
-				onChange: (newValue: number) => {
-					value = newValue
-				},
-				min: 1,
-				max: 100
-			}
-		})
-
-		const inputField = screen.getByRole("spinbutton") as HTMLInputElement
-		await userEvent.type(inputField, "42", { initialSelectionStart: 0, initialSelectionEnd: 2 })
+		fixture.componentInstance.value = value
+		fixture.componentInstance.min = 1
+		fixture.componentInstance.max = 100
+		fixture.componentInstance.onChange = (newValue: number) => {
+			value = newValue
+		}
+		fixture.detectChanges()
+
+		const input = await loader.getHarness(MatInputHarness)
+		await input.setValue("42")
 
+		expect(await input.getValue()).toBe("42")
 		expect(value).toBe(42)
 	})
 
 	it("should update given value on slider changes", async () => {
 		let value = 21
-		const { container } = await render(SliderComponent, {
-			excludeComponentDeclaration: true,
-			componentProperties: {
-				value,
-				onChange: (newValue: number) => {
-					value = newValue
-				},
-				min: 1,
-				max: 100
-			}
-		})
-
-		const sliderThumb = container.querySelector(".mat-slider-thumb")
-		await drag(sliderThumb, {
-			delta: { x: -100, y: 0 }
-		})
-
-		expect(value).toBe(1)
+		fixture.componentInstance.value = value
+		fixture.componentInstance.min = 1
+		fixture.componentInstance.max = 100
+		fixture.componentInstance.onChange = (newValue: number) => {
+			value = newValue
+		}
+		fixture.detectChanges()
+
+		const slider = await loader.getHarness(MatSliderHarness)
+		const sliderThumb = await slider.getEndThumb()
+		await sliderThumb.setValue(42)
+
+		expect(await sliderThumb.getValue()).toBe(42)
+		expect(value).toBe(42)
 	})
 })

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

@@ -1,11 +1,11 @@
-import "./slider.component.scss"
-import { Component, Input } from "@angular/core"
-import { MatSliderChange } from "@angular/material/slider"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { parseNumberInput } from "../../util/parseNumberInput"
 
 @Component({
 	selector: "cc-slider",
-	template: require("./slider.component.html")
+	templateUrl: "./slider.component.html",
+	styleUrls: ["./slider.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class SliderComponent {
 	@Input() value?: number
@@ -15,14 +15,13 @@ export class SliderComponent {
 	@Input() step?: number = 1
 	@Input() disabled?: boolean = false
 	@Input() onChange: (number) => void
-
-	handleSliderOnChange($event: MatSliderChange) {
-		if ($event.value !== this.value) {
-			this.onChange($event.value)
+	handleSliderOnChange(value: number) {
+		if (value !== this.value) {
+			this.onChange(value)
 		}
 	}
 
-	handleInputOnChange($event: InputEvent) {
+	handleInputOnChange($event: Event) {
 		const newValue = parseNumberInput($event, this.min, this.max)
 		if (newValue !== this.value && !Number.isNaN(newValue)) {
 			this.onChange(newValue)

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

@@ -6,7 +6,6 @@ import { SliderComponent } from "./slider.component"
 @NgModule({
 	imports: [MaterialModule, CommonModule],
 	declarations: [SliderComponent],
-	exports: [SliderComponent],
-	entryComponents: [SliderComponent]
+	exports: [SliderComponent]
 })
 export class SliderModule {}

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

@@ -83,7 +83,8 @@ describe("downloadButtonComponent", () => {
 		expect(mockedDownload).toHaveBeenCalled()
 		expect(mockedDownload.mock.calls[0][0]).toBe(mockedAccumulatedData["unifiedMapNode"])
 		expect(mockedDownload.mock.calls[0][1]).toBe(mockedAccumulatedData["unifiedFileMeta"])
-		expect(mockedDownload.mock.calls[0][3].length).toBe(2)
+		const activatedDownloadSettingCount = 3
+		expect(mockedDownload.mock.calls[0][3].length).toBe(activatedDownloadSettingCount)
 		expect(mockedDownload.mock.calls[0][4]).toBe("fileA_2018-12-14_09-39")
 	})
 })

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

@@ -1,13 +1,14 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MatDialog } from "@angular/material/dialog"
 import { DownloadDialogComponent } from "./downloadDialog/downloadDialog.component"
 
 @Component({
 	selector: "cc-download-button",
-	template: require("./downloadButton.component.html")
+	templateUrl: "./downloadButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DownloadButtonComponent {
-	constructor(@Inject(MatDialog) private dialog: MatDialog) {}
+	constructor(private dialog: MatDialog) {}
 
 	download() {
 		this.dialog.open(DownloadDialogComponent, { panelClass: "cc-download-dialog" })

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

@@ -8,7 +8,6 @@ import { DownloadDialogComponent } from "./downloadDialog/downloadDialog.compone
 @NgModule({
 	imports: [ActionIconModule, MaterialModule, FormsModule],
 	declarations: [DownloadButtonComponent, DownloadDialogComponent],
-	exports: [DownloadButtonComponent],
-	entryComponents: [DownloadDialogComponent]
+	exports: [DownloadButtonComponent]
 })
 export class DownloadButtonModule {}

package/app/codeCharta/ui/toolBar/downloadButton/downloadDialog/downloadDialog.component.html

@@ -31,7 +31,7 @@
 		*ngFor="let property of properties"
 		[checked]="property.isSelected"
 		[disabled]="property.isDisabled"
-		(change)="property.change($event.value)"
+		(change)="property.change($event.checked)"
 	>
 		{{ property.name }} ({{ property.amount }})
 	</mat-checkbox>

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

@@ -1,6 +1,6 @@
 @use "../../../../../material/theme";
 
-.cc-download-dialog .mat-dialog-container {
+.cc-download-dialog .mat-mdc-dialog-container {
 	padding: 0 0 8px 0;
 	width: 500px;
 	overflow: hidden;
@@ -14,14 +14,14 @@
 		}
 	}
 
-	.mat-dialog-content {
+	.mat-mdc-dialog-content {
 		margin: 0;
 		padding: 16px;
 
 		.file-name-wrapper {
 			display: flex;
 
-			.mat-form-field {
+			.mat-mdc-form-field {
 				flex: 1;
 			}
 
@@ -31,7 +31,6 @@
 				font-size: 17px;
 			}
 		}
-
 		mat-checkbox {
 			display: block;
 		}
@@ -46,7 +45,7 @@
 		}
 	}
 
-	.mat-dialog-actions {
+	.mat-mdc-dialog-actions {
 		flex-direction: column;
 		align-items: flex-end;
 

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

@@ -1,5 +1,4 @@
-import "./downloadDialog.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { State } from "../../../../state/angular-redux/state"
 import { FileDownloader } from "../../../../util/fileDownloader"
 import { accumulatedDataSelector } from "../../../../state/selectors/accumulatedData/accumulatedData.selector"
@@ -14,13 +13,15 @@ import {
 } from "./util/propertyHelper"
 
 @Component({
-	template: require("./downloadDialog.component.html")
+	templateUrl: "./downloadDialog.component.html",
+	styleUrls: ["./downloadDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class DownloadDialogComponent {
 	fileName: string
 	properties: (DownloadableProperty & { change: (isSelected: boolean) => void })[]
 
-	constructor(@Inject(State) private state: State) {
+	constructor(private state: State) {
 		const stateValue = this.state.getValue()
 		const { unifiedMapNode, unifiedFileMeta } = accumulatedDataSelector(stateValue)
 		const { fileSettings, files } = stateValue

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

@@ -1,3 +1,3 @@
-<button (click)="showGlobalConfiguration()" title="Global Configuration">
+<button mat-button (click)="showGlobalConfiguration()" title="Global Configuration">
 	<span>Global Configuration</span> <cc-action-icon [icon]="'fa fa-cog'"></cc-action-icon>
 </button>

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">