index.d.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. import { AfterContentChecked } from '@angular/core';
  2. import { AfterContentInit } from '@angular/core';
  3. import { AfterViewInit } from '@angular/core';
  4. import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
  5. import { AnimationTriggerMetadata } from '@angular/animations';
  6. import { BooleanInput } from '@angular/cdk/coercion';
  7. import { CdkScrollable } from '@angular/cdk/scrolling';
  8. import { ChangeDetectorRef } from '@angular/core';
  9. import { Directionality } from '@angular/cdk/bidi';
  10. import { DoCheck } from '@angular/core';
  11. import { ElementRef } from '@angular/core';
  12. import { EventEmitter } from '@angular/core';
  13. import { FocusMonitor } from '@angular/cdk/a11y';
  14. import { FocusOrigin } from '@angular/cdk/a11y';
  15. import { FocusTrapFactory } from '@angular/cdk/a11y';
  16. import * as i0 from '@angular/core';
  17. import * as i3 from '@angular/common';
  18. import * as i4 from '@angular/material/core';
  19. import * as i5 from '@angular/cdk/scrolling';
  20. import { InjectionToken } from '@angular/core';
  21. import { InteractivityChecker } from '@angular/cdk/a11y';
  22. import { NgZone } from '@angular/core';
  23. import { NumberInput } from '@angular/cdk/coercion';
  24. import { Observable } from 'rxjs';
  25. import { OnDestroy } from '@angular/core';
  26. import { Platform } from '@angular/cdk/platform';
  27. import { QueryList } from '@angular/core';
  28. import { ScrollDispatcher } from '@angular/cdk/scrolling';
  29. import { Subject } from 'rxjs';
  30. import { ViewportRuler } from '@angular/cdk/scrolling';
  31. /** Options for where to set focus to automatically on dialog open */
  32. declare type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
  33. declare namespace i1 {
  34. export {
  35. throwMatDuplicatedDrawerError,
  36. MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY,
  37. AutoFocusTarget,
  38. MatDrawerToggleResult,
  39. MatDrawerMode,
  40. MAT_DRAWER_DEFAULT_AUTOSIZE,
  41. MAT_DRAWER_CONTAINER,
  42. MatDrawerContent,
  43. MatDrawer,
  44. MatDrawerContainer
  45. }
  46. }
  47. declare namespace i2 {
  48. export {
  49. MatSidenavContent,
  50. MatSidenav,
  51. MatSidenavContainer
  52. }
  53. }
  54. /**
  55. * Used to provide a drawer container to a drawer while avoiding circular references.
  56. * @docs-private
  57. */
  58. declare const MAT_DRAWER_CONTAINER: InjectionToken<unknown>;
  59. /** Configures whether drawers should use auto sizing by default. */
  60. export declare const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
  61. /** @docs-private */
  62. export declare function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean;
  63. /**
  64. * This component corresponds to a drawer that can be opened on the drawer container.
  65. */
  66. export declare class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy {
  67. private _elementRef;
  68. private _focusTrapFactory;
  69. private _focusMonitor;
  70. private _platform;
  71. private _ngZone;
  72. private readonly _interactivityChecker;
  73. private _doc;
  74. _container?: MatDrawerContainer | undefined;
  75. private _focusTrap;
  76. private _elementFocusedBeforeDrawerWasOpened;
  77. /** Whether the drawer is initialized. Used for disabling the initial animation. */
  78. private _enableAnimations;
  79. /** Whether the view of the component has been attached. */
  80. private _isAttached;
  81. /** Anchor node used to restore the drawer to its initial position. */
  82. private _anchor;
  83. /** The side that the drawer is attached to. */
  84. get position(): 'start' | 'end';
  85. set position(value: 'start' | 'end');
  86. private _position;
  87. /** Mode of the drawer; one of 'over', 'push' or 'side'. */
  88. get mode(): MatDrawerMode;
  89. set mode(value: MatDrawerMode);
  90. private _mode;
  91. /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */
  92. get disableClose(): boolean;
  93. set disableClose(value: BooleanInput);
  94. private _disableClose;
  95. /**
  96. * Whether the drawer should focus the first focusable element automatically when opened.
  97. * Defaults to false in when `mode` is set to `side`, otherwise defaults to `true`. If explicitly
  98. * enabled, focus will be moved into the sidenav in `side` mode as well.
  99. * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget
  100. * instead.
  101. */
  102. get autoFocus(): AutoFocusTarget | string | boolean;
  103. set autoFocus(value: AutoFocusTarget | string | BooleanInput);
  104. private _autoFocus;
  105. /**
  106. * Whether the drawer is opened. We overload this because we trigger an event when it
  107. * starts or end.
  108. */
  109. get opened(): boolean;
  110. set opened(value: BooleanInput);
  111. private _opened;
  112. /** How the sidenav was opened (keypress, mouse click etc.) */
  113. private _openedVia;
  114. /** Emits whenever the drawer has started animating. */
  115. readonly _animationStarted: Subject<AnimationEvent_2>;
  116. /** Emits whenever the drawer is done animating. */
  117. readonly _animationEnd: Subject<AnimationEvent_2>;
  118. /** Current state of the sidenav animation. */
  119. _animationState: 'open-instant' | 'open' | 'void';
  120. /** Event emitted when the drawer open state is changed. */
  121. readonly openedChange: EventEmitter<boolean>;
  122. /** Event emitted when the drawer has been opened. */
  123. readonly _openedStream: Observable<void>;
  124. /** Event emitted when the drawer has started opening. */
  125. readonly openedStart: Observable<void>;
  126. /** Event emitted when the drawer has been closed. */
  127. readonly _closedStream: Observable<void>;
  128. /** Event emitted when the drawer has started closing. */
  129. readonly closedStart: Observable<void>;
  130. /** Emits when the component is destroyed. */
  131. private readonly _destroyed;
  132. /** Event emitted when the drawer's position changes. */
  133. readonly onPositionChanged: EventEmitter<void>;
  134. /** Reference to the inner element that contains all the content. */
  135. _content: ElementRef<HTMLElement>;
  136. /**
  137. * An observable that emits when the drawer mode changes. This is used by the drawer container to
  138. * to know when to when the mode changes so it can adapt the margins on the content.
  139. */
  140. readonly _modeChanged: Subject<void>;
  141. constructor(_elementRef: ElementRef<HTMLElement>, _focusTrapFactory: FocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _interactivityChecker: InteractivityChecker, _doc: any, _container?: MatDrawerContainer | undefined);
  142. /**
  143. * Focuses the provided element. If the element is not focusable, it will add a tabIndex
  144. * attribute to forcefully focus it. The attribute is removed after focus is moved.
  145. * @param element The element to focus.
  146. */
  147. private _forceFocus;
  148. /**
  149. * Focuses the first element that matches the given selector within the focus trap.
  150. * @param selector The CSS selector for the element to set focus to.
  151. */
  152. private _focusByCssSelector;
  153. /**
  154. * Moves focus into the drawer. Note that this works even if
  155. * the focus trap is disabled in `side` mode.
  156. */
  157. private _takeFocus;
  158. /**
  159. * Restores focus to the element that was originally focused when the drawer opened.
  160. * If no element was focused at that time, the focus will be restored to the drawer.
  161. */
  162. private _restoreFocus;
  163. /** Whether focus is currently within the drawer. */
  164. private _isFocusWithinDrawer;
  165. ngAfterViewInit(): void;
  166. ngAfterContentChecked(): void;
  167. ngOnDestroy(): void;
  168. /**
  169. * Open the drawer.
  170. * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
  171. * Used for focus management after the sidenav is closed.
  172. */
  173. open(openedVia?: FocusOrigin): Promise<MatDrawerToggleResult>;
  174. /** Close the drawer. */
  175. close(): Promise<MatDrawerToggleResult>;
  176. /** Closes the drawer with context that the backdrop was clicked. */
  177. _closeViaBackdropClick(): Promise<MatDrawerToggleResult>;
  178. /**
  179. * Toggle this drawer.
  180. * @param isOpen Whether the drawer should be open.
  181. * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
  182. * Used for focus management after the sidenav is closed.
  183. */
  184. toggle(isOpen?: boolean, openedVia?: FocusOrigin): Promise<MatDrawerToggleResult>;
  185. /**
  186. * Toggles the opened state of the drawer.
  187. * @param isOpen Whether the drawer should open or close.
  188. * @param restoreFocus Whether focus should be restored on close.
  189. * @param focusOrigin Origin to use when restoring focus.
  190. */
  191. private _setOpen;
  192. _getWidth(): number;
  193. /** Updates the enabled state of the focus trap. */
  194. private _updateFocusTrapState;
  195. /**
  196. * Updates the position of the drawer in the DOM. We need to move the element around ourselves
  197. * when it's in the `end` position so that it comes after the content and the visual order
  198. * matches the tab order. We also need to be able to move it back to `start` if the sidenav
  199. * started off as `end` and was changed to `start`.
  200. */
  201. private _updatePositionInParent;
  202. static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawer, [null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
  203. static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawer, "mat-drawer", ["matDrawer"], { "position": { "alias": "position"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "openedStart": "openedStart"; "_closedStream": "closed"; "closedStart": "closedStart"; "onPositionChanged": "positionChanged"; }, never, ["*"], false, never>;
  204. }
  205. /**
  206. * Animations used by the Material drawers.
  207. * @docs-private
  208. */
  209. export declare const matDrawerAnimations: {
  210. readonly transformDrawer: AnimationTriggerMetadata;
  211. };
  212. /**
  213. * `<mat-drawer-container>` component.
  214. *
  215. * This is the parent component to one or two `<mat-drawer>`s that validates the state internally
  216. * and coordinates the backdrop and content styling.
  217. */
  218. export declare class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {
  219. private _dir;
  220. private _element;
  221. private _ngZone;
  222. private _changeDetectorRef;
  223. private _animationMode?;
  224. /** All drawers in the container. Includes drawers from inside nested containers. */
  225. _allDrawers: QueryList<MatDrawer>;
  226. /** Drawers that belong to this container. */
  227. _drawers: QueryList<MatDrawer>;
  228. _content: MatDrawerContent;
  229. _userContent: MatDrawerContent;
  230. /** The drawer child with the `start` position. */
  231. get start(): MatDrawer | null;
  232. /** The drawer child with the `end` position. */
  233. get end(): MatDrawer | null;
  234. /**
  235. * Whether to automatically resize the container whenever
  236. * the size of any of its drawers changes.
  237. *
  238. * **Use at your own risk!** Enabling this option can cause layout thrashing by measuring
  239. * the drawers on every change detection cycle. Can be configured globally via the
  240. * `MAT_DRAWER_DEFAULT_AUTOSIZE` token.
  241. */
  242. get autosize(): boolean;
  243. set autosize(value: BooleanInput);
  244. private _autosize;
  245. /**
  246. * Whether the drawer container should have a backdrop while one of the sidenavs is open.
  247. * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side`
  248. * mode as well.
  249. */
  250. get hasBackdrop(): boolean;
  251. set hasBackdrop(value: BooleanInput);
  252. _backdropOverride: boolean | null;
  253. /** Event emitted when the drawer backdrop is clicked. */
  254. readonly backdropClick: EventEmitter<void>;
  255. /** The drawer at the start/end position, independent of direction. */
  256. private _start;
  257. private _end;
  258. /**
  259. * The drawer at the left/right. When direction changes, these will change as well.
  260. * They're used as aliases for the above to set the left/right style properly.
  261. * In LTR, _left == _start and _right == _end.
  262. * In RTL, _left == _end and _right == _start.
  263. */
  264. private _left;
  265. private _right;
  266. /** Emits when the component is destroyed. */
  267. private readonly _destroyed;
  268. /** Emits on every ngDoCheck. Used for debouncing reflows. */
  269. private readonly _doCheckSubject;
  270. /**
  271. * Margins to be applied to the content. These are used to push / shrink the drawer content when a
  272. * drawer is open. We use margin rather than transform even for push mode because transform breaks
  273. * fixed position elements inside of the transformed element.
  274. */
  275. _contentMargins: {
  276. left: number | null;
  277. right: number | null;
  278. };
  279. readonly _contentMarginChanges: Subject<{
  280. left: number | null;
  281. right: number | null;
  282. }>;
  283. /** Reference to the CdkScrollable instance that wraps the scrollable content. */
  284. get scrollable(): CdkScrollable;
  285. constructor(_dir: Directionality, _element: ElementRef<HTMLElement>, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, defaultAutosize?: boolean, _animationMode?: string | undefined);
  286. ngAfterContentInit(): void;
  287. ngOnDestroy(): void;
  288. /** Calls `open` of both start and end drawers */
  289. open(): void;
  290. /** Calls `close` of both start and end drawers */
  291. close(): void;
  292. /**
  293. * Recalculates and updates the inline styles for the content. Note that this should be used
  294. * sparingly, because it causes a reflow.
  295. */
  296. updateContentMargins(): void;
  297. ngDoCheck(): void;
  298. /**
  299. * Subscribes to drawer events in order to set a class on the main container element when the
  300. * drawer is open and the backdrop is visible. This ensures any overflow on the container element
  301. * is properly hidden.
  302. */
  303. private _watchDrawerToggle;
  304. /**
  305. * Subscribes to drawer onPositionChanged event in order to
  306. * re-validate drawers when the position changes.
  307. */
  308. private _watchDrawerPosition;
  309. /** Subscribes to changes in drawer mode so we can run change detection. */
  310. private _watchDrawerMode;
  311. /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */
  312. private _setContainerClass;
  313. /** Validate the state of the drawer children components. */
  314. private _validateDrawers;
  315. /** Whether the container is being pushed to the side by one of the drawers. */
  316. private _isPushed;
  317. _onBackdropClicked(): void;
  318. _closeModalDrawersViaBackdrop(): void;
  319. _isShowingBackdrop(): boolean;
  320. private _canHaveBackdrop;
  321. private _isDrawerOpen;
  322. static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawerContainer, [{ optional: true; }, null, null, null, null, null, { optional: true; }]>;
  323. static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContainer, "mat-drawer-container", ["matDrawerContainer"], { "autosize": { "alias": "autosize"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, { "backdropClick": "backdropClick"; }, ["_content", "_allDrawers"], ["mat-drawer", "mat-drawer-content", "*"], false, never>;
  324. }
  325. export declare class MatDrawerContent extends CdkScrollable implements AfterContentInit {
  326. private _changeDetectorRef;
  327. _container: MatDrawerContainer;
  328. constructor(_changeDetectorRef: ChangeDetectorRef, _container: MatDrawerContainer, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
  329. ngAfterContentInit(): void;
  330. static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawerContent, never>;
  331. static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContent, "mat-drawer-content", never, {}, {}, never, ["*"], false, never>;
  332. }
  333. /** Drawer and SideNav display modes. */
  334. export declare type MatDrawerMode = 'over' | 'push' | 'side';
  335. /** Result of the toggle promise that indicates the state of the drawer. */
  336. export declare type MatDrawerToggleResult = 'open' | 'close';
  337. export declare class MatSidenav extends MatDrawer {
  338. /** Whether the sidenav is fixed in the viewport. */
  339. get fixedInViewport(): boolean;
  340. set fixedInViewport(value: BooleanInput);
  341. private _fixedInViewport;
  342. /**
  343. * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
  344. * mode.
  345. */
  346. get fixedTopGap(): number;
  347. set fixedTopGap(value: NumberInput);
  348. private _fixedTopGap;
  349. /**
  350. * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
  351. * fixed mode.
  352. */
  353. get fixedBottomGap(): number;
  354. set fixedBottomGap(value: NumberInput);
  355. private _fixedBottomGap;
  356. static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenav, never>;
  357. static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenav, "mat-sidenav", ["matSidenav"], { "fixedInViewport": { "alias": "fixedInViewport"; "required": false; }; "fixedTopGap": { "alias": "fixedTopGap"; "required": false; }; "fixedBottomGap": { "alias": "fixedBottomGap"; "required": false; }; }, {}, never, ["*"], false, never>;
  358. }
  359. export declare class MatSidenavContainer extends MatDrawerContainer {
  360. _allDrawers: QueryList<MatSidenav>;
  361. _content: MatSidenavContent;
  362. static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavContainer, never>;
  363. static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContainer, "mat-sidenav-container", ["matSidenavContainer"], {}, {}, ["_content", "_allDrawers"], ["mat-sidenav", "mat-sidenav-content", "*"], false, never>;
  364. }
  365. export declare class MatSidenavContent extends MatDrawerContent {
  366. constructor(changeDetectorRef: ChangeDetectorRef, container: MatSidenavContainer, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
  367. static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavContent, never>;
  368. static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContent, "mat-sidenav-content", never, {}, {}, never, ["*"], false, never>;
  369. }
  370. export declare class MatSidenavModule {
  371. static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavModule, never>;
  372. static ɵmod: i0.ɵɵNgModuleDeclaration<MatSidenavModule, [typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent], [typeof i3.CommonModule, typeof i4.MatCommonModule, typeof i5.CdkScrollableModule], [typeof i5.CdkScrollableModule, typeof i4.MatCommonModule, typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent]>;
  373. static ɵinj: i0.ɵɵInjectorDeclaration<MatSidenavModule>;
  374. }
  375. /**
  376. * Throws an exception when two MatDrawer are matching the same position.
  377. * @docs-private
  378. */
  379. export declare function throwMatDuplicatedDrawerError(position: string): void;
  380. export { }