codecharta-visualization 1.113.0 → 1.115.0

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

@@ -65,19 +65,22 @@ cc-map-tree-view {
 				color: gray;
 			}
 
-			.small-action-button {
-				.md-fab {
-					i {
-						top: 2px;
-					}
+			.small-action-button button {
+				min-height: 0;
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				background-color: transparent;
+				box-shadow: none;
 
-					&:hover {
-						background-color: transparent !important;
-					}
+				&:hover {
+					background-color: #ddd;
+				}
 
-					.md-ripple-container {
-						display: none;
-					}
+				i {
+					position: absolute;
+					top: 2px;
+					left: 6px;
 				}
 			}
 		}

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

@@ -1,20 +1,20 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { CodeMapNode } from "../../../codeCharta.model"
 import { Store } from "../../../state/angular-redux/store"
 import { mapTreeViewNodeSelector } from "./mapTreeViewNodeSelector/mapTreeViewNode.selector"
 
-import "./mapTreeView.component.scss"
-
 @Component({
 	selector: "cc-map-tree-view",
-	template: require("./mapTreeView.component.html")
+	templateUrl: "./mapTreeView.component.html",
+	styleUrls: ["./mapTreeView.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewComponent {
 	mapTreeViewNode$: Observable<CodeMapNode>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.mapTreeViewNode$ = store.select(mapTreeViewNodeSelector)
 	}
 }

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

@@ -1,9 +1,10 @@
-import { Component, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { CodeMapNode } from "../../../../codeCharta.model"
 
 @Component({
 	selector: "cc-map-tree-view-item-icon",
-	template: require("./mapTreeViewItemIcon.component.html")
+	templateUrl: "./mapTreeViewItemIcon.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewItemIconComponent {
 	@Input() node: CodeMapNode

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemName/mapTreeViewItemName.component.html

@@ -1,7 +1,7 @@
 <span
 	class="node-name"
 	[class.flattened]="node.isFlattened"
-	[class.noAreaMetric]="!node.attributes[areaMetric$ | async] > 0"
+	[class.noAreaMetric]="!(node.attributes[areaMetric$ | async] > 0)"
 	[class.angular-green]="(searchedNodePaths$ | async).has(node.path)"
 >
 	{{ node.name }}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemName/mapTreeViewItemName.component.spec.ts

@@ -0,0 +1,53 @@
+import { TestBed } from "@angular/core/testing"
+import { render } from "@testing-library/angular"
+import { CodeMapNode } from "../../../../codeCharta.model"
+import { MapTreeViewModule } from "../mapTreeView.module"
+import { MapTreeViewItemNameComponent } from "./mapTreeViewItemName.component"
+
+jest.mock("../../../../state/store/dynamicSettings/areaMetric/areaMetric.selector", () => ({
+	areaMetricSelector: () => "rloc"
+}))
+
+describe("mapTreeViewItemNameComponent", () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [MapTreeViewModule]
+		})
+	})
+
+	it("shouldn't have class 'noAreaMetric' when node's area metric is bigger than 0", async () => {
+		const { container } = await render(MapTreeViewItemNameComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: {
+				node: { attributes: { rloc: 2 } } as unknown as CodeMapNode
+			}
+		})
+
+		const nodeNameWrapper = container.querySelector(".node-name")
+		expect(nodeNameWrapper.classList).not.toContain("noAreaMetric")
+	})
+
+	it("should have class 'noAreaMetric' when node's area metric is 0", async () => {
+		const { container } = await render(MapTreeViewItemNameComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: {
+				node: { attributes: { rloc: 0 } } as unknown as CodeMapNode
+			}
+		})
+
+		const nodeNameWrapper = container.querySelector(".node-name")
+		expect(nodeNameWrapper.classList).toContain("noAreaMetric")
+	})
+
+	it("should have class 'noAreaMetric' when node's area metric doesn't exist", async () => {
+		const { container } = await render(MapTreeViewItemNameComponent, {
+			excludeComponentDeclaration: true,
+			componentProperties: {
+				node: { attributes: {} } as unknown as CodeMapNode
+			}
+		})
+
+		const nodeNameWrapper = container.querySelector(".node-name")
+		expect(nodeNameWrapper.classList).toContain("noAreaMetric")
+	})
+})

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { CodeMapNode } from "../../../../codeCharta.model"
@@ -9,7 +9,8 @@ import { areaMetricSelector } from "../../../../state/store/dynamicSettings/area
 
 @Component({
 	selector: "cc-map-tree-view-item-name",
-	template: require("./mapTreeViewItemName.component.html")
+	templateUrl: "./mapTreeViewItemName.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewItemNameComponent {
 	@Input() node: CodeMapNode
@@ -21,7 +22,7 @@ export class MapTreeViewItemNameComponent {
 	rootUnary$: Observable<number>
 	areaMetric$: Observable<string>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.searchedNodePaths$ = store.select(searchedNodePathsSelector)
 		this.rootUnary$ = store.select(rootUnarySelector)
 		this.areaMetric$ = store.select(areaMetricSelector)

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewItemOptionButtons/mapTreeViewItemOptionButtons.component.html

@@ -1,8 +1,8 @@
 <span role="button" class="right-aligned" aria-hidden="true">
 	<i class="flattened fa fa-eye-slash" *ngIf="isFlattened" title="Flattened"></i>
 
-	<div class="small-action-button transparent">
-		<button class="md-fab" (click)="openNodeContextMenu($event)" title="Open Node-Context-Menu">
+	<div class="small-action-button">
+		<button (click)="openNodeContextMenu($event)" title="Open Node-Context-Menu">
 			<i class="fa fa-ellipsis-h"></i>
 		</button>
 	</div>

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

@@ -1,8 +1,9 @@
-import { Component, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 @Component({
 	selector: "cc-map-tree-view-item-option-buttons",
-	template: require("./mapTreeViewItemOptionButtons.component.html")
+	templateUrl: "./mapTreeViewItemOptionButtons.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewItemOptionButtonsComponent {
 	@Input() isFlattened: boolean

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

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from "@angular/core"
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
 
 import { Store } from "../../../../state/angular-redux/store"
 import { CodeMapNode } from "../../../../codeCharta.model"
@@ -10,7 +10,8 @@ import { areaMetricSelector } from "../../../../state/store/dynamicSettings/area
 
 @Component({
 	selector: "cc-map-tree-view-level",
-	template: require("./mapTreeViewLevel.component.html")
+	templateUrl: "./mapTreeViewLevel.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MapTreeViewLevelComponent implements OnInit {
 	@Input() node: CodeMapNode
@@ -24,7 +25,7 @@ export class MapTreeViewLevelComponent implements OnInit {
 
 	areMetricGreaterZero = false
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		// open root folder initially

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

@@ -4,7 +4,7 @@
 	></span>
 	<span class="box-rounded node-count" style="display: inline-flex" title="Files flattened"
 		>{{ matchingFileCounters.flattenCount
-		}}<img alt="flattenIcon" class="fa png-icon-files-counter" src="../../../../assets/flatten.png" />
+		}}<img alt="flattenIcon" class="fa png-icon-files-counter" src="codeCharta/assets/flatten.png" />
 	</span>
 	<span class="box-rounded node-count" title="Files excluded">{{ matchingFileCounters.excludeCount }}<i class="fa fa-ban"></i></span>
 	<div class="sort-component">

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

@@ -33,7 +33,7 @@ cc-matching-files-counter {
 		padding: 1px 8px;
 	}
 
-	cc-sorting-option .mat-select {
+	cc-sorting-option .mat-mdc-select {
 		width: 105px;
 		padding: 2px 8px;
 		font-weight: normal;
@@ -43,7 +43,7 @@ cc-matching-files-counter {
 
 	.sort-component {
 		margin-right: 3px;
-		float: right;
+		display: inline-block;
 		color: black;
 	}
 }

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

@@ -1,17 +1,18 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../state/angular-redux/store"
-import "./matchingFilesCounter.component.scss"
 import { MatchingFilesCounter, matchingFilesCounterSelector } from "./selectors/matchingFilesCounter.selector"
 
 @Component({
 	selector: "cc-matching-files-counter",
-	template: require("./matchingFilesCounter.component.html")
+	templateUrl: "./matchingFilesCounter.component.html",
+	styleUrls: ["./matchingFilesCounter.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class MatchingFilesCounterComponent {
 	matchingFileCounters$: Observable<MatchingFilesCounter>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.matchingFileCounters$ = store.select(matchingFilesCounterSelector)
 	}
 }

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/selectors/matchingFilesCounter.selector.ts

@@ -21,13 +21,13 @@ export const matchingFilesCounterSelector: (state: CcState) => MatchingFilesCoun
 		const searchedNodeLeaves = searchedNodes.filter(node => isLeaf(node))
 		return {
 			fileCount: `${searchedNodeLeaves.length}/${allNodes.length}`,
-			flattenCount: `${getBlacklistedFileCount(BlacklistType.flatten, searchedNodeLeaves, blacklist)}/${getBlacklistedFileCount(
-				BlacklistType.flatten,
+			flattenCount: `${getBlacklistedFileCount("flatten", searchedNodeLeaves, blacklist)}/${getBlacklistedFileCount(
+				"flatten",
 				allNodes,
 				blacklist
 			)}`,
-			excludeCount: `${getBlacklistedFileCount(BlacklistType.exclude, searchedNodeLeaves, blacklist)}/${getBlacklistedFileCount(
-				BlacklistType.exclude,
+			excludeCount: `${getBlacklistedFileCount("exclude", searchedNodeLeaves, blacklist)}/${getBlacklistedFileCount(
+				"exclude",
 				allNodes,
 				blacklist
 			)}`

package/app/codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect.spec.ts

@@ -3,8 +3,6 @@ import { TestBed } from "@angular/core/testing"
 import { MatDialog } from "@angular/material/dialog"
 import { Action } from "redux"
 import { Subject } from "rxjs"
-import { mocked } from "ts-jest/utils"
-import { BlacklistType } from "../../../codeCharta.model"
 import { EffectsModule } from "../../../state/angular-redux/effects/effects.module"
 import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
 import { resultsInEmptyMap } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap"
@@ -17,7 +15,7 @@ jest.mock("../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/result
 	resultsInEmptyMap: jest.fn()
 }))
 
-const mockedResultsInEmptyMap = mocked(resultsInEmptyMap)
+const mockedResultsInEmptyMap = jest.mocked(resultsInEmptyMap)
 
 describe("BlacklistSearchPatternEffect", () => {
 	const mockedDialog = { open: jest.fn() }
@@ -42,19 +40,19 @@ describe("BlacklistSearchPatternEffect", () => {
 		mockedResultsInEmptyMap.mockImplementation(() => false)
 		Store.dispatch(setSearchPattern("needle"))
 
-		EffectsModule.actions$.next(blacklistSearchPattern(BlacklistType.exclude))
+		EffectsModule.actions$.next(blacklistSearchPattern("exclude"))
 
 		expect(Store.store.getState().dynamicSettings.searchPattern).toBe("")
-		expect(Store.store.getState().fileSettings.blacklist).toEqual([{ type: BlacklistType.exclude, path: "*needle*" }])
+		expect(Store.store.getState().fileSettings.blacklist).toEqual([{ type: "exclude", path: "*needle*" }])
 	})
 
 	it("should not reset search pattern, when excluding from search bar failed and afterwards excluding within CodeCharta map", () => {
 		mockedResultsInEmptyMap.mockImplementation(() => true)
 		Store.dispatch(setSearchPattern("root"))
-		EffectsModule.actions$.next(blacklistSearchPattern(BlacklistType.exclude))
+		EffectsModule.actions$.next(blacklistSearchPattern("exclude"))
 
 		mockedResultsInEmptyMap.mockImplementation(() => false)
-		EffectsModule.actions$.next(addBlacklistItemsIfNotResultsInEmptyMap([{ type: BlacklistType.exclude, path: "*needle*" }]))
+		EffectsModule.actions$.next(addBlacklistItemsIfNotResultsInEmptyMap([{ type: "exclude", path: "*needle*" }]))
 
 		expect(Store.store.getState().dynamicSettings.searchPattern).toBe("root")
 	})

package/app/codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect.ts

@@ -25,8 +25,7 @@ export const blacklistSearchPattern = (type: BlacklistType): BlacklistSearchPatt
 export class BlacklistSearchPatternEffect {
 	constructor(
 		@Inject(ActionsToken) private actions$: Actions,
-		@Inject(Store) private store: Store,
-		@Inject(AddBlacklistItemsIfNotResultsInEmptyMapEffect)
+		private store: Store,
 		private addBlacklistItemsIfNotResultsInEmptyMapEffect: AddBlacklistItemsIfNotResultsInEmptyMapEffect
 	) {}
 
@@ -44,7 +43,7 @@ export class BlacklistSearchPatternEffect {
 	flattenSearchPattern$ = createEffect(
 		() =>
 			this.searchPattern2BlacklistItems$.pipe(
-				filter(searchPattern2BlacklistItems => searchPattern2BlacklistItems.type === BlacklistType.flatten),
+				filter(searchPattern2BlacklistItems => searchPattern2BlacklistItems.type === "flatten"),
 				tap(searchPattern2BlacklistItems => {
 					this.store.dispatch(addBlacklistItems(searchPattern2BlacklistItems.blacklistItems))
 					this.store.dispatch(setSearchPattern())
@@ -55,7 +54,7 @@ export class BlacklistSearchPatternEffect {
 
 	excludeSearchPattern$ = createEffect(() =>
 		this.searchPattern2BlacklistItems$.pipe(
-			filter(searchPattern2BlacklistItems => searchPattern2BlacklistItems.type === BlacklistType.exclude),
+			filter(searchPattern2BlacklistItems => searchPattern2BlacklistItems.type === "exclude"),
 			tap(() => {
 				this.addBlacklistItemsIfNotResultsInEmptyMapEffect.doBlacklistItemsResultInEmptyMap$
 					.pipe(

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

@@ -2,8 +2,6 @@ cc-search-bar {
 	display: inline-block;
 
 	.search-icon {
-		display: inline-block;
-		vertical-align: text-top;
 		margin-right: 8px;
 		min-width: 16px;
 	}
@@ -42,7 +40,6 @@ cc-search-bar {
 
 	.small-action-button {
 		margin: 0px 5px 0px 5px;
-		display: inline-block;
 	}
 
 	button {

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

@@ -6,20 +6,18 @@ import { SearchBarModule } from "./searchBar.module"
 import userEvent from "@testing-library/user-event"
 import { Store as PlainStore } from "../../../state/store/store"
 import { searchPatternSelector } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
-import { BlacklistType } from "../../../codeCharta.model"
 import { EffectsModule } from "../../../state/angular-redux/effects/effects.module"
 import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
 import { Subject } from "rxjs"
 import { Action } from "redux"
-import { MatDialog } from "@angular/material/dialog"
 import { resultsInEmptyMap } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap"
-import { mocked } from "ts-jest/utils"
+import { MatDialog } from "@angular/material/dialog"
 
 jest.mock("../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap", () => ({
 	resultsInEmptyMap: jest.fn()
 }))
 
-const mockedResultsInEmptyMap = mocked(resultsInEmptyMap)
+const mockedResultsInEmptyMap = jest.mocked(resultsInEmptyMap)
 
 describe("cc-search-bar", () => {
 	const mockedDialog = { open: jest.fn() }
@@ -72,7 +70,7 @@ describe("cc-search-bar", () => {
 
 		searchField = screen.getByPlaceholderText("Search: *.js, **/app/*")
 		expect(searchField.value).toBe("")
-		expect(PlainStore.store.getState().fileSettings.blacklist[0]).toEqual({ type: BlacklistType.flatten, path: "*needle*" })
+		expect(PlainStore.store.getState().fileSettings.blacklist[0]).toEqual({ type: "flatten", path: "*needle*" })
 	})
 
 	it("should exclude pattern", async () => {
@@ -88,6 +86,6 @@ describe("cc-search-bar", () => {
 
 		searchField = screen.getByPlaceholderText("Search: *.js, **/app/*")
 		expect(searchField.value).toBe("")
-		expect(PlainStore.store.getState().fileSettings.blacklist[0]).toEqual({ type: BlacklistType.exclude, path: "*needle*" })
+		expect(PlainStore.store.getState().fileSettings.blacklist[0]).toEqual({ type: "exclude", path: "*needle*" })
 	})
 })

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

@@ -1,6 +1,4 @@
-import "./searchBar.component.scss"
-import { Component, Inject } from "@angular/core"
-import debounce from "lodash.debounce"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Store } from "../../../state/angular-redux/store"
 import { setSearchPattern } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.actions"
 import { searchPatternSelector } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
@@ -9,19 +7,22 @@ import { isFlattenPatternDisabledSelector } from "./selectors/isFlattenPatternDi
 import { isExcludePatternDisabledSelector } from "./selectors/isExcludePatternDisabled.selector"
 import { BlacklistType } from "../../../codeCharta.model"
 import { blacklistSearchPattern } from "./blacklistSearchPattern.effect"
+import { debounce } from "../../../util/debounce"
 
 @Component({
 	selector: "cc-search-bar",
-	template: require("./searchBar.component.html")
+	templateUrl: "./searchBar.component.html",
+	styleUrls: ["./searchBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class SearchBarComponent {
 	searchPattern$ = this.store.select(searchPatternSelector)
 	isSearchPatternEmpty$ = this.store.select(isSearchPatternEmptySelector)
 	isFlattenPatternDisabled$ = this.store.select(isFlattenPatternDisabledSelector)
 	isExcludePatternDisabled$ = this.store.select(isExcludePatternDisabledSelector)
-	setSearchPatternDebounced = debounce(this.setSearchPattern, 400)
+	setSearchPatternDebounced = debounce((event: Event) => this.setSearchPattern(event), 400)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	setSearchPattern(event: Event) {
 		const eventTarget = event.target as HTMLInputElement

package/app/codeCharta/ui/searchPanel/searchBar/selectors/isExcludePatternDisabled.selector.ts

@@ -1,4 +1,3 @@
-import { BlacklistType } from "../../../../codeCharta.model"
 import { createSelector } from "../../../../state/angular-redux/createSelector"
 import { searchPatternSelector } from "../../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
 import { blacklistSelector } from "../../../../state/store/fileSettings/blacklist/blacklist.selector"
@@ -11,6 +10,6 @@ export const isExcludePatternDisabledSelector = createSelector(
 		if (isSearchPatternEmpty) {
 			return true
 		}
-		return isPatternBlacklisted(blacklist, BlacklistType.exclude, searchPattern)
+		return isPatternBlacklisted(blacklist, "exclude", searchPattern)
 	}
 )

package/app/codeCharta/ui/searchPanel/searchBar/selectors/isFlattenPatternDisabled.selector.ts

@@ -1,4 +1,3 @@
-import { BlacklistType } from "../../../../codeCharta.model"
 import { createSelector } from "../../../../state/angular-redux/createSelector"
 import { searchPatternSelector } from "../../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
 import { blacklistSelector } from "../../../../state/store/fileSettings/blacklist/blacklist.selector"
@@ -11,6 +10,6 @@ export const isFlattenPatternDisabledSelector = createSelector(
 		if (isSearchPatternEmpty) {
 			return true
 		}
-		return isPatternBlacklisted(blacklist, BlacklistType.flatten, searchPattern)
+		return isPatternBlacklisted(blacklist, "flatten", searchPattern)
 	}
 )

package/app/codeCharta/ui/searchPanel/searchBar/utils/isPatternBlacklisted.spec.ts

@@ -1,20 +1,19 @@
-import { BlacklistType } from "../../../../codeCharta.model"
 import { isPatternBlacklisted } from "./isPatternBlacklisted"
 
 describe("isPatternBlacklisted", () => {
 	it("should recognized an exact match", () => {
-		expect(isPatternBlacklisted([{ type: BlacklistType.flatten, path: "*needle*" }], BlacklistType.flatten, "*needle*")).toBe(true)
+		expect(isPatternBlacklisted([{ type: "flatten", path: "*needle*" }], "flatten", "*needle*")).toBe(true)
 	})
 
 	it("should recognized * matches", () => {
-		expect(isPatternBlacklisted([{ type: BlacklistType.flatten, path: "*needle*" }], BlacklistType.flatten, "needle")).toBe(true)
+		expect(isPatternBlacklisted([{ type: "flatten", path: "*needle*" }], "flatten", "needle")).toBe(true)
 	})
 
 	it("should not recognized * vs absolute value", () => {
-		expect(isPatternBlacklisted([{ type: BlacklistType.flatten, path: "*needle*" }], BlacklistType.flatten, "/needle")).toBe(false)
+		expect(isPatternBlacklisted([{ type: "flatten", path: "*needle*" }], "flatten", "/needle")).toBe(false)
 	})
 
 	it("should ignore different blacklist type", () => {
-		expect(isPatternBlacklisted([{ type: BlacklistType.flatten, path: "*needle*" }], BlacklistType.exclude, "*needle*")).toBe(false)
+		expect(isPatternBlacklisted([{ type: "flatten", path: "*needle*" }], "exclude", "*needle*")).toBe(false)
 	})
 })

package/app/codeCharta/ui/searchPanel/searchBar/utils/parseBlacklistItems.spec.ts

@@ -1,18 +1,17 @@
-import { BlacklistType } from "../../../../codeCharta.model"
 import { parseBlacklistItems } from "./parseBlacklistItems"
 
 describe("parseBlacklistItems", () => {
 	it("should parse multiple items", () => {
-		expect(parseBlacklistItems(BlacklistType.flatten, "html,ts")).toEqual([
-			{ type: BlacklistType.flatten, path: "*html*" },
-			{ type: BlacklistType.flatten, path: "*ts*" }
+		expect(parseBlacklistItems("flatten", "html,ts")).toEqual([
+			{ type: "flatten", path: "*html*" },
+			{ type: "flatten", path: "*ts*" }
 		])
 	})
 
 	it("should parse multiple negated items", () => {
-		expect(parseBlacklistItems(BlacklistType.flatten, "!html,ts")).toEqual([
-			{ type: BlacklistType.flatten, path: "!*html*" },
-			{ type: BlacklistType.flatten, path: "!*ts*" }
+		expect(parseBlacklistItems("flatten", "!html,ts")).toEqual([
+			{ type: "flatten", path: "!*html*" },
+			{ type: "flatten", path: "!*ts*" }
 		])
 	})
 })

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

@@ -1,4 +1,4 @@
-<mat-card class="search-panel-card" [class.expanded]="searchPanelMode !== 'minimized'">
+<mat-card appearance="outlined" class="search-panel-card" [class.expanded]="searchPanelMode !== 'minimized'">
 	<div class="section">
 		<div class="section-header">
 			<cc-search-bar (click)="openSearchPanel()"></cc-search-bar>

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

@@ -1,8 +1,4 @@
 cc-search-panel {
-	cc-search-panel-mode-selector {
-		display: inline-block;
-	}
-
 	.search-panel-card .section-body {
 		padding: 6px;
 	}

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.spec.ts

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/angular"
-import { BlacklistType } from "../../../codeCharta.model"
 import { addBlacklistItem } from "../../../state/store/fileSettings/blacklist/blacklist.actions"
 import { Store } from "../../../state/store/store"
 import { SearchPanelModeSelectorComponent } from "./searchPanelModeSelector.component"
@@ -12,7 +11,7 @@ describe("SearchPanelModeSelectorComponent", () => {
 	})
 
 	it("should show blacklist items indicator when there are blacklist items", async () => {
-		Store.dispatch(addBlacklistItem({ path: "something.ts", type: BlacklistType.exclude }))
+		Store.dispatch(addBlacklistItem({ path: "something.ts", type: "exclude" }))
 
 		const { container } = await render(SearchPanelModeSelectorComponent)
 		expect(container.querySelector(".has-blacklist-items-indicator")["hidden"]).toBe(false)