@microsoft/mgt/dist/es6/components/sub-components/mgt-arrow-options/mgt-arrow-options.js

The Microsoft Graph Toolkit

/**
 * -------------------------------------------------------------------------------------------
 * 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-arrow-options-css';
/*
  Ok, the name here deserves a bit of explanation,
  This component originally had a built-in arrow icon,
  The problem came when you wanted to use a different symbol,
  So the arrow was removed, but the name was already set everywhere.
  - benotter
 */
/**
 * Custom Component used to handle an arrow rendering for TaskGroups utilized in the task component.
 *
 * @export MgtArrowOptions
 * @class MgtArrowOptions
 * @extends {MgtBaseComponent}
 */
let MgtArrowOptions = class MgtArrowOptions extends MgtBaseComponent {
    constructor() {
        super();
        /**
         * Determines if header menu is rendered or hidden.
         *
         * @type {boolean}
         * @memberof MgtArrowOptions
         */
        this.open = false;
        /**
         * Title of chosen TaskGroup.
         *
         * @type {string}
         * @memberof MgtArrowOptions
         */
        this.value = '';
        /**
         * Menu options to be rendered with an attached MouseEvent handler for expansion of details
         *
         * @type {object}
         * @memberof MgtArrowOptions
         */
        this.options = {};
        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();
    }
    /**
     * Handles clicking for header menu, utilizing boolean switch open
     *
     * @param {MouseEvent} e attaches to Header to open menu
     * @memberof MgtArrowOptions
     */
    onHeaderClick(e) {
        const keys = Object.keys(this.options);
        if (keys.length > 1) {
            e.preventDefault();
            e.stopPropagation();
            this.open = !this.open;
        }
    }
    /**
     * 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 `
      <span class="Header" @click=${e => this.onHeaderClick(e)}>
        <span class="CurrentValue">${this.value}</span>
      </span>
      <div class=${classMap({ Menu: true, Open: this.open, Closed: !this.open })}>
        ${this.getMenuOptions()}
      </div>
    `;
    }
    getMenuOptions() {
        const keys = Object.keys(this.options);
        const funcs = this.options;
        return keys.map(opt => html `
        <div
          class="MenuOption"
          @click="${(e) => {
            this.open = false;
            funcs[opt](e);
        }}"
        >
          <span class=${classMap({ MenuOptionCheck: true, CurrentValue: this.value === opt })}>
            \uE73E
          </span>
          <span class="MenuOptionName">${opt}</span>
        </div>
      `);
    }
};
__decorate([
    property({ type: Boolean })
], MgtArrowOptions.prototype, "open", void 0);
__decorate([
    property({ type: String })
], MgtArrowOptions.prototype, "value", void 0);
__decorate([
    property({ type: Object })
], MgtArrowOptions.prototype, "options", void 0);
MgtArrowOptions = __decorate([
    customElement('mgt-arrow-options')
], MgtArrowOptions);
export { MgtArrowOptions };
//# sourceMappingURL=mgt-arrow-options.js.map