/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { Message } from '@microsoft/microsoft-graph-types' ; import { customElement , html , TemplateResult } from 'lit-element' ; import { BasePersonCardSection } from '../BasePersonCardSection' ; import { getSvg , SvgIcon } from '../../../../utils/SvgHelper' ; import { getRelativeDisplayDate } from '../../../../utils/Utils' ; import { styles } from './mgt-person-card-messages-css' ; import { strings } from './strings' ; export class extends MgtTemplatedComponent @ customElement ( 'mgt-person-card-messages' ) export class MgtPersonCardMessages extends BasePersonCardSection { /**
     * Array of styles to apply to the element. The styles should be defined
     * using the `css` tag function.
     */ static get styles ( ) { return styles ; } protected get strings ( ) { return strings ; } private _messages : Message [ ] ; public constructor ( messages ) { super ( ) ; this . _messages = messages ; } readonly type { string } memberof public get displayName ( ) : string { return this . strings . emailsSectionTitle ; } protected memberof public clearState ( ) { super . clearState ( ) ; this . _messages = [ ] ; } returns { TemplateResult } memberof public renderIcon ( ) { return getSvg ( SvgIcon . Messages ) ; } returns { TemplateResult } memberof public renderCompactView ( ) { let contentTemplate ; if ( this . isLoadingState ) { contentTemplate = this . renderLoading ( ) ; } else if ( ! this . _messages || ! this . _messages . length ) { contentTemplate = this . renderNoData ( ) ; } else { const messageTemplates = this . _messages ? this . _messages . slice ( 0 , 3 ) . map ( message => this . renderMessage ( message ) ) : [ ] ; contentTemplate = html `
        ${ messageTemplates }
      ` ; } return html `
      <div class="root compact">
        ${ contentTemplate }
      </div>
    ` ; } protected returns { TemplateResult } memberof protected renderFullView ( ) { let contentTemplate ; if ( this . isLoadingState ) { contentTemplate = this . renderLoading ( ) ; } else if ( ! this . _messages || ! this . _messages . length ) { contentTemplate = this . renderNoData ( ) ; } else { contentTemplate = html `
        ${ this . _messages . slice ( 0 , 5 ) . map ( message => this . renderMessage ( message ) ) }
      ` ; } return html `
      <div class="root">
        <div class="title">${ this . strings . emailsSectionTitle }</div>
        ${ contentTemplate }
      </div>
    ` ; } protected param { IMessage } message returns { TemplateResult } memberof protected renderMessage ( message ) { return html `
      <div class="message" @click=${ ( ) => this . handleMessageClick ( message ) }>
        <div class="message__detail">
          <div class="message__subject">${ message . subject }</div>
          <div class="message__from">${ message . from . emailAddress . name }</div>
          <div class="message__message">${ message . bodyPreview }</div>
        </div>
        <div class="message__date">${ getRelativeDisplayDate ( new Date ( message . receivedDateTime ) ) }</div>
      </div>
    ` ; } private handleMessageClick ( message ) { window . open ( message . webLink , '_blank' ) ; } }