import { css , customElement , html , LitElement , property , query , TemplateResult , } from 'lit-element' ; import { nothing } from 'lit-html' ; import { translate } from 'lit-translate' ; import '@material/mwc-icon-button-toggle' ; import { IconButtonToggle } from '@material/mwc-icon-button-toggle' ; import '../../action-pane.js' ; import { getNameAttribute } from '../../foundation.js' ; /** [[`IED`]] plugin subeditor for editing `(B)DA` element. */ @ customElement ( 'da-container' ) export class DAContainer extends LitElement { /**
     * The DA itself.
     */ @ property ( { attribute : false } ) element ! : Element ; /**
     * The optional DAI of this (B)DA.
     */ @ property ( { attribute : false } ) instanceElement ! : Element ; @ query ( '#toggleButton' ) toggleButton : IconButtonToggle | undefined ; private header ( ) { const name = getNameAttribute ( this . element ) ; const bType = this . element ! . getAttribute ( 'bType' ) ?? nothing ; if ( this . instanceElement ) { return html `<b>${ name }</b> &mdash; ${ bType }` ; } else { return html `${ name } &mdash; ${ bType }` ; } } returns private renderValue ( ) { if ( this . instanceElement ) { return html `${ this . getValueElement ( this . instanceElement ) ?. textContent }` ; } return html `${ this . getValueElement ( this . element ) ?. textContent }` ; } param element returns private getValueElement ( element ) { return element . querySelector ( 'Val' ) ?? null ; } returns private getBDAElements ( ) { const type = this . element ! . getAttribute ( 'type' ) ?? undefined ; const doType = this . element ! . closest ( 'SCL' ) ! . querySelector ( `:root > DataTypeTemplates > DAType[id="${ type }"]` ) ; if ( doType != null ) { return Array . from ( doType ! . querySelectorAll ( ':scope > BDA' ) ) ; } return [ ] ; } render ( ) { const bType = this . element ! . getAttribute ( 'bType' ) ; return html `<action-pane .label="${ this . header ( ) }" icon="${ this . instanceElement != null ? 'done' : '' }">
      ${ bType == 'Struct' ? 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 }
      <h6>${ this . renderValue ( ) }</h6>
      ${ this . toggleButton ?. on && bType == 'Struct' ? this . getBDAElements ( ) . map ( element => html `<da-container
          .element=${ element }>
        </da-container>` ) : nothing }
    </action-pane>
    ` ; } static styles = css `
    h6 {
      color: var(--mdc-theme-on-surface);
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 0.8em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 0px;
      padding-left: 0.3em;
    }
  ` ; }