@ng-matero/extensions 18.0.2 → 18.1.0

package/README.md

@@ -43,18 +43,43 @@ export class YourAppModule {
 
 After import modules, you must define a theme. [More about theming](https://material.angular.io/guide/theming).
 
+### M2 theme
+
 ```scss
+@use '@angular/material' as mat;
 @use '@ng-matero/extensions' as mtx;
 
+$theme: mat.define-light-theme(...);
+
+@include mat.all-component-themes($theme);
 @include mtx.all-component-themes($theme);
 ```
 
+### M3 theme
+
+```scss
+@use '@angular/material' as mat;
+@use '@ng-matero/extensions' as mtx;
+
+$config: (...);
+
+$theme: mat.private-deep-merge-all(
+  mat.define-theme($config),
+  mtx.define-theme($config)
+);
+
+html {
+  @include mat.all-component-themes($theme);
+  @include mtx.all-component-themes($theme);
+}
+```
+
 The @use-based Sass API is only available in the version `12.0.0` and above.
 
-You can also [using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme) which in the "prebuilt-themes" directory of the npm package (@ng-matero/extensions/prebuilt-themes).
+You can also [using a pre-built theme](https://material.angular.io/guide/theming#pre-built-themes) which in the "prebuilt-themes" directory of the npm package (@ng-matero/extensions/prebuilt-themes).
 
 ```scss
-@import '@ng-matero/extensions/prebuilt-themes/indigo-pink.css'
+@import '@ng-matero/extensions/prebuilt-themes/azure-blue.css'
 ```
 
 ## Development

package/alert/alert.scss

@@ -4,8 +4,9 @@
 .mtx-alert {
   position: relative;
   display: block;
-  padding: 12px 20px;
-  margin-bottom: 16px;
+  padding: .75rem 1rem;
+  margin-bottom: 1rem;
+  line-height: 1.5;
 
   @include token-utils.use-tokens(tokens-mtx-alert.$prefix, tokens-mtx-alert.get-token-slots()) {
     $border-color: token-utils.get-token-variable(outline-color);
@@ -17,21 +18,25 @@
     @include token-utils.create-token-slot(color, text-color);
 
     &.mtx-alert-info {
+      @include token-utils.create-token-slot(border-color, info-outline-color);
       @include token-utils.create-token-slot(background-color, info-background-color);
       @include token-utils.create-token-slot(color, info-text-color);
     }
 
     &.mtx-alert-success {
+      @include token-utils.create-token-slot(border-color, success-outline-color);
       @include token-utils.create-token-slot(background-color, success-background-color);
       @include token-utils.create-token-slot(color, success-text-color);
     }
 
     &.mtx-alert-warning {
+      @include token-utils.create-token-slot(border-color, warning-outline-color);
       @include token-utils.create-token-slot(background-color, warning-background-color);
       @include token-utils.create-token-slot(color, warning-text-color);
     }
 
     &.mtx-alert-danger {
+      @include token-utils.create-token-slot(border-color, danger-outline-color);
       @include token-utils.create-token-slot(background-color, danger-background-color);
       @include token-utils.create-token-slot(color, danger-text-color);
     }
@@ -41,27 +46,19 @@
 .mtx-alert-close {
   position: absolute;
   top: 0;
-  bottom: 0;
   right: 0;
-  padding: 0 1.25rem;
-  font-size: 1.5rem;
-  line-height: 1;
-  color: inherit;
-  opacity: .5;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
 
   [dir='rtl'] & {
     right: auto;
     left: 0;
   }
-
-  &:hover {
-    opacity: .75;
-  }
 }
 
 .mtx-alert-dismissible {
-  padding-right: 4rem;
+  padding-right: 3rem;
 }

package/checkbox-group/checkbox-group.d.ts

@@ -5,9 +5,9 @@ import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MtxCheckboxGroupOption } from './interfaces';
 import * as i0 from "@angular/core";
 export declare class MtxCheckboxBase {
-    label?: any;
-    value?: any;
-    constructor(label?: any, value?: any);
+    label?: any | undefined;
+    value?: any | undefined;
+    constructor(label?: any | undefined, value?: any | undefined);
 }
 export declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {
     private _changeDetectorRef;

package/colorpicker/colorpicker-toggle.scss

@@ -4,7 +4,7 @@
 
 $_tokens: tokens-mtx-colorpicker.$prefix, tokens-mtx-colorpicker.get-token-slots();
 
-// We support the case where the form field is disabled, but the datepicker is not.
+// We support the case where the form field is disabled, but the colorpicker is not.
 // MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
 .mtx-colorpicker-toggle {
   pointer-events: auto;

package/colorpicker/colorpicker.d.ts

@@ -87,7 +87,7 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _backdropHarnessClass;
     /** The input element this colorpicker is associated with. */
     pickerInput: MtxColorpickerInput;
-    /** Emits when the datepicker is disabled. */
+    /** Emits when the colorpicker is disabled. */
     readonly _disabledChange: Subject<boolean>;
     /** Emits new selected color when selected color changes. */
     readonly _selectedChanged: Subject<string>;

package/column-resize/resize-strategy.d.ts

@@ -65,7 +65,7 @@ export declare class CdkFlexTableResizeStrategy extends ResizeStrategy implement
     private _indexSequence;
     protected readonly defaultMinSize = 0;
     protected readonly defaultMaxSize: number;
-    constructor(columnResize: ColumnResize, styleScheduler: _CoalescedStyleScheduler, table: CdkTable<unknown>, document: any, _nonce?: string | null | undefined);
+    constructor(columnResize: ColumnResize, styleScheduler: _CoalescedStyleScheduler, table: CdkTable<unknown>, document: any, _nonce?: (string | null) | undefined);
     applyColumnSize(cssFriendlyColumnName: string, columnHeader: HTMLElement, sizeInPx: number, previousSizeInPx?: number): void;
     applyMinColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void;
     applyMaxColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void;

package/core/pipes/is-template-ref.pipe.d.ts

@@ -1,7 +1,7 @@
-import { PipeTransform } from '@angular/core';
+import { PipeTransform, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class MtxIsTemplateRefPipe implements PipeTransform {
-    transform(obj: any): boolean;
+    transform(obj: any): obj is TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxIsTemplateRefPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<MtxIsTemplateRefPipe, "isTemplateRef", true>;
 }

package/core/tokens/_m3-tokens.scss

@@ -300,6 +300,9 @@ $_cached-token-slots: null;
   $sys-color: _get-sys-color($type, $ref);
 
   @return _generate-tokens(map.merge($ref, (
+    // Used to get the theme type
+    md-sys-type: $type,
+
     md-sys-color: $sys-color,
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.

package/core/tokens/m2/mtx/_alert.scss

@@ -19,16 +19,24 @@ $prefix: (mtx, alert);
 
   @return (
     outline-color: transparent,
-    background-color: mat.get-theme-color($theme, background, dialog),
+    background-color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, if($is-dark, 900, 100)),
     text-color: mat.get-theme-color($theme, foreground, text),
-    info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 500)),
-    info-text-color: white,
-    success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 500)),
-    success-text-color: white,
-    warning-background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, if($is-dark, 900, 500)),
-    warning-text-color: white,
-    danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 500)),
-    danger-text-color: white,
+
+    info-outline-color: transparent,
+    info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 100)),
+    info-text-color: mat.get-theme-color($theme, foreground, text),
+
+    success-outline-color: transparent,
+    success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 100)),
+    success-text-color: mat.get-theme-color($theme, foreground, text),
+
+    warning-outline-color: transparent,
+    warning-background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, if($is-dark, 900, 100)),
+    warning-text-color: mat.get-theme-color($theme, foreground, text),
+
+    danger-outline-color: transparent,
+    danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 100)),
+    danger-text-color: mat.get-theme-color($theme, foreground, text),
   );
 }
 

