var h={},o=function(){let y=/\blang(?:uage)?-([\w-]+)\b/i,u=0;var t=h.Prism={manual:h.Prism&&h.Prism.manual,disableWorkerMessageHandler:h.Prism&&h.Prism.disableWorkerMessageHandler,util:{encode(e){return e instanceof p?new p(e.type,t.util.encode(e.content),e.alias):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId(e){return e.__id||Object.defineProperty(e,"__id",{value:++u}),e.__id},clone(e,a){var i=t.util.type(e);switch(a=a||{},i){case"Object":if(a[t.util.objId(e)])return a[t.util.objId(e)];var n={};a[t.util.objId(e)]=n;for(var r in e)e.hasOwnProperty(r)&&(n[r]=t.util.clone(e[r],a));return n;case"Array":if(a[t.util.objId(e)])return a[t.util.objId(e)];var n=[];return a[t.util.objId(e)]=n,e.forEach(function(l,d){n[d]=t.util.clone(l,a)}),n}return e}},languages:{extend(e,a){var i=t.util.clone(t.languages[e]);for(var n in a)i[n]=a[n];return i},insertBefore(e,a,i,n){n=n||t.languages;var r=n[e];if(arguments.length==2){i=arguments[1];for(var l in i)i.hasOwnProperty(l)&&(r[l]=i[l]);return r}var d={};for(var s in r)if(r.hasOwnProperty(s)){if(s==a)for(var l in i)i.hasOwnProperty(l)&&(d[l]=i[l]);d[s]=r[s]}return t.languages.DFS(t.languages,function(f,b){b===n[e]&&f!=e&&(this[f]=d)}),n[e]=d},DFS(e,a,i,n){n=n||{};for(var r in e)e.hasOwnProperty(r)&&(a.call(e,r,e[r],i||r),t.util.type(e[r])==="Object"&&!n[t.util.objId(e[r])]?(n[t.util.objId(e[r])]=!0,t.languages.DFS(e[r],a,null,n)):t.util.type(e[r])==="Array"&&!n[t.util.objId(e[r])]&&(n[t.util.objId(e[r])]=!0,t.languages.DFS(e[r],a,r,n)))}},plugins:{},highlightAll(e,a){t.highlightAllUnder(document,e,a)},highlightAllUnder(e,a,i){var n={callback:i,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};t.hooks.run("before-highlightall",n);for(var r=n.elements||e.querySelectorAll(n.selector),l=0,d;d=r[l++];)t.highlightElement(d,a===!0,n.callback)},highlightElement(e,a,i){for(var n,r,l=e;l&&!y.test(l.className);)l=l.parentNode;l&&(n=(l.className.match(y)||[,""])[1].toLowerCase(),r=t.languages[n]),e.className=e.className.replace(y,"").replace(/\s+/g," ")+" language-"+n,e.parentNode&&(l=e.parentNode,/pre/i.test(l.nodeName)&&(l.className=l.className.replace(y,"").replace(/\s+/g," ")+" language-"+n));var d=e.textContent,s={element:e,language:n,grammar:r,code:d};if(t.hooks.run("before-sanity-check",s),!s.code||!s.grammar){s.code&&(t.hooks.run("before-highlight",s),s.element.textContent=s.code,t.hooks.run("after-highlight",s)),t.hooks.run("complete",s);return}if(t.hooks.run("before-highlight",s),a&&h.Worker){var f=new Worker(t.filename);f.onmessage=function(b){s.highlightedCode=b.data,t.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,i&&i.call(s.element),t.hooks.run("after-highlight",s),t.hooks.run("complete",s)},f.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else s.highlightedCode=t.highlight(s.code,s.grammar,s.language),t.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,i&&i.call(e),t.hooks.run("after-highlight",s),t.hooks.run("complete",s)},highlight(e,a,i){var n={code:e,grammar:a,language:i};return t.hooks.run("before-tokenize",n),n.tokens=t.tokenize(n.code,n.grammar),t.hooks.run("after-tokenize",n),p.stringify(t.util.encode(n.tokens),n.language)},matchGrammar(e,a,i,n,r,l,d){var s=t.Token;for(var f in i)if(!(!i.hasOwnProperty(f)||!i[f])){if(f==d)return;var b=i[f];b=t.util.type(b)==="Array"?b:[b];for(var j=0;j<b.length;++j){var g=b[j],T=g.inside,M=!!g.lookbehind,z=!!g.greedy,C=0,O=g.alias;if(z&&!g.pattern.global){var N=g.pattern.toString().match(/[imuy]*$/)[0];g.pattern=RegExp(g.pattern.source,N+"g")}g=g.pattern||g;for(var m=n,k=r;m<a.length;k+=a[m].length,++m){var v=a[m];if(a.length>e.length)return;if(!(v instanceof s)){if(z&&m!=a.length-1){g.lastIndex=k;var c=g.exec(e);if(!c)break;for(var F=c.index+(M?c[1].length:0),P=c.index+c[0].length,w=m,x=k,H=a.length;w<H&&(x<P||!a[w].type&&!a[w-1].greedy);++w)x+=a[w].length,F>=x&&(++m,k=x);if(a[m]instanceof s)continue;_=w-m,v=e.slice(k,x),c.index-=k}else{g.lastIndex=0;var c=g.exec(v),_=1}if(!c){if(l)break;continue}M&&(C=c[1]?c[1].length:0);var F=c.index+C,c=c[0].slice(C),P=F+c.length,$=v.slice(0,F),I=v.slice(P),S=[m,_];$&&(++m,k+=$.length,S.push($));var B=new s(f,T?t.tokenize(c,T):c,O,c,z);if(S.push(B),I&&S.push(I),Array.prototype.splice.apply(a,S),_!=1&&t.matchGrammar(e,a,i,m,k,!0,f),l)break}}}}},tokenize(e,a,i){var n=[e],r=a.rest;if(r){for(var l in r)a[l]=r[l];delete a.rest}return t.matchGrammar(e,n,a,0,0,!1),n},hooks:{all:{},add(e,a){var i=t.hooks.all;i[e]=i[e]||[],i[e].push(a)},run(e,a){var i=t.hooks.all[e];if(!(!i||!i.length))for(var n=0,r;r=i[n++];)r(a)}}},p=t.Token=function(e,a,i,n,r){this.type=e,this.content=a,this.alias=i,this.length=(n||"").length|0,this.greedy=!!r};return p.stringify=function(e,a,i){if(typeof e=="string")return e;if(t.util.type(e)==="Array")return e.map(l=>p.stringify(l,a,e)).join("");let n={type:e.type,content:p.stringify(e.content,a,i),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:i};if(e.alias){let l=t.util.type(e.alias)==="Array"?e.alias:[e.alias];Array.prototype.push.apply(n.classes,l)}t.hooks.run("wrap",n);let r=Object.keys(n.attributes).map(l=>l+'="'+(n.attributes[l]||"").replace(/"/g,"&quot;")+'"').join(" ");return`<${n.tag} class="${n.classes.join(" ")}"${r?" "+r:""}>${n.content}</${n.tag}>`},h.document||h.addEventListener&&(t.disableWorkerMessageHandler||h.addEventListener("message",e=>{var a=JSON.parse(e.data),i=a.language,n=a.code,r=a.immediateClose;h.postMessage(t.highlight(n,t.languages[i],i)),r&&h.close()},!1)),h.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=o);typeof global!="undefined"&&(global.Prism=o);o.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i};o.languages.markup.tag.inside["attr-value"].inside.entity=o.languages.markup.entity;o.hooks.add("wrap",y=>{y.type==="entity"&&(y.attributes.title=y.content.replace(/&amp;/,"&"))});o.languages.xml=o.languages.markup;o.languages.html=o.languages.markup;o.languages.mathml=o.languages.markup;o.languages.svg=o.languages.markup;o.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/};o.languages.css.atrule.inside.rest=o.languages.css;o.languages.markup&&(o.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:o.languages.css,alias:"language-css",greedy:!0}}),o.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:o.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:o.languages.css}},alias:"language-css"}},o.languages.markup.tag));o.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};o.languages.javascript=o.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/});o.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/});o.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}});o.languages.javascript["template-string"].inside.interpolation.inside.rest=o.languages.javascript;o.languages.markup&&o.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:o.languages.javascript,alias:"language-javascript",greedy:!0}});o.languages.js=o.languages.javascript;var L=o;var A=class extends HTMLElement{attributeChangedCallback(u,t,p){t!==p&&(this[u]=p)}get source(){return this._source}set source(u){this._source=u,this.setSource()}constructor(){super();let u=document.createElement("template");u.innerHTML=A.default(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(u.content,!0)),this.sourceElement=this.shadowRoot.getElementById("source")}setSource(){let u=this._source;u=u.replace(/</g,"&lt;"),u=u.replace(/>/g,"&gt;"),this.sourceElement.innerHTML=u,L.highlightElement(this.sourceElement)}static default(){return`
      <style>
      /**
      * okaidia theme for JavaScript, CSS and HTML
      * Loosely based on Monokai textmate theme by http://www.monokai.nl/
      * @author ocodia
      */

      code[class*="language-"],
      pre[class*="language-"] {
        color: #f8f8f2;
        background: none;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 1em;
        text-align: left;
        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;
      }

      /* Code blocks */
      pre[class*="language-"] {
        padding: 1em;
        margin: .5em 0;
        overflow: auto;
        border-radius: 0.3em;
      }

      :not(pre) > code[class*="language-"],
      pre[class*="language-"] {
        background: #272822;
      }

      /* Inline code */
      :not(pre) > code[class*="language-"] {
        padding: .1em;
        border-radius: .3em;
        white-space: normal;
      }

      .token.comment,
      .token.prolog,
      .token.doctype,
      .token.cdata {
        color: slategray;
      }

      .token.punctuation {
        color: #f8f8f2;
      }

      .namespace {
        opacity: .7;
      }

      .token.property,
      .token.tag,
      .token.constant,
      .token.symbol,
      .token.deleted {
        color: #f92672;
      }

      .token.boolean,
      .token.number {
        color: #ae81ff;
      }

      .token.selector,
      .token.attr-name,
      .token.string,
      .token.char,
      .token.builtin,
      .token.inserted {
        color: #a6e22e;
      }

      .token.operator,
      .token.entity,
      .token.url,
      .language-css .token.string,
      .style .token.string,
      .token.variable {
        color: #f8f8f2;
      }

      .token.atrule,
      .token.attr-value,
      .token.function,
      .token.class-name {
        color: #e6db74;
      }

      .token.keyword {
        color: #66d9ef;
      }

      .token.regex,
      .token.important {
        color: #fd971f;
      }

      .token.important,
      .token.bold {
        font-weight: bold;
      }
      .token.italic {
        font-style: italic;
      }

      .token.entity {
        cursor: help;
      }
      </style>
      <pre><code id="source" class="language-html"></code></pre>`}};customElements.define("source-element",A);var E=class extends HTMLElement{static get observedAttributes(){return["title","link","desc","src"]}attributeChangedCallback(u,t,p){!this.__initialized||t!==p&&(this[u]=p)}get title(){return this.getAttribute("title")}set title(u){this.setAttribute("title",u),this.setTitle()}get link(){return this.getAttribute("link")}set link(u){this.setAttribute("link",u),this.setLink()}get desc(){return this.getAttribute("desc")}set desc(u){this.setAttribute("desc",u),this.setDescription()}get src(){return this.getAttribute("src")}set src(u){this.setAttribute("src",u),this.setSrc()}constructor(){super();let u=document.createElement("template");u.innerHTML=E.template(),this.appendChild(u.content.cloneNode(!0)),this.__initialized=null,this.titleElement=this.querySelector("#title"),this.linkElement=this.querySelector("#link"),this.descElement=this.querySelector("#description"),this.sourceElement=this.querySelector("#source"),this.outputElement=this.querySelector("#output")}async connectedCallback(){this.hasAttribute("link")&&this.setLink(),this.hasAttribute("desc")&&this.setDescription(),this.hasAttribute("title")&&this.setTitle(),this.hasAttribute("src")&&this.setSrc(),this.__initialized=!0}setTitle(){this.titleElement.innerText=this.getAttribute("title")}setLink(){this.linkElement.href=this.getAttribute("link")}setDescription(){this.descElement.innerText=this.getAttribute("desc")}async setSrc(){let u=this.getAttribute("src");this.source=await this.fetchSrc(u),this.sourceElement.source=this.source,this.outputElement.innerHTML=this.source}async fetchSrc(u){return(await fetch(u)).text()}static template(){return`
      <style>
      @import url('https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro');

      body {
        font-family: 'Lato', san-serif;
      }

      h1, h2, h3, h4, h5 {
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        margin: 0;
      }

      h2 {
        margin-bottom: 10px;
      }

      hr {
        margin: 20px;
      }

      textarea {
        width:100%;
        white-space: nowrap;
      }

      code {
        font-family: 'Source Code Pro', monospace;
      }

      #header {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        background: #333333;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        z-index: 999;
      }

      #title {
        float: left;
        padding-top: 10px;
        padding-left: 10%;
        color: white;
        font-size: 1.25rem;
      }

      #link {
        float: right;
        padding-top: 10px;
        padding-right: 10%;
        font-size: 1.25rem;
        font-weight: 600;
        text-decoration: none;
        color: white;
      }

      #container {
        width: 80%;
        max-width: 960px;
        padding: 0 50px 0 50px;
        margin: 0 auto;
        display: block;
        overflow-x: hidden;
        background: #F0F0F0;
      }

      #content {
        background: #F0F0F0;
        margin: 50px auto 0 auto;
        padding: 20px 0 20px 0;
      }

      #run {
        margin-top: 10px;
        border-radius: 15%;
      }

      #output {
        display: block;
        overflow: auto;
        background-color: lightblue;
        padding: .5em;
      }
      </style>

      <div id="header">
        <h1 id="title"></h1>
        <h1><a id="link">GitHub</a></h1>
      </div>
      <div id="container">
        <section id="content">
          <h2>Description</h2>
          <p id="description"></p>
          <hr>
          <h2>Usage</h2>
          <source-element id="source"></source-element>
          <hr />
          <h2>Output</h2>
          <div id="output"></div>
        </section>
      </div>
      `}};customElements.define("wc-demo",E);export{E as WCDemo};