@ng-matero/extensions 19.4.1 → 20.0.1

package/datetimepicker/time-view.scss

@@ -1,5 +1,7 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+@use './m3-datetimepicker';
+
+$fallbacks: m3-datetimepicker.get-tokens();
 
 $time-font-size: 36px;
 $time-input-width: 72px;
@@ -7,8 +9,6 @@ $time-input-height: 56px;
 $time-seperator-width: 24px;
 $time-ampm-width: 40px;
 
-$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
-
 .mtx-time-view {
   display: block;
   outline: none;
@@ -35,29 +35,26 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   border: 2px solid transparent;
   appearance: none;
   outline: none;
+  border-radius: token-utils.slot(datetimepicker-selector-container-shape, $fallbacks);
+  background-color: token-utils.slot(datetimepicker-time-input-background-color, $fallbacks);
+  color: token-utils.slot(datetimepicker-time-input-text-color, $fallbacks);
 
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(border-radius, selector-container-shape);
-    @include token-utils.create-token-slot(background-color, time-input-background-color);
-    @include token-utils.create-token-slot(color, time-input-text-color);
+  &.mtx-time-input-active {
+    background-color: token-utils.slot(datetimepicker-time-input-active-state-background-color, $fallbacks);
+    color: token-utils.slot(datetimepicker-time-input-active-state-text-color, $fallbacks);
 
-    &.mtx-time-input-active {
-      @include token-utils.create-token-slot(background-color, time-input-active-state-background-color);
-      @include token-utils.create-token-slot(color, time-input-active-state-text-color);
+    &:focus {
+      border-color: token-utils.slot(datetimepicker-time-input-focus-state-outline-color, $fallbacks);
+      background-color: token-utils.slot(datetimepicker-time-input-focus-state-background-color, $fallbacks);
 
-      &:focus {
-        @include token-utils.create-token-slot(border-color, time-input-focus-state-outline-color);
-        @include token-utils.create-token-slot(background-color, time-input-focus-state-background-color);
-
-        &::placeholder {
-          @include token-utils.create-token-slot(color, time-input-focus-state-placeholder-text-color);
-        }
+      &::placeholder {
+        color: token-utils.slot(datetimepicker-time-input-focus-state-placeholder-text-color, $fallbacks);
       }
     }
+  }
 
-    &.mtx-time-input-warning {
-      @include token-utils.create-token-slot(border-color, time-input-warn-state-outline-color);
-    }
+  &.mtx-time-input-warning {
+    border-color: token-utils.slot(datetimepicker-time-input-warn-state-outline-color, $fallbacks);
   }
 }
 
@@ -82,25 +79,22 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 
   .mtx-time-am,
   .mtx-time-pm {
-    --mdc-text-button-label-text-weight: 400;
+    --mat-button-text-label-text-weight: 400;
+    --mat-button-text-label-text-color: #{token-utils.slot(datetimepicker-time-ampm-text-color, $fallbacks)};
+    --mat-button-text-container-shape: #{token-utils.slot(datetimepicker-selector-container-shape, $fallbacks)};
 
     flex: 1;
     width: $time-ampm-width;
     min-width: auto;
     border-width: 1px;
     border-style: solid;
+    border-color: token-utils.slot(datetimepicker-time-ampm-outline-color, $fallbacks);
 
-    @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);
-      @include token-utils.create-token-slot(border-color, time-ampm-outline-color);
-
-      &.mtx-time-ampm-active {
-        --mdc-text-button-label-text-weight: 500;
+    &.mtx-time-ampm-active {
+      --mat-button-text-label-text-weight: 500;
+      --mat-button-text-label-text-color: #{token-utils.slot(datetimepicker-time-ampm-selected-state-text-color, $fallbacks)};
 
-        @include token-utils.create-token-slot(--mdc-text-button-label-text-color, time-ampm-selected-state-text-color);
-        @include token-utils.create-token-slot(background-color, time-ampm-selected-state-background-color);
-      }
+      background-color: token-utils.slot(datetimepicker-time-ampm-selected-state-background-color, $fallbacks);
     }
 
     .mat-mdc-button-touch-target {
@@ -125,7 +119,7 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   justify-content: flex-end;
   padding-top: 8px;
 
-  .mat-mdc-button-base+.mat-mdc-button-base {
+  .mat-mdc-button-base + .mat-mdc-button-base {
     margin-left: 8px;
 
     [dir='rtl'] & {

package/dialog/index.d.ts

@@ -1,5 +1,54 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions/dialog" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as _angular_material_dialog from '@angular/material/dialog';
+import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/icon';
+import * as i5 from '@ng-matero/extensions/core';
+import { ThemePalette } from '@angular/material/core';
+import { Observable } from 'rxjs';
+import { ComponentType } from '@angular/cdk/portal';
+
+interface MtxDialogData extends MatDialogConfig {
+    title?: string | Observable<string>;
+    description?: string | Observable<string>;
+    buttons?: MtxDialogBtns[];
+    showCloseIcon?: boolean;
+}
+interface MtxDialogBtns {
+    type?: 'raised' | 'stroked' | 'flat';
+    color?: ThemePalette;
+    class?: string;
+    focusInitial?: boolean;
+    text: string | Observable<string>;
+    onClick?: () => void;
+}
+
+declare class MtxDialogContainer {
+    dialogRef: MatDialogRef<MtxDialogContainer, any>;
+    data: MtxDialogData;
+    _onClick(fn: () => void): void;
+    _onClose(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDialogContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDialogContainer, "mtx-dialog-container", ["mtxDialogContainer"], {}, {}, never, never, true, never>;
+}
+
+declare class MtxDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDialogModule, never, [typeof i1.CommonModule, typeof _angular_material_dialog.MatDialogModule, typeof i3.MatButtonModule, typeof i4.MatIconModule, typeof i5.MtxPipesModule, typeof MtxDialogContainer], [typeof MtxDialogContainer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxDialogModule>;
+}
+
+declare class MtxDialog {
+    dialog: MatDialog;
+    originalOpen(componentOrTemplateRef: (ComponentType<any> | TemplateRef<any>) | undefined, config: any): _angular_material_dialog.MatDialogRef<any, any>;
+    open(config: MtxDialogData, componentOrTemplateRef?: ComponentType<any> | TemplateRef<any>): _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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDialog, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MtxDialog>;
+}
+
+export { MtxDialog, MtxDialogContainer, MtxDialogModule };
+export type { MtxDialogBtns, MtxDialogData };

package/drawer/_drawer-theme.scss

@@ -1,58 +1,59 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/drawer' as tokens-mtx-drawer;
+@use './m2-drawer';
+@use './m3-drawer';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), base));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-drawer.$prefix,
-        tokens-mtx-drawer.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-drawer.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), color));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-drawer.$prefix,
-        tokens-mtx-drawer.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-drawer.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), typography));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-drawer.get-typography-tokens($theme));
+    }
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), density));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-drawer.get-density-tokens($theme));
+    }
   }
