@ng-matero/extensions 12.4.0 → 12.5.3

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,52 +1,61 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '~@angular/material/core/theming/theming';
+@use '~@angular/material/core/theming/palette';
+@use '~@angular/material/core/style/private';
+@use '~@angular/material/core/typography/typography';
+@use '~@angular/material/core/typography/typography-utils';
 
 $selected-today-box-shadow-width: 1px;
-
-@mixin theme($theme) {
-  $is-dark-theme: map.get($theme, is-dark);
-  $primary: map.get($theme, primary);
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
-  $disabled-color: mat.get-color-from-palette($foreground, disabled-text);
+$calendar-body-font-size: 13px !default;
+$calendar-weekday-table-font-size: 11px !default;
+$calendar-header-font-size: 30px !default;
+$clock-font-size: 14px !default;
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $is-dark-theme: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
 
   .mtx-datetimepicker-content {
-    background-color: mat.get-color-from-palette($background, card);
-    color: mat.get-color-from-palette($foreground, text);
+    background-color: theming.get-color-from-palette($background, card);
+    color: theming.get-color-from-palette($foreground, text);
 
-    @include mat.elevation(8);
+    @include private.private-theme-elevation(8, $config);
   }
 
   .mtx-calendar-header {
-    background-color: mat.get-color-from-palette($primary);
+    background-color: theming.get-color-from-palette($primary);
     color: white;
   }
 
   .mtx-calendar-body-label {
-    color: mat.get-color-from-palette($foreground, secondary-text);
+    color: theming.get-color-from-palette($foreground, secondary-text);
   }
 
   .mtx-calendar-table-header {
-    color: mat.get-color-from-palette($foreground, hint-text);
+    color: theming.get-color-from-palette($foreground, hint-text);
   }
 
   .mtx-calendar-body-cell-content {
-    color: mat.get-color-from-palette($foreground, text);
+    color: theming.get-color-from-palette($foreground, text);
 
     &.mtx-calendar-body-selected {
-      background-color: mat.get-color-from-palette($primary);
+      background-color: theming.get-color-from-palette($primary);
       color: white;
 
       &.mtx-calendar-body-today {
         box-shadow:
           inset 0 0 0 $selected-today-box-shadow-width
-          mat.get-color-from-palette($primary, default-contrast);
+          theming.get-color-from-palette($primary, default-contrast);
       }
     }
 
     &:not(.mtx-calendar-body-selected) {
       &.mtx-calendar-body-today {
-        border-color: mat.get-color-from-palette($foreground, hint-text);
+        border-color: theming.get-color-from-palette($foreground, hint-text);
       }
     }
   }
@@ -54,7 +63,7 @@ $selected-today-box-shadow-width: 1px;
   .mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover,
   .mtx-calendar-body-active {
     & > .mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
-      background-color: mat.get-color-from-palette($primary, .3);
+      background-color: theming.get-color-from-palette($primary, .3);
     }
   }
 
@@ -68,7 +77,7 @@ $selected-today-box-shadow-width: 1px;
     }
 
     > .mtx-calendar-body-selected {
-      background-color: mat.get-color-from-palette($primary, .4);
+      background-color: theming.get-color-from-palette($primary, .4);
     }
   }
 
@@ -80,31 +89,31 @@ $selected-today-box-shadow-width: 1px;
   }
 
   .mtx-clock-wrapper {
-    background-color: mat.get-color-from-palette($foreground, divider);
+    background-color: theming.get-color-from-palette($foreground, divider);
   }
 
   .mtx-clock-center {
-    background-color: mat.get-color-from-palette($primary);
+    background-color: theming.get-color-from-palette($primary);
   }
 
   .mtx-clock-hand {
-    background-color: mat.get-color-from-palette($primary);
+    background-color: theming.get-color-from-palette($primary);
 
     &::before {
-      background-color: mat.get-color-from-palette($primary);
+      background-color: theming.get-color-from-palette($primary);
     }
   }
 
   .mtx-clock-cell {
-    color: mat.get-color-from-palette($foreground, text);
+    color: theming.get-color-from-palette($foreground, text);
 
     &.mtx-clock-cell-selected {
-      background-color: mat.get-color-from-palette($primary);
+      background-color: theming.get-color-from-palette($primary);
       color: white;
     }
 
     &:not(.mtx-clock-cell-selected):not(.mtx-clock-cell-disabled):hover {
-      background-color: mat.get-color-from-palette($background, hover);
+      background-color: theming.get-color-from-palette($background, hover);
     }
 
     &.mtx-clock-cell-disabled {
@@ -112,3 +121,66 @@ $selected-today-box-shadow-width: 1px;
     }
   }
 }
