import*as LitHtml from"../../third_party/lit-html/lit-html.js";export class Report extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.reportTitle=""}set data({reportTitle:t}){this.reportTitle=t,this.render()}connectedCallback(){this.render()}render(){LitHtml.render(LitHtml.html`
      <style>
        .content {
          background-color: var(--color-background);
          display: grid;
          grid-template-columns: min-content 1fr;
          user-select: text;
        }

        .report-title {
          padding: 12px 24px;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          border-bottom: 1px solid var(--color-details-hairline);
          color: var(--color-text-primary);
          background-color: var(--color-background);
          grid-column-start: span 2;
        }
      </style>

      <div class="content">
        ${this.reportTitle?LitHtml.html`<div class="report-title">${this.reportTitle}</div>`:LitHtml.nothing}
        <slot></slot>
      </div>
    `,this.shadow)}}export class ReportSectionHeader extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){LitHtml.render(LitHtml.html`
      <style>
        :host {
          grid-column-start: span 2;
        }

        .section-header {
          padding: 12px;
          margin-left: 18px;
          display: flex;
          flex-direction: row;
          align-items: center;
          flex: auto;
          text-overflow: ellipsis;
          overflow: hidden;
          font-weight: bold;
          color: var(--color-text-primary);
        }
      </style>
      <div class="section-header">
        <slot></slot>
      </div>
    `,this.shadow)}}export class ReportSectionDivider extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){LitHtml.render(LitHtml.html`
      <style>
        :host {
          grid-column-start: span 2;
        }

        .section-divider {
          border-bottom: 1px solid var(--color-details-hairline);
        }
      </style>
      <div class="section-divider">
      </div>
    `,this.shadow)}}export class ReportKey extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){LitHtml.render(LitHtml.html`
      <style>
        :host {
          line-height: 28px;
          margin: 0 0 8px 0;
        }

        .key {
          color: var(--color-text-secondary);
          padding: 0 6px;
          text-align: right;
          white-space: pre;
        }
      </style>
      <div class="key"><slot></slot></div>
    `,this.shadow)}}export class ReportValue extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){LitHtml.render(LitHtml.html`
      <style>
        :host {
          line-height: 28px;
          margin: 0 0 8px 0;
          min-width: 150px;
        }

        .value {
          color: var(--color-text-primary);
          margin-inline-start: 0;
          padding: 0 6px;
        }
      </style>
      <div class="value"><slot></slot></div>
    `,this.shadow)}}customElements.define("devtools-report",Report),customElements.define("devtools-report-section-header",ReportSectionHeader),customElements.define("devtools-report-key",ReportKey),customElements.define("devtools-report-value",ReportValue),customElements.define("devtools-report-divider",ReportSectionDivider);