-  @else {}
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mtx-drawer.$prefix,
-      tokens: tokens-mtx-drawer.get-token-slots(),
+      namespace: drawer,
+      tokens: token-utils.get-overrides(m3-drawer.get-tokens(), drawer),
     ),
   );
 }
@@ -61,10 +62,13 @@
   @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $color-variant: null) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-drawer') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     }
     @else {
       @include base($theme);
@@ -80,12 +84,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
-      map.get($tokens, tokens-mtx-drawer.$prefix));
-  }
-}

package/{core/tokens/m2/mtx/_drawer.scss → drawer/_m2-drawer.scss}

@@ -1,25 +1,22 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../token-definition';
-@use '../../../style/elevation';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mtx, drawer);
+@use '../core/tokens/m2-utils';
+@use '../core/style/elevation';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 0,
-    container-elevation-shadow: elevation.get-box-shadow(16),
+    drawer-container-shape: 0,
+    drawer-container-elevation-shadow: elevation.get-box-shadow(16),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-background-color: mat.get-theme-color($theme, background, dialog),
-    container-text-color: mat.get-theme-color($theme, foreground, text),
+    drawer-container-background-color: mat.get-theme-color($theme, background, dialog),
+    drawer-container-text-color: mat.get-theme-color($theme, foreground, text),
   );
 }
 
