/**
 * -------------------------------------------------------------------------------------------
 * 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-arrow-options-css' ; export class extends MgtBaseComponent @ customElement ( 'mgt-arrow-options' ) export class MgtArrowOptions 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 ; type { string } memberof @ property ( { type : String } ) public value : string ; type { object } memberof @ property ( { type : Object } ) public options : { [ name ] : ( e : MouseEvent ) => any | void ; } ; private _clickHandler : ( e : MouseEvent ) => void | any ; constructor ( ) { super ( ) ; this . value = '' ; this . options = { } ; this . _clickHandler = ( e ) => ( this . open = false ) ; } public connectedCallback ( ) { super . connectedCallback ( ) ; window . addEventListener ( 'click' , this . _clickHandler ) ; } public disconnectedCallback ( ) { window . removeEventListener ( 'click' , this . _clickHandler ) ; super . disconnectedCallback ( ) ; } param { MouseEvent } e memberof public 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.
     */ public 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>
    ` ; } private 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>
      ` ) ; } }