UNPKG

@angular/material

Version:
1,297 lines 112 kB
/** * @fileoverview added by tsickle * Generated from: src/material/sidenav/drawer.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { FocusMonitor, FocusTrapFactory } from '@angular/cdk/a11y'; import { Directionality } from '@angular/cdk/bidi'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes'; import { Platform } from '@angular/cdk/platform'; import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling'; import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, InjectionToken, Input, NgZone, Optional, Output, QueryList, ViewChild, ViewEncapsulation, HostListener, HostBinding, } from '@angular/core'; import { fromEvent, merge, Observable, Subject } from 'rxjs'; import { debounceTime, filter, map, startWith, take, takeUntil, distinctUntilChanged, } from 'rxjs/operators'; import { matDrawerAnimations } from './drawer-animations'; import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; /** * Throws an exception when two MatDrawer are matching the same position. * \@docs-private * @param {?} position * @return {?} */ export function throwMatDuplicatedDrawerError(position) { throw Error(`A drawer was already declared for 'position="${position}"'`); } /** * Configures whether drawers should use auto sizing by default. * @type {?} */ export const MAT_DRAWER_DEFAULT_AUTOSIZE = new InjectionToken('MAT_DRAWER_DEFAULT_AUTOSIZE', { providedIn: 'root', factory: MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY, }); /** * Used to provide a drawer container to a drawer while avoiding circular references. * \@docs-private * @type {?} */ export const MAT_DRAWER_CONTAINER = new InjectionToken('MAT_DRAWER_CONTAINER'); /** * \@docs-private * @return {?} */ export function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY() { return false; } export class MatDrawerContent extends CdkScrollable { /** * @param {?} _changeDetectorRef * @param {?} _container * @param {?} elementRef * @param {?} scrollDispatcher * @param {?} ngZone */ constructor(_changeDetectorRef, _container, elementRef, scrollDispatcher, ngZone) { super(elementRef, scrollDispatcher, ngZone); this._changeDetectorRef = _changeDetectorRef; this._container = _container; } /** * @return {?} */ ngAfterContentInit() { this._container._contentMarginChanges.subscribe((/** * @return {?} */ () => { this._changeDetectorRef.markForCheck(); })); } } MatDrawerContent.decorators = [ { type: Component, args: [{ selector: 'mat-drawer-content', template: '<ng-content></ng-content>', host: { 'class': 'mat-drawer-content', '[style.margin-left.px]': '_container._contentMargins.left', '[style.margin-right.px]': '_container._contentMargins.right', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }] } ]; /** @nocollapse */ MatDrawerContent.ctorParameters = () => [ { type: ChangeDetectorRef }, { type: MatDrawerContainer, decorators: [{ type: Inject, args: [forwardRef((/** * @return {?} */ () => MatDrawerContainer)),] }] }, { type: ElementRef }, { type: ScrollDispatcher }, { type: NgZone } ]; if (false) { /** * @type {?} * @private */ MatDrawerContent.prototype._changeDetectorRef; /** @type {?} */ MatDrawerContent.prototype._container; } /** * This component corresponds to a drawer that can be opened on the drawer container. */ export class MatDrawer { /** * @param {?} _elementRef * @param {?} _focusTrapFactory * @param {?} _focusMonitor * @param {?} _platform * @param {?} _ngZone * @param {?} _doc * @param {?=} _container */ constructor(_elementRef, _focusTrapFactory, _focusMonitor, _platform, _ngZone, _doc, _container) { this._elementRef = _elementRef; this._focusTrapFactory = _focusTrapFactory; this._focusMonitor = _focusMonitor; this._platform = _platform; this._ngZone = _ngZone; this._doc = _doc; this._container = _container; this._elementFocusedBeforeDrawerWasOpened = null; /** * Whether the drawer is initialized. Used for disabling the initial animation. */ this._enableAnimations = false; this._position = 'start'; this._mode = 'over'; this._disableClose = false; this._opened = false; /** * Emits whenever the drawer has started animating. */ this._animationStarted = new Subject(); /** * Emits whenever the drawer is done animating. */ this._animationEnd = new Subject(); /** * Current state of the sidenav animation. */ // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator // metadata is not inherited by child classes, instead the host binding data is defined in a way // that can be inherited. // tslint:disable:no-host-decorator-in-concrete this._animationState = 'void'; /** * Event emitted when the drawer open state is changed. */ this.openedChange = // Note this has to be async in order to avoid some issues with two-bindings (see #8872). new EventEmitter(/* isAsync */ true); /** * Emits when the component is destroyed. */ this._destroyed = new Subject(); /** * Event emitted when the drawer's position changes. */ // tslint:disable-next-line:no-output-on-prefix this.onPositionChanged = new EventEmitter(); /** * An observable that emits when the drawer mode changes. This is used by the drawer container to * to know when to when the mode changes so it can adapt the margins on the content. */ this._modeChanged = new Subject(); this.openedChange.subscribe((/** * @param {?} opened * @return {?} */ (opened) => { if (opened) { if (this._doc) { this._elementFocusedBeforeDrawerWasOpened = (/** @type {?} */ (this._doc.activeElement)); } this._takeFocus(); } else { this._restoreFocus(); } })); /** * Listen to `keydown` events outside the zone so that change detection is not run every * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed * and we don't have close disabled. */ this._ngZone.runOutsideAngular((/** * @return {?} */ () => { ((/** @type {?} */ (fromEvent(this._elementRef.nativeElement, 'keydown')))).pipe(filter((/** * @param {?} event * @return {?} */ event => { return event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event); })), takeUntil(this._destroyed)).subscribe((/** * @param {?} event * @return {?} */ event => this._ngZone.run((/** * @return {?} */ () => { this.close(); event.stopPropagation(); event.preventDefault(); })))); })); // We need a Subject with distinctUntilChanged, because the `done` event // fires twice on some browsers. See https://github.com/angular/angular/issues/24084 this._animationEnd.pipe(distinctUntilChanged((/** * @param {?} x * @param {?} y * @return {?} */ (x, y) => { return x.fromState === y.fromState && x.toState === y.toState; }))).subscribe((/** * @param {?} event * @return {?} */ (event) => { const { fromState, toState } = event; if ((toState.indexOf('open') === 0 && fromState === 'void') || (toState === 'void' && fromState.indexOf('open') === 0)) { this.openedChange.emit(this._opened); } })); } /** * The side that the drawer is attached to. * @return {?} */ get position() { return this._position; } /** * @param {?} value * @return {?} */ set position(value) { // Make sure we have a valid value. value = value === 'end' ? 'end' : 'start'; if (value != this._position) { this._position = value; this.onPositionChanged.emit(); } } /** * Mode of the drawer; one of 'over', 'push' or 'side'. * @return {?} */ get mode() { return this._mode; } /** * @param {?} value * @return {?} */ set mode(value) { this._mode = value; this._updateFocusTrapState(); this._modeChanged.next(); } /** * Whether the drawer can be closed with the escape key or by clicking on the backdrop. * @return {?} */ get disableClose() { return this._disableClose; } /** * @param {?} value * @return {?} */ set disableClose(value) { this._disableClose = coerceBooleanProperty(value); } /** * Whether the drawer should focus the first focusable element automatically when opened. * Defaults to false in when `mode` is set to `side`, otherwise defaults to `true`. If explicitly * enabled, focus will be moved into the sidenav in `side` mode as well. * @return {?} */ get autoFocus() { /** @type {?} */ const value = this._autoFocus; // Note that usually we disable auto focusing in `side` mode, because we don't know how the // sidenav is being used, but in some cases it still makes sense to do it. If the consumer // explicitly enabled `autoFocus`, we take it as them always wanting to enable it. return value == null ? this.mode !== 'side' : value; } /** * @param {?} value * @return {?} */ set autoFocus(value) { this._autoFocus = coerceBooleanProperty(value); } /** * Whether the drawer is opened. We overload this because we trigger an event when it * starts or end. * @return {?} */ get opened() { return this._opened; } /** * @param {?} value * @return {?} */ set opened(value) { this.toggle(coerceBooleanProperty(value)); } /** * Event emitted when the drawer has been opened. * @return {?} */ get _openedStream() { return this.openedChange.pipe(filter((/** * @param {?} o * @return {?} */ o => o)), map((/** * @return {?} */ () => { }))); } /** * Event emitted when the drawer has started opening. * @return {?} */ get openedStart() { return this._animationStarted.pipe(filter((/** * @param {?} e * @return {?} */ e => e.fromState !== e.toState && e.toState.indexOf('open') === 0)), map((/** * @return {?} */ () => { }))); } /** * Event emitted when the drawer has been closed. * @return {?} */ get _closedStream() { return this.openedChange.pipe(filter((/** * @param {?} o * @return {?} */ o => !o)), map((/** * @return {?} */ () => { }))); } /** * Event emitted when the drawer has started closing. * @return {?} */ get closedStart() { return this._animationStarted.pipe(filter((/** * @param {?} e * @return {?} */ e => e.fromState !== e.toState && e.toState === 'void')), map((/** * @return {?} */ () => { }))); } /** * Moves focus into the drawer. Note that this works even if * the focus trap is disabled in `side` mode. * @private * @return {?} */ _takeFocus() { if (!this.autoFocus || !this._focusTrap) { return; } this._focusTrap.focusInitialElementWhenReady().then((/** * @param {?} hasMovedFocus * @return {?} */ hasMovedFocus => { // If there were no focusable elements, focus the sidenav itself so the keyboard navigation // still works. We need to check that `focus` is a function due to Universal. if (!hasMovedFocus && typeof this._elementRef.nativeElement.focus === 'function') { this._elementRef.nativeElement.focus(); } })); } /** * If focus is currently inside the drawer, restores it to where it was before the drawer * opened. * @private * @return {?} */ _restoreFocus() { if (!this.autoFocus) { return; } /** @type {?} */ const activeEl = this._doc && this._doc.activeElement; if (activeEl && this._elementRef.nativeElement.contains(activeEl)) { if (this._elementFocusedBeforeDrawerWasOpened instanceof HTMLElement) { this._focusMonitor.focusVia(this._elementFocusedBeforeDrawerWasOpened, this._openedVia); } else { this._elementRef.nativeElement.blur(); } } this._elementFocusedBeforeDrawerWasOpened = null; this._openedVia = null; } /** * @return {?} */ ngAfterContentInit() { this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); this._updateFocusTrapState(); } /** * @return {?} */ ngAfterContentChecked() { // Enable the animations after the lifecycle hooks have run, in order to avoid animating // drawers that are open by default. When we're on the server, we shouldn't enable the // animations, because we don't want the drawer to animate the first time the user sees // the page. if (this._platform.isBrowser) { this._enableAnimations = true; } } /** * @return {?} */ ngOnDestroy() { if (this._focusTrap) { this._focusTrap.destroy(); } this._animationStarted.complete(); this._animationEnd.complete(); this._modeChanged.complete(); this._destroyed.next(); this._destroyed.complete(); } /** * Open the drawer. * @param {?=} openedVia Whether the drawer was opened by a key press, mouse click or programmatically. * Used for focus management after the sidenav is closed. * @return {?} */ open(openedVia) { return this.toggle(true, openedVia); } /** * Close the drawer. * @return {?} */ close() { return this.toggle(false); } /** * Toggle this drawer. * @param {?=} isOpen Whether the drawer should be open. * @param {?=} openedVia Whether the drawer was opened by a key press, mouse click or programmatically. * Used for focus management after the sidenav is closed. * @return {?} */ toggle(isOpen = !this.opened, openedVia = 'program') { this._opened = isOpen; if (isOpen) { this._animationState = this._enableAnimations ? 'open' : 'open-instant'; this._openedVia = openedVia; } else { this._animationState = 'void'; this._restoreFocus(); } this._updateFocusTrapState(); return new Promise((/** * @param {?} resolve * @return {?} */ resolve => { this.openedChange.pipe(take(1)).subscribe((/** * @param {?} open * @return {?} */ open => resolve(open ? 'open' : 'close'))); })); } /** * @return {?} */ get _width() { return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0; } /** * Updates the enabled state of the focus trap. * @private * @return {?} */ _updateFocusTrapState() { if (this._focusTrap) { // The focus trap is only enabled when the drawer is open in any mode other than side. this._focusTrap.enabled = this.opened && this.mode !== 'side'; } } // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. // In Ivy the `host` bindings will be merged when this class is extended, whereas in // ViewEngine they're overwritten. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. // tslint:disable-next-line:no-host-decorator-in-concrete /** * @param {?} event * @return {?} */ _animationStartListener(event) { this._animationStarted.next(event); } // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. // In Ivy the `host` bindings will be merged when this class is extended, whereas in // ViewEngine they're overwritten. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. // tslint:disable-next-line:no-host-decorator-in-concrete /** * @param {?} event * @return {?} */ _animationDoneListener(event) { this._animationEnd.next(event); } } MatDrawer.decorators = [ { type: Component, args: [{ selector: 'mat-drawer', exportAs: 'matDrawer', template: "<div class=\"mat-drawer-inner-container\">\r\n <ng-content></ng-content>\r\n</div>\r\n", animations: [matDrawerAnimations.transformDrawer], host: { 'class': 'mat-drawer', // must prevent the browser from aligning text based on value '[attr.align]': 'null', '[class.mat-drawer-end]': 'position === "end"', '[class.mat-drawer-over]': 'mode === "over"', '[class.mat-drawer-push]': 'mode === "push"', '[class.mat-drawer-side]': 'mode === "side"', '[class.mat-drawer-opened]': 'opened', 'tabIndex': '-1', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }] } ]; /** @nocollapse */ MatDrawer.ctorParameters = () => [ { type: ElementRef }, { type: FocusTrapFactory }, { type: FocusMonitor }, { type: Platform }, { type: NgZone }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }, { type: MatDrawerContainer, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DRAWER_CONTAINER,] }] } ]; MatDrawer.propDecorators = { position: [{ type: Input }], mode: [{ type: Input }], disableClose: [{ type: Input }], autoFocus: [{ type: Input }], opened: [{ type: Input }], _animationState: [{ type: HostBinding, args: ['@transform',] }], openedChange: [{ type: Output }], _openedStream: [{ type: Output, args: ['opened',] }], openedStart: [{ type: Output }], _closedStream: [{ type: Output, args: ['closed',] }], closedStart: [{ type: Output }], onPositionChanged: [{ type: Output, args: ['positionChanged',] }], _animationStartListener: [{ type: HostListener, args: ['@transform.start', ['$event'],] }], _animationDoneListener: [{ type: HostListener, args: ['@transform.done', ['$event'],] }] }; if (false) { /** @type {?} */ MatDrawer.ngAcceptInputType_disableClose; /** @type {?} */ MatDrawer.ngAcceptInputType_autoFocus; /** @type {?} */ MatDrawer.ngAcceptInputType_opened; /** * @type {?} * @private */ MatDrawer.prototype._focusTrap; /** * @type {?} * @private */ MatDrawer.prototype._elementFocusedBeforeDrawerWasOpened; /** * Whether the drawer is initialized. Used for disabling the initial animation. * @type {?} * @private */ MatDrawer.prototype._enableAnimations; /** * @type {?} * @private */ MatDrawer.prototype._position; /** * @type {?} * @private */ MatDrawer.prototype._mode; /** * @type {?} * @private */ MatDrawer.prototype._disableClose; /** * @type {?} * @private */ MatDrawer.prototype._autoFocus; /** * @type {?} * @private */ MatDrawer.prototype._opened; /** * How the sidenav was opened (keypress, mouse click etc.) * @type {?} * @private */ MatDrawer.prototype._openedVia; /** * Emits whenever the drawer has started animating. * @type {?} */ MatDrawer.prototype._animationStarted; /** * Emits whenever the drawer is done animating. * @type {?} */ MatDrawer.prototype._animationEnd; /** * Current state of the sidenav animation. * @type {?} */ MatDrawer.prototype._animationState; /** * Event emitted when the drawer open state is changed. * @type {?} */ MatDrawer.prototype.openedChange; /** * Emits when the component is destroyed. * @type {?} * @private */ MatDrawer.prototype._destroyed; /** * Event emitted when the drawer's position changes. * @type {?} */ MatDrawer.prototype.onPositionChanged; /** * An observable that emits when the drawer mode changes. This is used by the drawer container to * to know when to when the mode changes so it can adapt the margins on the content. * @type {?} */ MatDrawer.prototype._modeChanged; /** * @type {?} * @private */ MatDrawer.prototype._elementRef; /** * @type {?} * @private */ MatDrawer.prototype._focusTrapFactory; /** * @type {?} * @private */ MatDrawer.prototype._focusMonitor; /** * @type {?} * @private */ MatDrawer.prototype._platform; /** * @type {?} * @private */ MatDrawer.prototype._ngZone; /** * @type {?} * @private */ MatDrawer.prototype._doc; /** * @deprecated `_container` parameter to be made required. * \@breaking-change 10.0.0 * @type {?} */ MatDrawer.prototype._container; } /** * `<mat-drawer-container>` component. * * This is the parent component to one or two `<mat-drawer>`s that validates the state internally * and coordinates the backdrop and content styling. */ export class MatDrawerContainer { /** * @param {?} _dir * @param {?} _element * @param {?} _ngZone * @param {?} _changeDetectorRef * @param {?} viewportRuler * @param {?=} defaultAutosize * @param {?=} _animationMode */ constructor(_dir, _element, _ngZone, _changeDetectorRef, viewportRuler, defaultAutosize = false, _animationMode) { this._dir = _dir; this._element = _element; this._ngZone = _ngZone; this._changeDetectorRef = _changeDetectorRef; this._animationMode = _animationMode; /** * Drawers that belong to this container. */ this._drawers = new QueryList(); /** * Event emitted when the drawer backdrop is clicked. */ this.backdropClick = new EventEmitter(); /** * Emits when the component is destroyed. */ this._destroyed = new Subject(); /** * Emits on every ngDoCheck. Used for debouncing reflows. */ this._doCheckSubject = new Subject(); /** * Margins to be applied to the content. These are used to push / shrink the drawer content when a * drawer is open. We use margin rather than transform even for push mode because transform breaks * fixed position elements inside of the transformed element. */ this._contentMargins = { left: null, right: null }; this._contentMarginChanges = new Subject(); // If a `Dir` directive exists up the tree, listen direction changes // and update the left/right properties to point to the proper start/end. if (_dir) { _dir.change.pipe(takeUntil(this._destroyed)).subscribe((/** * @return {?} */ () => { this._validateDrawers(); this.updateContentMargins(); })); } // Since the minimum width of the sidenav depends on the viewport width, // we need to recompute the margins if the viewport changes. viewportRuler.change() .pipe(takeUntil(this._destroyed)) .subscribe((/** * @return {?} */ () => this.updateContentMargins())); this._autosize = defaultAutosize; } /** * The drawer child with the `start` position. * @return {?} */ get start() { return this._start; } /** * The drawer child with the `end` position. * @return {?} */ get end() { return this._end; } /** * Whether to automatically resize the container whenever * the size of any of its drawers changes. * * **Use at your own risk!** Enabling this option can cause layout thrashing by measuring * the drawers on every change detection cycle. Can be configured globally via the * `MAT_DRAWER_DEFAULT_AUTOSIZE` token. * @return {?} */ get autosize() { return this._autosize; } /** * @param {?} value * @return {?} */ set autosize(value) { this._autosize = coerceBooleanProperty(value); } /** * Whether the drawer container should have a backdrop while one of the sidenavs is open. * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side` * mode as well. * @return {?} */ get hasBackdrop() { if (this._backdropOverride == null) { return !this._start || this._start.mode !== 'side' || !this._end || this._end.mode !== 'side'; } return this._backdropOverride; } /** * @param {?} value * @return {?} */ set hasBackdrop(value) { this._backdropOverride = value == null ? null : coerceBooleanProperty(value); } /** * Reference to the CdkScrollable instance that wraps the scrollable content. * @return {?} */ get scrollable() { return this._userContent || this._content; } /** * @return {?} */ ngAfterContentInit() { this._allDrawers.changes .pipe(startWith(this._allDrawers), takeUntil(this._destroyed)) .subscribe((/** * @param {?} drawer * @return {?} */ (drawer) => { // @breaking-change 10.0.0 Remove `_container` check once container parameter is required. this._drawers.reset(drawer.filter((/** * @param {?} item * @return {?} */ item => !item._container || item._container === this))); this._drawers.notifyOnChanges(); })); this._drawers.changes.pipe(startWith(null)).subscribe((/** * @return {?} */ () => { this._validateDrawers(); this._drawers.forEach((/** * @param {?} drawer * @return {?} */ (drawer) => { this._watchDrawerToggle(drawer); this._watchDrawerPosition(drawer); this._watchDrawerMode(drawer); })); if (!this._drawers.length || this._isDrawerOpen(this._start) || this._isDrawerOpen(this._end)) { this.updateContentMargins(); } this._changeDetectorRef.markForCheck(); })); this._doCheckSubject.pipe(debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps takeUntil(this._destroyed)).subscribe((/** * @return {?} */ () => this.updateContentMargins())); } /** * @return {?} */ ngOnDestroy() { this._contentMarginChanges.complete(); this._doCheckSubject.complete(); this._drawers.destroy(); this._destroyed.next(); this._destroyed.complete(); } /** * Calls `open` of both start and end drawers * @return {?} */ open() { this._drawers.forEach((/** * @param {?} drawer * @return {?} */ drawer => drawer.open())); } /** * Calls `close` of both start and end drawers * @return {?} */ close() { this._drawers.forEach((/** * @param {?} drawer * @return {?} */ drawer => drawer.close())); } /** * Recalculates and updates the inline styles for the content. Note that this should be used * sparingly, because it causes a reflow. * @return {?} */ updateContentMargins() { // 1. For drawers in `over` mode, they don't affect the content. // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the // left margin (for left drawer) or right margin (for right the drawer). // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by // adding to the left or right margin and simultaneously subtracting the same amount of // margin from the other side. /** @type {?} */ let left = 0; /** @type {?} */ let right = 0; if (this._left && this._left.opened) { if (this._left.mode == 'side') { left += this._left._width; } else if (this._left.mode == 'push') { /** @type {?} */ const width = this._left._width; left += width; right -= width; } } if (this._right && this._right.opened) { if (this._right.mode == 'side') { right += this._right._width; } else if (this._right.mode == 'push') { /** @type {?} */ const width = this._right._width; right += width; left -= width; } } // If either `right` or `left` is zero, don't set a style to the element. This // allows users to specify a custom size via CSS class in SSR scenarios where the // measured widths will always be zero. Note that we reset to `null` here, rather // than below, in order to ensure that the types in the `if` below are consistent. left = left || (/** @type {?} */ (null)); right = right || (/** @type {?} */ (null)); if (left !== this._contentMargins.left || right !== this._contentMargins.right) { this._contentMargins = { left, right }; // Pull back into the NgZone since in some cases we could be outside. We need to be careful // to do it only when something changed, otherwise we can end up hitting the zone too often. this._ngZone.run((/** * @return {?} */ () => this._contentMarginChanges.next(this._contentMargins))); } } /** * @return {?} */ ngDoCheck() { // If users opted into autosizing, do a check every change detection cycle. if (this._autosize && this._isPushed()) { // Run outside the NgZone, otherwise the debouncer will throw us into an infinite loop. this._ngZone.runOutsideAngular((/** * @return {?} */ () => this._doCheckSubject.next())); } } /** * Subscribes to drawer events in order to set a class on the main container element when the * drawer is open and the backdrop is visible. This ensures any overflow on the container element * is properly hidden. * @private * @param {?} drawer * @return {?} */ _watchDrawerToggle(drawer) { drawer._animationStarted.pipe(filter((/** * @param {?} event * @return {?} */ (event) => event.fromState !== event.toState)), takeUntil(this._drawers.changes)) .subscribe((/** * @param {?} event * @return {?} */ (event) => { // Set the transition class on the container so that the animations occur. This should not // be set initially because animations should only be triggered via a change in state. if (event.toState !== 'open-instant' && this._animationMode !== 'NoopAnimations') { this._element.nativeElement.classList.add('mat-drawer-transition'); } this.updateContentMargins(); this._changeDetectorRef.markForCheck(); })); if (drawer.mode !== 'side') { drawer.openedChange.pipe(takeUntil(this._drawers.changes)).subscribe((/** * @return {?} */ () => this._setContainerClass(drawer.opened))); } } /** * Subscribes to drawer onPositionChanged event in order to * re-validate drawers when the position changes. * @private * @param {?} drawer * @return {?} */ _watchDrawerPosition(drawer) { if (!drawer) { return; } // NOTE: We need to wait for the microtask queue to be empty before validating, // since both drawers may be swapping positions at the same time. drawer.onPositionChanged.pipe(takeUntil(this._drawers.changes)).subscribe((/** * @return {?} */ () => { this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe((/** * @return {?} */ () => { this._validateDrawers(); })); })); } /** * Subscribes to changes in drawer mode so we can run change detection. * @private * @param {?} drawer * @return {?} */ _watchDrawerMode(drawer) { if (drawer) { drawer._modeChanged.pipe(takeUntil(merge(this._drawers.changes, this._destroyed))) .subscribe((/** * @return {?} */ () => { this.updateContentMargins(); this._changeDetectorRef.markForCheck(); })); } } /** * Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. * @private * @param {?} isAdd * @return {?} */ _setContainerClass(isAdd) { /** @type {?} */ const classList = this._element.nativeElement.classList; /** @type {?} */ const className = 'mat-drawer-container-has-open'; if (isAdd) { classList.add(className); } else { classList.remove(className); } } /** * Validate the state of the drawer children components. * @private * @return {?} */ _validateDrawers() { this._start = this._end = null; // Ensure that we have at most one start and one end drawer. this._drawers.forEach((/** * @param {?} drawer * @return {?} */ drawer => { if (drawer.position == 'end') { if (this._end != null) { throwMatDuplicatedDrawerError('end'); } this._end = drawer; } else { if (this._start != null) { throwMatDuplicatedDrawerError('start'); } this._start = drawer; } })); this._right = this._left = null; // Detect if we're LTR or RTL. if (this._dir && this._dir.value === 'rtl') { this._left = this._end; this._right = this._start; } else { this._left = this._start; this._right = this._end; } } /** * Whether the container is being pushed to the side by one of the drawers. * @private * @return {?} */ _isPushed() { return (this._isDrawerOpen(this._start) && this._start.mode != 'over') || (this._isDrawerOpen(this._end) && this._end.mode != 'over'); } /** * @return {?} */ _onBackdropClicked() { this.backdropClick.emit(); this._closeModalDrawer(); } /** * @return {?} */ _closeModalDrawer() { // Close all open drawers where closing is not disabled and the mode is not `side`. [this._start, this._end] .filter((/** * @param {?} drawer * @return {?} */ drawer => drawer && !drawer.disableClose && this._canHaveBackdrop(drawer))) .forEach((/** * @param {?} drawer * @return {?} */ drawer => (/** @type {?} */ (drawer)).close())); } /** * @return {?} */ _isShowingBackdrop() { return (this._isDrawerOpen(this._start) && this._canHaveBackdrop(this._start)) || (this._isDrawerOpen(this._end) && this._canHaveBackdrop(this._end)); } /** * @private * @param {?} drawer * @return {?} */ _canHaveBackdrop(drawer) { return drawer.mode !== 'side' || !!this._backdropOverride; } /** * @private * @param {?} drawer * @return {?} */ _isDrawerOpen(drawer) { return drawer != null && drawer.opened; } } MatDrawerContainer.decorators = [ { type: Component, args: [{ selector: 'mat-drawer-container', exportAs: 'matDrawerContainer', template: "<div class=\"mat-drawer-backdrop\" (click)=\"_onBackdropClicked()\" *ngIf=\"hasBackdrop\"\n [class.mat-drawer-shown]=\"_isShowingBackdrop()\"></div>\n\n<ng-content select=\"mat-drawer\"></ng-content>\n\n<ng-content select=\"mat-drawer-content\">\n</ng-content>\n<mat-drawer-content *ngIf=\"!_content\">\n <ng-content></ng-content>\n</mat-drawer-content>\n", host: { 'class': 'mat-drawer-container', '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride', }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MAT_DRAWER_CONTAINER, useExisting: MatDrawerContainer }], styles: [".mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:400ms;transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:400ms;transition-timing-function:cubic-bezier(0.25, 0.8, 0.25, 1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%, 0, 0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active [dir=rtl] .mat-drawer,.cdk-high-contrast-active .mat-drawer.mat-drawer-end{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%, 0, 0)}[dir=rtl] .mat-drawer{transform:translate3d(100%, 0, 0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%, 0, 0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}\n"] }] } ]; /** @nocollapse */ MatDrawerContainer.ctorParameters = () => [ { type: Directionality, decorators: [{ type: Optional }] }, { type: ElementRef }, { type: NgZone }, { type: ChangeDetectorRef }, { type: ViewportRuler }, { type: undefined, decorators: [{ type: Inject, args: [MAT_DRAWER_DEFAULT_AUTOSIZE,] }] }, { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] } ]; MatDrawerContainer.propDecorators = { _allDrawers: [{ type: ContentChildren, args: [MatDrawer, { // We need to use `descendants: true`, because Ivy will no longer match // indirect descendants if it's left as false. descendants: true },] }], _content: [{ type: ContentChild, args: [MatDrawerContent,] }], _userContent: [{ type: ViewChild, args: [MatDrawerContent,] }], autosize: [{ type: Input }], hasBackdrop: [{ type: Input }], backdropClick: [{ type: Output }] }; if (false) { /** @type {?} */ MatDrawerContainer.ngAcceptInputType_autosize; /** @type {?} */ MatDrawerContainer.ngAcceptInputType_hasBackdrop; /** * All drawers in the container. Includes drawers from inside nested containers. * @type {?} */ MatDrawerContainer.prototype._allDrawers; /** * Drawers that belong to this container. * @type {?} */ MatDrawerContainer.prototype._drawers; /** @type {?} */ MatDrawerContainer.prototype._content; /** @type {?} */ MatDrawerContainer.prototype._userContent; /** * @type {?} * @private */ MatDrawerContainer.prototype._autosize; /** @type {?} */ MatDrawerContainer.prototype._backdropOverride; /** * Event emitted when the drawer backdrop is clicked. * @type {?} */ MatDrawerContainer.prototype.backdropClick; /** * The drawer at the start/end position, independent of direction. * @type {?} * @private */ MatDrawerContainer.prototype._start; /** * @type {?} * @private */ MatDrawerContainer.prototype._end; /** * The drawer at the left/right. When direction changes, these will change as well. * They're used as aliases for the above to set the left/right style properly. * In LTR, _left == _start and _right == _end. * In RTL, _left == _end and _right == _start. * @type {?} * @private */ MatDrawerContainer.prototype._left; /** * @type {?} * @private */ MatDrawerContainer.prototype._right; /** * Emits when the component is destroyed. * @type {?} * @private */ MatDrawerContainer.prototype._destroyed; /** * Emits on every ngDoCheck. Used for debouncing reflows. * @type {?} * @private */ MatDrawerContainer.prototype._doCheckSubject; /** * Margins to be applied to the content. These are used to push / shrink the drawer content when a * drawer is open. We use margin rather than transform even for push mode because transform breaks * fixed position elements inside of the transformed element. * @type {?} */ MatDrawerContainer.prototype._contentMargins; /** @type {?} */ MatDrawerContainer.prototype._contentMarginChanges; /** * @type {?} * @private */ MatDrawerContainer.prototype._dir; /** * @type {?} * @private */ MatDrawerContainer.prototype._element; /** * @type {?} * @private */ MatDrawerContainer.prototype._ngZone; /** * @type {?} * @private */ MatDrawerContainer.prototype._changeDetectorRef; /** * @type {?} * @private */ MatDrawerContainer.prototype._animationMode; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL21hdGVyaWFsL3NpZGVuYXYvZHJhd2VyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBUUEsT0FBTyxFQUFDLFlBQVksRUFBMEIsZ0JBQWdCLEVBQUMsTUFBTSxtQkFBbUIsQ0FBQztBQUN6RixPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDakQsT0FBTyxFQUFlLHFCQUFxQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDMUUsT0FBTyxFQUFDLE1BQU0sRUFBRSxjQUFjLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUM3RCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDL0MsT0FBTyxFQUFDLGFBQWEsRUFBRSxnQkFBZ0IsRUFBRSxhQUFhLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUN0RixPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDekMsT0FBTyxFQUdMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixlQUFlLEVBRWYsVUFBVSxFQUNWLFlBQVksRUFDWixVQUFVLEVBQ1YsTUFBTSxFQUNOLGNBQWMsRUFDZCxLQUFLLEVBQ0wsTUFBTSxFQUVOLFFBQVEsRUFDUixNQUFNLEVBQ04sU0FBUyxFQUNULFNBQVMsRUFDVCxpQkFBaUIsRUFDakIsWUFBWSxFQUNaLFdBQVcsR0FDWixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQzNELE9BQU8sRUFDTCxZQUFZLEVBQ1osTUFBTSxFQUNOLEdBQUcsRUFDSCxTQUFTLEVBQ1QsSUFBSSxFQUNKLFNBQVMsRUFDVCxvQkFBb0IsR0FDckIsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixP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