@microsoft/mgt
Version:
The Microsoft Graph Toolkit
116 lines • 4.16 kB
JavaScript
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { customElement, html, property } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import { MgtBaseComponent } from '../../baseComponent';
import { styles } from './mgt-dot-options-css';
/**
* Custom Component used to handle an arrow rendering for TaskGroups utilized in the task component.
*
* @export MgtDotOptions
* @class MgtDotOptions
* @extends {MgtBaseComponent}
*/
let MgtDotOptions = class MgtDotOptions extends MgtBaseComponent {
constructor() {
super();
/**
* Determines if header menu is rendered or hidden.
*
* @type {boolean}
* @memberof MgtDotOptions
*/
this.open = false;
/**
* Menu options to be rendered with an attached MouseEvent handler for expansion of details
*
* @memberof MgtDotOptions
*/
this.options = null;
this._clickHandler = null;
this._clickHandler = (e) => (this.open = false);
}
/**
* Array of styles to apply to the element. The styles should be defined
* user the `css` tag function.
*/
static get styles() {
return styles;
}
// tslint:disable-next-line: completed-docs
connectedCallback() {
super.connectedCallback();
window.addEventListener('click', this._clickHandler);
}
// tslint:disable-next-line: completed-docs
disconnectedCallback() {
window.removeEventListener('click', this._clickHandler);
super.disconnectedCallback();
}
/**
* Invoked on each update to perform rendering tasks. This method must return
* a lit-html TemplateResult. Setting properties inside this method will *not*
* trigger the element to update.
*/
render() {
return html `
<div class=${classMap({ DotMenu: true, Open: this.open })} @click=${e => this.onDotClick(e)}>
<span class="DotIcon">\uE712</span>
<div class="Menu">
${Object.keys(this.options).map(prop => this.getMenuOption(prop, this.options[prop]))}
</div>
</div>
`;
}
/**
* Used by the render method to attach click handler to each dot item
*
* @param {string} name
* @param {((e: MouseEvent) => void | any)} click
* @returns
* @memberof MgtDotOptions
*/
getMenuOption(name, click) {
return html `
<div
class="DotItem"
@click="${e => {
e.preventDefault();
e.stopPropagation();
click(e);
this.open = false;
}}"
>
<span class="DotItemName">
${name}
</span>
</div>
`;
}
onDotClick(e) {
e.preventDefault();
e.stopPropagation();
this.open = !this.open;
}
};
__decorate([
property({ type: Boolean })
], MgtDotOptions.prototype, "open", void 0);
__decorate([
property({ type: Object })
], MgtDotOptions.prototype, "options", void 0);
MgtDotOptions = __decorate([
customElement('mgt-dot-options')
], MgtDotOptions);
export { MgtDotOptions };
//# sourceMappingURL=mgt-dot-options.js.map