From ed0c5c28d4c70c61bffeb1c6c19bd697cfa3d007 Mon Sep 17 00:00:00 2001
From: Polina Schoenfeld <polina.schoenfeld@maibornwolff.de>
Date: Wed, 4 Sep 2024 16:28:05 +0200
Subject: [PATCH 1/4] chore(visualization): remove unnecessary code

---
 .../app/material/matSelectMetricChooser.scss         | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/visualization/app/material/matSelectMetricChooser.scss b/visualization/app/material/matSelectMetricChooser.scss
index 7122a8802d..b284f6074f 100644
--- a/visualization/app/material/matSelectMetricChooser.scss
+++ b/visualization/app/material/matSelectMetricChooser.scss
@@ -20,9 +20,9 @@
                 width: 100%;
                 font-size: 14px;
                 box-shadow:
-                    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-                    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-                    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+                    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
                 .search-icon {
                     color: variables.$cc-primary-color;
@@ -59,10 +59,4 @@
             }
         }
     }
-
-    &:has(.cc-file-select) {
-        .mat-mdc-select-panel {
-            padding: 0;
-        }
-    }
 }

From ab6ca0e7c9b3986731fd73d0058a486f1dd0a7e3 Mon Sep 17 00:00:00 2001
From: Polina Schoenfeld <polina.schoenfeld@maibornwolff.de>
Date: Wed, 4 Sep 2024 16:28:27 +0200
Subject: [PATCH 2/4] chore(visualization): style improvements

---
 .../ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.scss  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/visualization/app/codeCharta/ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.scss b/visualization/app/codeCharta/ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.scss
index e1e8d4b8df..50d3b2019a 100644
--- a/visualization/app/codeCharta/ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.scss
+++ b/visualization/app/codeCharta/ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.scss
@@ -1,5 +1,5 @@
 mat-card {
-    padding: 0 5px;
+    padding: 0;
     height: 46px;
     border-radius: 0;
     border-top: 1px solid #cdcdcd;
@@ -26,6 +26,7 @@ mat-card {
         transition: background-color 0.4s;
         border-bottom: 1px solid transparent;
         white-space: nowrap;
+        margin: 0 5px;
 
         @at-root :host.separator & {
             border-top: 1px solid rgba(0, 0, 0, 0.12);

From 200679f09ec8a9712e7c130491395c623ed2ed69 Mon Sep 17 00:00:00 2001
From: Polina Schoenfeld <polina.schoenfeld@maibornwolff.de>
Date: Wed, 4 Sep 2024 16:30:03 +0200
Subject: [PATCH 3/4] feat(visualization): enable ViewEncapsulation and style
 improvements

---
 .../ui/slider/slider.component.html           |  2 +-
 .../ui/slider/slider.component.scss           | 48 +------------------
 .../codeCharta/ui/slider/slider.component.ts  |  5 +-
 visualization/app/material/material.scss      |  1 +
 visualization/app/material/slider.scss        | 47 ++++++++++++++++++
 5 files changed, 53 insertions(+), 50 deletions(-)
 create mode 100644 visualization/app/material/slider.scss

diff --git a/visualization/app/codeCharta/ui/slider/slider.component.html b/visualization/app/codeCharta/ui/slider/slider.component.html
index 45b92b8e09..37da949e52 100644
--- a/visualization/app/codeCharta/ui/slider/slider.component.html
+++ b/visualization/app/codeCharta/ui/slider/slider.component.html
@@ -4,7 +4,7 @@
         <mat-slider [disabled]="disabled" [step]="step" [min]="min" [max]="max">
             <input matSliderThumb [value]="value" (input)="handleInputOnChange($event)" />
         </mat-slider>
-        <mat-form-field appearance="outline">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
             <input
                 matInput
                 type="number"
diff --git a/visualization/app/codeCharta/ui/slider/slider.component.scss b/visualization/app/codeCharta/ui/slider/slider.component.scss
index 04bfd74ad6..238fa7325e 100644
--- a/visualization/app/codeCharta/ui/slider/slider.component.scss
+++ b/visualization/app/codeCharta/ui/slider/slider.component.scss
@@ -1,49 +1,5 @@
-cc-slider {
+:host {
     width: 100%;
     margin-top: 8px;
-
-    .label {
-        margin-left: 10px;
-    }
-
-    .cc-slider-container {
-        display: flex;
-        flex-direction: column;
-
-        .slider-with-input {
-            display: flex;
-            align-items: center;
-
-            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-mdc-input-element {
-                                min-height: inherit;
-                            }
-                        }
-                    }
-                }
-
-                .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
-                    display: none;
-                }
-            }
-        }
-    }
+    display: inline-block;
 }
