fix(visualization/#3654): View encapsulation causing component style problems

visualization/angular.json

@@ -31,7 +31,10 @@
             "customWebpackConfig": {
               "path": "conf/webpack.config.js"
             },
-            "scripts": []
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": ["app/material"]
+            }
           },
           "configurations": {
             "production": {

visualization/app/codeCharta/codeCharta.component.scss

@@ -1,4 +1,4 @@
-@use "../material/theme";
+@use "variables";
 @import "../mixins.scss";
 
 cc-code-charta {
@@ -95,7 +95,7 @@ cc-code-charta {
         }
 
         &.current:hover {
-            background-color: theme.$cc-emphasized-color !important;
+            background-color: variables.$cc-emphasized-color !important;
         }
     }
 }

visualization/app/codeCharta/ui/actionIcon/actionIcon.component.scss

@@ -1,4 +1,4 @@
-@use "../../../material/theme";
+@use "variables";
 
 cc-action-icon {
     display: inline-flex;
@@ -7,11 +7,11 @@ cc-action-icon {
     width: 24px;
     height: 24px;
     border-radius: 100%;
-    background-color: theme.$cc-primary-color;
+    background-color: variables.$cc-primary-color;
     font-size: 14px;
 
     &:hover {
-        background-color: theme.$cc-emphasized-color;
+        background-color: variables.$cc-emphasized-color;
     }
 
     &.disabled {

visualization/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss

@@ -1,4 +1,5 @@
-@use "../../../../material/theme";
+@use "variables";
+
 cc-attribute-type-selector {
     .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
         display: flex;
@@ -12,7 +13,7 @@ cc-attribute-type-selector {
 
         &:hover {
             background-color: rgba(0, 0, 0, 0.05);
-            color: theme.$cc-primary-color;
+            color: variables.$cc-primary-color;
         }
     }
 

visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomDialog.component.scss

@@ -1,19 +1,6 @@
-@use "../../../../../material/theme";
+@use "variables";
 
 .cc-add-custom-config-dialog .mat-mdc-dialog-container {
-    padding: 0;
-    width: 500px;
-    overflow: hidden;
-
-    mat-toolbar {
-        &.header {
-            background-color: theme.$cc-primary-color;
-            h2 {
-                color: white;
-            }
-        }
-    }
-
     .dialog-content {
         mat-form-field {
             width: 100%;
@@ -62,11 +49,8 @@
             }
 
             &.add-custom-config-button {
-                color: theme.$cc-primary-color;
+                color: variables.$cc-primary-color;
                 background-color: rgba(138, 132, 132, 0.08);
-                position: absolute;
-                right: 16px;
-                bottom: 0;
             }
 
             &.add-custom-config-button[disabled] {

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.scss

@@ -1,8 +1,8 @@
-@use "../../../../../material/theme";
+@use "variables";
 
 cc-custom-config-item-group {
     .custom-config-item-group-title {
-        color: theme.$cc-font-color;
+        color: variables.$cc-font-color;
         display: inline-block;
     }
 

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../material/theme";
+@use "variables";
 
 .cc-custom-config-list {
     width: 850px;
@@ -49,7 +49,7 @@
         margin: 10px 0 20px 0;
         font-size: 1.4em;
         line-height: 1.4em;
-        color: theme.$cc-font-color;
+        color: variables.$cc-font-color;
     }
 
     .action-buttons button {
@@ -60,12 +60,12 @@
         border-radius: 100%;
         line-height: 48px;
         background-color: #ffffff;
-        color: theme.$cc-primary-color;
+        color: variables.$cc-primary-color;
 
         &:disabled,
         &[disabled] {
             background-color: #e6e6e6;
-            color: theme.$cc-disabled-color;
+            color: variables.$cc-disabled-color;
         }
 
         i.fa {
@@ -128,7 +128,7 @@
 
                     &:hover {
                         background-color: rgba(0, 0, 0, 0.05);
-                        color: theme.$cc-primary-color;
+                        color: variables.$cc-primary-color;
                         border-radius: 50%;
                     }
                 }

visualization/app/codeCharta/ui/customConfigs/customConfigNoteDialogButton/customConfigNoteDialog/customConfigNoteDialog.component.scss

@@ -1,4 +1,4 @@
-@use "app/material/theme";
+@use "variables";
 
 cc-custom-config-note-dialog {
     .custom-config-note-dialog-container {
@@ -19,12 +19,12 @@ cc-custom-config-note-dialog {
         button {
             padding: 12px;
             margin: 0 0 0 10px;
-            color: theme.$cc-primary-color;
+            color: variables.$cc-primary-color;
             background-color: rgba(138, 132, 132, 0.08);
 
             &:hover {
                 background-color: rgba(0, 0, 0, 0.05);
-                color: theme.$cc-primary-color;
+                color: variables.$cc-primary-color;
             }
         }
     }

visualization/app/codeCharta/ui/customConfigs/downloadCustomConfigsButton/downloadCustomConfigsButton.component.scss

@@ -1,12 +1,12 @@
-@use "../../../../material/theme";
+@use "variables";
 
 cc-download-custom-configs-button {
     button {
         padding: 0 16px;
         height: 48px;
         width: 100%;
         margin: 0;
-        background-color: theme.$cc-primary-color;
+        background-color: variables.$cc-primary-color;
         vertical-align: middle;
 
         &:disabled {

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

@@ -1,4 +1,4 @@
-@use "../../../../material/theme";
+@use "variables";
 
 .cc-changelog-dialog .mat-mdc-dialog-container {
     [mat-dialog-content] {
@@ -26,7 +26,7 @@
         justify-content: flex-end;
 
         a {
-            color: theme.$cc-primary-color;
+            color: variables.$cc-primary-color;
         }
 
         button {

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

@@ -18,24 +18,29 @@ export class ChangelogDialogComponent {
     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
         changelogLines = changelogLines.slice(currentVersionFirstLine, lastOpenedVersionFirstLine + 1)
         const titles = ["Added 🚀", "Fixed 🐞", "Changed", "Removed 🗑", "Chore 👨‍💻 👩‍💻"]
         const changes = {}
         for (const title of titles) {
             const titlePattern = new RegExp(`<h3>${title}</h3>`)
             const titleLinesIndexes = this.getAllIndexes(changelogLines, titlePattern)
+
             const changelogTypes: string[] = []
             for (const lineIndex of titleLinesIndexes) {
                 // Add 2 to remove the headline and the <ul> tag
                 const start = lineIndex + 2
                 const end = this.findEndChangesLine(changelogLines, lineIndex)
+
                 for (const changeLine of changelogLines.slice(start, end)) {
                     changelogTypes.push(`${changeLine}<br>`)
                 }
             }
+
             if (changelogTypes.length > 0) {
                 changes[title] = changelogTypes.join("\n")
             }

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

@@ -1,4 +1,4 @@
-@use "../../../material/theme";
+@use "variables";
 
 cc-file-panel {
     display: flex;
@@ -20,32 +20,32 @@ cc-file-panel {
             }
 
             &.current {
-                background-color: theme.$cc-primary-color;
+                background-color: variables.$cc-primary-color;
                 color: #ffffff;
             }
 
             &.current:hover {
-                background-color: theme.$cc-primary-color;
+                background-color: variables.$cc-primary-color;
             }
         }
     }
 
     .reference-comparison-switch {
-        background-color: theme.$cc-primary-color;
+        background-color: variables.$cc-primary-color;
         margin: 0;
         height: 24px;
         width: 36px;
         border-radius: 5px;
 
         &[disabled] {
-            background-color: theme.$cc-disabled-color;
+            background-color: variables.$cc-disabled-color;
         }
 
         &:hover {
-            background-color: theme.$cc-emphasized-color;
+            background-color: variables.$cc-emphasized-color;
 
             &[disabled] {
-                background-color: theme.$cc-disabled-color;
+                background-color: variables.$cc-disabled-color;
             }
         }
 

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../material/theme";
+@use "variables";
 .file-select {
     &.mat-mdc-select-panel {
         min-width: max-content;
@@ -23,7 +23,7 @@
 
             &:hover {
                 background-color: rgba(0, 0, 0, 0.05);
-                color: theme.$cc-primary-color;
+                color: variables.$cc-primary-color;
             }
 
             &.file-select-action-button {

visualization/app/codeCharta/ui/legendPanel/legendPanel.component.scss

@@ -1,4 +1,4 @@
-@use "../../../material/theme";
+@use "variables";
 
 $fixedHeight: 35;
 cc-legend-panel {
@@ -10,10 +10,10 @@ cc-legend-panel {
         right: -35px;
         color: white;
         user-select: none;
-        background-color: theme.$cc-primary-color;
+        background-color: variables.$cc-primary-color;
 
         &:hover {
-            background-color: theme.$cc-emphasized-color;
+            background-color: variables.$cc-emphasized-color;
         }
 
         &.isAttributeSideBarVisible {

visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss

@@ -1,4 +1,4 @@
-@use "../../../material/theme";
+@use "variables";
 
 cc-metric-chooser {
     width: 100%;
@@ -43,7 +43,7 @@ cc-metric-chooser:hover .metric-value {
             0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 
         .search-icon {
-            color: theme.$cc-primary-color;
+            color: variables.$cc-primary-color;
             margin-left: 8px;
             font-size: 18px;
         }

visualization/app/codeCharta/ui/resetMapButton/confirmResetMapDialog/confirmResetMapDialog.component.scss

@@ -1,13 +1,9 @@
-@use "../../../../material/theme";
+@use "variables";
 
 .cc-confirm-reset-map-dialog .mat-mdc-dialog-container {
-    padding: 0;
-    width: 500px;
-    overflow: hidden;
-
     mat-toolbar {
         &.header {
-            background-color: theme.$cc-primary-color;
+            background-color: variables.$cc-primary-color;
             h2 {
                 color: white;
             }
@@ -24,7 +20,7 @@
         .mat-mdc-button {
             padding: 0 8px;
             margin: 8px 0 8px 8px;
-            color: theme.$cc-primary-color;
+            color: variables.$cc-primary-color;
             background-color: rgba(138, 132, 132, 0.08);
             bottom: 0;
         }

visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.scss

@@ -1,8 +1,8 @@
-@use "../../../material/theme";
+@use "variables";
 
 cc-reset-settings-button {
     button {
-        color: theme.$cc-primary-color;
+        color: variables.$cc-primary-color;
         background: none;
         align-items: center;
         display: flex;

visualization/app/codeCharta/ui/ribbonBar/artificialIntelligence/artificialIntelligence.component.scss

@@ -1,4 +1,5 @@
-@use "../../../../material/theme";
+@use "variables";
+
 cc-artificial-intelligence {
     display: flex;
     justify-content: center;

visualization/app/codeCharta/ui/ribbonBar/artificialIntelligence/suspiciousMetrics/suspiciousMetrics.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../material/theme";
+@use "variables";
 
 .ai-drop-down.suspicious-metric-panel {
     scrollbar-gutter: stable;

visualization/app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/metricColorRangeSlider.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../material/theme";
+@use "variables";
 
 cc-metric-color-range-slider {
     .cc-range-slider-container {
@@ -47,7 +47,7 @@ cc-metric-color-range-slider {
                 position: absolute;
                 top: 20px;
                 border-radius: 100%;
-                border: 7px solid theme.$cc-primary-color;
+                border: 7px solid variables.$cc-primary-color;
             }
         }
     }