@angular-mdc/web
Version:
393 lines (388 loc) • 13.8 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 { __extends, __spreadArrays } from 'tslib';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ContentChild, Directive, ElementRef, NgModule } from '@angular/core';
import { MdcMenuSurfaceBase, MdcMenuSurfaceModule } from '@angular-mdc/web/menu-surface';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MdcList } from '@angular-mdc/web/list';
import { closest } from '@angular-mdc/web/dom';
import { cssClasses, MDCMenuFoundation } from '@material/menu';
/**
* @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 Subject();
_this._uniqueId = cssClasses.ROOT + "-" + ++nextUniqueId;
_this.id = _this._uniqueId;
_this._wrapFocus = false;
_this._closeSurfaceOnSelection = true;
_this.selected = new EventEmitter();
_this._menuFoundation = new 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 = 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 = 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 = 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 !!closest((/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement(), "." + cssClasses.MENU_SELECTION_GROUP);
}),
getSelectedSiblingOfItemAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var selectionGroupEl = (/** @type {?} */ (closest((/** @type {?} */ (_this._list)).items.toArray()[index].getListItemElement(), "." + cssClasses.MENU_SELECTION_GROUP)));
/** @type {?} */
var selectedItemEl = selectionGroupEl.querySelector("." + 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(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(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(takeUntil(this._destroyed))
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
return _this._menuFoundation.handleItemAction((/** @type {?} */ (_this._list)).items.toArray()[event.index].getListItemElement());
}));
};
MdcMenu.decorators = [
{ type: 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: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
MdcMenu.propDecorators = {
id: [{ type: Input }],
wrapFocus: [{ type: Input }],
closeSurfaceOnSelection: [{ type: Input }],
defaultFocusState: [{ type: Input }],
selected: [{ type: Output }],
_list: [{ type: ContentChild, args: [MdcList, { static: false },] }]
};
return MdcMenu;
}(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: Directive, args: [{
selector: '[mdcMenuSelectionGroup], mdc-menu-selection-group',
host: { 'class': 'mdc-menu__selection-group' },
exportAs: 'mdcMenuSelectionGroup'
},] },
];
/** @nocollapse */
MdcMenuSelectionGroup.ctorParameters = function () { return [
{ type: ElementRef }
]; };
return MdcMenuSelectionGroup;
}());
var MdcMenuSelectionGroupIcon = /** @class */ (function () {
function MdcMenuSelectionGroupIcon(elementRef) {
this.elementRef = elementRef;
}
MdcMenuSelectionGroupIcon.decorators = [
{ type: Directive, args: [{
selector: '[mdcMenuSelectionGroupIcon], mdc-menu-selection-group-icon',
host: { 'class': 'mdc-menu__selection-group-icon' },
exportAs: 'mdcMenuSelectionGroupIcon'
},] },
];
/** @nocollapse */
MdcMenuSelectionGroupIcon.ctorParameters = function () { return [
{ type: 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: NgModule, args: [{
imports: [MdcMenuSurfaceModule],
exports: __spreadArrays(MENU_DECLARATIONS, [
MdcMenuSurfaceModule
]),
declarations: [MENU_DECLARATIONS]
},] },
];
return MdcMenuModule;
}());
export { MdcMenu, MdcMenuModule, MdcMenuSelectedEvent, MdcMenuSelectionGroup, MdcMenuSelectionGroupIcon };
//# sourceMappingURL=menu.es5.js.map