import { Component, Element, h } from "@stencil/core";
import JSONFormatter from "json-formatter-js";
export class JsonViewer {
  formatStringJSON(str) {
    if (!str || !JSON.parse(str))
      return;
    const formatter = new JSONFormatter(JSON.parse(str), 1, {
      theme: window &&
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : null
    });
    this.codeEl.replaceWith(formatter.render());
  }
  componentDidRender() {
    setTimeout(() => {
      try {
        this.formatStringJSON(this.jsonViewerEl.innerText);
      }
      catch (err) {
        console.log(err);
      }
    }, 1500);
  }
  render() {
    return (h("code", { ref: el => (this.codeEl = el) },
      h("slot", null)));
  }
  static get is() { return "floodteam-json-viewer"; }
  static get originalStyleUrls() { return {
    "$": ["json-viewer.css"]
  }; }
  static get styleUrls() { return {
    "$": ["json-viewer.css"]
  }; }
  static get elementRef() { return "jsonViewerEl"; }
}