@@ -38,8 +35,8 @@ $prefix: (mtx, drawer);
 @function get-token-slots() {
   @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
-    get-color-tokens(token-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/drawer/_m3-drawer.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../core/style/elevation';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-drawer.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (
+      drawer-container-shape: map.get($system, corner-large),
+      drawer-container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    color: (
+      drawer-container-background-color: map.get($system, surface),
+      drawer-container-text-color: map.get($system, on-surface-variant),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/drawer/drawer-container.scss

@@ -2,9 +2,9 @@
 @use '@angular/cdk' as cdk;
 @use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/drawer' as tokens-mtx-drawer;
+@use './m3-drawer';
 
-$_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
+$fallbacks: m3-drawer.get-tokens();
 
 @keyframes _mtx-drawer-enter {
   from {
@@ -41,12 +41,9 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
   // We don't use this, but it's useful for consumers to position
   // elements (e.g. close buttons) inside the bottom sheet.
   position: relative;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(background-color, container-background-color);
-    @include token-utils.create-token-slot(color, container-text-color);
-    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
-  }
+  background-color: token-utils.slot(drawer-container-background-color, $fallbacks);
+  color: token-utils.slot(drawer-container-text-color, $fallbacks);
+  box-shadow: token-utils.slot(drawer-container-elevation-shadow, $fallbacks);
 
   @include cdk.high-contrast(active, off) {
     outline: 1px solid;
@@ -80,29 +77,21 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
 }
 
 .mtx-drawer-right {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(border-top-left-radius, container-shape);
-    @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
-  }
+  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
 }
 
 .mtx-drawer-left {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(border-top-right-radius, container-shape);
-    @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
-  }
+  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
 }
 
 .mtx-drawer-bottom {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(border-top-left-radius, container-shape);
-    @include token-utils.create-token-slot(border-top-right-radius, container-shape);
-  }
+  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
 }
 
 .mtx-drawer-top {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
-    @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
-  }
+  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
 }

package/drawer/index.d.ts

