import { r as registerInstance, h, H as Host } from './index-b6f10a81.js';
import './state-tunnel-04c0b67a.js';
import { i as injectNotifier } from './index-213e8cee.js';

const dvnComponentDemoCss = ".sc-dvn-component-demo-h{display:inline-flex;flex-direction:column;justify-content:space-between;margin:0 calc(2 * var(--spacing-unit));vertical-align:top;position:relative}.sc-dvn-component-demo-h:first-child{margin-left:0}.sc-dvn-component-demo-h:last-child{margin-right:0}.sc-dvn-component-demo-h dvn-highlighted-code.sc-dvn-component-demo{margin-left:calc(4 * var(--spacing-unit));margin-top:0}.sc-dvn-component-demo-h .flex-column.sc-dvn-component-demo dvn-highlighted-code.sc-dvn-component-demo{margin-top:calc(4 * var(--spacing-unit));margin-left:0}";

const DvnComponentDemo = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.layout = 'vertical';
  }
  render() {
    return (h(Host, null, h("div", { class: {
        'align-items-start': true,
        'd-flex': true,
        'flex-column': this.layout !== 'horizontal',
      } }, h("div", { innerHTML: this.domString, class: "" }), h("dvn-highlighted-code", { leaned: true, textToCopy: this.domString }, this.domString))));
  }
};
DvnComponentDemo.style = dvnComponentDemoCss;

const dvnHighlightedCodeCss = "dvn-highlighted-code{display:inline-block;box-sizing:border-box;margin:calc(4 * var(--spacing-unit));border-radius:var(--corner-radius);background:var(--color-highlighted-code-background);padding:calc(2 * var(--spacing-unit)) calc(4 * var(--spacing-unit));position:relative;max-width:100%;overflow:auto}dvn-highlighted-code pre.prettyprint{background:var(--color-highlighted-code-background)}dvn-highlighted-code.leaned{margin:0}dvn-highlighted-code:hover .controls{opacity:1}dvn-highlighted-code .controls{opacity:0;transition:opacity .3s}dvn-highlighted-code .controls dvn-button{position:absolute;bottom:calc(1 * var(--spacing-unit));right:calc(1 * var(--spacing-unit))}";

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};
const DvnHighlightedCode = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.leaned = false;
  }
  componentDidLoad() {
    setTimeout(() => {
      // @ts-ignore
      (PR || {}).prettyPrint();
    }, 100);
  }
  render() {
    return (h(Host, { class: {
        leaned: this.leaned,
      } }, h("pre", { class: "prettyprint" }, h("slot", null)), this.textToCopy &&
      h("div", { class: "controls" }, h("dvn-icon-button", { iconName: 'uil uil-copy', leaned: true, view: 'flat', tint: 'secondary', onClick: () => {
          copyToClipboard(this.textToCopy);
          this.notifier.congratulate('Copied to clipboard!');
        } }))));
  }
};
injectNotifier(DvnHighlightedCode);
DvnHighlightedCode.style = dvnHighlightedCodeCss;

export { DvnComponentDemo as dvn_component_demo, DvnHighlightedCode as dvn_highlighted_code };
