drawer.d.ts 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { AnimationEvent } from '@angular/animations';
  9. import { FocusMonitor, FocusOrigin, FocusTrapFactory } from '@angular/cdk/a11y';
  10. import { Directionality } from '@angular/cdk/bidi';
  11. import { Platform } from '@angular/cdk/platform';
  12. import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';
  13. import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, QueryList } from '@angular/core';
  14. import { Observable, Subject } from 'rxjs';
  15. /**
  16. * Throws an exception when two MatDrawer are matching the same position.
  17. * @docs-private
  18. */
  19. export declare function throwMatDuplicatedDrawerError(position: string): void;
  20. /** Result of the toggle promise that indicates the state of the drawer. */
  21. export declare type MatDrawerToggleResult = 'open' | 'close';
  22. /** Configures whether drawers should use auto sizing by default. */
  23. export declare const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
  24. /** @docs-private */
  25. export declare function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean;
  26. export declare class MatDrawerContent extends CdkScrollable implements AfterContentInit {
  27. private _changeDetectorRef;
  28. _container: MatDrawerContainer;
  29. constructor(_changeDetectorRef: ChangeDetectorRef, _container: MatDrawerContainer, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
  30. ngAfterContentInit(): void;
  31. }
  32. /**
  33. * This component corresponds to a drawer that can be opened on the drawer container.
  34. */
  35. export declare class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestroy {
  36. private _elementRef;
  37. private _focusTrapFactory;
  38. private _focusMonitor;
  39. private _platform;
  40. private _ngZone;
  41. private _doc;
  42. private _focusTrap;
  43. private _elementFocusedBeforeDrawerWasOpened;
  44. /** Whether the drawer is initialized. Used for disabling the initial animation. */
  45. private _enableAnimations;
  46. /** The side that the drawer is attached to. */
  47. position: 'start' | 'end';
  48. private _position;
  49. /** Mode of the drawer; one of 'over', 'push' or 'side'. */
  50. mode: 'over' | 'push' | 'side';
  51. private _mode;
  52. /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */
  53. disableClose: boolean;
  54. private _disableClose;
  55. /** Whether the drawer should focus the first focusable element automatically when opened. */
  56. autoFocus: boolean;
  57. private _autoFocus;
  58. /** How the sidenav was opened (keypress, mouse click etc.) */
  59. private _openedVia;
  60. /** Emits whenever the drawer has started animating. */
  61. _animationStarted: Subject<AnimationEvent>;
  62. /** Emits whenever the drawer is done animating. */
  63. _animationEnd: Subject<AnimationEvent>;
  64. /** Current state of the sidenav animation. */
  65. _animationState: 'open-instant' | 'open' | 'void';
  66. /** Event emitted when the drawer open state is changed. */
  67. readonly openedChange: EventEmitter<boolean>;
  68. /** Event emitted when the drawer has been opened. */
  69. readonly _openedStream: Observable<void>;
  70. /** Event emitted when the drawer has started opening. */
  71. readonly openedStart: Observable<void>;
  72. /** Event emitted when the drawer has been closed. */
  73. readonly _closedStream: Observable<void>;
  74. /** Event emitted when the drawer has started closing. */
  75. readonly closedStart: Observable<void>;
  76. /** Emits when the component is destroyed. */
  77. private readonly _destroyed;
  78. /** Event emitted when the drawer's position changes. */
  79. onPositionChanged: EventEmitter<void>;
  80. /**
  81. * An observable that emits when the drawer mode changes. This is used by the drawer container to
  82. * to know when to when the mode changes so it can adapt the margins on the content.
  83. */
  84. readonly _modeChanged: Subject<void>;
  85. readonly _isFocusTrapEnabled: boolean;
  86. constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _doc: any);
  87. /** Traps focus inside the drawer. */
  88. private _trapFocus;
  89. /**
  90. * If focus is currently inside the drawer, restores it to where it was before the drawer
  91. * opened.
  92. */
  93. private _restoreFocus;
  94. ngAfterContentInit(): void;
  95. ngAfterContentChecked(): void;
  96. ngOnDestroy(): void;
  97. /**
  98. * Whether the drawer is opened. We overload this because we trigger an event when it
  99. * starts or end.
  100. */
  101. opened: boolean;
  102. private _opened;
  103. /**
  104. * Open the drawer.
  105. * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
  106. * Used for focus management after the sidenav is closed.
  107. */
  108. open(openedVia?: FocusOrigin): Promise<MatDrawerToggleResult>;
  109. /** Close the drawer. */
  110. close(): Promise<MatDrawerToggleResult>;
  111. /**
  112. * Toggle this drawer.
  113. * @param isOpen Whether the drawer should be open.
  114. * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
  115. * Used for focus management after the sidenav is closed.
  116. */
  117. toggle(isOpen?: boolean, openedVia?: FocusOrigin): Promise<MatDrawerToggleResult>;
  118. readonly _width: number;
  119. /** Updates the enabled state of the focus trap. */
  120. private _updateFocusTrapState;
  121. _animationStartListener(event: AnimationEvent): void;
  122. _animationDoneListener(event: AnimationEvent): void;
  123. }
  124. /**
  125. * `<mat-drawer-container>` component.
  126. *
  127. * This is the parent component to one or two `<mat-drawer>`s that validates the state internally
  128. * and coordinates the backdrop and content styling.
  129. */
  130. export declare class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {
  131. private _dir;
  132. private _element;
  133. private _ngZone;
  134. private _changeDetectorRef;
  135. private _animationMode?;
  136. _drawers: QueryList<MatDrawer>;
  137. _content: MatDrawerContent;
  138. _userContent: MatDrawerContent;
  139. /** The drawer child with the `start` position. */
  140. readonly start: MatDrawer | null;
  141. /** The drawer child with the `end` position. */
  142. readonly end: MatDrawer | null;
  143. /**
  144. * Whether to automatically resize the container whenever
  145. * the size of any of its drawers changes.
  146. *
  147. * **Use at your own risk!** Enabling this option can cause layout thrashing by measuring
  148. * the drawers on every change detection cycle. Can be configured globally via the
  149. * `MAT_DRAWER_DEFAULT_AUTOSIZE` token.
  150. */
  151. autosize: boolean;
  152. private _autosize;
  153. /**
  154. * Whether the drawer container should have a backdrop while one of the sidenavs is open.
  155. * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side`
  156. * mode as well.
  157. */
  158. hasBackdrop: any;
  159. _backdropOverride: boolean | null;
  160. /** Event emitted when the drawer backdrop is clicked. */
  161. readonly backdropClick: EventEmitter<void>;
  162. /** The drawer at the start/end position, independent of direction. */
  163. private _start;
  164. private _end;
  165. /**
  166. * The drawer at the left/right. When direction changes, these will change as well.
  167. * They're used as aliases for the above to set the left/right style properly.
  168. * In LTR, _left == _start and _right == _end.
  169. * In RTL, _left == _end and _right == _start.
  170. */
  171. private _left;
  172. private _right;
  173. /** Emits when the component is destroyed. */
  174. private readonly _destroyed;
  175. /** Emits on every ngDoCheck. Used for debouncing reflows. */
  176. private readonly _doCheckSubject;
  177. /**
  178. * Margins to be applied to the content. These are used to push / shrink the drawer content when a
  179. * drawer is open. We use margin rather than transform even for push mode because transform breaks
  180. * fixed position elements inside of the transformed element.
  181. */
  182. _contentMargins: {
  183. left: number | null;
  184. right: number | null;
  185. };
  186. readonly _contentMarginChanges: Subject<{
  187. left: number | null;
  188. right: number | null;
  189. }>;
  190. /** Reference to the CdkScrollable instance that wraps the scrollable content. */
  191. readonly scrollable: CdkScrollable;
  192. constructor(_dir: Directionality, _element: ElementRef<HTMLElement>, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, defaultAutosize?: boolean, _animationMode?: string | undefined);
  193. ngAfterContentInit(): void;
  194. ngOnDestroy(): void;
  195. /** Calls `open` of both start and end drawers */
  196. open(): void;
  197. /** Calls `close` of both start and end drawers */
  198. close(): void;
  199. /**
  200. * Recalculates and updates the inline styles for the content. Note that this should be used
  201. * sparingly, because it causes a reflow.
  202. */
  203. updateContentMargins(): void;
  204. ngDoCheck(): void;
  205. /**
  206. * Subscribes to drawer events in order to set a class on the main container element when the
  207. * drawer is open and the backdrop is visible. This ensures any overflow on the container element
  208. * is properly hidden.
  209. */
  210. private _watchDrawerToggle;
  211. /**
  212. * Subscribes to drawer onPositionChanged event in order to
  213. * re-validate drawers when the position changes.
  214. */
  215. private _watchDrawerPosition;
  216. /** Subscribes to changes in drawer mode so we can run change detection. */
  217. private _watchDrawerMode;
  218. /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */
  219. private _setContainerClass;
  220. /** Validate the state of the drawer children components. */
  221. private _validateDrawers;
  222. /** Whether the container is being pushed to the side by one of the drawers. */
  223. private _isPushed;
  224. _onBackdropClicked(): void;
  225. _closeModalDrawer(): void;
  226. _isShowingBackdrop(): boolean;
  227. private _canHaveBackdrop;
  228. private _isDrawerOpen;
  229. }