From a779ff0df8385ac16607fda50017a1b5078a7890 Mon Sep 17 00:00:00 2001
From: Julian von Selasinsky <julian.vonselasinsky@outlook.de>
Date: Fri, 22 Mar 2024 14:07:28 +0100
Subject: [PATCH] Fix MDC-based Angular Material Components

---
 styles/material.scss                          | 64 ++++++++++++-------
 xc/xc-checkbox/xc-checkbox.component.scss     |  1 -
 xc/xc-dialog/xc-dialog-wrapper.component.scss |  2 +
 .../xc-form-base/xc-form-base.component.scss  |  2 +-
 xc/xc-tree/xc-tree.component.scss             | 35 ++++++----
 5 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/styles/material.scss b/styles/material.scss
index a1c434b..273f3e8 100644
--- a/styles/material.scss
+++ b/styles/material.scss
@@ -77,14 +77,10 @@ $xc-menu-item-arrow-color: unset !default;
 
 // $xyna-palette: mat-palette($mat-grey);
 $xyna-palette: mat.define-palette(mat.$grey-palette);
-$xyna-theme-dark: mat.define-dark-theme((
-    color: (
-        primary: $xyna-palette,
-        accent: $xyna-palette
-    ),
-    typography: mat.define-typography-config(),
-    density: 0
-));
+$xyna-theme-dark: mat.define-dark-theme((color: (primary: $xyna-palette,
+                accent: $xyna-palette ),
+            typography: mat.define-typography-config(),
+            density: 0));
 @include mat.all-component-themes($xyna-theme-dark);
 
 // globally overwrite material styles
