Tech/3713/view encapsulation slider (#3714)

* chore(visualization): remove unnecessary code

* chore(visualization): style improvements

* feat(visualization): enable ViewEncapsulation and style improvements

* chore(visualization): update changelog

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
 

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);

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"

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;
 }

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

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;
-        }
-    }
 }

visualization/app/material/material.scss

@@ -22,3 +22,4 @@
 @import "./matMenu";
 @import "./matDialog";
 @import "./matSelect";
+@import "./slider";

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;
+                }
+            }
+        }
+    }
+}