import './outline-server-view' ; import { customElement , html , LitElement , property } from 'lit-element' ; import { repeat } from 'lit-html/directives/repeat' ; import type { DisplayCloudId } from './cloud-assets' ; import type { ServerView } from './outline-server-view' ; export interface ServerViewListEntry { id : string ; name : string ; cloudId : DisplayCloudId ; } @ customElement ( 'outline-server-list' ) export class OutlineServerList extends LitElement { @ property ( { type : Array } ) serverList : ServerViewListEntry [ ] ; @ property ( { type : String } ) selectedServerId : string ; @ property ( { type : Function } ) localize : Function ; @ property ( { type : String } ) language : string ; render ( ) { if ( ! this . serverList ) { return ; } return html `<div>${ repeat ( this . serverList , e => e . id , e => html `
      <outline-server-view
        .id="${ this . makeViewId ( e . id ) }"
        .serverId="${ e . id }"
        .serverName="${ e . name }"
        .cloudId="${ e . cloudId }"
        .language="${ this . language }"
        .localize="${ this . localize }"
        ?hidden="${ e . id !== this . selectedServerId }">
      </outline-server-view>
    ` ) }</div>` ; } async getServerView ( serverId ) { if ( ! serverId ) { return null ; } await this . updateComplete ; const selector = `#${ this . makeViewId ( serverId ) }` ; return this . shadowRoot . querySelector < ServerView > ( selector ) ; } private makeViewId ( serverId ) { return `serverView-${ btoa ( serverId ) . replace ( /=/g , '' ) }` ; } }