@@ -163,9 +159,12 @@ html.cdk-global-scrollblock {
     background-color: #1A1A1B;
     box-shadow: 0 0 16px #1A1A1B;
 
-    &.with-arrow-x, &.with-arrow-y {
+    &.with-arrow-x,
+    &.with-arrow-y {
         .mat-mdc-menu-content .mat-mdc-menu-item {
-            &:first-child::before, &:last-child::before {
+
+            &:first-child::before,
+            &:last-child::before {
                 content: "";
                 display: flex;
                 background: $xc-menu-item-background-color;
@@ -198,7 +197,9 @@ html.cdk-global-scrollblock {
     &.with-arrow-x {
         &.mat-menu-after {
             .mat-mdc-menu-content .mat-mdc-menu-item {
-                &:first-child::before, &:last-child::before {
+
+                &:first-child::before,
+                &:last-child::before {
                     border-right: none;
                     border-bottom: none;
                     left: -10px;
@@ -209,7 +210,9 @@ html.cdk-global-scrollblock {
 
         &.mat-menu-before {
             .mat-mdc-menu-content .mat-mdc-menu-item {
-                &:first-child::before, &:last-child::before {
+
+                &:first-child::before,
+                &:last-child::before {
                     border-left: none;
                     border-top: none;
                     left: unset;
@@ -219,14 +222,18 @@ html.cdk-global-scrollblock {
         }
 
         &.mat-menu-below .mat-mdc-menu-content .mat-mdc-menu-item {
-            &:first-child::before, &:last-child::before {
+
+            &:first-child::before,
+            &:last-child::before {
                 top: 15px;
                 bottom: unset;
             }
         }
 
         &.mat-menu-above .mat-mdc-menu-content .mat-mdc-menu-item {
-            &:first-child::before, &:last-child::before {
+
+            &:first-child::before,
+            &:last-child::before {
                 top: unset;
                 bottom: 15px;
             }
@@ -253,14 +260,18 @@ html.cdk-global-scrollblock {
         }
 
         &.mat-menu-after .mat-mdc-menu-content .mat-mdc-menu-item {
-            &:first-child::before, &:last-child::before {
+
+            &:first-child::before,
+            &:last-child::before {
                 left: 15px;
                 right: unset;
             }
         }
 
         &.mat-menu-before .mat-mdc-menu-content .mat-mdc-menu-item {
-            &:first-child::before, &:last-child::before {
+
+            &:first-child::before,
+            &:last-child::before {
                 left: unset;
                 right: 15px;
             }
@@ -273,27 +284,34 @@ html.cdk-global-scrollblock {
         border: 1px solid #000;
 
         .mat-mdc-menu-item {
-            display: flex;
             overflow: inherit;
-            font-size: $font-size-medium;
             background-color: $xc-menu-item-background-color;
             color: #fff;
             border-radius: 0;
+            min-height: 32px;
 
             &[disabled] {
                 color: $color-disabled;
             }
 
-            &>xc-icon {
-                flex: 1 1 auto;
-            }
+            .mat-mdc-menu-item-text {
+                display: flex;
+                font-size: $font-size-medium;
+                width: 100%;
+
+                &>xc-icon {
+                    flex: 1 1 auto;
+                }
 
-            &>label {
-                flex: 0 0 auto;
+                &>label {
+                    flex: 1;
+                    text-align: right; 
+                }
             }
         }
 
         :not([disabled]) {
+
             &.mat-mdc-menu-item:hover,
             &.mat-menu-item.cdk-program-focused,
             &.mat-menu-item.cdk-keyboard-focused,
diff --git a/xc/xc-checkbox/xc-checkbox.component.scss b/xc/xc-checkbox/xc-checkbox.component.scss
index 7f3c755..046fc95 100644
--- a/xc/xc-checkbox/xc-checkbox.component.scss
+++ b/xc/xc-checkbox/xc-checkbox.component.scss
@@ -109,7 +109,6 @@
                  display: flex;
                  justify-content: center;
                  align-items: center;
-                 margin: 0 4px;
  
                  .mat-mdc-checkbox-touch-target,
                  input {
diff --git a/xc/xc-dialog/xc-dialog-wrapper.component.scss b/xc/xc-dialog/xc-dialog-wrapper.component.scss
index 536109f..801a84d 100644
--- a/xc/xc-dialog/xc-dialog-wrapper.component.scss
+++ b/xc/xc-dialog/xc-dialog-wrapper.component.scss
@@ -81,6 +81,7 @@ $resizable: var(--resizable);
 
             &::before {
                 height: unset;
+                display: none;
             }
         }
 
@@ -149,6 +150,7 @@ $resizable: var(--resizable);
 
             &::before {
                 height: unset;
+                display: none;
             }
         }
 
diff --git a/xc/xc-form/xc-form-base/xc-form-base.component.scss b/xc/xc-form/xc-form-base/xc-form-base.component.scss
index 2f61535..9d5f886 100644
--- a/xc/xc-form/xc-form-base/xc-form-base.component.scss
+++ b/xc/xc-form/xc-form-base/xc-form-base.component.scss
@@ -300,7 +300,7 @@ $suffix-icon-height: 24px;
     }
 
     // hide the material required-asterisk for we show one ourselves
-    ::ng-deep.mat-placeholder-required {
+    ::ng-deep.mat-placeholder-required, ::ng-deep.mat-mdc-form-field-required-marker {
         display: none;
     }
 }
diff --git a/xc/xc-tree/xc-tree.component.scss b/xc/xc-tree/xc-tree.component.scss
index 3c60945..d6973a2 100644
--- a/xc/xc-tree/xc-tree.component.scss
+++ b/xc/xc-tree/xc-tree.component.scss
@@ -37,6 +37,7 @@ $template-width: 256px;
         &:hover {
             background-color: rgba(255, 255, 255, 0.05);
         }
+
         &.selected {
             background-color: rgba(255, 255, 255, 0.10);
         }
@@ -51,16 +52,18 @@ $template-width: 256px;
         align-items: center;
         padding: 2px;
 
-        & > label {
+        &>label {
             pointer-events: none;
             padding-right: 6px;
             word-break: break-word;
             text-overflow: ellipsis;
             flex: 1 1 auto;
             color: $xc-tree-label-color;
+
             &.disabled {
                 color: $xc-tree-label-color-disabled;
             }
+
             &.truncated {
                 width: 146px;
             }
@@ -74,6 +77,7 @@ $template-width: 256px;
         ::ng-deep xc-icon-button.tooltip {
             pointer-events: initial;
             touch-action: auto;
+
             button {
                 cursor: help;
             }
@@ -87,17 +91,19 @@ $template-width: 256px;
             align-items: center;
 
             ::ng-deep {
-                xc-form-autocomplete, xc-form-input {
+
+                xc-form-autocomplete,
+                xc-form-input {
                     width: $template-width;
                 }
+
                 xc-checkbox {
                     display: flex;
                     position: absolute;
                     z-index: 1;
                     height: 100%;
                     top: 0;
-                    padding: 0 8px;
-
+                    
                     .mat-mdc-checkbox {
                         display: flex;
                     }
@@ -107,6 +113,7 @@ $template-width: 256px;
                         user-select: none;
                     }
                 }
+
                 xc-icon-button {
                     margin-left: 8px;
                 }
@@ -118,20 +125,20 @@ $template-width: 256px;
             }
         }
 
-        xc-template + xc-template {
-            ::ng-deep input {
-                padding-left: 34px;
-            }
+        xc-template+xc-template .mat-mdc-input-element {
+            padding-left: 34px;
         }
     }
 
     ::ng-deep :not(.fixed) {
-        &.child, &.parent {
+
+        &.child,
+        &.parent {
             margin-left: 24px;
         }
     }
 
-    xc-icon-button + .child {
+    xc-icon-button+.child {
         margin-left: 0;
     }
 
@@ -159,12 +166,15 @@ $template-width: 256px;
             &:hover {
                 background-color: #fff;
             }
+
             &.selected {
                 background-color: $color-primary;
             }
+
             &.fixed:hover {
                 background-color: $color-gray-3;
             }
+
             &.fixed.selected {
                 background-color: #000;
             }
@@ -174,10 +184,12 @@ $template-width: 256px;
             overflow-x: hidden;
             border-bottom: 1px solid $color-gray-2;
             background-color: $color-gray-5;
+
             ::ng-deep {
                 label {
                     color: #000;
                 }
+
                 xc-icon i {
                     color: $color-gray-3;
                 }
@@ -186,6 +198,7 @@ $template-width: 256px;
 
         ::ng-deep .mat-tree-node.fixed {
             background-color: $color-gray-3;
+
             ::ng-deep {
                 label {
                     padding-left: 6px;
@@ -216,4 +229,4 @@ $template-width: 256px;
             }
         }
     }
-}
+}
\ No newline at end of file