'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-3596e4f6.js');
const imagePlotlyUtils = require('./imagePlotlyUtils-e26cb1aa.js');

const defaultDataTableCss = "[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-default{display:block;overflow:auto;font-size:.875rem;border-collapse:collapse;font-family:sans-serif;font-family:var(--font-family-body,sans-serif)}[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-default td.sc-stencila-data-table-default,[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-default th.sc-stencila-data-table-default{padding:.25rem .5rem;border-width:1px;border-color:#e2e8f0;border-color:var(--color-neutral-300,#e2e8f0)}[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-default th.sc-stencila-data-table-default{font-weight:700}[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-default tbody.sc-stencila-data-table-default tr.sc-stencila-data-table-default:nth-child(2n),[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-default th.sc-stencila-data-table-default{background-color:#f7fafc;background-color:var(--color-neutral-100,#f7fafc)}";

const materialDataTableCss = "[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-material{display:block;overflow:auto;font-size:.875rem;border-collapse:collapse;font-family:sans-serif;font-family:var(--font-family-body,sans-serif)}[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-material td.sc-stencila-data-table-material,[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-material th.sc-stencila-data-table-material{padding:.25rem .5rem;border-width:1px;border-color:#e2e8f0;border-color:var(--color-neutral-300,#e2e8f0)}[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-material th.sc-stencila-data-table-material{font-weight:700}[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-material tbody.sc-stencila-data-table-material tr.sc-stencila-data-table-material:nth-child(2n),[itemtype=\"https://schema.stenci.la/Datatable\"].sc-stencila-data-table-material th.sc-stencila-data-table-material{background-color:#f7fafc;background-color:var(--color-neutral-100,#f7fafc)}";

const DataTable = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    var _a;
    const cols = this.table.columns;
    const rows = (_a = cols === null || cols === void 0 ? void 0 : cols[0].values.map((_, row) => row)) !== null && _a !== void 0 ? _a : [];
    return (index.h("table", { itemtype: "https://schema.stenci.la/Datatable" }, index.h("thead", null, index.h("tr", null, cols.map(col => (index.h("th", null, col.name))))), index.h("tbody", null, rows.map((_, row) => (index.h("tr", null, cols.map(col => (index.h("td", null, col.values[row])))))))));
  }
};
DataTable.style = {
  default: defaultDataTableCss,
  material: materialDataTableCss
};

const defaultImageObjectCss = ".sc-stencila-image-object-default-h img.sc-stencila-image-object-default,stencila-image-object.sc-stencila-image-object-default img.sc-stencila-image-object-default{height:auto;max-width:100%}";

const materialImageObjectCss = ".sc-stencila-image-object-material-h img.sc-stencila-image-object-material,stencila-image-object.sc-stencila-image-object-material img.sc-stencila-image-object-material{height:auto;max-width:100%}";

const ImageObjectComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h("img", { alt: this.image.text, itemscope: true, itemtype: "http://schema.org/ImageObject", src: this.image.contentUrl }));
  }
};
ImageObjectComponent.style = {
  default: defaultImageObjectCss,
  material: materialImageObjectCss
};

const defaultImagePlotlyCss = ".sc-stencila-image-plotly-default-h{display:block}.sc-stencila-image-plotly-default-h.imgHidden.sc-stencila-image-plotly-default-s>picture>:not(.js-plotly-plot){display:none}";

const materialImagePlotlyCss = ".sc-stencila-image-plotly-material-h{display:block}.sc-stencila-image-plotly-material-h.imgHidden.sc-stencila-image-plotly-material-s>picture>:not(.js-plotly-plot){display:none}";

const plotlySrc = 'https://cdn.plot.ly/plotly-latest.min.js';
let plotlyIsPresent;
let plotlyIsLoaded;
const ImagePlotlyComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.plotlyLoaded = index.createEvent(this, "plotlyLoaded", 7);
    this.plotIsRendered = false;
    this.createPlotContainer = () => {
      this.plotContainer = document.createElement('div');
      const pic = this.el.querySelector('picture');
      pic === null || pic === void 0 ? void 0 : pic.appendChild(this.plotContainer);
      return this.plotContainer;
    };
    this.renderPlot = () => {
      var _a, _b, _c;
      const { data, layout = this.layout, config = this.config } = (_a = this.getPlotContent()) !== null && _a !== void 0 ? _a : {};
      if (!data)
        return;
      const root = (_b = this.plotContainer) !== null && _b !== void 0 ? _b : this.createPlotContainer();
      (_c = window.Plotly) === null || _c === void 0 ? void 0 : _c.react(root, data, layout, config).then(() => {
        if (!this.plotIsRendered) {
          this.plotIsRendered = true;
        }
      }).catch((err) => {
        console.error('Failed to render plot', err);
      });
    };
    /** Inject the Plotly.js script tag if it hasn't been requested yet */
    this.loadPlotly = () => {
      var _a;
      if (this.isPlotlyPresent())
        return;
      const script = document.createElement('script');
      script.setAttribute('src', plotlySrc);
      plotlyIsPresent = true;
      script.addEventListener('load', () => {
        plotlyIsLoaded = true;
        this.plotlyLoaded.emit();
      });
      (_a = document.querySelector('head')) === null || _a === void 0 ? void 0 : _a.appendChild(script);
    };
    /** Check if the Plotly.js script tag is present in the document */
    this.isPlotlyPresent = () => {
      plotlyIsPresent =
        plotlyIsPresent === undefined
          ? document.querySelector(`head script[src="${plotlySrc}"]`) !== null
          : plotlyIsPresent;
      return plotlyIsPresent;
    };
    this.getPlotContent = () => {
      if (this.data) {
        return { data: this.data, layout: this.layout, config: this.config };
      }
      const plotEl = this.el.querySelector(`[type="${imagePlotlyUtils.plotlyMediaType}"]`);
      if (plotEl) {
        try {
          const content = plotEl.textContent;
          const contentParsed = JSON.parse(content !== null && content !== void 0 ? content : '');
          return Array.isArray(contentParsed)
            ? { data: contentParsed }
            : contentParsed;
        }
        catch (err) {
          console.error('Could not parse plot data');
        }
      }
      return undefined;
    };
  }
  /** Render the Plotly data, if it hasn’t been rendered already */
  onPlotlyLoaded() {
    if (!this.plotIsRendered) {
      this.renderPlot();
    }
  }
  componentWillLoad() {
    if (!this.plotIsRendered && plotlyIsLoaded) {
      this.renderPlot();
    }
    else {
      this.loadPlotly();
    }
  }
  componentWillUpdate() {
    this.renderPlot();
  }
  render() {
    return index.h(index.Host, { class: { imgHidden: this.plotIsRendered } });
  }
  get el() { return index.getElement(this); }
};
ImagePlotlyComponent.style = {
  default: defaultImagePlotlyCss,
  material: materialImagePlotlyCss
};

exports.stencila_data_table = DataTable;
exports.stencila_image_object = ImageObjectComponent;
exports.stencila_image_plotly = ImagePlotlyComponent;
