/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { customElement , html , property } from 'lit-element' ; import { classMap } from 'lit-html/directives/class-map' ; import { MgtBaseComponent } from '@microsoft/mgt-element' ; import { styles } from './mgt-dot-options-css' ; export class extends MgtBaseComponent @ customElement ( 'mgt-dot-options' ) export class MgtDotOptions extends MgtBaseComponent { /**
     * Array of styles to apply to the element. The styles should be defined
     * user the `css` tag function.
     */ public static get styles ( ) { return styles ; } type { boolean } memberof @ property ( { type : Boolean } ) public open : boolean ; memberof @ property ( { type : Object } ) public options : { [ option ] : ( e : MouseEvent ) => void | any ; } ; private _clickHandler : ( e : MouseEvent ) => void | any = null ; constructor ( ) { super ( ) ; this . _clickHandler = ( e ) => ( this . open = false ) ; } public connectedCallback ( ) { super . connectedCallback ( ) ; window . addEventListener ( 'click' , this . _clickHandler ) ; } public 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.
     */ public 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>
    ` ; } param { string } name param { ( ( e : MouseEvent ) => void | any ) } click returns memberof public 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>
    ` ; } private onDotClick ( e ) { e . preventDefault ( ) ; e . stopPropagation ( ) ; this . open = ! this . open ; } }