Sonar issues/fix blocker (#4216)

* fix: remove sonar blocker issu

* fix: add qrcode to commonjs dependencies so there is no more warning when starting codecharta

Author: ChristianHuehn

visualization/angular.json

@@ -35,7 +35,7 @@
               "path": "conf/webpack.config.js"
             },
             "scripts": [],
-            "allowedCommonJsDependencies": ["ajv", "color-convert", "html2canvas", "ignore", "md5", "three-orbit-controls"]
+            "allowedCommonJsDependencies": ["ajv", "color-convert", "html2canvas", "ignore", "md5", "qrcode", "three-orbit-controls"]
           },
           "configurations": {
             "production": {

visualization/app/codeCharta/ui/colorPicker/colorPicker.component.spec.ts

@@ -9,7 +9,7 @@ describe("ColorPickerComponent", () => {
         template: `
             <cc-color-picker
                 [hexColor]="hexColor"
-                (onColorChange)="hexColor = $event"
+                (colorChange)="hexColor = $event"
                 [triggerTemplate]="colorPickerTriggerTemplate"
             ></cc-color-picker>
             <ng-template #colorPickerTriggerTemplate let-isOpen="isOpen" let-isHovered="isHovered">

visualization/app/codeCharta/ui/colorPicker/colorPicker.component.ts

@@ -14,7 +14,7 @@ export class ColorPickerComponent {
     @Input() openXPosition: MenuPositionX = "after"
     @Input() triggerTemplate: TemplateRef<unknown>
 
-    @Output() onColorChange = new EventEmitter<string>()
+    @Output() colorChange = new EventEmitter<string>()
 
     @ViewChild("colorPickerMenuTrigger") colorPickerMenuTrigger: MatMenuTrigger
 
@@ -23,7 +23,7 @@ export class ColorPickerComponent {
     private isClickInside = false
 
     handleChangeComplete(hexColor: string) {
-        this.onColorChange.emit(hexColor)
+        this.colorChange.emit(hexColor)
     }
 
     @HostListener("mouseenter") onMouseEnter() {

visualization/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.html

@@ -1,5 +1,5 @@
 <cc-labelled-color-picker
     [hexColor]="(mapColors$ | async)[mapColorFor]"
     [labels]="[mapColorFor | mapColorLabel: (colorRange$ | async) : (nodeMetricRange$ | async) : (colorMetric$ | async)]"
-    (onColorChange)="handleColorChange($event)"
+    (colorChange)="handleColorChange($event)"
 ></cc-labelled-color-picker>

visualization/app/codeCharta/ui/export3DMapButton/export3DMapDialog/export3DMapDialog.component.html

@@ -90,7 +90,7 @@
                     <button (click)="onFlipLogo()" mat-button title="Flip Logo Button">
                         <span><i class="fa fa-arrows-h"></i> Flip Logo</span>
                     </button>
-                    <cc-labelled-color-picker [hexColor]="logoColor" (onColorChange)="onLogoColorChange($event)" [labels]="['Color']">
+                    <cc-labelled-color-picker [hexColor]="logoColor" (colorChange)="onLogoColorChange($event)" [labels]="['Color']">
                     </cc-labelled-color-picker>
                 </div>
             </mat-card-content>

visualization/app/codeCharta/ui/export3DMapButton/export3DMapDialog/export3DMapDialog.component.ts

@@ -3,7 +3,7 @@ import { accumulatedDataSelector } from "../../../state/selectors/accumulatedDat
 import { FileNameHelper } from "../../../util/fileNameHelper"
 import { getVisibleFileStates, isDeltaState } from "../../../model/files/files.helper"
 import { FileDownloader } from "../../../util/fileDownloader"
-import { Component, ElementRef, Input, ViewChild } from "@angular/core"
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core"
 import { State } from "@ngrx/store"
 import { CcState, NodeMetricData } from "../../../codeCharta.model"
 import { ThreeSceneService } from "../../codeMap/threeViewer/threeSceneService"
@@ -74,7 +74,7 @@ interface ManualVisibilityItem {
         MatDialogActions
     ]
 })
-export class Export3DMapDialogComponent {
+export class Export3DMapDialogComponent implements AfterViewInit {
     @ViewChild("rendererContainer") rendererContainer: ElementRef
     @ViewChild("fileInput") fileInput: ElementRef
     @Input() logoColor = "#ffffff"

visualization/app/codeCharta/ui/labelledColorPicker/labelledColorPicker.component.html

@@ -1,6 +1,6 @@
 <cc-color-picker
     [hexColor]="hexColor"
-    (onColorChange)="handleColorChange($event)"
+    (colorChange)="handleColorChange($event)"
     [openXPosition]="'before'"
     [triggerTemplate]="colorPickerTriggerTemplate"
 ></cc-color-picker>

visualization/app/codeCharta/ui/labelledColorPicker/labelledColorPicker.component.spec.ts

@@ -22,7 +22,7 @@ describe("LabelledColorPickerComponent", () => {
             },
             componentProperties: {
                 hexColor: "#000000",
-                onColorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
+                colorChange: { emit: handleColorChange } as unknown as EventEmitter<string>
             }
         })
         const colorPickerTrigger = container.querySelector("cc-color-picker")

visualization/app/codeCharta/ui/labelledColorPicker/labelledColorPicker.component.ts

@@ -20,9 +20,9 @@ export class LabelledColorPickerComponent {
         })
     )
     @Output()
-    onColorChange = new EventEmitter<string>()
+    colorChange = new EventEmitter<string>()
 
     handleColorChange(hexColor: string) {
-        this.onColorChange.emit(hexColor)
+        this.colorChange.emit(hexColor)
     }
 }

visualization/app/codeCharta/ui/labelledColorPicker/readableColorForBackground.pipe.ts

@@ -1,11 +1,11 @@
-import { Pipe } from "@angular/core"
+import { Pipe, PipeTransform } from "@angular/core"
 import { getReadableColorForBackground } from "../../util/color/getReadableColorForBackground"
 
 @Pipe({
     name: "readableColorForBackground",
     standalone: true
 })
-export class ReadableColorForBackgroundPipe {
+export class ReadableColorForBackgroundPipe implements PipeTransform {
     transform(hexColor: string) {
         return getReadableColorForBackground(hexColor)
     }