@angular-mdc/web
Version:
720 lines (705 loc) • 26.6 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@angular-mdc/web/list'), require('@material/drawer')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/drawer', ['exports', '@angular/core', '@angular/common', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@angular-mdc/web/list', '@material/drawer'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.drawer = {}), global.ng.core, global.ng.common, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.ng.web.list, global.mdc.drawer));
}(this, (function (exports, core, common, a11y, coercion, platform, rxjs, operators, base, list, drawer) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @fileoverview added by tsickle
* Generated from: drawer/drawer.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcDrawerHeader = /** @class */ (function () {
function MdcDrawerHeader(elementRef) {
this.elementRef = elementRef;
}
MdcDrawerHeader.decorators = [
{ type: core.Component, args: [{selector: 'mdc-drawer-header',
template: "\n <ng-content></ng-content>\n <h3 class=\"mdc-drawer__title\" *ngIf=\"title\">{{title}}</h3>\n <h6 class=\"mdc-drawer__subtitle\" *ngIf=\"subtitle\">{{subtitle}}</h6>",
host: { 'class': 'mdc-drawer__header' },
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcDrawerHeader.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MdcDrawerHeader.propDecorators = {
title: [{ type: core.Input }],
subtitle: [{ type: core.Input }]
};
return MdcDrawerHeader;
}());
var MdcDrawer = /** @class */ (function (_super) {
__extends(MdcDrawer, _super);
function MdcDrawer(_platform, _ngZone, _changeDetectorRef, _focusTrapFactory, _focusMonitor, _document, elementRef) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._ngZone = _ngZone;
_this._changeDetectorRef = _changeDetectorRef;
_this._focusTrapFactory = _focusTrapFactory;
_this._focusMonitor = _focusMonitor;
_this._document = _document;
_this.elementRef = elementRef;
/**
* Emits when the component is destroyed.
*/
_this._destroyed = new rxjs.Subject();
_this._scrimElement = null;
/**
* Element that was focused before the drawer was opened. Save this to restore upon close.
*/
_this._elementFocusedBeforeDrawerWasOpened = null;
_this._open = false;
_this._drawer = '';
_this._autoFocus = true;
_this._restoreFocus = true;
_this.opened = new core.EventEmitter();
_this.closed = new core.EventEmitter();
/**
* Event emitted when the drawer open state is changed.
*/
_this.openedChange = new core.EventEmitter(/* isAsync */ true);
/**
* Event emitted when the drawer variant is changed.
*/
_this.drawerChange = new core.EventEmitter(/* isAsync */ true);
_this._scrimSubscription = null;
_this.openedChange.subscribe((/**
* @param {?} opened
* @return {?}
*/
function (opened) {
if (opened) {
if (_this._document) {
_this._elementFocusedBeforeDrawerWasOpened = (/** @type {?} */ (_this._document.activeElement));
}
if (_this._isFocusTrapEnabled && _this._focusTrap) {
_this._trapFocus();
}
}
else {
_this._releaseFocus();
}
}));
_this.drawerChange.subscribe((/**
* @return {?}
*/
function () { return _this._initFoundation(); }));
/**
* 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 {?}
*/
function () {
((/** @type {?} */ (rxjs.fromEvent(_this._elementRef.nativeElement, 'keydown'))))
.pipe(operators.takeUntil(_this._destroyed)).subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) { return _this._ngZone.run((/**
* @return {?}
*/
function () {
_this._foundation.handleKeydown(event);
if (_this.modal) {
event.stopPropagation();
event.preventDefault();
}
})); }));
}));
return _this;
}
Object.defineProperty(MdcDrawer.prototype, "open", {
get: /**
* @return {?}
*/
function () {
return this._open;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._platform.isBrowser && this._open !== value) {
this._open = coercion.coerceBooleanProperty(value);
this._open ? this._foundation.open() : this._foundation.close();
this.openedChange.emit(this._open);
this._updateFocusTrapState();
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "drawer", {
get: /**
* @return {?}
*/
function () {
return this._drawer;
},
set: /**
* @param {?} drawer
* @return {?}
*/
function (drawer) {
if (this._drawer !== drawer) {
this._drawer = drawer;
this.drawerChange.emit();
this._updateFocusTrapState();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "autoFocus", {
get: /**
* @return {?}
*/
function () {
return this._autoFocus;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._autoFocus = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "restoreFocus", {
get: /**
* @return {?}
*/
function () {
return this._restoreFocus;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._restoreFocus = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "fixedAdjustElement", {
get: /**
* @return {?}
*/
function () {
return this._fixedAdjustElement;
},
set: /**
* @param {?} element
* @return {?}
*/
function (element) {
this._fixedAdjustElement = element;
element ? this._getHostElement().style.setProperty('position', 'absolute') :
this._getHostElement().style.removeProperty('position');
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "modal", {
get: /**
* @return {?}
*/
function () {
return this.drawer === 'modal';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "dismissible", {
get: /**
* @return {?}
*/
function () {
return this.drawer === 'dismissible';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcDrawer.prototype, "_isFocusTrapEnabled", {
get: /**
* @return {?}
*/
function () {
// The focus trap is only enabled when the drawer is open and modal.
return this.open && this.modal;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcDrawer.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.contains(className); }),
elementHasClass: (/**
* @param {?} element
* @param {?} className
* @return {?}
*/
function (element, className) { return element.classList.contains(className); }),
saveFocus: (/**
* @return {?}
*/
function () { return _this._savePreviouslyFocusedElement(); }),
restoreFocus: (/**
* @return {?}
*/
function () { return _this._releaseFocus(); }),
focusActiveNavigationItem: (/**
* @return {?}
*/
function () {
var _a;
if (!_this._platform.isBrowser || !_this._list || !_this._autoFocus) {
return;
}
/** @type {?} */
var selectedItem = _this._list.getSelectedItem();
if (selectedItem) {
selectedItem.focus();
}
else {
/** @type {?} */
var cdkInitialItem = _this._platform.isBrowser ?
(/** @type {?} */ (document.querySelector("[cdkFocusInitial]"))) : null;
(_a = cdkInitialItem) === null || _a === void 0 ? void 0 : _a.focus();
}
}),
notifyClose: (/**
* @return {?}
*/
function () { return _this.closed.emit(); }),
notifyOpen: (/**
* @return {?}
*/
function () { return _this.opened.emit(); }),
trapFocus: (/**
* @return {?}
*/
function () { }),
releaseFocus: (/**
* @return {?}
*/
function () { return _this._releaseFocus(); })
};
return this.modal ? new drawer.MDCModalDrawerFoundation(adapter) : new drawer.MDCDismissibleDrawerFoundation(adapter);
};
/**
* @return {?}
*/
MdcDrawer.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._initListType();
};
/**
* @return {?}
*/
MdcDrawer.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _a, _b, _c;
this.open = false;
(_a = this._focusTrap) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = this._scrimElement) === null || _b === void 0 ? void 0 : _b.remove();
(_c = this._scrimSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
this._destroyed.next();
this._destroyed.complete();
if (this._foundation && this._platform.isBrowser) {
this._foundation.destroy();
}
};
/**
* @param {?} event
* @return {?}
*/
MdcDrawer.prototype._handleTransitionEnd = /**
* @param {?} event
* @return {?}
*/
function (event) {
this._foundation.handleTransitionEnd(event);
};
/**
* @private
* @return {?}
*/
MdcDrawer.prototype._createScrim = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (this._platform.isBrowser) {
this._scrimElement = document.createElement('div');
this._scrimElement.classList.add('mdc-drawer-scrim');
this._getHostElement().insertAdjacentElement('afterend', this._scrimElement);
this._scrimSubscription =
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return rxjs.fromEvent((/** @type {?} */ (_this._scrimElement)), 'click')
.subscribe((/**
* @return {?}
*/
function () { return _this._ngZone.run((/**
* @return {?}
*/
function () { return _this.open = false; })); }));
}));
}
};
/**
* @private
* @return {?}
*/
MdcDrawer.prototype._initFoundation = /**
* @private
* @return {?}
*/
function () {
this._getHostElement().classList.remove(drawer.cssClasses.MODAL);
this._getHostElement().classList.remove(drawer.cssClasses.DISMISSIBLE);
this._foundation = this.getDefaultFoundation();
this._foundation.init();
if (this.modal || this.dismissible) {
this._getHostElement().classList.add(drawer.cssClasses.ROOT + "--" + this.drawer);
}
if (this._scrimElement) {
if (this._scrimSubscription) {
this._scrimSubscription.unsubscribe();
}
this._scrimElement.remove();
this._scrimElement = null;
}
if (this.modal) {
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
this._updateFocusTrapState();
this._createScrim();
}
else if (this._focusTrap) {
this._focusTrap.destroy();
}
this._changeDetectorRef.markForCheck();
};
/**
* @private
* @return {?}
*/
MdcDrawer.prototype._initListType = /**
* @private
* @return {?}
*/
function () {
if (this._list && (this._list.singleSelection || this._list.singleSelection === undefined)) {
this._list.wrapFocus = true;
this._list.singleSelection = true;
this._list.useActivatedClass = true;
}
};
/** Updates the enabled state of the focus trap. */
/**
* Updates the enabled state of the focus trap.
* @private
* @return {?}
*/
MdcDrawer.prototype._updateFocusTrapState = /**
* Updates the enabled state of the focus trap.
* @private
* @return {?}
*/
function () {
if (this._focusTrap) {
this._focusTrap.enabled = this._isFocusTrapEnabled;
}
};
/**
* @private
* @return {?}
*/
MdcDrawer.prototype._trapFocus = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this.autoFocus) {
return;
}
this._focusTrap.focusInitialElementWhenReady().then((/**
* @param {?} hasMovedFocus
* @return {?}
*/
function (hasMovedFocus) {
// If there were no focusable elements, focus the drawer 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();
}
}));
};
/** Restores focus to the element that was focused before the drawer opened. */
/**
* Restores focus to the element that was focused before the drawer opened.
* @private
* @return {?}
*/
MdcDrawer.prototype._releaseFocus = /**
* Restores focus to the element that was focused before the drawer opened.
* @private
* @return {?}
*/
function () {
if (!this.autoFocus) {
return;
}
/** @type {?} */
var activeEl = this._document && this._document.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;
};
/** Saves a reference to the element that was focused before the drawer was opened. */
/**
* Saves a reference to the element that was focused before the drawer was opened.
* @private
* @return {?}
*/
MdcDrawer.prototype._savePreviouslyFocusedElement = /**
* Saves a reference to the element that was focused before the drawer was opened.
* @private
* @return {?}
*/
function () {
var _this = this;
if (this._document) {
this._elementFocusedBeforeDrawerWasOpened = (/** @type {?} */ (this._document.activeElement));
// Note that there is no focus method when rendering on the server.
if (this._elementRef.nativeElement.focus) {
// Move focus onto the drawer immediately. Needs to be async, because the element
// may not be focusable immediately.
Promise.resolve().then((/**
* @return {?}
*/
function () { return _this._elementRef.nativeElement.focus(); }));
}
}
};
/**
* @private
* @return {?}
*/
MdcDrawer.prototype._getHostElement = /**
* @private
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcDrawer.decorators = [
{ type: core.Component, args: [{selector: 'mdc-drawer',
exportAs: 'mdcDrawer',
host: {
'role': 'navigation',
'class': 'mdc-drawer',
'(transitionend)': '_handleTransitionEnd($event)'
},
template: '<ng-content></ng-content>',
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcDrawer.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef },
{ type: a11y.FocusTrapFactory },
{ type: a11y.FocusMonitor },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
{ type: core.ElementRef }
]; };
MdcDrawer.propDecorators = {
open: [{ type: core.Input }],
drawer: [{ type: core.Input }],
autoFocus: [{ type: core.Input }],
restoreFocus: [{ type: core.Input }],
fixedAdjustElement: [{ type: core.Input }],
opened: [{ type: core.Output }],
closed: [{ type: core.Output }],
openedChange: [{ type: core.Output }],
drawerChange: [{ type: core.Output }],
_list: [{ type: core.ContentChild, args: [list.MdcList, { static: false },] }]
};
return MdcDrawer;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: drawer/drawer-directives.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcDrawerTitle = /** @class */ (function () {
function MdcDrawerTitle() {
}
MdcDrawerTitle.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcDrawerTitle]',
host: { 'class': 'mdc-drawer__title' }
},] },
];
return MdcDrawerTitle;
}());
var MdcDrawerSubtitle = /** @class */ (function () {
function MdcDrawerSubtitle() {
}
MdcDrawerSubtitle.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcDrawerSubtitle]',
host: { 'class': 'mdc-drawer__subtitle' }
},] },
];
return MdcDrawerSubtitle;
}());
var MdcDrawerContent = /** @class */ (function () {
function MdcDrawerContent() {
}
MdcDrawerContent.decorators = [
{ type: core.Directive, args: [{
selector: 'mdc-drawer-content, [mdcDrawerContent]',
host: { 'class': 'mdc-drawer__content' }
},] },
];
return MdcDrawerContent;
}());
var MdcDrawerAppContent = /** @class */ (function () {
function MdcDrawerAppContent() {
}
MdcDrawerAppContent.decorators = [
{ type: core.Directive, args: [{
selector: 'mdc-drawer-app-content, [mdcDrawerAppContent]',
host: { 'class': 'mdc-drawer-app-content' }
},] },
];
return MdcDrawerAppContent;
}());
/**
* @fileoverview added by tsickle
* Generated from: drawer/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DRAWER_DECLARATIONS = [
MdcDrawer,
MdcDrawerAppContent,
MdcDrawerContent,
MdcDrawerHeader,
MdcDrawerSubtitle,
MdcDrawerTitle
];
var MdcDrawerModule = /** @class */ (function () {
function MdcDrawerModule() {
}
MdcDrawerModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
exports: [DRAWER_DECLARATIONS],
declarations: [DRAWER_DECLARATIONS]
},] },
];
return MdcDrawerModule;
}());
exports.MdcDrawer = MdcDrawer;
exports.MdcDrawerAppContent = MdcDrawerAppContent;
exports.MdcDrawerContent = MdcDrawerContent;
exports.MdcDrawerHeader = MdcDrawerHeader;
exports.MdcDrawerModule = MdcDrawerModule;
exports.MdcDrawerSubtitle = MdcDrawerSubtitle;
exports.MdcDrawerTitle = MdcDrawerTitle;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-drawer.umd.js.map