'use strict';

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

const index = require('./index-36b3af04.js');
const index$1 = require('./index-4d2f1ab7.js');
require('./state-tunnel-786a62ce.js');

const dvnComponentDemoCss = ".sc-dvn-component-demo-h{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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) {
    index.registerInstance(this, hostRef);
    this.layout = 'vertical';
  }
  render() {
    return (index.h(index.Host, null, index.h("div", { class: {
        'align-items-start': true,
        'd-flex': true,
        'flex-column': this.layout !== 'horizontal',
      } }, index.h("div", { innerHTML: this.domString, class: "" }), index.h("dvn-highlighted-code", { leaned: true, textToCopy: this.domString }, this.domString))));
  }
};
DvnComponentDemo.style = dvnComponentDemoCss;

const dvnHighlightedCodeCss = "dvn-highlighted-code{display:inline-block;-webkit-box-sizing:border-box;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.condensed{padding:0}dvn-highlighted-code.condensed pre.prettyprint{margin:8px}dvn-highlighted-code.condensed .controls{position:absolute;right:0;top:0;bottom:0}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;-webkit-transition:opacity .3s;transition:opacity .3s}dvn-highlighted-code:not(.condensed) .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) {
    index.registerInstance(this, hostRef);
    this.leaned = false;
    this.condensed = false;
  }
  componentDidLoad() {
    setTimeout(() => {
      // @ts-ignore
      (PR || {}).prettyPrint();
    }, 100);
  }
  render() {
    return (index.h(index.Host, { class: {
        leaned: this.leaned,
        condensed: this.condensed,
      } }, index.h("pre", { class: "prettyprint" }, index.h("slot", null)), this.textToCopy &&
      index.h("div", { class: "controls" }, index.h("dvn-icon-button", { iconName: 'uil uil-copy', leaned: true, view: this.condensed ? 'solid' : 'flat', shape: this.condensed ? 'square' : 'rounded', tint: 'secondary', onClick: () => {
          copyToClipboard(this.textToCopy);
          this.notifier.congratulate('Copied to clipboard!');
        } }))));
  }
};
index$1.injectNotifier(DvnHighlightedCode);
DvnHighlightedCode.style = dvnHighlightedCodeCss;

exports.dvn_component_demo = DvnComponentDemo;
exports.dvn_highlighted_code = DvnHighlightedCode;
