@angular-mdc/web
Version:
676 lines (671 loc) • 22.9 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
*/
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Input, EventEmitter, NgZone, ChangeDetectorRef, Optional, Inject, Output, ContentChild, Directive, NgModule } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { __extends } from 'tslib';
import { FocusTrapFactory, FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { MdcList } from '@angular-mdc/web/list';
import { MDCModalDrawerFoundation, MDCDismissibleDrawerFoundation, cssClasses } from '@material/drawer';
/**
* @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: 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: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcDrawerHeader.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MdcDrawerHeader.propDecorators = {
title: [{ type: Input }],
subtitle: [{ type: 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 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 EventEmitter();
_this.closed = new EventEmitter();
/**
* Event emitted when the drawer open state is changed.
*/
_this.openedChange = new EventEmitter(/* isAsync */ true);
/**
* Event emitted when the drawer variant is changed.
*/
_this.drawerChange = new 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 {?} */ (fromEvent(_this._elementRef.nativeElement, 'keydown'))))
.pipe(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 = 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 = 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 = 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 MDCModalDrawerFoundation(adapter) : new 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 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(cssClasses.MODAL);
this._getHostElement().classList.remove(cssClasses.DISMISSIBLE);
this._foundation = this.getDefaultFoundation();
this._foundation.init();
if (this.modal || this.dismissible) {
this._getHostElement().classList.add(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: Component, args: [{selector: 'mdc-drawer',
exportAs: 'mdcDrawer',
host: {
'role': 'navigation',
'class': 'mdc-drawer',
'(transitionend)': '_handleTransitionEnd($event)'
},
template: '<ng-content></ng-content>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcDrawer.ctorParameters = function () { return [
{ type: Platform },
{ type: NgZone },
{ type: ChangeDetectorRef },
{ type: FocusTrapFactory },
{ type: FocusMonitor },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
{ type: ElementRef }
]; };
MdcDrawer.propDecorators = {
open: [{ type: Input }],
drawer: [{ type: Input }],
autoFocus: [{ type: Input }],
restoreFocus: [{ type: Input }],
fixedAdjustElement: [{ type: Input }],
opened: [{ type: Output }],
closed: [{ type: Output }],
openedChange: [{ type: Output }],
drawerChange: [{ type: Output }],
_list: [{ type: ContentChild, args: [MdcList, { static: false },] }]
};
return MdcDrawer;
}(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: Directive, args: [{
selector: '[mdcDrawerTitle]',
host: { 'class': 'mdc-drawer__title' }
},] },
];
return MdcDrawerTitle;
}());
var MdcDrawerSubtitle = /** @class */ (function () {
function MdcDrawerSubtitle() {
}
MdcDrawerSubtitle.decorators = [
{ type: Directive, args: [{
selector: '[mdcDrawerSubtitle]',
host: { 'class': 'mdc-drawer__subtitle' }
},] },
];
return MdcDrawerSubtitle;
}());
var MdcDrawerContent = /** @class */ (function () {
function MdcDrawerContent() {
}
MdcDrawerContent.decorators = [
{ type: Directive, args: [{
selector: 'mdc-drawer-content, [mdcDrawerContent]',
host: { 'class': 'mdc-drawer__content' }
},] },
];
return MdcDrawerContent;
}());
var MdcDrawerAppContent = /** @class */ (function () {
function MdcDrawerAppContent() {
}
MdcDrawerAppContent.decorators = [
{ type: 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: NgModule, args: [{
imports: [CommonModule],
exports: [DRAWER_DECLARATIONS],
declarations: [DRAWER_DECLARATIONS]
},] },
];
return MdcDrawerModule;
}());
export { MdcDrawer, MdcDrawerAppContent, MdcDrawerContent, MdcDrawerHeader, MdcDrawerModule, MdcDrawerSubtitle, MdcDrawerTitle };
//# sourceMappingURL=drawer.es5.js.map