@ng-matero/extensions 14.6.0 → 14.6.2

package/datetimepicker/_datetimepicker-theme.scss

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

package/datetimepicker/calendar.scss

@@ -40,7 +40,9 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
       display: flex;
       flex-direction: column;
 
-      .mat-button {
+      .mtx-calendar-header-hours,
+      .mtx-calendar-header-minutes,
+      .mtx-calendar-header-ampm {
         width: 40px;
         text-align: center;
       }
@@ -71,7 +73,11 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   padding: 8px;
   border-radius: 4px 4px 0 0;
 
-  .mat-button {
+  .mtx-calendar-header-year,
+  .mtx-calendar-header-date,
+  .mtx-calendar-header-hours,
+  .mtx-calendar-header-minutes,
+  .mtx-calendar-header-ampm {
     min-width: auto;
     padding: 0 4px;
     text-align: inherit;
@@ -81,10 +87,10 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     white-space: normal;
     word-break: break-word;
   }
-}
 
-.mtx-calendar-header-year.mat-button {
-  line-height: 24px;
+  .mtx-calendar-header-year {
+    line-height: 24px;
+  }
 }
 
 .mtx-calendar-header-date-time {

package/datetimepicker/clock.d.ts

@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import * as i0 from "@angular/core";
@@ -13,10 +13,11 @@ 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 {
-    private _element;
+export declare class MtxClock<D> implements AfterContentInit, OnDestroy {
+    private _elementRef;
     private _adapter;
-    private _cdr;
+    private _changeDetectorRef;
+    private _document;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
     /** Step over minutes. */
@@ -29,17 +30,14 @@ export declare class MtxClock<D> implements AfterContentInit {
     activeDateChange: EventEmitter<D>;
     /** Emits when any date is selected. */
     readonly _userSelection: EventEmitter<void>;
-    /** Hours and Minutes representing the clock view. */
-    _hours: any[];
-    _minutes: any[];
     /** Whether the clock is in hour view. */
     _hourView: boolean;
+    _hours: any[];
+    _minutes: any[];
     _selectedHour: number;
     _selectedMinute: number;
     private _timeChanged;
-    private mouseMoveListener;
-    private mouseUpListener;
-    constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>, _cdr: ChangeDetectorRef);
+    constructor(_elementRef: ElementRef, _adapter: DatetimeAdapter<D>, _changeDetectorRef: ChangeDetectorRef, _document: any);
     /**
      * The date to display in this clock view.
      */
@@ -60,12 +58,26 @@ export declare class MtxClock<D> implements AfterContentInit {
     private _maxDate;
     /** Whether the clock should be started in hour or minute view. */
     set startView(value: MtxClockView);
-    get _hand(): any;
+    get _hand(): {
+        height: string;
+        marginTop: string;
+        transform: string;
+    };
     ngAfterContentInit(): void;
-    /** Handles mousedown events on the clock body. */
-    _handleMousedown(event: any): void;
-    _handleMousemove(event: any): void;
-    _handleMouseup(): void;
+    ngOnDestroy(): void;
+    /** Called when the user has put their pointer down on the clock. */
+    private _pointerDown;
+    /**
+     * Called when the user has moved their pointer after
+     * starting to drag. Bound on the document level.
+     */
+    private _pointerMove;
+    /** Called when the user has lifted their pointer. Bound on the document level. */
+    private _pointerUp;
+    /** Binds our global move and end events. */
+    private _bindGlobalEvents;
+    /** Removes any global event listeners that we may have added. */
+    private _removeGlobalEvents;
     /** Initializes this clock view. */
     private _init;
     /**

package/datetimepicker/clock.scss

@@ -9,6 +9,7 @@ $clock-cell-size: 14.1666% !default;
   margin: $clock-margin;
   box-sizing: border-box;
   user-select: none;
+  touch-action: none;
 }
 
 .mtx-clock-wrapper {

package/datetimepicker/time.scss

@@ -22,7 +22,10 @@ $time-ampm-width: 40px;
 }
 
 .mtx-time-input {
+  box-sizing: border-box;
   width: $time-input-width;
+  height: 100%;
+  padding: 0;
   font-size: $time-font-size;
   text-align: center;
   border-radius: $time-border-radius;
@@ -49,26 +52,26 @@ $time-ampm-width: 40px;
     margin-left: auto;
     margin-right: 12px;
   }
-}
 
-.mtx-time-am.mat-button,
-.mtx-time-pm.mat-button {
-  flex: 1;
-  width: $time-ampm-width;
-  min-width: auto;
-  padding: 0;
-  line-height: normal;
-  border-width: 1px;
-  border-style: solid;
-}
+  .mtx-time-am,
+  .mtx-time-pm {
+    flex: 1;
+    width: $time-ampm-width;
+    min-width: auto;
+    padding: 0;
+    line-height: normal;
+    border-width: 1px;
+    border-style: solid;
+  }
 
-.mtx-time-am.mat-button {
-  border-radius: $time-border-radius $time-border-radius 0 0;
-}
+  .mtx-time-am {
+    border-radius: $time-border-radius $time-border-radius 0 0;
+  }
 
-.mtx-time-pm.mat-button {
-  border-radius: 0 0 $time-border-radius $time-border-radius;
-  border-top: none;
+  .mtx-time-pm {
+    border-radius: 0 0 $time-border-radius $time-border-radius;
+    border-top: none;
+  }
 }
 
 .mtx-time-button-wrapper {