import*as ComponentHelpers from"../../components/helpers/helpers.js";import*as LitHtml from"../../lit-html/lit-html.js";import expandableListStyles from"./expandableList.css.js";export class ExpandableList extends HTMLElement{static litTagName=LitHtml.literal`devtools-expandable-list`;#t=this.attachShadow({mode:"open"});#e=!1;#s=[];set data(t){this.#s=t.rows,this.#i()}#l(){this.#e=!this.#e,this.#i()}connectedCallback(){this.#t.adoptedStyleSheets=[expandableListStyles]}#i(){this.#s.length<1||LitHtml.render(LitHtml.html`
      <div class="expandable-list-container">
        <div>
          ${this.#s.length>1?LitHtml.html`
              <button @click=${()=>this.#l()} class="arrow-icon-button">
                <span class="arrow-icon ${this.#e?"expanded":""}"></span>
              </button>
            `:LitHtml.nothing}
        </div>
        <div class="expandable-list-items">
          ${this.#s.filter(((t,e)=>this.#e||0===e)).map((t=>LitHtml.html`
            ${t}
          `))}
        </div>
      </div>
    `,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-expandable-list",ExpandableList);