@@ -1,5 +1,223 @@
+import * as i0 from '@angular/core';
+import { ViewContainerRef, OnDestroy, EventEmitter, ComponentRef, InjectionToken, TemplateRef } from '@angular/core';
+import * as i1 from '@angular/cdk/dialog';
+import { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
+import * as i2 from '@angular/cdk/portal';
+import { CdkPortalOutlet, ComponentType } from '@angular/cdk/portal';
+import * as i3 from '@angular/material/core';
+import { Direction } from '@angular/cdk/bidi';
+import { ScrollStrategy } from '@angular/cdk/overlay';
+import { Observable, Subject } from 'rxjs';
+
+/** Options for where to set focus to automatically on dialog open. */
+type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
+/** Possible overrides for a drawer's position. */
+type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
 /**
- * Generated bundle index. Do not edit.
+ * Configuration used when opening a drawer.
  */
-/// <amd-module name="@ng-matero/extensions/drawer" />
-export * from './public-api';
+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. */
+    direction?: Direction;
+    /** Data being injected into the child component. */
+    data?: D | null;
+    /** Whether the drawer has a backdrop. */
+    hasBackdrop?: boolean;
+    /** Custom class for the backdrop. */
+    backdropClass?: string;
+    /** Whether the user can use escape or clicking outside to close the drawer. */
+    disableClose?: boolean;
+    /** Aria label to assign to the drawer element. */
+    ariaLabel?: string | null;
+    /**
+     * Whether the drawer should close when the user goes backwards/forwards in history.
+     * Note that this usually doesn't include clicking on links (unless the user is using
+     * the `HashLocationStrategy`).
+     */
+    closeOnNavigation?: boolean;
+    /**
+     * Where the drawer should focus on open.
+     * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
+     * AutoFocusTarget instead.
+     */
+    autoFocus?: AutoFocusTarget | string | boolean;
+    /**
+     * Whether the drawer should restore focus to the
+     * previously-focused element, after it's closed.
+     */
+    restoreFocus?: boolean;
+    /** Scroll strategy to be used for the drawer. */
+    scrollStrategy?: ScrollStrategy;
+    /** Position of the drawer. */
+    position?: DrawerPosition;
+    /** 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. */
+    minHeight?: number | string;
+    /** Max-width of the drawer. If a number is provided, assumes pixel units. */
+    maxWidth?: number | string;
+    /** Max-height of the drawer. If a number is provided, assumes pixel units. */
+    maxHeight?: number | string;
+}
+
+/**
+ * Internal component that wraps user-provided drawer content.
+ * @docs-private
+ */
+declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConfig> implements OnDestroy {
+    /** The portal outlet inside of this container into which the content will be loaded. */
+    _portalOutlet: CdkPortalOutlet;
+    protected _animationsDisabled: boolean;
+    /** The state of the drawer animations. */
+    _animationState: 'void' | 'visible' | 'hidden';
+    /** Emits whenever the state of the animation changes. */
+    _animationStateChanged: EventEmitter<{
+        toState: "visible" | "hidden";
+        phase: "start" | "done";
+    }>;
+    /** Whether the component has been destroyed. */
+    private _destroyed;
+    get _drawerPosition(): string;
+    protected _contentAttached(): void;
+    /** Begin animation of bottom sheet entrance into view. */
+    enter(): void;
+    /** Begin animation of the bottom sheet exiting from view. */
+    exit(): void;
+    ngOnDestroy(): void;
+    private _simulateAnimation;
+    protected _handleAnimationEvent(isStart: boolean, animationName: string): void;
+    protected _captureInitialFocus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDrawerContainer, "mtx-drawer-container", never, {}, {}, never, never, true, never>;
+}
+
+declare class MtxDrawerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDrawerModule, never, [typeof i1.DialogModule, typeof i2.PortalModule, typeof i3.MatCommonModule, typeof MtxDrawerContainer], [typeof MtxDrawerContainer, typeof i3.MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxDrawerModule>;
+}
+
+/**
+ * Reference to a drawer dispatched from the drawer service.
+ */
+declare class MtxDrawerRef<T = any, R = any> {
+    private _ref;
+    /** Instance of the component making up the content of the drawer. */
+    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
+     */
+    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. */
+    private readonly _afterOpened;
+    /** Result to be passed down to the `afterDismissed` stream. */
+    private _result;
+    /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
+    private _closeFallbackTimeout;
+    constructor(_ref: DialogRef<R, T>, config: MtxDrawerConfig, containerInstance: MtxDrawerContainer);
+    /**
+     * Dismisses the drawer.
+     * @param result Data to be passed back to the drawer opener.
+     */
+    dismiss(result?: R): void;
+    /** Gets an observable that is notified when the drawer is finished closing. */
+    afterDismissed(): Observable<R | undefined>;
+    /** Gets an observable that is notified when the drawer has opened and appeared. */
+    afterOpened(): Observable<void>;
+    /**
+     * Gets an observable that emits when the overlay's backdrop has been clicked.
+     */
+    backdropClick(): Observable<MouseEvent>;
+    /**
+     * Gets an observable that emits when keydown events are targeted on the overlay.
+     */
+    keydownEvents(): Observable<KeyboardEvent>;
+}
+
+/** Injection token that can be used to access the data that was passed in to a drawer. */
+declare const MTX_DRAWER_DATA: InjectionToken<any>;
+/** Injection token that can be used to specify default drawer options. */
+declare const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig<any>>;
+/**
+ * Service to trigger Material Design bottom sheets.
+ */
+declare class MtxDrawer implements OnDestroy {
+    private _overlay;
+    private _parentDrawer;
+    private _defaultOptions;
+    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>;
+    /**
+     * Opens a drawer containing the given component.
+     * @param component Type of the component to load into the drawer.
+     * @param config Extra configuration options.
+     * @returns Reference to the newly-opened drawer.
+     */
+    open<T, D = any, R = any>(component: ComponentType<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
+    /**
+     * Opens a drawer containing the given template.
+     * @param template TemplateRef to instantiate as the drawer content.
+     * @param config Extra configuration options.
+     * @returns Reference to the newly-opened drawer.
+     */
+    open<T, D = any, R = any>(template: TemplateRef<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
+    /**
+     * Dismisses all of the currently-open drawers.
+     */
+    dismissAll(): void;
+    /**
+     * Finds an open drawer by its id.
+     * @param id ID to use when looking up the drawer.
+     */
+    getDrawerById(id: string): MtxDrawerRef<any> | undefined;
+    ngOnDestroy(): void;
+    private _dismissDrawers;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawer, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MtxDrawer>;
+}
+
+/**
+ * Animations used by the drawer.
+ * @deprecated No longer used. Will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const mtxDrawerAnimations: {
+    readonly drawerState: any;
+};
+
+export { MTX_DRAWER_DATA, MTX_DRAWER_DEFAULT_OPTIONS, MtxDrawer, MtxDrawerConfig, MtxDrawerContainer, MtxDrawerModule, MtxDrawerRef, mtxDrawerAnimations };
+export type { AutoFocusTarget, DrawerPosition };