package/core/tokens/m2/mtx/_grid.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -12,7 +11,6 @@ $prefix: (mtx, grid);
   @return (
     container-shape: 0,
     table-cell-min-width: 80px,
-    column-menu-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
   );
 }
 

package/core/tokens/m2/mtx/_popover.scss

@@ -10,6 +10,9 @@ $prefix: (mtx, popover);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    // Note that this uses a value, rather than a computed box-shadow, because we use
+    // the value at runtime to determine which shadow to set based on the popover's depth.
+    base-elevation-level: 8,
   );
 }
 

package/core/tokens/m3/mtx/_alert.scss

@@ -11,20 +11,30 @@ $prefix: (mtx, alert);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-badge
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $is-dark: map.get($systems, md-sys-type) == dark;
+
   $tokens: (
     container-shape: map.get($systems, md-sys-shape, corner-small),
 
-    outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    outline-color: map.get($systems, md-sys-color, outline-variant),
     background-color: map.get($systems, md-sys-color, surface-container),
     text-color: map.get($systems, md-sys-color, on-surface),
-    info-background-color: map.get(mat.$blue-palette, 50),
-    info-text-color: token-utils.hardcode(white, $exclude-hardcoded),
-    success-background-color: map.get(mat.$green-palette, 50),
-    success-text-color: token-utils.hardcode(white, $exclude-hardcoded),
-    warning-background-color: map.get(mat.$orange-palette, 50),
-    warning-text-color: token-utils.hardcode(white, $exclude-hardcoded),
-    danger-background-color: map.get(mat.$red-palette, 50),
-    danger-text-color: token-utils.hardcode(white, $exclude-hardcoded),
+
+    info-outline-color: map.get(mat.$azure-palette, if($is-dark, 40, 80)),
+    info-background-color: map.get(mat.$azure-palette, if($is-dark, 20, 90)),
+    info-text-color: map.get(mat.$azure-palette, if($is-dark, 90, 20)),
+
+    success-outline-color: map.get(mat.$green-palette, if($is-dark, 40, 80)),
+    success-background-color: map.get(mat.$green-palette, if($is-dark, 20, 95)),
+    success-text-color: map.get(mat.$green-palette, if($is-dark, 95, 20)),
+
+    warning-outline-color: map.get(mat.$yellow-palette, if($is-dark, 40, 80)),
+    warning-background-color: map.get(mat.$yellow-palette, if($is-dark, 20, 98)),
+    warning-text-color: map.get(mat.$yellow-palette, if($is-dark, 98, 20)),
+
+    danger-outline-color: map.get(mat.$red-palette, if($is-dark, 40, 80)),
+    danger-background-color: map.get(mat.$red-palette, if($is-dark, 20, 90)),
+    danger-text-color: map.get(mat.$red-palette, if($is-dark, 90, 20)),
   );
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

