'use strict';

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

const index = require('./index-51e8292e.js');
const icons = require('./icons-fda820af.js');

const codeCss = "code[class*=\"language-\"],pre[class*=\"language-\"]{color:#4d4d4c;background:none;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=\"language-\"],:not(pre)>code[class*=\"language-\"]{background:hsl(30, 20%, 25%)}pre[class*=\"language-\"]{padding:1em;margin:.5em 0;overflow:auto;border:.3em solid hsl(30, 20%, 40%);border-radius:.5em;box-shadow:1px 1px .5em black inset}:not(pre)>code[class*=\"language-\"]{padding:.15em .2em .05em;border-radius:.3em;border:.13em solid hsl(30, 20%, 40%);box-shadow:1px 1px .3em -.1em black inset;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8c9296}.token.punctuation{opacity:.7}.namespace{opacity:.7}.token.tag{color:#91c5ff}.token.tag .token.tag{color:#2b90ff}.token.property,.token.attr-name,.token.boolean,.token.number,.token.constant,.token.symbol{color:#8454ff}.token.selector,.token.char,.token.function,.token.builtin,.token.inserted{color:#ff6810}.token.operator,.token.string,.token.entity,.token.url,.token.attr-value,.language-css .token.string,.style .token.string,.token.variable{color:#42b983}.token.atrule{color:#ffbb01}.token.regex,.token.keyword,.token.important{color:#f55073}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}sparkle-code[language=\"shell\"]>pre{background-color:var(--text-color--dark);border-radius:7px}sparkle-code[language=\"shell\"]:before{display:none}sparkle-code[language=\"shell\"] code{color:rgba(255, 255, 255, 0.7);font-size:13px}sparkle-code[language=\"shell\"] .token{color:inherit}sparkle-code[language=\"shell\"] .token.prompt{color:#fb96f9;user-select:none}sparkle-code[language=\"shell\"] .token.comment{color:rgba(255, 255, 255, 0.45)}sparkle-code{display:block;position:relative}sparkle-code:before{color:#bdc5d1;content:attr(language);font-family:var(--code-font-family);font-size:10px;letter-spacing:0.05em;line-height:1;padding:0.75em;position:absolute;right:0;text-transform:uppercase;top:0}sparkle-code[language=\"shell\"] pre{white-space:pre-wrap}.code-text__copy{position:absolute;right:0;top:-1.6rem;height:20px}.code-text__copy-link,.code-text__copy-confirmation{padding:4px 5px;font-size:12px;line-height:12px;font-weight:600;position:absolute;right:0;top:0}.code-text__copy-link{transition:0.2s transform ,\r\n    0.2s opacity,\r\n    0.2s color;color:#70A4FF;background-color:#E0EEFF;border-radius:4px;display:inline-block;cursor:pointer;opacity:1;transform:translate3d(0,0,0);z-index:5}.code-text__copy-link:hover{color:var(--blue)}.code-text__copy-confirmation{transition:0.2s transform ,\r\n    0.2s opacity;color:#0ec254;opacity:0;transform:translate3d(0,5px,0);z-index:1;display:flex;align-items:center;height:20px;padding:0}.code-text__copy-confirmation svg{fill:#0ec254;margin-right:-4px}.show-confirmation .code-text__copy-link{opacity:0;transform:translate3d(0,-5px,0);pointer-events:none}.show-confirmation .code-text__copy-confirmation{opacity:1;transform:translate3d(0,0,0)}";

const SparkleCode = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.language = '';
    this.showCopyConfirmation = false;
  }
  copyCodeText() {
    this.showCopyConfirmation = true;
    const codeEl = this.el.querySelector('code');
    const codeText = codeEl && codeEl.textContent || '';
    const el = document.createElement('textarea');
    el.value = codeText;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    setTimeout(() => {
      this.showCopyConfirmation = false;
    }, 2000);
  }
  render() {
    // Only show copy button if the area is not a shell script.
    return (index.h(index.Host, null, !['shell', 'bash', 'sh'].includes(this.language) ?
      index.h("div", { class: { 'code-text__copy': true, 'show-confirmation': this.showCopyConfirmation } }, index.h("a", { class: "code-text__copy-link", onClick: this.copyCodeText.bind(this) }, "Copy"), index.h("span", { class: "code-text__copy-confirmation" }, icons.CheckmarkSoft({ height: '26px', width: '26px' }), "Copied"))
      : ''));
  }
  get el() { return index.getElement(this); }
};
SparkleCode.style = codeCss;

exports.sparkle_code = SparkleCode;
