@angular-mdc/web
Version:
450 lines (433 loc) • 17.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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular-mdc/web/menu-surface'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/list'), require('@angular-mdc/web/dom'), require('@material/menu')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/menu', ['exports', '@angular/core', '@angular-mdc/web/menu-surface', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular-mdc/web/list', '@angular-mdc/web/dom', '@material/menu'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.menu = {}), global.ng.core, global.ng.web.menuSurface, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.web.list, global.ng.web.dom, global.mdc.menu));
}(this, (function (exports, core, menuSurface, coercion, rxjs, operators, list, dom, menu) { '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 __());
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
s += arguments[i].length;
}
for (var r = Array(s), k = 0, i = 0; i < il; i++) {
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
r[k] = a[j];
}
}
return r;
}
/**
* @fileoverview added by tsickle
* Generated from: menu/menu.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcMenuSelectedEvent = /** @class */ (function () {
function MdcMenuSelectedEvent(index, source) {
this.index = index;
this.source = source;
}
return MdcMenuSelectedEvent;
}());
/** @type {?} */
var nextUniqueId = 0;
var MdcMenu = /** @class */ (function (_super) {
__extends(MdcMenu, _super);
function MdcMenu() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/**
* Emits whenever the component is destroyed.
*/
_this._destroyed = new rxjs.Subject();
_this._uniqueId = menu.cssClasses.ROOT + "-" + ++nextUniqueId;
_this.id = _this._uniqueId;
_this._wrapFocus = false;
_this._closeSurfaceOnSelection = true;
_this.selected = new core.EventEmitter();
_this._menuFoundation = new menu.MDCMenuFoundation(_this._createAdapter());
return _this;
}
Object.defineProperty(MdcMenu.prototype, "wrapFocus", {
get: /**
* @return {?}
*/
function () {
return this._wrapFocus;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._wrapFocus) {
this._wrapFocus = newValue;
(/** @type {?} */ (this._list)).wrapFocus = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenu.prototype, "closeSurfaceOnSelection", {
get: /**
* @return {?}
*/
function () {
return this._closeSurfaceOnSelection;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._closeSurfaceOnSelection) {
this._closeSurfaceOnSelection = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcMenu.prototype, "defaultFocusState", {
get: /**
* @return {?}
*/
function () {
return this._defaultFocusState;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== this._defaultFocusState) {
this._defaultFocusState = coercion.coerceNumberProperty(value, 0);
this._menuFoundation.setDefaultFocusState(this._defaultFocusState);
}
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
MdcMenu.prototype._createAdapter = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return Object.assign({
addClassToElementAtIndex: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
return (/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement().classList.add(className);
}),
removeClassFromElementAtIndex: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
return (/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement().classList.remove(className);
}),
addAttributeToElementAtIndex: (/**
* @param {?} index
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (index, attr, value) {
return (/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement().setAttribute(attr, value);
}),
removeAttributeFromElementAtIndex: (/**
* @param {?} index
* @param {?} attr
* @return {?}
*/
function (index, attr) {
return (/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement().removeAttribute(attr);
}),
elementContainsClass: (/**
* @param {?} element
* @param {?} className
* @return {?}
*/
function (element, className) { return element.classList.contains(className); }),
closeSurface: (/**
* @param {?} skipRestoreFocus
* @return {?}
*/
function (skipRestoreFocus) {
if (_this.closeSurfaceOnSelection) {
_this._foundation.close(skipRestoreFocus);
}
}),
getElementIndex: (/**
* @param {?} element
* @return {?}
*/
function (element) {
return (/** @type {?} */ (_this._list)).items.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.getListItemElement() === element; }));
}),
notifySelected: (/**
* @param {?} evtData
* @return {?}
*/
function (evtData) {
return _this.selected.emit(new MdcMenuSelectedEvent(evtData.index, (/** @type {?} */ (_this._list)).items.toArray()[evtData.index]));
}),
getMenuItemCount: (/**
* @return {?}
*/
function () { return (/** @type {?} */ (_this._list)).items.toArray().length; }),
focusItemAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) { return (/** @type {?} */ (_this._list)).items.toArray()[index].focus(); }),
focusListRoot: (/**
* @return {?}
*/
function () { return (/** @type {?} */ (_this._list)).focus(); }),
isSelectableItemAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) {
return !!dom.closest((/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement(), "." + menu.cssClasses.MENU_SELECTION_GROUP);
}),
getSelectedSiblingOfItemAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var selectionGroupEl = (/** @type {?} */ (dom.closest((/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement(), "." + menu.cssClasses.MENU_SELECTION_GROUP)));
/** @type {?} */
var selectedItemEl = selectionGroupEl.querySelector("." + menu.cssClasses.MENU_SELECTED_LIST_ITEM);
return selectedItemEl ? (/** @type {?} */ (_this._list)).items.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) {
return _.elementRef.nativeElement === selectedItemEl;
})) : -1;
})
});
};
/**
* @return {?}
*/
MdcMenu.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.initMenuSurface();
this._initList();
this.opened.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
function () { return _this._menuFoundation.handleMenuSurfaceOpened(); }));
};
/**
* @return {?}
*/
MdcMenu.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroyed.next();
this._destroyed.complete();
this.destroyMenuSurface();
this._menuFoundation.destroy();
};
/**
* @param {?} evt
* @return {?}
*/
MdcMenu.prototype._handleKeydown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this._menuFoundation.handleKeydown(evt);
};
/**
* @private
* @return {?}
*/
MdcMenu.prototype._initList = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this._list) {
return;
}
this._list.setRole('menu');
this._list.wrapFocus = this._wrapFocus;
this._list.setTabIndex(-1);
// When the list items change, re-subscribe
this._list.items.changes.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
function () { return (/** @type {?} */ (_this._list)).items.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.setRole('menuitem'); })); }));
(/** @type {?} */ (this._list)).actionEvent.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
return _this._menuFoundation.handleItemAction((/** @type {?} */ (_this._list)).items.toArray()[event.index].getListItemElement());
}));
};
MdcMenu.decorators = [
{ type: core.Component, args: [{selector: 'mdc-menu',
exportAs: 'mdcMenu',
host: {
'[id]': 'id',
'class': 'mdc-menu mdc-menu-surface',
'(keydown)': '_handleKeydown($event)',
},
template: '<ng-content></ng-content>',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
MdcMenu.propDecorators = {
id: [{ type: core.Input }],
wrapFocus: [{ type: core.Input }],
closeSurfaceOnSelection: [{ type: core.Input }],
defaultFocusState: [{ type: core.Input }],
selected: [{ type: core.Output }],
_list: [{ type: core.ContentChild, args: [list.MdcList, { static: false },] }]
};
return MdcMenu;
}(menuSurface.MdcMenuSurfaceBase));
/**
* @fileoverview added by tsickle
* Generated from: menu/menu-directives.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcMenuSelectionGroup = /** @class */ (function () {
function MdcMenuSelectionGroup(elementRef) {
this.elementRef = elementRef;
}
MdcMenuSelectionGroup.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcMenuSelectionGroup], mdc-menu-selection-group',
host: { 'class': 'mdc-menu__selection-group' },
exportAs: 'mdcMenuSelectionGroup'
},] },
];
/** @nocollapse */
MdcMenuSelectionGroup.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcMenuSelectionGroup;
}());
var MdcMenuSelectionGroupIcon = /** @class */ (function () {
function MdcMenuSelectionGroupIcon(elementRef) {
this.elementRef = elementRef;
}
MdcMenuSelectionGroupIcon.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcMenuSelectionGroupIcon], mdc-menu-selection-group-icon',
host: { 'class': 'mdc-menu__selection-group-icon' },
exportAs: 'mdcMenuSelectionGroupIcon'
},] },
];
/** @nocollapse */
MdcMenuSelectionGroupIcon.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcMenuSelectionGroupIcon;
}());
/**
* @fileoverview added by tsickle
* Generated from: menu/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var MENU_DECLARATIONS = [
MdcMenu,
MdcMenuSelectionGroup,
MdcMenuSelectionGroupIcon
];
var MdcMenuModule = /** @class */ (function () {
function MdcMenuModule() {
}
MdcMenuModule.decorators = [
{ type: core.NgModule, args: [{
imports: [menuSurface.MdcMenuSurfaceModule],
exports: __spreadArrays(MENU_DECLARATIONS, [
menuSurface.MdcMenuSurfaceModule
]),
declarations: [MENU_DECLARATIONS]
},] },
];
return MdcMenuModule;
}());
exports.MdcMenu = MdcMenu;
exports.MdcMenuModule = MdcMenuModule;
exports.MdcMenuSelectedEvent = MdcMenuSelectedEvent;
exports.MdcMenuSelectionGroup = MdcMenuSelectionGroup;
exports.MdcMenuSelectionGroupIcon = MdcMenuSelectionGroupIcon;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-menu.umd.js.map