package/core/tokens/m3/mtx/_grid.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -18,7 +17,6 @@ $prefix: (mtx, grid);
     outline-color: map.get($systems, md-sys-color, outline-variant),
     column-menu-text-color: map.get($systems, md-sys-color, on-surface-variant),
     column-menu-divider-color: map.get($systems, md-sys-color, outline-variant),
-    column-menu-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
     table-footer-background-color: map.get($systems, md-sys-color, surface-container),
     table-row-striped-background-color: map.get($systems, md-sys-color, surface-container),
     table-row-hover-background-color: map.get($systems, md-sys-color, secondary-container),

package/core/tokens/m3/mtx/_popover.scss

@@ -16,6 +16,9 @@ $prefix: (mtx, popover);
     outline-color: map.get($systems, md-sys-color, surface-container),
     background-color: map.get($systems, md-sys-color, surface-container),
     text-color: map.get($systems, md-sys-color, on-surface),
+    // Note that this uses a value, rather than a computed box-shadow, because we use
+    // the value at runtime to determine which shadow to set based on the popover's depth.
+    base-elevation-level: token-utils.hardcode(2, $exclude-hardcoded),
   );
 
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);

package/datetimepicker/calendar.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, Portal } from '@angular/cdk/portal';
+import { ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
@@ -30,6 +30,8 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     preventSameDateTimeSelection: boolean;
     /** Input for custom header component */
     headerComponent: ComponentType<any>;
+    /** Input for action buttons. */
+    actionsPortal: TemplatePortal | null;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
     /** Emits when the view has been changed. */
@@ -146,7 +148,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private calendarState;
     private _2digit;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendar<any>, [null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "headerComponent": { "alias": "headerComponent"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "headerComponent": { "alias": "headerComponent"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, true, never>;
     static ngAcceptInputType_multiYearSelector: unknown;
     static ngAcceptInputType_twelvehour: unknown;
     static ngAcceptInputType_timeInput: unknown;

package/datetimepicker/calendar.scss

@@ -86,6 +86,42 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
       }
     }
   }
+
+  .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@mixin landscape-actions-placeholder {
+  .mtx-datetimepicker-actions::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: $landscape-calendar-header-width;
+    height: 100%;
+    content: '';
+
+    @include token-utils.use-tokens($_tokens...) {
+      $border-color: token-utils.get-token-variable(calendar-header-divider-color);
+
+      border-right: 1px solid var($border-color);
+
+      @include token-utils.create-token-slot(background-color, calendar-header-background-color);
+      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+
+      [dir='rtl'] & {
+        left: auto;
+        right: 0;
+        border-right-width: 0;
+        border-left: 1px solid var($border-color);
+        border-bottom-left-radius: 0;
+
+        @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
+      }
+    }
+  }
 }
 
 .mtx-calendar {
@@ -190,11 +226,13 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 
 [mode='landscape'] {
   @include landscape-calendar-header;
+  @include landscape-actions-placeholder;
 }
 
 @media all and (orientation: landscape) {
   [mode='auto'] {
     @include landscape-calendar-header;
+    @include landscape-actions-placeholder;
   }
 }
 

package/datetimepicker/datetimepicker-actions.d.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { MtxDatetimepicker } from './datetimepicker';
+import * as i0 from "@angular/core";
+export declare class MtxDatetimepickerApply<D> {
+    _datetimepicker: MtxDatetimepicker<D>;
+    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerApply<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerApply<any>, "[mtxDatetimepickerApply]", never, {}, {}, never, never, true, never>;
+}
+export declare class MtxDatetimepickerCancel<D> {
+    _datetimepicker: MtxDatetimepicker<D>;
+    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerCancel<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerCancel<any>, "[mtxDatetimepickerCancel]", never, {}, {}, never, never, true, never>;
+}
+export declare class MtxDatetimepickerClear<D> {
+    _datetimepicker: MtxDatetimepicker<D>;
+    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerClear<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerClear<any>, "[mtxDatetimepickerClear]", never, {}, {}, never, never, true, never>;
+}
+export declare class MtxDatetimepickerActions<D> implements AfterViewInit, OnDestroy {
+    private _datetimepicker;
+    private _viewContainerRef;
+    _template: TemplateRef<unknown>;
+    private _portal;
+    constructor(_datetimepicker: MtxDatetimepicker<D>, _viewContainerRef: ViewContainerRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerActions<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerActions<any>, "mtx-datetimepicker-actions", never, {}, {}, never, ["*"], true, never>;
+}

package/datetimepicker/datetimepicker-actions.scss

@@ -0,0 +1,18 @@
+.mtx-datetimepicker-actions {
+  $spacing: 8px;
+
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 $spacing $spacing;
+
+  .mat-mdc-button-base+.mat-mdc-button-base {
+    margin-left: $spacing;
+
+    [dir='rtl'] & {
+      margin-left: 0;
+      margin-right: $spacing;
+    }
+  }
+}

package/datetimepicker/datetimepicker-animations.d.ts

@@ -1,6 +1,6 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 /**
- * Animations used by the Material datepicker.
+ * Animations used by the Material datetimepicker.
  * @docs-private
  */
 export declare const mtxDatetimepickerAnimations: {

package/datetimepicker/datetimepicker-content.scss

@@ -8,8 +8,10 @@ $non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calenda
 $non-touch-calendar-portrait-height: 424px;
 $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: 404px;
+$non-touch-calendar-with-time-input-portrait-height: 442px;
+$non-touch-calendar-with-time-input-actions-portrait-height: 490px;
+$non-touch-calendar-with-time-input-landscape-height: 356px;
+$non-touch-calendar-with-time-input-actions-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
@@ -21,10 +23,10 @@ $touch-landscape-mode-landscape-height: 80vh;
 $touch-landscape-mode-portrait-width: 90vw;
 $touch-landscape-mode-portrait-height: 64vw;
 $touch-portrait-mode-landscape-width: 64vh;
-$touch-portrait-mode-landscape-height: 90vh;
+$touch-portrait-mode-landscape-height: 80vh;
 $touch-portrait-mode-portrait-width: 80vw;
 $touch-portrait-mode-portrait-height: 120vw;
-$touch-portrait-mode-portrait-height-with-actions: 135vw;
+$touch-portrait-mode-portrait-height-with-actions: 124vw;
 $touch-min-width: 250px;
 $touch-min-height: 300px;
 $touch-max-width: 750px;
@@ -36,9 +38,13 @@ $touch-max-height: 850px;
     height: $non-touch-calendar-landscape-height;
 
     &.mtx-calendar-with-time-input {
-      height: $non-touch-calendar-with-time-input-landscape-height;
+      height: $non-touch-calendar-with-time-input-actions-landscape-height;
     }
   }
+
+  .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
+    height: $non-touch-calendar-with-time-input-landscape-height;
+  }
 }
 
 .mtx-datetimepicker-content {
@@ -51,6 +57,19 @@ $touch-max-height: 850px;
     @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
     @include token-utils.create-token-slot(color, container-text-color);
   }
