import*as LitHtml from"../../third_party/lit-html/lit-html.js";export class IconButton extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.clickHandler=()=>{},this.groups=[]}set data(t){this.groups=t.groups,this.clickHandler=t.clickHandler,this.render()}setTexts(t){if(t.length!==this.groups.length)throw new Error(`Wrong number of texts, expected ${this.groups.length} but got ${t.length}`);for(let o=0;o<t.length;++o)this.groups[o].text=t[o];this.render()}onClickHandler(t){t.preventDefault(),this.clickHandler()}render(){return LitHtml.render(LitHtml.html`
      <style>
        :host {
          white-space: normal;
        }

        .icon-button {
          cursor: pointer;
          background-color: var(--toolbar-bg-color);
          border: 1px solid var(--divider-color);
          border-radius: 2px;
          margin-right: 2px;
          display: inline-flex;
          align-items: center;
          color: inherit;
          font-size: inherit;
          font-family: inherit;
        }

        .icon-button:hover,
        .icon-button:focus-visible {
          background-color: var(--toolbar-hover-bg-color);
        }

        .icon-button-title {
          margin-left: 0.5ex;
        }

        .status-icon {
          margin-left: 1ex;
        }

        .status-icon:first-child {
          margin-left: inherit;
        }

        @media (forced-colors: active) {
          .icon-button {
            forced-color-adjust: none;
            background-color: ButtonFace;
          }

          .icon-button:hover {
            background-color: Highlight;
            color: HighlightText;
          }
        }
      </style>
      <button class="icon-button" @click=${this.onClickHandler}>
      ${this.groups.filter((t=>void 0!==t.text)).map((t=>LitHtml.html`
      <devtools-icon class="status-icon"
      .data=${{iconName:t.iconName,color:t.iconColor||"",width:"1.5ex",height:"1.5ex"}}>
      </devtools-icon>
      <span class="icon-button-title">${t.text}</span>
      </button>`))}
    `,this.shadow,{eventContext:this})}}customElements.define("icon-button",IconButton);