+
+@mixin typography($config-or-theme) {
+  $config: typography.private-typography-to-2014-config(
+    theming.get-typography-config($config-or-theme)
+  );
+
+  .mtx-calendar {
+    font-family: typography-utils.font-family($config);
+  }
+
+  .mtx-calendar-body {
+    font-size: $calendar-body-font-size;
+  }
+
+  .mtx-calendar-body-label,
+  .mtx-calendar-period-button {
+    font: {
+      size: typography-utils.font-size($config, button);
+      weight: typography-utils.font-weight($config, button);
+    }
+  }
+
+  .mtx-calendar-table-header th {
+    font: {
+      size: $calendar-weekday-table-font-size;
+      weight: typography-utils.font-weight($config, body-1);
+    }
+  }
+
+  .mtx-calendar-header-date-time {
+    font-size: $calendar-header-font-size;
+  }
+
+  .mtx-calendar-header-ampm-container {
+    font-size: .75em;
+  }
+
+  .mtx-clock {
+    font-size: $clock-font-size;
+  }
+}
+
+@mixin _density($config-or-theme) {}
+
+@mixin theme($theme-or-color-config) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography-default: typography.define-typography-config();
+    $typography: theming.get-typography-config($theme, $typography-default);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}

package/datetimepicker/calendar-body.scss

@@ -1,7 +1,5 @@
 @use '~@angular/material/core/style/private';
 
-$calendar-body-font-size: 13px !default;
-$calendar-body-header-font-size: 14px !default;
 $calendar-body-label-padding-start: 5% !default;
 $calendar-body-label-side-padding: private.private-div(33%, 7) !default;
 $calendar-body-cell-min-size: 32px !default;
@@ -15,7 +13,6 @@ $calendar-body-min-size: 7 * $calendar-body-cell-min-size !default;
 $calendar-body-cell-content-size: 100% - $calendar-body-cell-content-margin * 2 !default;
 
 .mtx-calendar-body {
-  font-size: $calendar-body-font-size;
   min-width: $calendar-body-min-size;
 }
 

package/datetimepicker/calendar.scss

@@ -1,5 +1,4 @@
 $calendar-padding: 8px !default;
-$calendar-weekday-table-font-size: 11px !default;
 
 // We use the same padding as the month / year label, but subtract 16px since there is padding
 // between the edge of the button and the text. This ensures that the button text lines up with
@@ -24,7 +23,6 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mtx-calendar-header {
   padding: $calendar-padding * 2;
-  font-size: 14px;
   box-sizing: border-box;
   border-radius: 4px 4px 0 0;
 
@@ -42,14 +40,12 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 .mtx-calendar-header-year,
 .mtx-calendar-header-date-time {
   width: 100%;
-  font-weight: 400;
   white-space: nowrap;
 }
 
 .mtx-calendar-header-year {
   height: 32px;
   line-height: 32px;
-  font-size: 16px;
 
   > * {
     vertical-align: middle;
@@ -57,7 +53,6 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mtx-calendar-header-date-time {
-  font-size: 30px;
   line-height: 34px;
 
   [mode='landscape'] & {
@@ -66,10 +61,6 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   }
 }
 
-.mtx-calendar-header-ampm-container {
-  font-size: .77em;
-}
-
 .mtx-calendar-header-year,
 .mtx-calendar-header-date,
 .mtx-calendar-header-hours,
@@ -132,7 +123,6 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   display: inline-block;
   height: 40px;
   line-height: 40px;
-  font-size: 14px;
   outline: none;
   border: 0;
   background: transparent;
@@ -161,13 +151,9 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   width: 100%;
 }
 
-.mtx-calendar-table-header {
-  th {
-    text-align: center;
-    font-size: $calendar-weekday-table-font-size;
-    font-weight: 400;
-    padding: $calendar-padding 0;
-  }
+.mtx-calendar-table-header th {
+  text-align: center;
+  padding: $calendar-padding 0;
 }
 
 @media all and (orientation: landscape) {

package/datetimepicker/clock.scss

@@ -1,6 +1,5 @@
 $clock-min-size: 224px !default;
 $clock-margin: 8px !default;
-$clock-font-size: 14px !default;
 $clock-cell-size: 14.1666% !default;
 
 .mtx-clock {
@@ -8,7 +7,6 @@ $clock-cell-size: 14.1666% !default;
   display: block;
   min-width: $clock-min-size;
   margin: $clock-margin;
-  font-size: $clock-font-size;
   box-sizing: border-box;
   user-select: none;
 }