/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { SharedInsight } from '@microsoft/microsoft-graph-types' ; import { customElement , html , TemplateResult } from 'lit-element' ; import { BasePersonCardSection } from '../BasePersonCardSection' ; import { getFileTypeIconUri } from '../../../../styles/fluent-icons' ; import { getSvg , SvgIcon } from '../../../../utils/SvgHelper' ; import { getRelativeDisplayDate } from '../../../../utils/Utils' ; import { styles } from './mgt-person-card-files-css' ; import { strings } from './strings' ; export class extends MgtTemplatedComponent @ customElement ( 'mgt-person-card-files' ) export class MgtPersonCardFiles 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 _files : SharedInsight [ ] ; public constructor ( files ) { super ( ) ; this . _files = files ; } readonly type { string } memberof public get displayName ( ) : string { return this . strings . filesSectionTitle ; } protected memberof public clearState ( ) { super . clearState ( ) ; this . _files = null ; } returns { TemplateResult } memberof public renderIcon ( ) { return getSvg ( SvgIcon . Files ) ; } returns { TemplateResult } memberof public renderCompactView ( ) { let contentTemplate ; if ( this . isLoadingState ) { contentTemplate = this . renderLoading ( ) ; } else if ( ! this . _files || ! this . _files . length ) { contentTemplate = this . renderNoData ( ) ; } else { contentTemplate = html `
        ${ this . _files . slice ( 0 , 3 ) . map ( file => this . renderFile ( file ) ) }
      ` ; } return html `
      <div class="root compact" dir=${ this . direction }>
        ${ contentTemplate }
      </div>
    ` ; } protected returns { TemplateResult } memberof protected renderFullView ( ) { let contentTemplate ; if ( this . isLoadingState ) { contentTemplate = this . renderLoading ( ) ; } else if ( ! this . _files || ! this . _files . length ) { contentTemplate = this . renderNoData ( ) ; } else { contentTemplate = html `
        ${ this . _files . map ( file => this . renderFile ( file ) ) }
      ` ; } return html `
      <div class="root" dir=${ this . direction }>
        <div class="title">${ this . strings . filesSectionTitle }</div>
        ${ contentTemplate }
      </div>
    ` ; } protected param { IFile } file returns { TemplateResult } memberof protected renderFile ( file ) { const lastModifiedTemplate = file . lastShared ? html `
          <div class="file__last-modified">
            ${ this . strings . sharedTextSubtitle } ${ getRelativeDisplayDate ( new Date ( file . lastShared . sharedDateTime ) ) }
          </div>
        ` : null ; return html `
      <div class="file" @click=${ e => this . handleFileClick ( file ) }>
        <div class="file__icon">
          <img src=${ getFileTypeIconUri ( file . resourceVisualization . type , 48 , 'svg' ) } />
        </div>
        <div class="file__details">
          <div class="file__name">${ file . resourceVisualization . title }</div>
          ${ lastModifiedTemplate }
        </div>
      </div>
    ` ; } private handleFileClick ( file ) { if ( file . resourceReference && file . resourceReference . webUrl ) { window . open ( file . resourceReference . webUrl , '_blank' ) ; } } }