UI: Datepicker theme fix

ui-ngx/package.json

@@ -32,7 +32,7 @@
     "@flowjs/ngx-flow": "~0.6.0",
     "@geoman-io/leaflet-geoman-free": "^2.13.0",
     "@juggle/resize-observer": "^3.3.1",
-    "@mat-datetimepicker/core": "~11.0.2",
+    "@mat-datetimepicker/core": "~11.0.3",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/pickers": "3.3.10",
@@ -169,4 +169,4 @@
     "ace-builds": "1.4.13",
     "@date-io/core": "1.3.7"
   }
-}
+}

ui-ngx/src/theme.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 @use '@angular/material' as mat;
-@import '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
+@import '../theme/datepicker-theme';
 @import './scss/constants';
 
 @include mat.all-component-typographies();

ui-ngx/src/theme/datepicker-theme.scss

@@ -0,0 +1,70 @@
+/**
+ * Copyright © 2016-2023 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use '@angular/material' as mat;
+
+$mat-datetimepicker-selected-today-box-shadow-width: 1px;
+
+@mixin mat-datetimepicker-theme($theme) {
+
+  $primary: map-get($theme, primary);
+
+  $primary-color: mat.get-color-from-palette($primary);
+  $primary-contrast: mat.get-color-from-palette($primary, default-contrast);
+
+  .mat-datetimepicker-calendar-header {
+    background-color: $primary-color;
+    color: $primary-contrast;
+  }
+
+  .mat-datetimepicker-calendar-body-cell-content {
+    &.mat-datetimepicker-calendar-body-selected {
+      background-color: $primary-color;
+      color: $primary-contrast;
+    }
+
+    &.mat-datetimepicker-calendar-body-disabled > .mat-datetimepicker-calendar-body-selected {
+      background-color: rgba($primary-color, 0.4);
+    }
+
+    &.mat-datetimepicker-calendar-body-today {
+      &:not(.mat-datetimepicker-calendar-body-selected) {
+        border-color: $primary-color;
+      }
+
+      &.mat-datetimepicker-calendar-body-selected {
+        box-shadow: inset 0 0 0 $mat-datetimepicker-selected-today-box-shadow-width $primary-contrast;
+      }
+    }
+  }
+
+  .mat-datetimepicker-clock-center {
+    background-color: $primary-color;
+  }
+
+  .mat-datetimepicker-clock-hand {
+    background-color: $primary-color;
+
+    &::before {
+      background-color: $primary-color;
+    }
+  }
+
+  .mat-datetimepicker-clock-cell {
+    &.mat-datetimepicker-clock-cell-selected {
+      background-color: unquote("hsl(from #{$primary-color} h s calc(l + 5%))");
+    }
+  }
+}

ui-ngx/yarn.lock

@@ -1830,10 +1830,10 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@mat-datetimepicker/core@~11.0.2":
+"@mat-datetimepicker/core@~11.0.3":
-  version "11.0.2"
+  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-11.0.2.tgz#d89cf5f60a95567ca6e193fcc16a60e91172abdb"
+  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-11.0.3.tgz#8a3958a603d1d2ed8ddc443f0b10e89f1b8d16d6"
-  integrity sha512-qZeiDWjSQ8OmjrQ7hDR3ynYHAFCTFHViNr38RaemNpfvTWvnYD+rRfD5/dWDo0VqLzkJjpQe0oFXgMkHqDFgzg==
+  integrity sha512-1M9sPoB3TfRb8hREDnv5R6uTi0iMlaY6oskxew0a+HVNTzZOBhwWWdKnlect8u+pXCmRBZI0QdMwx8nazeBdnA==
   dependencies:
     tslib "^2.4.0"