@angular-mdc/web
Version:
608 lines (602 loc) • 20.1 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 { EventEmitter, Directive, ChangeDetectorRef, NgZone, Optional, ElementRef, Input, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { __extends } from 'tslib';
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 { Corner, MDCMenuSurfaceFoundation, util } from '@material/menu-surface';
/**
* @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: Corner.TOP_END,
topStart: Corner.TOP_START,
bottomEnd: Corner.BOTTOM_END,
bottomStart: 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 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 EventEmitter();
/**
* Emits an event whenever the menu surface is closed.
*/
_this.closed = new 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 = coerceBooleanProperty(value);
if (newValue !== this._open) {
this._open = 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 = 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 = 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 = 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 {?} */ (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 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;
fromEvent(this._getHostElement(), 'keydown')
.pipe(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 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: Directive },
];
/** @nocollapse */
MdcMenuSurfaceBase.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: Platform },
{ type: NgZone, decorators: [{ type: Optional }] },
{ type: ElementRef }
]; };
MdcMenuSurfaceBase.propDecorators = {
open: [{ type: Input }],
anchorElement: [{ type: Input }],
anchorCorner: [{ type: Input }],
quickOpen: [{ type: Input }],
fixed: [{ type: Input }],
coordinates: [{ type: Input }],
anchorMargin: [{ type: Input }],
hoistToBody: [{ type: Input }],
opened: [{ type: Output }],
closed: [{ type: Output }]
};
return MdcMenuSurfaceBase;
}(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: Component, args: [{selector: 'mdc-menu-surface',
exportAs: 'mdcMenuSurface',
host: { 'class': 'mdc-menu-surface' },
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: 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: Directive, args: [{
selector: '[mdcMenuSurfaceAnchor], mdc-menu-surface-anchor',
host: { 'class': 'mdc-menu-surface--anchor' }
},] },
];
/** @nocollapse */
MdcMenuSurfaceAnchor.ctorParameters = function () { return [
{ type: 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: NgModule, args: [{
exports: [MENU_SURFACE_DECLARATIONS],
declarations: [MENU_SURFACE_DECLARATIONS]
},] },
];
return MdcMenuSurfaceModule;
}());
export { MdcMenuSurface, MdcMenuSurfaceAnchor, MdcMenuSurfaceBase, MdcMenuSurfaceModule };
//# sourceMappingURL=menu-surface.es5.js.map