@angular-mdc/web
Version:
652 lines (636 loc) • 23.5 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/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@material/menu-surface')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/menu-surface', ['exports', '@angular/core', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@material/menu-surface'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.menuSurface = {}), global.ng.core, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.mdc.menuSurface));
}(this, (function (exports, core, coercion, platform, rxjs, operators, base, menuSurface) { '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: menu-surface/menu-surface-base.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ANCHOR_CORNER_MAP = {
topEnd: menuSurface.Corner.TOP_END,
topStart: menuSurface.Corner.TOP_START,
bottomEnd: menuSurface.Corner.BOTTOM_END,
bottomStart: menuSurface.Corner.BOTTOM_START
};
/**
* @abstract
*/
var MdcMenuSurfaceBase = /** @class */ (function (_super) {
__extends(MdcMenuSurfaceBase, _super);
function MdcMenuSurfaceBase(changeDetectorRef, platform, _ngZone, elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.changeDetectorRef = changeDetectorRef;
_this.platform = platform;
_this._ngZone = _ngZone;
_this.elementRef = elementRef;
/**
* Emits whenever the component is destroyed.
*/
_this._destroy = new rxjs.Subject();
_this._open = false;
_this._anchorCorner = 'topStart';
_this._quickOpen = false;
_this._fixed = false;
_this._coordinates = { x: 0, y: 0 };
_this._anchorMargin = {};
_this._hoistToBody = false;
/**
* Emits an event whenever the menu surface is opened.
*/
_this.opened = new core.EventEmitter();
/**
* Emits an event whenever the menu surface is closed.
*/
_this.closed = new core.EventEmitter();
/**
* Subscription to interaction events in menu-surface.
*/
_this._windowClickSubscription = null;
return _this;
}
Object.defineProperty(MdcMenuSurfaceBase.prototype, "open", {
get: /**
* @return {?}
*/
function () {
return this._open;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._open) {
this._open = coercion.coerceBooleanProperty(value);
if (this._open) {
this._foundation.open();
}
else {
this._foundation.close();
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "anchorElement", {
get: /**
* @return {?}
*/
function () {
return this._anchorElement;
},
set: /**
* @param {?} element
* @return {?}
*/
function (element) {
this._anchorElement = element;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "anchorCorner", {
get: /**
* @return {?}
*/
function () {
return this._anchorCorner;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._anchorCorner = (value !== null && value !== void 0 ? value : 'topStart');
this._foundation.setAnchorCorner(ANCHOR_CORNER_MAP[this._anchorCorner]);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "quickOpen", {
get: /**
* @return {?}
*/
function () {
return this._quickOpen;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._quickOpen = coercion.coerceBooleanProperty(value);
this._foundation.setQuickOpen(this._quickOpen);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "fixed", {
get: /**
* @return {?}
*/
function () {
return this._fixed;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._fixed = coercion.coerceBooleanProperty(value);
if (this._fixed) {
this._getHostElement().classList.add('mdc-menu-surface--fixed');
}
else {
this._getHostElement().classList.remove('mdc-menu-surface--fixed');
}
this._foundation.setFixedPosition(this._fixed);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "coordinates", {
get: /**
* @return {?}
*/
function () {
return this._coordinates;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._coordinates = value;
this._foundation.setAbsolutePosition(value.x, value.y);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "anchorMargin", {
get: /**
* @return {?}
*/
function () {
return this._anchorMargin;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._anchorMargin = value;
this._foundation.setAnchorMargin(this._anchorMargin);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenuSurfaceBase.prototype, "hoistToBody", {
get: /**
* @return {?}
*/
function () {
return this._hoistToBody;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._hoistToBody = coercion.coerceBooleanProperty(value);
if (this._hoistToBody) {
this.setHoistToBody();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcMenuSurfaceBase.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); }),
hasAnchor: (/**
* @return {?}
*/
function () { return !!_this.anchorElement; }),
notifyClose: (/**
* @return {?}
*/
function () {
_this.closed.emit();
_this._deregisterWindowClickListener();
}),
notifyOpen: (/**
* @return {?}
*/
function () {
_this.opened.emit();
_this._registerWindowClickListener();
}),
isElementInContainer: (/**
* @param {?} el
* @return {?}
*/
function (el) { return _this._getHostElement() === el || _this._getHostElement().contains(el); }),
isRtl: (/**
* @return {?}
*/
function () { return _this.platform.isBrowser ?
window.getComputedStyle(_this._getHostElement()).getPropertyValue('direction') === 'rtl' : false; }),
setTransformOrigin: (/**
* @param {?} origin
* @return {?}
*/
function (origin) {
return _this.platform.isBrowser ?
_this._getHostElement().style[(/** @type {?} */ (menuSurface.util.getTransformPropertyName(window) + "-origin"))] = origin : false;
}),
isFocused: (/**
* @return {?}
*/
function () { var _a, _b; return _b = ((_a = document) === null || _a === void 0 ? void 0 : _a.activeElement) === _this._getHostElement(), (_b !== null && _b !== void 0 ? _b : false); }),
saveFocus: (/**
* @return {?}
*/
function () { var _a, _b; return _this._previousFocus = (_b = (_a = document) === null || _a === void 0 ? void 0 : _a.activeElement, (_b !== null && _b !== void 0 ? _b : undefined)); }),
restoreFocus: (/**
* @return {?}
*/
function () {
var _a;
if (_this.platform.isBrowser) {
if (_this._getHostElement().contains(document.activeElement)) {
(_a = ((/** @type {?} */ (_this._previousFocus)))) === null || _a === void 0 ? void 0 : _a.focus();
}
}
}),
getInnerDimensions: (/**
* @return {?}
*/
function () {
return ({ width: _this._getHostElement().offsetWidth, height: _this._getHostElement().offsetHeight });
}),
getAnchorDimensions: (/**
* @return {?}
*/
function () {
return _this.platform.isBrowser || !_this.anchorElement ?
(/** @type {?} */ (_this._anchorElement)).getBoundingClientRect() : { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
}),
getWindowDimensions: (/**
* @return {?}
*/
function () { return ({
width: _this.platform.isBrowser ? window.innerWidth : 0,
height: _this.platform.isBrowser ? window.innerHeight : 0
}); }),
getBodyDimensions: (/**
* @return {?}
*/
function () { return ({
width: _this.platform.isBrowser ? (/** @type {?} */ (document.body)).clientWidth : 0,
height: _this.platform.isBrowser ? (/** @type {?} */ (document.body)).clientHeight : 0
}); }),
getWindowScroll: (/**
* @return {?}
*/
function () { return ({
x: _this.platform.isBrowser ? window.pageXOffset : 0,
y: _this.platform.isBrowser ? window.pageYOffset : 0
}); }),
setPosition: (/**
* @param {?} position
* @return {?}
*/
function (position) {
_this._getHostElement().style.left = 'left' in position ? position.left + "px" : '';
_this._getHostElement().style.right = 'right' in position ? position.right + "px" : '';
_this._getHostElement().style.top = 'top' in position ? position.top + "px" : '';
_this._getHostElement().style.bottom = 'bottom' in position ? position.bottom + "px" : '';
}),
setMaxHeight: (/**
* @param {?} height
* @return {?}
*/
function (height) { return _this._getHostElement().style.maxHeight = height; })
};
return new menuSurface.MDCMenuSurfaceFoundation(adapter);
};
/**
* @protected
* @return {?}
*/
MdcMenuSurfaceBase.prototype.initMenuSurface = /**
* @protected
* @return {?}
*/
function () {
var _a;
this._foundation.init();
this.anchorElement = (_a = this._getHostElement().parentElement, (_a !== null && _a !== void 0 ? _a : this.anchorElement));
this._registerKeydownListener();
};
/**
* @protected
* @return {?}
*/
MdcMenuSurfaceBase.prototype.destroyMenuSurface = /**
* @protected
* @return {?}
*/
function () {
this._destroy.next();
this._destroy.complete();
this._deregisterWindowClickListener();
// add platform check due to use of cancelAnimationFrame inside destroy()
if (this.platform.isBrowser) {
this._foundation.destroy();
}
if (this.hoistToBody) {
(/** @type {?} */ (document.body)).removeChild(this._getHostElement());
}
};
/**
* Removes the menu-surface from it's current location and appends it to the
* body to overcome any overflow:hidden issues.
*/
/**
* Removes the menu-surface from it's current location and appends it to the
* body to overcome any overflow:hidden issues.
* @protected
* @return {?}
*/
MdcMenuSurfaceBase.prototype.setHoistToBody = /**
* Removes the menu-surface from it's current location and appends it to the
* body to overcome any overflow:hidden issues.
* @protected
* @return {?}
*/
function () {
if (!this.platform.isBrowser) {
return;
}
/** @type {?} */
var parentEl = this._getHostElement().parentElement;
if (parentEl) {
(/** @type {?} */ (document.body)).appendChild(parentEl.removeChild(this._getHostElement()));
this._foundation.setIsHoisted(true);
}
};
/**
* @private
* @return {?}
*/
MdcMenuSurfaceBase.prototype._registerKeydownListener = /**
* @private
* @return {?}
*/
function () {
var _this = this;
rxjs.fromEvent(this._getHostElement(), 'keydown')
.pipe(operators.takeUntil(this._destroy))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
function (evt) {
_this._foundation.handleKeydown(evt);
_this._open = _this._foundation.isOpen();
}));
};
/**
* @private
* @return {?}
*/
MdcMenuSurfaceBase.prototype._registerWindowClickListener = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this.platform.isBrowser) {
return;
}
this._windowClickSubscription =
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return rxjs.fromEvent(window, 'click')
.subscribe((/**
* @param {?} evt
* @return {?}
*/
function (evt) { return _this._ngZone.run((/**
* @return {?}
*/
function () {
_this._foundation.handleBodyClick(evt);
_this._open = _this._foundation.isOpen();
})); }));
}));
};
/**
* @private
* @return {?}
*/
MdcMenuSurfaceBase.prototype._deregisterWindowClickListener = /**
* @private
* @return {?}
*/
function () {
var _a;
(_a = this._windowClickSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @protected
* @return {?}
*/
MdcMenuSurfaceBase.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @protected
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcMenuSurfaceBase.decorators = [
{ type: core.Directive },
];
/** @nocollapse */
MdcMenuSurfaceBase.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: platform.Platform },
{ type: core.NgZone, decorators: [{ type: core.Optional }] },
{ type: core.ElementRef }
]; };
MdcMenuSurfaceBase.propDecorators = {
open: [{ type: core.Input }],
anchorElement: [{ type: core.Input }],
anchorCorner: [{ type: core.Input }],
quickOpen: [{ type: core.Input }],
fixed: [{ type: core.Input }],
coordinates: [{ type: core.Input }],
anchorMargin: [{ type: core.Input }],
hoistToBody: [{ type: core.Input }],
opened: [{ type: core.Output }],
closed: [{ type: core.Output }]
};
return MdcMenuSurfaceBase;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: menu-surface/menu-surface.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcMenuSurface = /** @class */ (function (_super) {
__extends(MdcMenuSurface, _super);
function MdcMenuSurface() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @return {?}
*/
MdcMenuSurface.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initMenuSurface();
};
/**
* @return {?}
*/
MdcMenuSurface.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroyMenuSurface();
};
MdcMenuSurface.decorators = [
{ type: core.Component, args: [{selector: 'mdc-menu-surface',
exportAs: 'mdcMenuSurface',
host: { 'class': 'mdc-menu-surface' },
template: '<ng-content></ng-content>',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
return MdcMenuSurface;
}(MdcMenuSurfaceBase));
/**
* @fileoverview added by tsickle
* Generated from: menu-surface/menu-surface-anchor.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcMenuSurfaceAnchor = /** @class */ (function () {
function MdcMenuSurfaceAnchor(elementRef) {
this.elementRef = elementRef;
}
MdcMenuSurfaceAnchor.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcMenuSurfaceAnchor], mdc-menu-surface-anchor',
host: { 'class': 'mdc-menu-surface--anchor' }
},] },
];
/** @nocollapse */
MdcMenuSurfaceAnchor.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcMenuSurfaceAnchor;
}());
/**
* @fileoverview added by tsickle
* Generated from: menu-surface/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var MENU_SURFACE_DECLARATIONS = [
MdcMenuSurface,
MdcMenuSurfaceAnchor
];
var MdcMenuSurfaceModule = /** @class */ (function () {
function MdcMenuSurfaceModule() {
}
MdcMenuSurfaceModule.decorators = [
{ type: core.NgModule, args: [{
exports: [MENU_SURFACE_DECLARATIONS],
declarations: [MENU_SURFACE_DECLARATIONS]
},] },
];
return MdcMenuSurfaceModule;
}());
exports.MdcMenuSurface = MdcMenuSurface;
exports.MdcMenuSurfaceAnchor = MdcMenuSurfaceAnchor;
exports.MdcMenuSurfaceBase = MdcMenuSurfaceBase;
exports.MdcMenuSurfaceModule = MdcMenuSurfaceModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-menu-surface.umd.js.map