diff --git a/visualization/app/codeCharta/ui/slider/slider.component.ts b/visualization/app/codeCharta/ui/slider/slider.component.ts
index fcb2145031..2d7269a6f9 100644
--- a/visualization/app/codeCharta/ui/slider/slider.component.ts
+++ b/visualization/app/codeCharta/ui/slider/slider.component.ts
@@ -1,11 +1,10 @@
-import { Component, Input, ViewEncapsulation } from "@angular/core"
+import { Component, Input } from "@angular/core"
 import { parseNumberInput } from "../../util/parseNumberInput"
 
 @Component({
     selector: "cc-slider",
     templateUrl: "./slider.component.html",
-    styleUrls: ["./slider.component.scss"],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ["./slider.component.scss"]
 })
 export class SliderComponent {
     @Input() value?: number
diff --git a/visualization/app/material/material.scss b/visualization/app/material/material.scss
index 99d2fb96b5..b9a39aa9c0 100644
--- a/visualization/app/material/material.scss
+++ b/visualization/app/material/material.scss
@@ -22,3 +22,4 @@
 @import "./matMenu";
 @import "./matDialog";
 @import "./matSelect";
+@import "./slider";
diff --git a/visualization/app/material/slider.scss b/visualization/app/material/slider.scss
new file mode 100644
index 0000000000..e6310ca8ff
--- /dev/null
+++ b/visualization/app/material/slider.scss
@@ -0,0 +1,47 @@
+@use "variables";
+
+.cc-slider-container {
+    display: flex;
+    flex-direction: column;
+
+    .label {
+        margin-left: 10px;
+        color: variables.$cc-font-color;
+    }
+
+    .slider-with-input {
+        display: flex;
+        align-items: center;
+    }
+
+    mat-slider {
+        margin: 0 12px;
+        flex: 2;
+    }
+
+    mat-form-field {
+        flex: 1;
+        height: 32px;
+    }
+
+    .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+        display: none;
+    }
+
+    .mat-mdc-text-field-wrapper {
+        padding: 0 12px;
+
+        .mat-mdc-form-field-flex {
+            align-self: center;
+
+            .mat-mdc-form-field-infix {
+                padding: 0;
+                min-height: 28px;
+
+                .mat-mdc-input-element {
+                    min-height: inherit;
+                }
+            }
+        }
+    }
+}

From b784678b5ded6b1c9aa54ab6b8eeb5671100a68a Mon Sep 17 00:00:00 2001
From: Polina Schoenfeld <polina.schoenfeld@maibornwolff.de>
Date: Wed, 4 Sep 2024 16:38:07 +0200
Subject: [PATCH 4/4] chore(visualization): update changelog

---
 visualization/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/visualization/CHANGELOG.md b/visualization/CHANGELOG.md
index d9425649f4..fd0221cf30 100644
--- a/visualization/CHANGELOG.md
+++ b/visualization/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 - Bump node version from 18 to 20 [#3690](https://github.com/MaibornWolff/codecharta/pull/3690)
 - Enabled view encapsulation for Global Configuration dialog, Ribbon Bar and File Panel [#3712](https://github.com/MaibornWolff/codecharta/pull/3712)
+- Enabled view encapsulation for Slider [#3713](https://github.com/MaibornWolff/codecharta/pull/3713)
 
 ## [1.127.1] - 2024-08-12