@ng-matero/extensions 12.3.0 → 12.5.1

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,60 +1,69 @@
 @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);
       }
     }
   }
 
-  :not(.mtx-calendar-body-disabled):hover,
+  .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);
+    & > .mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
+      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.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimeFormats } from '@ng-matero/extensions/core';
@@ -17,11 +18,15 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _adapter;
     private _dateFormats;
     _userSelection: EventEmitter<void>;
-    /** Active multi year view when click on year. */
-    multiYearSelector: boolean;
+    get multiYearSelector(): boolean;
+    set multiYearSelector(value: boolean);
+    private _multiYearSelector;
+    /** if true change the clock to 12 hour format. */
+    get twelvehour(): boolean;
+    set twelvehour(value: boolean);
+    private _twelvehour;
     /** Whether the calendar should be started in month or year view. */
     startView: MtxCalendarView;
-    twelvehour: boolean;
     timeInterval: number;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
@@ -135,4 +140,6 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _nextMonthInSameCol;
     private calendarState;
     private _2digit;
+    static ngAcceptInputType_multiYearSelector: BooleanInput;
+    static ngAcceptInputType_twelvehour: BooleanInput;
 }

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
@@ -15,6 +14,7 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mtx-calendar {
   display: block;
+  outline: none;
 
   &[mode='landscape'] {
     display: flex;
@@ -23,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;
 
@@ -41,22 +40,19 @@ $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;
 
-  .mat-icon {
+  > * {
     vertical-align: middle;
   }
 }
 
 .mtx-calendar-header-date-time {
-  font-size: 30px;
   line-height: 34px;
 
   [mode='landscape'] & {
@@ -65,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,
@@ -131,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;
@@ -160,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) {
@@ -192,9 +179,5 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
       display: block;
       padding: 0;
     }
-
-    .mtx-calendar-content {
-      padding-top: $calendar-padding;
-    }
   }
 }

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

package/datetimepicker/datetimepicker-content.scss

@@ -37,7 +37,7 @@ $touch-max-height: 850px;
   justify-content: space-between;
 }
 
-.mtx-calendar {
+.mtx-datetimepicker-content .mtx-calendar {
   width: $non-touch-calendar-portrait-width;
   height: $non-touch-calendar-portrait-height;
 
@@ -48,7 +48,7 @@ $touch-max-height: 850px;
 }
 
 @media all and (orientation: landscape) {
-  .mtx-calendar[mode='auto'] {
+  .mtx-datetimepicker-content .mtx-calendar[mode='auto'] {
     width: $non-touch-calendar-landscape-width;
     height: $non-touch-calendar-landscape-height;
   }

package/datetimepicker/datetimepicker-input.d.ts

@@ -1,5 +1,6 @@
 import { AfterContentInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { MatFormField } from '@angular/material/form-field';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimeFormats } from '@ng-matero/extensions/core';
@@ -43,10 +44,10 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     /** The datetimepicker that this input is associated with. */
     set mtxDatetimepicker(value: MtxDatetimepicker<D>);
     set mtxDatetimepickerFilter(filter: (date: D | null, type: MtxDatetimepickerFilterType) => boolean);
-    private _value;
     /** The value of the input. */
     get value(): D | null;
     set value(value: D | null);
+    private _value;
     /** The minimum valid date. */
     get min(): D | null;
     set min(value: D | null);
@@ -56,8 +57,8 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     set max(value: D | null);
     private _max;
     /** Whether the datetimepicker-input is disabled. */
-    get disabled(): any;
-    set disabled(value: any);
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
     _onTouched: () => void;
     ngAfterContentInit(): void;
@@ -97,4 +98,5 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     private _validator;
     /** Formats a value and sets it on the input element. */
     private _formatValue;
+    static ngAcceptInputType_disabled: BooleanInput;
 }

package/datetimepicker/datetimepicker-toggle.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { MtxDatetimepicker } from './datetimepicker';
 export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
@@ -17,4 +18,5 @@ export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnC
     ngAfterContentInit(): void;
     _open(event: Event): void;
     private _watchStateChanges;
+    static ngAcceptInputType_disabled: BooleanInput;
 }

package/datetimepicker/datetimepicker.d.ts

@@ -1,6 +1,7 @@
+import { AfterContentInit, EventEmitter, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { Overlay } from '@angular/cdk/overlay';
-import { AfterContentInit, EventEmitter, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxCalendarView, MtxCalendar } from './calendar';
@@ -29,9 +30,13 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     private _dateAdapter;
     private _dir;
     /** Active multi year view when click on year. */
-    multiYearSelector: boolean;
+    get multiYearSelector(): boolean;
+    set multiYearSelector(value: boolean);
+    private _multiYearSelector;
     /** if true change the clock to 12 hour format. */
-    twelvehour: boolean;
+    get twelvehour(): boolean;
+    set twelvehour(value: boolean);
+    private _twelvehour;
     /** The view that the calendar should start in. */
     startView: MtxCalendarView;
     mode: MtxDatetimepickerMode;
@@ -140,4 +145,9 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     private _setConnectedPositions;
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     private _getCloseStream;
+    static ngAcceptInputType_multiYearSelector: BooleanInput;
+    static ngAcceptInputType_twelvehour: BooleanInput;
+    static ngAcceptInputType_touchUi: BooleanInput;
+    static ngAcceptInputType_disabled: BooleanInput;
+    static ngAcceptInputType_openOnFocus: BooleanInput;
 }