codecharta-visualization 1.114.0 → 1.115.1

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

@@ -11,9 +11,20 @@ import { CustomConfig2ApplicableMessage } from "./customConfigList/customConfigI
 import { CustomConfig2ApplicableColor } from "./customConfigList/customConfigItemGroup/customConfig2ApplicableColor.pipe"
 import { ApplyCustomConfigButtonComponent } from "./customConfigList/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component"
 import { CustomConfigColorSchemaBySelectionMode } from "./customConfigList/customConfigItemGroup/customConfigDescription/customConfigColorSchemaBySelectionMode.pipe"
+import { FormsModule } from "@angular/forms"
+import { CustomConfigNoteDialogButtonModule } from "./customConfigNoteDialogButton/customConfigNoteDialogButton.module"
+import { TruncateTextPipe } from "../../util/truncateText.pipe"
 
 @NgModule({
-	imports: [MaterialModule, CommonModule, UploadCustomConfigButtonModule, AddCustomConfigButtonModule, DownloadCustomConfigButtonModule],
+	imports: [
+		MaterialModule,
+		CommonModule,
+		CustomConfigNoteDialogButtonModule,
+		UploadCustomConfigButtonModule,
+		AddCustomConfigButtonModule,
+		DownloadCustomConfigButtonModule,
+		FormsModule
+	],
 	declarations: [
 		CustomConfigsComponent,
 		CustomConfigListComponent,
@@ -21,9 +32,9 @@ import { CustomConfigColorSchemaBySelectionMode } from "./customConfigList/custo
 		ApplyCustomConfigButtonComponent,
 		CustomConfig2ApplicableMessage,
 		CustomConfig2ApplicableColor,
+		TruncateTextPipe,
 		CustomConfigColorSchemaBySelectionMode
 	],
-	exports: [CustomConfigsComponent],
-	entryComponents: [CustomConfigListComponent]
+	exports: [CustomConfigsComponent]
 })
 export class CustomConfigsModule {}

package/app/codeCharta/ui/customConfigs/downloadCustomConfigsButton/downloadCustomConfigsButton.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core"
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from "@angular/core"
 import { DownloadableConfigs } from "./getDownloadableCustomConfigs"
 
 import { downloadCustomConfigs } from "./downloadCustomConfigHelper"