+
+  .mtx-calendar {
+    width: $non-touch-calendar-portrait-width;
+    height: $non-touch-calendar-portrait-height;
+
+    &.mtx-calendar-with-time-input {
+      height: $non-touch-calendar-with-time-input-actions-portrait-height;
+    }
+  }
+
+  .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
+    height: $non-touch-calendar-with-time-input-portrait-height;
+  }
 }
 
 .mtx-datetimepicker-content-container {
@@ -61,15 +80,6 @@ $touch-max-height: 850px;
   justify-content: space-between;
 }
 
-.mtx-datetimepicker-content .mtx-calendar {
-  width: $non-touch-calendar-portrait-width;
-  height: $non-touch-calendar-portrait-height;
-
-  &.mtx-calendar-with-time-input {
-    height: $non-touch-calendar-with-time-input-portrait-height;
-  }
-}
-
 .mtx-datetimepicker-content[mode='landscape'] {
   @include landscape-calendar-size;
 }
@@ -82,7 +92,7 @@ $touch-max-height: 850px;
 
 .mtx-datetimepicker-content-touch {
   display: block;
-  max-height: 80vh;
+  max-height: 84vh;
 
   @include token-utils.use-tokens(tokens-mtx-datetimepicker.$prefix,
     tokens-mtx-datetimepicker.get-token-slots()) {
@@ -107,6 +117,12 @@ $touch-max-height: 850px;
     width: 100%;
     height: auto;
   }
+
+  .mtx-clock {
+    width: 50vh;
+    max-width: 80%;
+    margin: 12px auto;
+  }
 }
 
 @media all and (orientation: landscape) {
@@ -116,7 +132,8 @@ $touch-max-height: 850px;
       width: $touch-landscape-mode-landscape-width;
       height: $touch-landscape-mode-landscape-height;
 
-      .mtx-calendar {
+      .mtx-calendar,
+      &.mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
         width: auto;
         height: 100%;
       }
@@ -145,6 +162,13 @@ $touch-max-height: 850px;
         width: 100%;
         height: auto;
       }
