@ng-matero/extensions 18.0.3 → 18.1.1

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;

package/datetimepicker/datetimepicker.d.ts

@@ -1,6 +1,6 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { ComponentType } from '@angular/cdk/portal';
+import { ComponentType, TemplatePortal } from '@angular/cdk/portal';
 import { AfterContentInit, ChangeDetectorRef, EventEmitter, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
@@ -44,11 +44,25 @@ export declare class MtxDatetimepickerContent<D> implements OnInit, AfterContent
     readonly _animationDone: Subject<void>;
     /** Id of the label for the `role="dialog"` element. */
     _dialogLabelId: string | null;
+    /** Portal with projected action buttons. */
+    _actionsPortal: TemplatePortal | null;
+    /** The display type of datetimepicker. */
+    type: MtxDatetimepickerType;
+    /** The view of the calendar. */
+    view: MtxCalendarView;
     constructor(_changeDetectorRef: ChangeDetectorRef);
+    _viewChanged(view: MtxCalendarView): void;
     ngOnInit(): void;
     ngAfterContentInit(): void;
-    _startExitAnimation(): void;
     ngOnDestroy(): void;
+    _startExitAnimation(): void;
+    _handleUserSelection(): void;
+    /**
+     * Assigns a new portal containing the datetimepicker actions.
+     * @param portal Portal with the actions to be assigned.
+     * @param forceRerender Whether a re-render of the portal should be triggered.
+     */
+    _assignActions(portal: TemplatePortal<any> | null, forceRerender: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerContent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerContent<any>, "mtx-datetimepicker-content", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -113,6 +127,10 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
     private _backdropHarnessClass;
     private _inputStateChanges;
+    /** Portal with projected action buttons. */
+    _actionsPortal: TemplatePortal | null;
+    /** Previous selected value. */
+    oldValue: D | null;
     constructor(_overlay: Overlay, _viewContainerRef: ViewContainerRef, _scrollStrategy: any, _dateAdapter: DatetimeAdapter<D>, _dir: Directionality);
     /** The date to open the calendar to initially. */
     get startAt(): D | null;
@@ -154,10 +172,12 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     /** The maximum selectable date. */
     get _maxDate(): D | null;
     get _dateFilter(): (date: D | null, type: MtxDatetimepickerFilterType) => boolean;
-    _viewChanged(type: MtxCalendarView): void;
+    _viewChanged(view: MtxCalendarView): void;
     ngOnDestroy(): void;
     /** Selects the given date */
     _select(date: D): void;
+    _selectManually(): void;
+    _clearSelected(): void;
     /**
      * Register an input with this datetimepicker.
      * @param input The datetimepicker input to register with this datetimepicker.
@@ -186,6 +206,16 @@ 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;
+    /**
+     * Registers a portal containing action buttons with the datetimepicker.
+     * @param portal Portal to be registered.
+     */
+    registerActions(portal: TemplatePortal): void;
+    /**
+     * Removes a portal containing action buttons from the datetimepicker.
+     * @param portal Portal to be removed.
+     */
+    removeActions(portal: TemplatePortal): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepicker<any>, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepicker<any>, "mtx-datetimepicker", ["mtxDatetimepicker"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "type": { "alias": "type"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; }, { "selectedChanged": "selectedChanged"; "openedStream": "opened"; "closedStream": "closed"; "viewChanged": "viewChanged"; }, never, never, true, never>;
     static ngAcceptInputType_multiYearSelector: unknown;

package/datetimepicker/public-api.d.ts

@@ -13,3 +13,4 @@ export * from './multi-year-view';
 export * from './datetimepicker-animations';
 export * from './datetimepicker-types';
 export * from './datetimepicker-intl';
+export * from './datetimepicker-actions';

package/datetimepicker/time.d.ts

@@ -1,4 +1,5 @@
 import { NumberInput } from '@angular/cdk/coercion';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { SubscriptionLike } from 'rxjs';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
@@ -72,6 +73,8 @@ export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
     /** Step over minutes. */
     interval: number;
+    /** Input for action buttons. */
+    actionsPortal: TemplatePortal | null;
     protected hourInputElement: ElementRef<HTMLInputElement> | undefined;
     protected hourInputDirective: MtxTimeInput | undefined;
     protected minuteInputElement: ElementRef<HTMLInputElement> | undefined;
@@ -112,17 +115,18 @@ export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     constructor(_adapter: DatetimeAdapter<D>, _changeDetectorRef: ChangeDetectorRef, _datetimepickerIntl: MtxDatetimepickerIntl);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     focusInputElement(): void;
-    handleHourInputChange(value: NumberInput): void;
-    updateHourForAmPm(value: number): number;
-    handleMinuteInputChange(value: NumberInput): void;
-    handleFocus(clockView: MtxClockView): void;
+    _handleHourInputChange(value: NumberInput): void;
+    _updateHourForAmPm(value: number): number;
+    _handleMinuteInputChange(value: NumberInput): void;
+    _handleFocus(clockView: MtxClockView): void;
     _timeSelected(date: D): void;
     _onActiveDateChange(date: D): void;
-    handleOk(): void;
-    handleCancel(): void;
-    ngOnDestroy(): void;
+    _handleSelection(): void;
+    _handleOk(): void;
+    _handleCancel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxTime<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTime<any>, "mtx-time", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTime<any>, "mtx-time", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, true, never>;
     static ngAcceptInputType_twelvehour: unknown;
 }

package/datetimepicker/time.scss

@@ -84,6 +84,12 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   .mtx-time-pm {
     --mdc-text-button-label-text-weight: 400;
 
+    flex: 1;
+    width: $time-ampm-width;
+    min-width: auto;
+    border-width: 1px;
+    border-style: solid;
+
     @include token-utils.use-tokens($_tokens...) {
       @include token-utils.create-token-slot(--mdc-text-button-label-text-color, time-ampm-text-color);
       @include token-utils.create-token-slot(--mdc-text-button-container-shape, selector-container-shape);
@@ -97,12 +103,6 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
       }
     }
 
-    flex: 1;
-    width: $time-ampm-width;
-    min-width: auto;
-    border-width: 1px;
-    border-style: solid;
-
     .mat-mdc-button-touch-target {
       height: 100%;
     }

package/dialog/dialog.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 export declare class MtxDialog {
     dialog: MatDialog;
     constructor(dialog: MatDialog);
-    originalOpen(componentOrTemplateRef: ComponentType<any> | TemplateRef<any> | undefined, config: any): import("@angular/material/dialog").MatDialogRef<any, any>;
+    originalOpen(componentOrTemplateRef: (ComponentType<any> | TemplateRef<any>) | undefined, config: any): import("@angular/material/dialog").MatDialogRef<any, any>;
     open(config: MtxDialogData, componentOrTemplateRef?: ComponentType<any> | TemplateRef<any>): import("@angular/material/dialog").MatDialogRef<any, any>;
     alert(title: string | Observable<string>, description?: string | Observable<string>, onOk?: () => void): void;
     confirm(title: string | Observable<string>, description?: string | Observable<string>, onOk?: () => void, onClose?: () => void): void;

package/drawer/drawer-config.d.ts

@@ -1,7 +1,7 @@
 import { Direction } from '@angular/cdk/bidi';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { ViewContainerRef } from '@angular/core';
-/** Options for where to set focus to automatically on dialog open */
+/** Options for where to set focus to automatically on dialog open. */
 export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
 /** Possible overrides for a drawer's position. */
 export type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
@@ -11,6 +11,8 @@ export type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
 export declare class MtxDrawerConfig<D = any> {
     /** The view container to place the overlay for the drawer into. */
     viewContainerRef?: ViewContainerRef;
+    /** ID for the drawer. If omitted, a unique one will be generated. */
+    id?: string;
     /** Extra CSS classes to be added to the drawer container. */
     panelClass?: string | string[];
     /** Text layout direction for the drawer. */
@@ -44,12 +46,12 @@ export declare class MtxDrawerConfig<D = any> {
     restoreFocus?: boolean;
     /** Scroll strategy to be used for the drawer. */
     scrollStrategy?: ScrollStrategy;
-    /** Position of the drawer */
+    /** Position of the drawer. */
     position?: DrawerPosition;
-    /** Width of the drawer. If a number is provided, assumes pixel units. */
-    width?: number | string;
-    /** Height of the drawer. If a number is provided, assumes pixel units. */
-    height?: number | string;
+    /** Width of the drawer. */
+    width?: string;
+    /** Height of the drawer. */
+    height?: string;
     /** Min-width of the drawer. If a number is provided, assumes pixel units. */
     minWidth?: number | string;
     /** Min-height of the drawer. If a number is provided, assumes pixel units. */

package/drawer/drawer-container.d.ts

@@ -1,91 +1,35 @@
 import { AnimationEvent } from '@angular/animations';
-import { FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, DomPortal, TemplatePortal } from '@angular/cdk/portal';
-import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
+import { CdkDialogContainer } from '@angular/cdk/dialog';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { MtxDrawerConfig } from './drawer-config';
 import * as i0 from "@angular/core";
 /**
  * Internal component that wraps user-provided drawer content.
  * @docs-private
  */
-export declare class MtxDrawerContainer extends BasePortalOutlet implements OnDestroy {
-    private _elementRef;
-    private _changeDetectorRef;
-    private _focusTrapFactory;
-    private readonly _interactivityChecker;
-    private readonly _ngZone;
-    /** The drawer configuration. */
-    drawerConfig: MtxDrawerConfig;
-    private _breakpointSubscription;
+export declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConfig> implements OnDestroy {
     /** The portal outlet inside of this container into which the content will be loaded. */
     _portalOutlet: CdkPortalOutlet;
     /** The state of the drawer animations. */
     _animationState: 'void' | 'visible' | 'hidden';
     /** Emits whenever the state of the animation changes. */
     _animationStateChanged: EventEmitter<AnimationEvent>;
-    /** The class that traps and manages focus within the drawer. */
-    private _focusTrap;
-    /** Element that was focused before the drawer was opened. */
-    private _elementFocusedBeforeOpened;
-    /** Server-side rendering-compatible reference to the global document object. */
-    private _document;
     /** Whether the component has been destroyed. */
     private _destroyed;
     get _drawerPosition(): string;
-    get _drawerWidth(): string;
-    get _drawerHeight(): string;
-    _getDrawerSize(): {
-        width: string;
-        height: string;
-        minWidth: string;
-        minHeight: string;
-        maxWidth: string;
-        maxHeight: string;
-    };
-    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusTrapFactory: FocusTrapFactory, _interactivityChecker: InteractivityChecker, _ngZone: NgZone, breakpointObserver: BreakpointObserver, document: any, 
-    /** The drawer configuration. */
-    drawerConfig: MtxDrawerConfig);
-    /** Attach a component portal as content to this drawer container. */
-    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
-    /** Attach a template portal as content to this drawer container. */
-    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
-    /**
-     * Attaches a DOM portal to the drawer container.
-     * @deprecated To be turned into a method.
-     * @breaking-change 10.0.0
-     */
-    attachDomPortal: (portal: DomPortal) => void;
-    /** Begin animation of drawer entrance into view. */
+    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: MtxDrawerConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, focusMonitor?: FocusMonitor);
+    protected _contentAttached(): void;
+    /** Begin animation of bottom sheet entrance into view. */
     enter(): void;
-    /** Begin animation of the drawer exiting from view. */
+    /** Begin animation of the bottom sheet exiting from view. */
     exit(): void;
     ngOnDestroy(): void;
     _onAnimationDone(event: AnimationEvent): void;
     _onAnimationStart(event: AnimationEvent): void;
-    private _toggleClass;
-    private _validatePortalAttached;
-    private _setPanelClass;
-    /**
-     * Focuses the provided element. If the element is not focusable, it will add a tabIndex
-     * attribute to forcefully focus it. The attribute is removed after focus is moved.
-     * @param element The element to focus.
-     */
-    private _forceFocus;
-    /**
-     * Focuses the first element that matches the given selector within the focus trap.
-     * @param selector The CSS selector for the element to set focus to.
-     */
-    private _focusByCssSelector;
-    /**
-     * Moves the focus inside the focus trap. When autoFocus is not set to 'bottom-sheet',
-     * if focus cannot be moved then focus will go to the drawer container.
-     */
-    private _trapFocus;
-    /** Restores focus to the element that was focused before the drawer was opened. */
-    private _restoreFocus;
-    /** Saves a reference to the element that was focused before the drawer was opened. */
-    private _savePreviouslyFocusedElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, [null, null, null, null, null, null, { optional: true; }, null]>;
+    protected _captureInitialFocus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, [null, null, { optional: true; }, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDrawerContainer, "mtx-drawer-container", never, {}, {}, never, never, true, never>;
 }

package/drawer/drawer-container.scss

@@ -7,7 +7,11 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
 
 .mtx-drawer-container {
   display: block;
+  width: 100%;
+  padding: 8px 16px;
+  overflow: auto;
   outline: 0;
+  box-sizing: border-box;
 
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(background-color, container-background-color);
@@ -20,12 +24,6 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
   }
 }
 
-.mtx-drawer-content-wrapper {
-  box-sizing: border-box;
-  padding: 8px 16px;
-  overflow: auto;
-}
-
 .mtx-drawer-right {
   transform: translateX(100%);
 

package/drawer/drawer-module.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/cdk/overlay";
+import * as i1 from "@angular/cdk/dialog";
 import * as i2 from "@angular/cdk/portal";
 import * as i3 from "@angular/material/core";
 import * as i4 from "./drawer-container";
 export declare class MtxDrawerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDrawerModule, never, [typeof i1.OverlayModule, typeof i2.PortalModule, typeof i3.MatCommonModule, typeof i4.MtxDrawerContainer], [typeof i4.MtxDrawerContainer, typeof i3.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDrawerModule, never, [typeof i1.DialogModule, typeof i2.PortalModule, typeof i3.MatCommonModule, typeof i4.MtxDrawerContainer], [typeof i4.MtxDrawerContainer, typeof i3.MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxDrawerModule>;
 }

package/drawer/drawer-ref.d.ts

@@ -1,13 +1,20 @@
-import { OverlayRef } from '@angular/cdk/overlay';
+import { DialogRef } from '@angular/cdk/dialog';
 import { Observable } from 'rxjs';
+import { MtxDrawerConfig } from './drawer-config';
 import { MtxDrawerContainer } from './drawer-container';
+import { ComponentRef } from '@angular/core';
 /**
  * Reference to a drawer dispatched from the drawer service.
  */
 export declare class MtxDrawerRef<T = any, R = any> {
-    private _overlayRef;
+    private _ref;
     /** Instance of the component making up the content of the drawer. */
-    instance: T;
+    get instance(): T;
+    /**
+     * `ComponentRef` of the component opened into the drawer. Will be
+     * null when the drawer is opened using a `TemplateRef`.
+     */
+    get componentRef(): ComponentRef<T> | null;
     /**
      * Instance of the component into which the drawer content is projected.
      * @docs-private
@@ -15,6 +22,8 @@ export declare class MtxDrawerRef<T = any, R = any> {
     containerInstance: MtxDrawerContainer;
     /** Whether the user is allowed to close the drawer. */
     disableClose: boolean | undefined;
+    /** Unique ID for the drawer. */
+    id: string;
     /** Subject for notifying the user that the drawer has been dismissed. */
     private readonly _afterDismissed;
     /** Subject for notifying the user that the drawer has opened and appeared. */
@@ -23,7 +32,7 @@ export declare class MtxDrawerRef<T = any, R = any> {
     private _result;
     /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
     private _closeFallbackTimeout;
-    constructor(containerInstance: MtxDrawerContainer, _overlayRef: OverlayRef);
+    constructor(_ref: DialogRef<R, T>, config: MtxDrawerConfig, containerInstance: MtxDrawerContainer);
     /**
      * Dismisses the drawer.
      * @param result Data to be passed back to the drawer opener.

package/drawer/drawer.d.ts

@@ -1,6 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
-import { Injector, TemplateRef, InjectionToken, OnDestroy } from '@angular/core';
+import { InjectionToken, Injector, OnDestroy, TemplateRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { MtxDrawerConfig } from './drawer-config';
 import { MtxDrawerRef } from './drawer-ref';
 import * as i0 from "@angular/core";
@@ -13,14 +14,23 @@ export declare const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig<
  */
 export declare class MtxDrawer implements OnDestroy {
     private _overlay;
-    private _injector;
     private _parentDrawer;
     private _defaultOptions?;
-    private _drawerRefAtThisLevel;
-    /** Reference to the currently opened drawer. */
-    get _openedDrawerRef(): MtxDrawerRef<any> | null;
-    set _openedDrawerRef(value: MtxDrawerRef<any> | null);
-    constructor(_overlay: Overlay, _injector: Injector, _parentDrawer: MtxDrawer, _defaultOptions?: MtxDrawerConfig<any> | undefined);
+    private readonly _openDrawersAtThisLevel;
+    private readonly _afterAllDismissedAtThisLevel;
+    private readonly _afterOpenedAtThisLevel;
+    private _dialog;
+    /** Keeps track of the currently-open dialogs. */
+    get openDrawers(): MtxDrawerRef<any>[];
+    /** Stream that emits when a drawer has been opened. */
+    get afterOpened(): Subject<MtxDrawerRef<any>>;
+    private _getAfterAllDismissed;
+    /**
+     * Stream that emits when all open drawer have finished closing.
+     * Will emit on subscribe if there are no open drawers to begin with.
+     */
+    readonly afterAllDismissed: Observable<void>;
+    constructor(_overlay: Overlay, injector: Injector, _parentDrawer: MtxDrawer, _defaultOptions?: MtxDrawerConfig | undefined);
     /**
      * Opens a drawer containing the given component.
      * @param component Type of the component to load into the drawer.
@@ -36,26 +46,16 @@ export declare class MtxDrawer implements OnDestroy {
      */
     open<T, D = any, R = any>(template: TemplateRef<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
     /**
-     * Dismisses the currently-visible drawer.
-     * @param result Data to pass to the drawer instance.
-     */
-    dismiss<R = any>(result?: R): void;
-    ngOnDestroy(): void;
-    /**
-     * Attaches the drawer container component to the overlay.
-     */
-    private _attachContainer;
-    /**
-     * Creates a new overlay and places it in the correct location.
-     * @param config The user-specified drawer config.
+     * Dismisses all of the currently-open drawers.
      */
-    private _createOverlay;
+    dismissAll(): void;
     /**
-     * Creates an injector to be used inside of a drawer component.
-     * @param config Config that was used to create the drawer.
-     * @param drawerRef Reference to the drawer.
+     * Finds an open drawer by its id.
+     * @param id ID to use when looking up the drawer.
      */
-    private _createInjector;
+    getDrawerById(id: string): MtxDrawerRef<any> | undefined;
+    ngOnDestroy(): void;
+    private _dismissDrawers;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawer, [null, null, { optional: true; skipSelf: true; }, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MtxDrawer>;
 }