import { css , customElement , html , LitElement , property , query , TemplateResult , } from 'lit-element' ; import { nothing } from 'lit-html' ; import '../../action-pane.js' ; import './do-container.js' ; import { getInstanceAttribute , getNameAttribute } from '../../foundation.js' ; import { translate } from 'lit-translate' ; import { IconButtonToggle } from '@material/mwc-icon-button-toggle' ; /** [[`IED`]] plugin subeditor for editing `LN` and `LN0` element. */ @ customElement ( 'ln-container' ) export class LNContainer extends LitElement { @ property ( { attribute : false } ) element ! : Element ; @ query ( '#toggleButton' ) toggleButton ! : IconButtonToggle | undefined ; private header ( ) { const prefix = this . element . getAttribute ( 'prefix' ) ; const lnClass = this . element . getAttribute ( 'lnClass' ) ; const inst = getInstanceAttribute ( this . element ) ; return html `${ prefix != null ? html `${ prefix } &mdash; ` : nothing }
            ${ lnClass }
            ${ inst ? html ` &mdash; ${ inst }` : nothing }` ; } returns private getDOElements ( ) { const lnType = this . element . getAttribute ( 'lnType' ) ?? undefined ; const lNodeType = this . element . closest ( 'SCL' ) ! . querySelector ( `:root > DataTypeTemplates > LNodeType[id="${ lnType }"]` ) ; if ( lNodeType != null ) { return Array . from ( lNodeType . querySelectorAll ( ':scope > DO' ) ) ; } return [ ] ; } param dO returns private getInstanceElement ( dO ) { const doName = getNameAttribute ( dO ) ; return this . element . querySelector ( `:scope > DOI[name="${ doName }"]` ) ; } render ( ) { const doElements = this . getDOElements ( ) ; return html `<action-pane .label="${ this . header ( ) }">
      ${ doElements . length > 0 ? html `<abbr slot="action" title="${ translate ( 'iededitor.toggleChildElements' ) }">
        <mwc-icon-button-toggle
          id="toggleButton"
          onIcon="keyboard_arrow_up"
          offIcon="keyboard_arrow_down"
          @click=${ ( ) => this . requestUpdate ( ) }
        ></mwc-icon-button-toggle>
      </abbr>` : nothing }
      ${ this . toggleButton ?. on ? this . getDOElements ( ) . map ( dO => html `<do-container
          .element=${ dO }
          .instanceElement=${ this . getInstanceElement ( dO ) }>
        </do-container>
        ` ) : nothing }
    </action-pane>` ; } static styles = css `` ; }