+
+      // The content needs to be a bit taller when actions have
+      // been projected so that it doesn't have to scroll.
+      &.mtx-datetimepicker-content-container-with-actions,
+      &.mtx-datetimepicker-content-container-with-time-input {
+        height: $touch-portrait-mode-portrait-height-with-actions;
+      }
     }
 
     .mtx-datetimepicker-content-container[mode='landscape'] {
@@ -156,11 +180,5 @@ $touch-max-height: 850px;
         height: 100%;
       }
     }
-
-    // The content needs to be a bit taller when actions have
-    // been projected so that it doesn't have to scroll.
-    .mtx-datetimepicker-content-container-with-actions {
-      height: $touch-portrait-mode-portrait-height-with-actions;
-    }
   }
 }

package/datetimepicker/datetimepicker-module.d.ts

@@ -14,8 +14,9 @@ import * as i12 from "./datetimepicker-input";
 import * as i13 from "./month-view";
 import * as i14 from "./year-view";
 import * as i15 from "./multi-year-view";
+import * as i16 from "./datetimepicker-actions";
 export declare class MtxDatetimepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDatetimepickerModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatButtonModule, typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTime, typeof i9.MtxTimeInput, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView], [typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTime, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDatetimepickerModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatButtonModule, typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTime, typeof i9.MtxTimeInput, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView, typeof i16.MtxDatetimepickerApply, typeof i16.MtxDatetimepickerCancel, typeof i16.MtxDatetimepickerClear, typeof i16.MtxDatetimepickerActions], [typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTime, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView, typeof i16.MtxDatetimepickerApply, typeof i16.MtxDatetimepickerCancel, typeof i16.MtxDatetimepickerClear, typeof i16.MtxDatetimepickerActions]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxDatetimepickerModule>;
 }

package/datetimepicker/datetimepicker-toggle.scss

@@ -4,7 +4,7 @@
 
 $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
 
-// We support the case where the form field is disabled, but the datepicker is not.
+// We support the case where the form field is disabled, but the datetimepicker is not.
 // MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
 .mtx-datetimepicker-toggle {
   pointer-events: auto;