@@ -7,13 +7,14 @@ import { Subscription } from "rxjs"
 
 @Component({
 	selector: "cc-download-custom-configs-button",
-	template: require("./downloadCustomConfigsButton.component.html")
+	templateUrl: "./downloadCustomConfigsButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DownloadCustomConfigsButtonComponent implements OnInit, OnDestroy {
 	downloadableConfigs: DownloadableConfigs
 	subscription: Subscription
 
-	constructor(@Inject(CustomConfigHelperService) private downloadCustomConfigService: CustomConfigHelperService) {}
+	constructor(private downloadCustomConfigService: CustomConfigHelperService) {}
 
 	ngOnInit(): void {
 		this.subscription = this.downloadCustomConfigService.downloadableCustomConfigs$.subscribe(downloadableConfigs => {

package/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.component.ts

@@ -1,11 +1,12 @@
-import { Component } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { CustomConfigHelper } from "../../../util/customConfigHelper"
 import { createCCFileInput } from "../../../util/uploadFiles/createCCFileInput"
 import { readFiles } from "../../../util/uploadFiles/readFiles"
 
 @Component({
 	selector: "cc-upload-custom-config-button",
-	template: require("./uploadCustomConfigButton.component.html")
+	templateUrl: "./uploadCustomConfigButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class UploadCustomConfigButtonComponent {
 	upload() {

package/app/codeCharta/ui/customConfigs/uploadCustomConfigButton/uploadCustomConfigButton.module.ts

@@ -3,7 +3,6 @@ import { UploadCustomConfigButtonComponent } from "./uploadCustomConfigButton.co
 
 @NgModule({
 	declarations: [UploadCustomConfigButtonComponent],
-	exports: [UploadCustomConfigButtonComponent],
-	entryComponents: [UploadCustomConfigButtonComponent]
+	exports: [UploadCustomConfigButtonComponent]
 })
 export class UploadCustomConfigButtonModule {}

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.html

@@ -1,6 +1,6 @@
-<mat-toolbar mat-dialog-title>Changelog</mat-toolbar>
+<mat-toolbar color="primary">Changelog</mat-toolbar>
 
-<mat-dialog-content>
+<div mat-dialog-content>
 	<h1>What is new in CodeCharta?</h1>
 	<h2>{{ data.previousVersion }} → {{ data.currentVersion }}</h2>
 
@@ -10,9 +10,9 @@
 			<ul [innerHTML]="change.value"></ul>
 		</div>
 	</div>
-</mat-dialog-content>
+</div>
 
-<mat-dialog-actions>
+<div mat-dialog-actions>
 	<a href="https://maibornwolff.github.io/codecharta/news/" target="_blank" rel="noopener noreferrer">Know more</a>
-	<button mat-button [mat-dialog-close]="true">CLOSE</button>
-</mat-dialog-actions>
+	<button mat-button [mat-dialog-close]="true" cdkFocusInitial>CLOSE</button>
+</div>

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.scss

@@ -1,17 +1,10 @@
 @use "../../../../material/theme";
 
-.cc-changelog-dialog .mat-dialog-container {
-	padding: 0 0 24px 0;
-
-	[mat-dialog-title] {
-		padding: 10px 0 10px 16px;
-		color: white;
-		background-color: theme.$cc-primary-color;
-	}
-
-	mat-dialog-content {
-		padding: 0 24px;
-		margin: 10px 0;
+.cc-changelog-dialog .mat-mdc-dialog-container {
+	[mat-dialog-content] {
+		padding: 8px 24px 0 24px;
+		margin-top: 10px;
+		color: black;
 
 		img[alt$="xs"] {
 			height: 32px;
@@ -29,8 +22,7 @@
 			height: 512px;
 		}
 	}
-
-	mat-dialog-actions {
+	[mat-dialog-actions] {
 		justify-content: flex-end;
 
 		a {

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.component.ts

@@ -1,16 +1,23 @@
-import "./changelogDialog.component.scss"
 import markdownFile from "../../../../../../CHANGELOG.md"
-import { Component, Inject } from "@angular/core"
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
+import { marked } from "marked"
 
 @Component({
-	template: require("./changelogDialog.component.html")
+	templateUrl: "./changelogDialog.component.html",
+	styleUrls: ["./changelogDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ChangelogDialogComponent {
 	changes: Record<string, string>
 
 	constructor(@Inject(MAT_DIALOG_DATA) public data: { previousVersion: string; currentVersion: string }) {
-		let changelogLines = markdownFile.split("\n")
+		this.changes = this.getChangelogChanges()
+	}
+
+	private getChangelogChanges() {
+		const parsedMarkdownFile = marked.parse(markdownFile, { headerIds: false })
+		let changelogLines = parsedMarkdownFile.split("\n")
 		const currentVersionFirstLine = this.findVersionLine(changelogLines, this.data.currentVersion)
 		const lastOpenedVersionFirstLine = this.findVersionLine(changelogLines, this.data.previousVersion)
 		//Add 1 to keep the version line so that it detects the end of the last set of changes
@@ -20,7 +27,7 @@ export class ChangelogDialogComponent {
 		for (const title of titles) {
 			const titlePattern = new RegExp(`<h3>${title}</h3>`)
 			const titleLinesIndexes = this.getAllIndexes(changelogLines, titlePattern)
-			const changelogTypes = []
+			const changelogTypes: string[] = []
 			for (const lineIndex of titleLinesIndexes) {
 				// Add 2 to remove the headline and the <ul> tag
 				const start = lineIndex + 2
@@ -33,11 +40,11 @@ export class ChangelogDialogComponent {
 				changes[title] = changelogTypes.join("\n")
 			}
 		}
-		this.changes = changes
+		return changes
 	}
 
 	private getAllIndexes(titles: string[], pattern: RegExp) {
-		return titles.reduce((matchingTitleIndexes, title, index) => {
+		return titles.reduce((matchingTitleIndexes: number[], title, index) => {
 			if (pattern.test(title)) {
 				matchingTitleIndexes.push(index)
 			}

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.e2e.ts

@@ -0,0 +1,26 @@
+import { goto } from "../../../../puppeteer.helper"
+import changelog from "../../../../../../CHANGELOG.md"
+
+function getSecondLatestCodeChartaVersion() {
+	const versionPattern = /\[(\d+\.\d+\.\d+)]/g
+	const versions = changelog.match(versionPattern) || []
+	const secondLatestVersion = versions[1]?.slice(1, -1)
+	return secondLatestVersion
+}
+
+describe("changelogDialog", () => {
+	beforeEach(async () => {
+		const version = getSecondLatestCodeChartaVersion() ?? ""
+		await page.evaluateOnNewDocument(version => {
+			localStorage.setItem("codeChartaVersion", version)
+		}, version)
+		await goto()
+	})
+	it("should show entries between the last und newest release version", async () => {
+		const changelogDialog = await page.waitForSelector(".mat-mdc-dialog-container", { timeout: 6000 })
+		const contentElement = await changelogDialog?.waitForSelector(".content")
+		const changelogContent = await contentElement?.evaluate(element => element.textContent)
+
+		expect(changelogContent?.length).not.toBe(0)
+	})
+})

package/app/codeCharta/ui/dialogs/changelogDialog/changelogDialog.module.ts

@@ -5,7 +5,6 @@ import { ChangelogDialogComponent } from "./changelogDialog.component"
 
 @NgModule({
 	imports: [CommonModule, MaterialModule],
-	declarations: [ChangelogDialogComponent],
-	entryComponents: [ChangelogDialogComponent]
+	declarations: [ChangelogDialogComponent]
 })
 export class ChangelogDialogModule {}

package/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.scss

@@ -1,12 +1,12 @@
-.cc-confirmation-dialog .mat-dialog-container {
+.cc-confirmation-dialog .mat-mdc-dialog-container {
 	.confirmation-message {
 		padding: 10px;
 	}
 
-	.mat-dialog-actions {
+	.mat-mdc-dialog-actions {
 		justify-content: flex-end;
 
-		.mat-button {
+		.mat-mdc-button {
 			background-color: rgba(138, 132, 132, 0.08);
 
 			&.submit-button {

package/app/codeCharta/ui/dialogs/confirmationDialog/confirmationDialog.component.ts

@@ -1,9 +1,10 @@
-import "./confirmationDialog.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-	template: require("./confirmationDialog.component.html")
+	templateUrl: "./confirmationDialog.component.html",
+	styleUrls: ["./confirmationDialog.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class ConfirmationDialogComponent {
 	constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }) {}

package/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.po.ts

@@ -2,17 +2,12 @@ import { clickButtonOnPageElement } from "../../../../puppeteer.helper"
 
 export class DialogErrorPageObject {
 	async getMessage() {
-		await page.waitForSelector(".mat-dialog-content")
-		return page.$eval(".mat-dialog-content", element => element["innerText"])
+		await page.waitForSelector(".mat-mdc-dialog-content")
+		return page.$eval(".mat-mdc-dialog-content", element => element["innerText"])
 	}
 
 	async clickOk() {
-		await clickButtonOnPageElement(".mat-dialog-actions button")
-		await page.waitForSelector(".mat-dialog-actions button", { visible: false })
-	}
-
-	async clickOkAndReturnWhenFullyClosed() {
-		await clickButtonOnPageElement(".mat-dialog-actions button")
-		await page.waitForFunction(() => !document.querySelector(".mat-dialog-content"))
+		await clickButtonOnPageElement(".mat-mdc-dialog-actions button")
+		await page.waitForFunction(() => !document.querySelector(".mat-mdc-dialog-actions button"))
 	}
 }

package/app/codeCharta/ui/dialogs/errorDialog/errorDialog.component.ts

@@ -1,8 +1,9 @@
-import { Component, Inject } from "@angular/core"
+import { Component, Inject, ViewEncapsulation } from "@angular/core"
 import { MAT_DIALOG_DATA } from "@angular/material/dialog"
 
 @Component({
-	template: require("./errorDialog.component.html")
+	templateUrl: "./errorDialog.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class ErrorDialogComponent {
 	constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }) {}

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { FileDownloader } from "../../util/fileDownloader"
 import { STLExporter } from "three/examples/jsm/exporters/STLExporter"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
@@ -11,11 +11,12 @@ import { State } from "../../state/angular-redux/state"
 
 @Component({
 	selector: "cc-export-threed-map-button",
-	template: require("./export3DMapButton.component.html")
+	templateUrl: "./export3DMapButton.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class Export3DMapButtonComponent {
 	private exporter = new STLExporter()
-	constructor(@Inject(State) private state: State, @Inject(ThreeSceneService) private threeSceneService: ThreeSceneService) {}
+	constructor(private state: State, private threeSceneService: ThreeSceneService) {}
 
 	downloadStlFile() {
 		const files = filesSelector(this.state.getValue())

package/app/codeCharta/ui/fileExtensionBar/distributionMetricChooser/distributionMetricChooser.component.ts

@@ -1,16 +1,17 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setDistributionMetric } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.actions"
 import { distributionMetricSelector } from "../../../state/store/dynamicSettings/distributionMetric/distributionMetric.selector"
 
 @Component({
 	selector: "cc-distribution-metric-chooser",
-	template: require("./distributionMetricChooser.component.html")
+	templateUrl: "./distributionMetricChooser.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class DistributionMetricChooserComponent {
 	distributionMetric$ = this.store.select(distributionMetricSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	handleDistributionMetricChanged(value: string) {
 		this.store.dispatch(setDistributionMetric(value))

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

@@ -8,14 +8,13 @@ cc-file-extension-bar {
 
 		cc-distribution-metric-chooser {
 			width: 210px;
-			display: inline-flex;
+			display: flex;
+			align-items: center;
 			font-size: 12px;
+			gap: 6px;
+			padding-left: 6px;
 
-			i.fa {
-				margin: 2px 8px 0 4px;
-			}
-
-			.mat-select {
+			.mat-mdc-select {
 				border-bottom: 0;
 			}
 		}

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

@@ -1,20 +1,21 @@
-import "./fileExtensionBar.component.scss"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { MetricDistribution, FileExtensionCalculator } from "./selectors/fileExtensionCalculator"
-import { Component, Inject } from "@angular/core"
 import { metricDistributionSelector } from "./selectors/metricDistribution.selector"
 import { ThreeSceneService } from "../codeMap/threeViewer/threeSceneService"
 import { Store } from "../../state/angular-redux/store"
 
 @Component({
 	selector: "cc-file-extension-bar",
-	template: require("./fileExtensionBar.component.html")
+	templateUrl: "./fileExtensionBar.component.html",
+	styleUrls: ["./fileExtensionBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FileExtensionBarComponent {
 	showAbsoluteValues = false
 	showDetails = false
 	metricDistribution: MetricDistribution[]
 
-	constructor(@Inject(Store) private store: Store, @Inject(ThreeSceneService) private threeSceneService: ThreeSceneService) {
+	constructor(private store: Store, private threeSceneService: ThreeSceneService) {
 		this.store.select(metricDistributionSelector).subscribe(metricDistribution => {
 			this.metricDistribution = metricDistribution
 		})

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

@@ -6,7 +6,6 @@ import { FileExtensionBarComponent } from "./fileExtensionBar.component"
 @NgModule({
 	imports: [CommonModule, DistributionMetricChooserModule],
 	declarations: [FileExtensionBarComponent],
-	exports: [FileExtensionBarComponent],
-	entryComponents: [FileExtensionBarComponent]
+	exports: [FileExtensionBarComponent]
 })
 export class FileExtensionBarModule {}

package/app/codeCharta/ui/fileExtensionBar/selectors/fileExtensionCalculator.spec.ts

@@ -13,9 +13,9 @@ describe("FileExtensionCalculator", () => {
 	describe("getFileExtensionDistribution", () => {
 		it("should get correct absolute distribution of file-extensions for given metric", () => {
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 40%, 50%)" },
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 60%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
 				{
 					fileExtension: "None",
 					absoluteMetricValue: 15,
@@ -33,9 +33,9 @@ describe("FileExtensionCalculator", () => {
 			setIsBlacklisted([map.children[0].path], map, "flatten")
 
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 40%, 50%)" },
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 42.970_822_281_167_11, color: "hsl(58, 60%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
 				{
 					fileExtension: "None",
 					absoluteMetricValue: 15,
@@ -53,14 +53,14 @@ describe("FileExtensionCalculator", () => {
 			setIsBlacklisted([map.children[0].path], map, "exclude")
 
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 58.483_754_512_635_38, color: "hsl(58, 40%, 50%)" },
+				{ fileExtension: "java", absoluteMetricValue: 162, relativeMetricValue: 58.483_754_512_635_38, color: "hsl(58, 60%, 50%)" },
 				{
 					fileExtension: "json",
 					absoluteMetricValue: 70,
 					relativeMetricValue: 25.270_758_122_743_683,
-					color: "hsl(232, 40%, 50%)"
+					color: "hsl(232, 60%, 50%)"
 				},
-				{ fileExtension: "jpg", absoluteMetricValue: 30, relativeMetricValue: 10.830_324_909_747_292, color: "hsl(321, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 30, relativeMetricValue: 10.830_324_909_747_292, color: "hsl(321, 60%, 50%)" },
 				{ fileExtension: "None", absoluteMetricValue: 15, relativeMetricValue: 5.415_162_454_873_646, color: "#676867" }
 			]
 
@@ -73,8 +73,8 @@ describe("FileExtensionCalculator", () => {
 			setIsBlacklisted(["/root/another big leaf.java", "/root/Parent Leaf/another leaf.java"], map, "exclude")
 
 			const expected: MetricDistribution[] = [
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 60.465_116_279_069_77, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 32.558_139_534_883_72, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 60.465_116_279_069_77, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 32.558_139_534_883_72, color: "hsl(232, 60%, 50%)" },
 				{ fileExtension: "None", absoluteMetricValue: 15, relativeMetricValue: 6.976_744_186_046_512, color: "#676867" }
 			]
 
@@ -89,10 +89,10 @@ describe("FileExtensionCalculator", () => {
 					fileExtension: "java",
 					absoluteMetricValue: 162,
 					relativeMetricValue: 42.970_822_281_167_11,
-					color: "hsl(58, 40%, 50%)"
+					color: "hsl(58, 60%, 50%)"
 				},
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 40%, 50%)" },
-				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 34.482_758_620_689_66, color: "hsl(321, 60%, 50%)" },
+				{ fileExtension: "json", absoluteMetricValue: 70, relativeMetricValue: 18.567_639_257_294_43, color: "hsl(232, 60%, 50%)" },
 				{
 					fileExtension: "None",
 					absoluteMetricValue: 15,
@@ -158,14 +158,14 @@ describe("FileExtensionCalculator", () => {
 					fileExtension: "java",
 					absoluteMetricValue: 162,
 					relativeMetricValue: 40.806_045_340_050_375,
-					color: "hsl(58, 40%, 50%)"
+					color: "hsl(58, 60%, 50%)"
 				},
-				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 32.745_591_939_546_6, color: "hsl(321, 40%, 50%)" },
+				{ fileExtension: "jpg", absoluteMetricValue: 130, relativeMetricValue: 32.745_591_939_546_6, color: "hsl(321, 60%, 50%)" },
 				{
 					fileExtension: "json",
 					absoluteMetricValue: 70,
 					relativeMetricValue: 17.632_241_813_602_015,
-					color: "hsl(232, 40%, 50%)"
+					color: "hsl(232, 60%, 50%)"
 				},
 				{
 					fileExtension: "None",
@@ -173,7 +173,7 @@ describe("FileExtensionCalculator", () => {
 					relativeMetricValue: 3.778_337_531_486_146_3,
 					color: "#676867"
 				},
-				{ fileExtension: "xml", absoluteMetricValue: 8, relativeMetricValue: 2.015_113_350_125_944_6, color: "hsl(7, 40%, 50%)" },
+				{ fileExtension: "xml", absoluteMetricValue: 8, relativeMetricValue: 2.015_113_350_125_944_6, color: "hsl(7, 60%, 50%)" },
 				{
 					fileExtension: "other",
 					absoluteMetricValue: 12,

package/app/codeCharta/ui/fileExtensionBar/selectors/fileExtensionCalculator.ts

@@ -118,6 +118,6 @@ export class FileExtensionCalculator {
 		for (let index = 0; index < fileExtension.length; index++) {
 			hash = fileExtension.codePointAt(index) + ((hash << 5) - hash)
 		}
-		return new HSL(hash % 360, 40, 50).toString()
+		return new HSL(hash % 360, 60, 50).toString()
 	}
 }

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

@@ -1,3 +1,3 @@
 <cc-file-panel-state-buttons></cc-file-panel-state-buttons>
-<cc-file-panel-file-selector *ngIf="!(isDeltaState$ | async)" style="display: inline-block; width: 200px"></cc-file-panel-file-selector>
+<cc-file-panel-file-selector *ngIf="!(isDeltaState$ | async)"></cc-file-panel-file-selector>
 <cc-file-panel-delta-selector *ngIf="isDeltaState$ | async"></cc-file-panel-delta-selector>

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

@@ -1,20 +1,13 @@
 @use "../../../material/theme";
 
 cc-file-panel {
-	width: calc(100% - 150px);
-	min-width: 400px;
-	display: inline-block;
+	display: flex;
+	gap: inherit;
 
 	&.hidden {
 		display: none;
 	}
 
-	.mode-chooser {
-		display: inline-flex;
-		vertical-align: middle;
-		margin-left: 10px;
-	}
-
 	.state-selector-button {
 		&.mode-selector {
 			height: 24px;
@@ -27,21 +20,12 @@ cc-file-panel {
 			}
 
 			&.current {
-				background-color: rgb(0, 150, 136);
+				background-color: theme.$cc-primary-color;
 				color: #ffffff;
 			}
-			&.current:hover {
-				background-color: rgb(0, 150, 136);
-			}
-			.text {
-				display: block;
-				margin-top: -5px;
-				margin-right: 0px;
 
-				&:active {
-					padding: -5px;
-					margin: -5px;
-				}
+			&.current:hover {
+				background-color: theme.$cc-primary-color;
 			}
 		}
 	}
@@ -70,6 +54,7 @@ cc-file-panel {
 			color: rgb(255, 255, 255);
 		}
 	}
+
 	.pictogram {
 		display: inline-flex;
 		width: 10px;
@@ -81,13 +66,8 @@ cc-file-panel {
 		vertical-align: bottom;
 	}
 
+	.standard-select,
 	.delta-select {
 		width: 200px;
-		margin: 0 10px 0 10px;
-		vertical-align: bottom;
-	}
-
-	.standard-select {
-		margin: 0 10px 0 10px;
 	}
 }

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

@@ -1,14 +1,15 @@
-import "./filePanel.component.scss"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../state/angular-redux/store"
 import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
 
 @Component({
 	selector: "cc-file-panel",
-	template: require("./filePanel.component.html")
+	templateUrl: "./filePanel.component.html",
+	styleUrls: ["./filePanel.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class FilePanelComponent {
 	isDeltaState$ = this.store.select(isDeltaStateSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 }

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

@@ -6,12 +6,12 @@ import { NgModule } from "@angular/core"
 import { CommonModule } from "@angular/common"
 import { MaterialModule } from "../../../material/material.module"
 import { FormsModule } from "@angular/forms"
-import { RemoveExtensionModule } from "../../util/removeExtensionModule"
+import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
 import { FileSelectionModeService } from "./fileSelectionMode.service"
 import { FilePanelComponent } from "./filePanel.component"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, FormsModule, RemoveExtensionModule],
+	imports: [CommonModule, MaterialModule, FormsModule, SimplePipesModule],
 	declarations: [
 		FilePanelDeltaSelectorComponent,
 		FilePanelFileSelectorComponent,

package/app/codeCharta/ui/filePanel/filePanel.po.ts

@@ -2,14 +2,16 @@ import { clickButtonOnPageElement } from "../../../puppeteer.helper"
 
 export class FilePanelPageObject {
 	async getSelectedName() {
-		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span")
-		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-select-value-text span", element => element["innerText"])
+		await page.waitForSelector("cc-file-panel cc-file-panel-file-selector .mat-mdc-select-value-text span")
+		return page.$eval("cc-file-panel cc-file-panel-file-selector .mat-mdc-select-value-text span", element => element["innerText"])
 	}
 
 	async getAllNames() {
 		await clickButtonOnPageElement("cc-file-panel cc-file-panel-file-selector mat-select")
-		await page.waitForSelector(".mat-select-panel")
-		const content = await page.$$eval(".mat-select-panel .mat-option-text", element => element.map(item => item["innerText"]))
+		await page.waitForSelector(".mat-mdc-select-panel")
+		const content = await page.$$eval(".mat-mdc-select-panel .mdc-list-item__primary-text", element =>
+			element.map(item => item["innerText"].trim())
+		)
 		return content
 	}
 }