var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import './play-button.js';
let PlayConsole = class PlayConsole extends LitElement {
    render() {
        const errs = [];
        for (const err of this.diagnostics?.previewErrs ?? [])
            errs.push(row(err));
        return html `<div class="play-console">
      <table>
        <thead>
          <tr>
            <th class="name"><div class="resize">Name</div></th>
            <th class="message"><div class="resize">Message</div></th>
            <th class="details">Details</th>
          </tr>
        </thead>
        <tbody>
          ${errs}
        </tbody>
      </table>
    </div>`;
    }
};
PlayConsole.styles = css `
    .play-console {
      height: 320px;
      overflow: auto;
      background-color: var(--rpl-neutral-background);
    }
    table {
      height: 100%;
      width: 100%;
    }
    thead tr {
      text-align: left;
    }

    tbody > tr:hover {
      background-color: var(--rpl-neutral-background-weak-hovered);
    }

    th,
    td {
      padding-bottom: 12px;
      padding-left: 8px;
      padding-right: 8px;
      padding-top: 12px;

      /* Default is middle. */
      vertical-align: top;
    }

    /* Zebra striping. */
    tbody > tr:nth-child(odd) {
      background-color: var(--rpl-neutral-background-weak);
    }

    /* Initial / minimum size to avoid distracting resizing between errors and
       no errors layouts. .details gets the rest. */
    .name {
      width: 120px;
    }
    .message {
      width: 200px;
    }

    .resize {
      /* This is just a resizable div. Don't let it get smaller than the minimum
         width of the cel. */
      min-width: 100%;

      /** Allow resize. */
      overflow: hidden;
      resize: horizontal;
    }

    pre {
      /* Remove default margin. */
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
    }
  `;
__decorate([
    property({ attribute: false })
], PlayConsole.prototype, "diagnostics", void 0);
PlayConsole = __decorate([
    customElement('play-console')
], PlayConsole);
export { PlayConsole };
function row(err) {
    if (!(err instanceof Error))
        return html `<tr>
      <td></td>
      <td>${String(err)}</td>
      <td></td>
    </tr>`;
    return html `<tr>
    <td>${err.name}</td>
    <td>${err.message}</td>
    <td><pre>${err.stack}</pre></td>
  </tr>`;
}
//# sourceMappingURL=play-console.js.map