@ng-matero/extensions 14.6.3 → 14.6.4

package/datetimepicker/_datetimepicker-theme.scss

@@ -160,11 +160,13 @@ $clock-font-size: 14px !default;
   .mtx-time-ampm {
     .mtx-time-am,
     .mtx-time-pm {
-      color: theming.get-color-from-palette($foreground, text);
+      color: theming.get-color-from-palette($foreground, text, .75);
       border-color: theming.get-color-from-palette($foreground, hint-text);
 
       &.mtx-time-ampm-active {
+        color: theming.get-color-from-palette($foreground, text);
         background-color: theming.get-color-from-palette($accent, .2);
+        font-weight: 500;
       }
     }
   }

package/datetimepicker/calendar.d.ts

@@ -52,9 +52,8 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     set startAt(value: D | null);
     private _startAt;
     /**
-     * Whether the calendar is in time mode. In time mode the calendar clock gets time input elements rather then just clock
-     *
-     * When touchUi is enabled this will be disabled
+     * Whether the calendar is in time mode. In time mode the calendar clock gets time input elements
+     * rather then just clock. When touchUi is enabled this will be disabled
      */
     get timeInput(): boolean;
     set timeInput(value: boolean);

package/datetimepicker/calendar.scss

@@ -12,13 +12,15 @@ $calendar-prev-next-icon-margin: 15.5px;
 $calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
 $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
+$landscape-calendar-header-width: 144px;
+
 @mixin landscape-calendar-header {
   .mtx-calendar {
     display: flex;
 
     .mtx-calendar-header {
-      width: 150px;
-      min-width: 150px;
+      width: $landscape-calendar-header-width;
+      min-width: $landscape-calendar-header-width;
       padding: 16px 8px;
       border-radius: 4px 0 0 4px;
 
@@ -159,6 +161,7 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mtx-calendar-controls {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   margin: 0 $calendar-controls-side-margin;
 

package/datetimepicker/clock.d.ts

@@ -1,7 +1,8 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
+import { MtxAMPM } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 export declare const CLOCK_RADIUS = 50;
 export declare const CLOCK_INNER_RADIUS = 27.5;
@@ -13,7 +14,7 @@ export declare type MtxClockView = 'hour' | 'minute';
  * A clock that is used as part of the datetimepicker.
  * @docs-private
  */
-export declare class MtxClock<D> implements AfterContentInit, OnDestroy {
+export declare class MtxClock<D> implements AfterContentInit, OnDestroy, OnChanges {
     private _elementRef;
     private _adapter;
     private _changeDetectorRef;
@@ -24,6 +25,8 @@ export declare class MtxClock<D> implements AfterContentInit, OnDestroy {
     interval: number;
     /** Whether the clock uses 12 hour format. */
     twelvehour: boolean;
+    /** Whether the time is now in AM or PM. */
+    AMPM: MtxAMPM;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
     /** Emits when any date is activated. */
@@ -65,6 +68,7 @@ export declare class MtxClock<D> implements AfterContentInit, OnDestroy {
     };
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
+    ngOnChanges(): void;
     /** Called when the user has put their pointer down on the clock. */
     private _pointerDown;
     /**
@@ -87,5 +91,5 @@ export declare class MtxClock<D> implements AfterContentInit, OnDestroy {
     private setTime;
     static ngAcceptInputType_twelvehour: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxClock<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxClock<any>, "mtx-clock", ["mtxClock"], { "dateFilter": "dateFilter"; "interval": "interval"; "twelvehour": "twelvehour"; "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "startView": "startView"; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxClock<any>, "mtx-clock", ["mtxClock"], { "dateFilter": "dateFilter"; "interval": "interval"; "twelvehour": "twelvehour"; "AMPM": "AMPM"; "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "startView": "startView"; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; }, never, never, false>;
 }

package/datetimepicker/datetimepicker-content.scss

@@ -2,10 +2,10 @@ $calendar-padding: 8px;
 $non-touch-calendar-cell-size: 40px;
 $non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
 $non-touch-calendar-portrait-height: 424px;
-$non-touch-calendar-landscape-width: 446px;
+$non-touch-calendar-landscape-width: 432px;
 $non-touch-calendar-landscape-height: 328px;
 $non-touch-calendar-with-time-input-portrait-height: 490px;
-$non-touch-calendar-with-time-input-landscape-height: 412px;
+$non-touch-calendar-with-time-input-landscape-height: 404px;
 
 // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
 // these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as

package/datetimepicker/time.scss

@@ -62,6 +62,7 @@ $time-ampm-width: 40px;
     line-height: normal;
     border-width: 1px;
     border-style: solid;
+    font-weight: 400;
   }
 
   .mtx-time-am {