@magnit-ce/code-example
Version:
A custom HTML element that renders code in a syntax-highlight text block, and the results of that code in a display frame.
557 lines (506 loc) • 40 kB
JavaScript
var K=`:host,* { box-sizing: border-box; }
:host
{
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
--gap-small: 3px;
--gap-medium: 6px;
--spinner-track: oklch(25.11% 0.006 258.36 / .2);
--spinner-thumb: oklch(25.11% 0.006 258.36);
--surface-header: oklch(25.11% 0.006 258.36);
--surface-source: oklch(91.87% 0.003 264.54);
--surface-html: oklch(74.61% 0.171 51.56);
--surface-css: oklch(54.87% 0.222 260.33);
--surface-code: oklch(80.73% 0.002 247.84);
--surface-js: oklch(89% 0.146 91.5);
--surface-success: oklch(70.03% 0.194 144.71);
--surface-error: oklch(54.41% 0.214 19.06);
--text-header: oklch(61.01% 0.005 271.34);
--text-source: oklch(25.11% 0.006 258.36);
--text-html: oklch(32.49% 0.113 51.98);
--text-css: oklch(89.66% 0.046 260.67);
--text-code: oklch(35.02% 0.005 236.66);
--text-js: oklch(42.29% 0.097 91.9);
--badge-size: 26px;
color-scheme: light dark;
display: grid;
gap: var(--gap-medium);
margin: var(--gap-medium);
font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif)
}
#sources
{
display: grid;
gap: var(--gap-medium);
overflow: hidden;
grid-row: 1;
}
.panel
{
overflow: hidden;
counter-reset: line;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
}
#code-source-panel
{
display: none;
}
:host(.show-code) #code-source-panel
{
display: grid;
}
#html-source-panel
{
display: none;
}
:host(.show-html) #html-source-panel
{
display: grid;
}
#style-source-panel
{
display: none;
}
:host(.show-style) #style-source-panel
{
display: grid;
}
.source-header
{
grid-column: span 2;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: flex-end;
font-size: 18px;
font-weight: bold;
gap: var(--gap-medium);
padding: var(--gap-medium);
background-color: var(--surface-header);
color: var(--text-header);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
user-select: none;
}
.badge
{
width: var(--badge-size);
height: var(--badge-size);
display: inline-flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 9px;
font-weight: bold;
padding: 2px;
border-radius: 2px;
box-sizing: border-box;
}
#html-source-badge
{
background-color: var(--surface-html);
color: var(--text-html);
font-size: 7px;
}
#style-source-badge
{
background-color: var(--surface-css);
color: var(--text-css);
}
#code-source-badge
{
background-color: var(--surface-code);
color: var(--text-code);
}
.language-js #code-source-badge
,.language-javascript #code-source-badge
{
background-color: var(--surface-js);
color: var(--text-js);
}
button.copy
{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: none;
border: none;
padding: 0;
margin: 0;
--icon-primary-color: var(--text-header);
--icon-secondary-color: var(--surface-header);
}
button.copy:hover
{
--icon-primary-color: var(--surface-source);
}
.icon
{
width: var(--copy-button-size, 20px);
height: var(--copy-button-size, 20px);
grid-column: 1;
grid-row: 1;
}
.icon.success
{
--icon-primary-color: var(--surface-success);
opacity: 0;
}
.icon.error
{
--icon-primary-color: var(--surface-error);
opacity: 0;
}
.panel.success .icon.success
,.panel.error .icon.error
{
opacity: 1;
}
.panel:is(.success,.error) .icon.copy
{
opacity: 0;
}
.panel.success .icon.success
{
animation: bounce-in .75s ease forwards;
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: scale(.3);
}
20% {
opacity: 1;
transform: scale(1.1);
}
30% { transform: scale(.9); }
100% { transform: scale(1) rotate(1deg); }
}
.panel.error .icon.error {
animation: shake .35s linear forwards;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30% { transform: translateX(-2px); }
50%, 70% { transform: translateX(-1px); }
90% { transform: translateX(-.5px); }
20% { transform: translateX(2px); }
40%, 60% { transform: translateX(1px); }
80% { transform: translateX(.5px); }
}
code.source
{
min-height: 27px;
min-width: 70px;
display: block;
border-bottom-right-radius: 3px;
}
.line-numbers
{
border-right: solid 1px #222;
display: grid;
grid-auto-rows: min-content;
width: 4ch;
color: #ccc;
background: #2d2d2d;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
white-space: pre;
line-height: 1.5;
padding: 1em 0;
border-bottom-left-radius: 3px;
}
.line-number
{
display: flex;
justify-content: flex-end;
counter-increment: line;
}
.line-number:before
{
content: counter(line);
display: inline-block;
text-align: right;
padding-right: 0.5em;
color: #888;
user-select: none;
}
#preview
{
border: none;
width: 100%;
height: 100%;
grid-row: 1;
grid-column: 2;
}
::slotted(preview)
{
grid-row: 1;
grid-column: 2;
}
#spinner
{
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid var(--spinner-track);
border-right: 1.1em solid var(--spinner-track);
border-bottom: 1.1em solid var(--spinner-track);
border-left: 1.1em solid var(--spinner-thumb);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: spin 1.1s infinite linear;
animation: spin 1.1s infinite linear;
opacity: 0;
pointer-events: none;
z-index: 10;
}
#spinner,
#spinner:after
{
border-radius: 50%;
width: var(--spinner-size, 50px);
height: var(--spinner-size, 50px);
}
:host(.loading) #spinner
,:host([loading]) #spinner
{
opacity: 1;
pointer-events: initial;
}
:host([theme="vs-dark"])
,:host([theme="hc-black"])
{
--spinner-track: rgba(255, 255, 255, 0.2);
--spinner-thumb: #ffffff;
}
@keyframes spin
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#icon-templates
{
display: none;
}
@media (max-width: 665px)
{
:host
{
grid-template-columns: 1fr;
}
}`;var G=`/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"]{
color: #ccc;
background: #2d2d2d;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
white-space: pre;
line-height: 1.5;
padding: 1em;
overflow: auto;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
`;var N=`<div id="sources">
<div id="code-source-panel" class="panel">
<header id="code-source-header" class="source-header">
<slot name="code-badge">
<span id="code-source-badge" class="badge"></></span>
</slot>
<slot name="code-title">
<span id="code-source-title" class="title">Code</span>
</slot>
<button class="copy" type="button" title="Copy example code">
<svg class="icon copy" part="svg icon button-icon copy code">
<use href="#icon-definition_copy"></use>
</svg>
<svg class="icon error" part="svg icon button-icon error code">
<use href="#icon-definition_cancel-cross"></use>
</svg>
<svg class="icon success" part="svg icon button-icon success code">
<use href="#icon-definition_confirm-check"></use>
</svg>
</button>
</header>
<div class="line-numbers"></div>
<code id="code-source" class="source line-numbers"></code>
</div>
<div id="html-source-panel" class="panel">
<header id="html-source-header" class="source-header">
<span id="html-source-badge" class="badge">HTML</span>
<span id="html-source-title" class="title">HTML</span>
<button class="copy" type="button" title="Copy html code">
<svg class="icon copy" part="svg icon button-icon copy html">
<use href="#icon-definition_copy"></use>
</svg>
<svg class="icon error" part="svg icon button-icon error html">
<use href="#icon-definition_cancel-cross"></use>
</svg>
<svg class="icon success" part="svg icon button-icon success html">
<use href="#icon-definition_confirm-check"></use>
</svg>
</button>
</header>
<div class="line-numbers"></div>
<code id="html-source" class="source"></code>
</div>
<div id="style-source-panel" class="panel">
<header id="style-source-header" class="source-header">
<span id="style-source-badge" class="badge">CSS</span>
<span id="style-source-title" class="title">CSS</span>
<button class="copy" type="button" title="Copy style code">
<svg class="icon copy" part="svg icon button-icon copy style">
<use href="#icon-definition_copy"></use>
</svg>
<svg class="icon error" part="svg icon button-icon error style">
<use href="#icon-definition_cancel-cross"></use>
</svg>
<svg class="icon success" part="svg icon button-icon success style">
<use href="#icon-definition_confirm-check"></use>
</svg>
</button>
</header>
<div class="line-numbers"></div>
<code id="style-source" class="source"></code>
</div>
</div>
<slot name="preview">
<iframe id="preview"></iframe>
</slot>
<div id="spinner"></div>
<template id="preview-template">
{style}
{slot}
{script}
</template>
<div id="icon-templates">
<svg id="icon-definition_copy" class="icon copy" viewBox="0 0 22.812714 26.814663" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<rect style="fill:var(--icon-primary-color,CanvasText);stroke:var(--icon-secondary-color,canvas);fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" width="13.417392" height="18.483608" x="3.3747442" y="5.2238607" rx="0.35822684" ry="0.41754472"></rect>
<rect style="fill:var(--icon-primary-color,CanvasText);stroke:var(--icon-secondary-color,canvas);fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" width="13.417392" height="18.483608" x="8.0205779" y="1.1071939" rx="0.35822684" ry="0.41754472"></rect>
</svg>
<svg id="icon-definition_cancel-cross" class="icon cancel-cross" viewBox="0 0 22.812714 22.814663" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path
style="color:#000000;fill:var(--icon-primary-color,InfoText);stroke:var(--icon-secondary-color,InfoBackground);stroke-linecap:square;stroke-miterlimit:6.3;stroke-dashoffset:29.2913;stroke-opacity:1;-inkscape-stroke:none"
d="m 1237.4389,207.63366 -1.8991,1.8987 a 0.65841136,0.65841136 90.003442 0 0 0,0.93116 l 0.4831,0.48317 a 14628.329,14628.329 44.999244 0 0 0.9312,0.93118 l 3.7936,3.79311 a 0.65840885,0.65840885 89.998393 0 1 0,0.93116 l -3.7936,3.7936 a 8783.6896,8783.6896 135.00442 0 1 -0.9313,0.93111 l -0.4829,0.48283 a 0.65811,0.65811 89.993977 0 0 10e-5,0.93094 l 1.8987,1.89741 a 0.65867085,0.65867085 179.98891 0 0 0.9314,-1.8e-4 l 0.4826,-0.48267 a 45427.77,45427.77 134.99941 0 1 0.9312,-0.93119 l 3.7931,-3.79308 a 0.65848899,0.65848899 179.99848 0 1 0.9312,-2e-5 l 3.7936,3.79312 a 10110.91,10110.91 44.992994 0 0 0.9313,0.93108 l 0.483,0.48285 a 0.65856615,0.65856615 179.99438 0 0 0.9313,-9e-5 l 1.897,-1.89705 a 0.65833101,0.65833101 89.994378 0 0 -10e-5,-0.93111 l -0.483,-0.48285 a 5293.5057,5293.5057 44.99639 0 1 -0.9313,-0.93113 l -3.793,-3.79354 a 0.65849247,0.65849247 90.001607 0 1 0,-0.93122 l 3.793,-3.79305 a 149190.44,149190.44 134.99995 0 1 0.9312,-0.93119 l 0.4832,-0.48321 a 0.65863247,0.65863247 90.008202 0 0 10e-5,-0.93132 l -1.8972,-1.89834 a 0.65838576,0.65838576 0.01346964 0 0 -0.9312,-2.2e-4 l -0.483,0.48285 a 7148.543,7148.543 135.00546 0 0 -0.9313,0.9311 l -3.7936,3.79359 a 0.65841791,0.65841791 0.00151591 0 1 -0.9312,-3e-5 l -3.7931,-3.79353 a 52707.551,52707.551 45.002134 0 0 -0.9312,-0.93122 l -0.4826,-0.48267 a 0.65849044,0.65849044 0.00323988 0 0 -0.9312,-5e-5 z"
transform="translate(-1232.6358,-204.72848)" />
</svg>
<svg id="icon-definition_confirm-check" class="icon confirm-check" viewBox="0 0 22.812714 22.814663" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path
style="color:#000000;fill:var(--icon-primary-color,InfoText);stroke:var(--icon-secondary-color,InfoBackground);stroke-linecap:square;stroke-miterlimit:6.3;stroke-dashoffset:29.2913;stroke-opacity:1;-inkscape-stroke:none"
d="m 1217.8244,205.78897 -0.2601,0.45136 a 1678.5796,1678.5796 119.92232 0 0 -0.7375,1.28138 l -5.9817,10.40385 a 0.56505518,0.56505518 172.50336 0 1 -0.8902,0.11714 l -2.5269,-2.53657 a 11807.915,11807.915 45.113224 0 1 -1.0433,-1.04749 l -0.369,-0.37041 a 0.73898684,0.73898684 0.10741692 0 0 -1.0452,-0.002 l -1.7867,1.78058 a 0.73898921,0.73898921 90.088719 0 0 -0,1.04526 l 0.3681,0.36914 a 1932.0309,1932.0309 45.101339 0 1 1.0436,1.04728 l 6.2204,6.24724 a 0.56490867,0.56490867 172.50982 0 0 0.8901,-0.11702 l 8.5912,-14.94289 a 3197.1389,3197.1389 119.88313 0 0 0.7367,-1.28189 l 0.2597,-0.45232 a 0.7394065,0.7394065 74.876753 0 0 -0.2727,-1.00934 l -2.185,-1.25556 a 0.74005456,0.74005456 164.91559 0 0 -1.0099,0.27222 z"
transform="translate(-1200.7725,-203.67043)" />
</svg>
</div>`;var O=typeof window<"u"?window:typeof WorkerGlobalScope<"u"&&self instanceof WorkerGlobalScope?self:{},T=O;var M=class{constructor(e={}){let n={},{disableWorkerMessageHandler:r,manual:a}=e;this.manual=a,this.manual==null&&(this.manual=!0),this.plugins={};let o=this;this.disableWorkerMessageHandler=!!r,this.Token=A,this.util=new D(this);let s=this.util;if(this.languages={plain:n,plaintext:n,text:n,txt:n,extend:(l,p)=>{let m=this.util.clone(this.languages[l]);for(var c in p)m[c]=p[c];return m},insertBefore:(l,p,m,c)=>{c||(c=this.languages);let d=c[l],f={};for(let v in d)if(d.hasOwnProperty(v)){if(v==p)for(var h in m)m.hasOwnProperty(h)&&(f[h]=m[h]);m.hasOwnProperty(v)||(f[v]=d[v])}var g=c[l];return c[l]=f,this.languages.DFS(this.languages,function(v,b){b===g&&v!=l&&(this[v]=f)}),f},DFS(l,p,m,c){c=c||{};var d=s.objId;for(var f in l)if(l.hasOwnProperty(f)){p.call(l,f,l[f],m||f);var h=l[f],g=s.type(h);g==="Object"&&!c[d(h)]?(c[d(h)]=!0,this.DFS(h,p,null,c)):g==="Array"&&!c[d(h)]&&(c[d(h)]=!0,this.DFS(h,p,f,c))}}},this.hooks={all:{},add:function(l,p){var m=o.hooks.all;m[l]=m[l]||[],m[l].push(p)},run:function(l,p){var m=o.hooks.all[l];if(!(!m||!m.length))for(var c=0,d;d=m[c++];)d(p)}},!T.document)return T.addEventListener&&(o.disableWorkerMessageHandler||T.addEventListener("message",function(l){var p=JSON.parse(l.data),m=p.language,c=p.code,d=p.immediateClose;T.postMessage(o.highlight(c,o.languages[m],m)),d&&O.close()},!1)),o;function u(){o.manual||o.highlightAll()}let i=this.util.currentScript();if(i&&(this.filename=i.src,i.hasAttribute("data-manual")&&(o.manual=!0)),!o.manual){var y=document.readyState;y==="loading"||y==="interactive"&&i&&i.defer?document.addEventListener("DOMContentLoaded",u):window.requestAnimationFrame?window.requestAnimationFrame(u):window.setTimeout(u,16)}}highlightAll(e,n){this.highlightAllUnder(document,e,n)}highlightAllUnder(e,n,r){var a={callback:r,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};this.hooks.run("before-highlightall",a),a.elements=Array.prototype.slice.apply(a.container.querySelectorAll(a.selector)),this.hooks.run("before-all-elements-highlight",a);for(var o=0,s;s=a.elements[o++];)this.highlightElement(s,n===!0,a.callback)}highlightElement(e,n,r){var a=this.util.getLanguage(e),o=this.languages[a];this.util.setLanguage(e,a);var s=e.parentElement;s&&s.nodeName.toLowerCase()==="pre"&&this.util.setLanguage(s,a);var u=e.textContent,i={element:e,language:a,grammar:o,code:u};let y=p=>{i.highlightedCode=p,this.hooks.run("before-insert",i),i.element.innerHTML=i.highlightedCode,this.hooks.run("after-highlight",i),this.hooks.run("complete",i),r&&r.call(i.element)};if(this.hooks.run("before-sanity-check",i),s=i.element.parentElement,s&&s.nodeName.toLowerCase()==="pre"&&!s.hasAttribute("tabindex")&&s.setAttribute("tabindex","0"),!i.code){this.hooks.run("complete",i),r&&r.call(i.element);return}if(this.hooks.run("before-highlight",i),!i.grammar){y(this.util.encode(i.code));return}if(n&&O.Worker){var l=new Worker(this.filename);l.onmessage=function(p){y(p.data)},l.postMessage(JSON.stringify({language:i.language,code:i.code,immediateClose:!0}))}else y(this.highlight(i.code,i.grammar,i.language))}highlight(e,n,r){var a={code:e,grammar:n,language:r};if(this.hooks.run("before-tokenize",a),!a.grammar)throw new Error('The language "'+a.language+'" has no grammar.');return a.tokens=this.tokenize(a.code,a.grammar),this.hooks.run("after-tokenize",a),A.stringify(this.util.encode(a.tokens),a.language,this)}tokenize(e,n){var r=n?.rest;if(r){for(var a in r)n[a]=r[a];delete n.rest}var o=new oe;return _(o,o.head,e),X(e,o,n,o.head,0,this),le(o)}},A=class{constructor(e,n,r,a){this.type=e,this.content=n,this.alias=r,this.length=(a||"").length|0}static stringify(e,n,r){let a=this;if(typeof e=="string")return e;if(Array.isArray(e)){var o="";return e.forEach(function(l){o+=a.stringify(l,n,r)}),o}var s={type:e.type,content:a.stringify(e.content,n,r),tag:"span",classes:["token",e.type],attributes:{},language:n},u=e.alias;u&&(Array.isArray(u)?Array.prototype.push.apply(s.classes,u):s.classes.push(u)),r.hooks.run("wrap",s);var i="";for(var y in s.attributes)i+=" "+y+'="'+(s.attributes[y]||"").replace(/"/g,""")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'"'+i+">"+s.content+"</"+s.tag+">"}},Z=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,se=0,D=class{constructor(e){this.prism=e}encode=e=>{if(e instanceof A){let n=e.content;return new A(e.type,this.encode(n),e.alias)}else return Array.isArray(e)?e.map(n=>this.encode(n)):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")};type(e){return Object.prototype.toString.call(e).slice(8,-1)}getLanguage(e){for(;e;){var n=Z.exec(e.className);if(n)return n[1].toLowerCase();e=e.parentElement}return"none"}setLanguage(e,n){e.className=e.className.replace(RegExp(Z,"gi"),""),e.classList.add("language-"+n)}objId(e){return e.__id||Object.defineProperty(e,"__id",{value:++se}),e.__id}clone(e){return structuredClone(e)}isActive(e,n,r){for(var a="no-"+n;e;){var o=e.classList;if(o.contains(n))return!0;if(o.contains(a))return!1;e=e.parentElement}return!!r}currentScript(){if(typeof document>"u")return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(a){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(a.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var r in n)if(n[r].src==e)return n[r]}return null}}};function W(t,e,n,r){t.lastIndex=e;var a=t.exec(n);if(a&&r&&a[1]){var o=a[1].length;a.index+=o,a[0]=a[0].slice(o)}return a}function X(t,e,n,r,a,o,s){for(var u in n)if(!(!n.hasOwnProperty(u)||!n[u])){var i=n[u];i=Array.isArray(i)?i:[i];for(var y=0;y<i.length;++y){if(s&&s.cause==u+","+y)return;var l=i[y],p=l.inside,m=!!l.lookbehind,c=!!l.greedy,d=l.alias;if(c&&!l.pattern.global){var f=l.pattern.toString().match(/[imsuy]*$/)[0];l.pattern=RegExp(l.pattern.source,f+"g")}for(var h=l.pattern||l,g=r.next,v=a;g!==e.tail&&!(s&&v>=s.reach);v+=g.value.length,g=g.next){var b=g.value;if(e.length>t.length)return;if(!(b instanceof A)){var x=1,w;if(c){if(w=W(h,v,t,m),!w||w.index>=t.length)break;var $=w.index,S=w.index+w[0].length,k=v;for(k+=g.value.length;$>=k;)g=g.next,k+=g.value.length;if(k-=g.value.length,v=k,g.value instanceof A)continue;for(var E=g;E!==e.tail&&(k<S||typeof E.value=="string");E=E.next)x++,k+=E.value.length;x--,b=t.slice(v,k),w.index-=v}else if(w=W(h,0,b,m),!w)continue;var $=w.index,C=w[0],H=b.slice(0,$),U=b.slice($+C.length),q=v+b.length;s&&q>s.reach&&(s.reach=q);var L=g.prev;H&&(L=_(e,L,H),v+=H.length),ie(e,L,x);var te=new A(u,p?o.tokenize(C,p):C,d,C);if(g=_(e,L,te),U&&_(e,g,U),x>1){var I={cause:u+","+y,reach:q};X(t,e,n,g.prev,v,o,I),s&&I.reach>s.reach&&(s.reach=I.reach)}}}}}}function oe(){var t={value:null,prev:null,next:null},e={value:null,prev:t,next:null};t.next=e,this.head=t,this.tail=e,this.length=0}function _(t,e,n){var r=e.next,a={value:n,prev:e,next:r};return e.next=a,r.prev=a,t.length++,a}function ie(t,e,n){for(var r=e.next,a=0;a<n&&r!==t.tail;a++)r=r.next;e.next=r,r.prev=e,t.length-=a}function le(t){for(var e=[],n=t.head.next;n!==t.tail;)e.push(n.value),n=n.next;return e}function F(t,e){typeof t>"u"||e?.force!==!0&&t.languages.markup||(t.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},t.languages.markup.tag.inside["attr-value"].inside.entity=t.languages.markup.entity,t.languages.markup.doctype.inside["internal-subset"].inside=t.languages.markup,t.hooks.add("wrap",function(n){n.type==="entity"&&(n.attributes.title=n.content.replace(/&/,"&"))}),Object.defineProperty(t.languages.markup.tag,"addInlined",{value:function(r,a){var o={};o["language-"+a]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:t.languages[a]},o.cdata=/^<!\[CDATA\[|\]\]>$/i;var s={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:o}};s["language-"+a]={pattern:/[\s\S]+/,inside:t.languages[a]};var u={};u[r]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,function(){return r}),"i"),lookbehind:!0,greedy:!0,inside:s},t.languages.insertBefore("markup","cdata",u)}}),Object.defineProperty(t.languages.markup.tag,"addAttribute",{value:function(n,r){t.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+n+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[r,"language-"+r],inside:t.languages[r]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),t.languages.html=t.languages.markup,t.languages.mathml=t.languages.markup,t.languages.svg=t.languages.markup,t.languages.xml=t.languages.extend("markup",{}),t.languages.ssml=t.languages.xml,t.languages.atom=t.languages.xml,t.languages.rss=t.languages.xml)}function J(t,e){if(!(typeof t>"u")&&!(e?.force!==!0&&t.languages.css)){F(t);var n=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;t.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+n.source+")*?"+/(?:;|(?=\s*\{))/.source),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+n.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+n.source+"$"),alias:"url"}}},selector:{pattern:RegExp(`(^|[{}\\s])[^{}\\s](?:[^{};"'\\s]|\\s+(?![\\s{])|`+n.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:n,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},t.languages.css.atrule.inside.rest=t.languages.css;var r=t.languages.markup;r&&(r.tag.addInlined("style","css"),r.tag.addAttribute("style","css"))}}function z(t,e){typeof t>"u"||e?.force!==!0&&t.languages.clike||(t.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/})}function Y(t,e){typeof t>"u"||e?.force!==!0&&t.languages.javascript||(z(t),F(t),t.languages.javascript=t.languages.extend("clike",{"class-name":[t.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+(/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source)+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),t.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,t.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:t.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:t.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:t.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:t.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?: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|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:t.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),t.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:t.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),t.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),t.languages.markup&&(t.languages.markup.tag.addInlined("script","javascript"),t.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),t.languages.js=t.languages.javascript)}function Q(t){if(typeof t>"u"||typeof document>"u")return;Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var e="Loading\u2026",n=function(c,d){return"\u2716 Error "+c+" while fetching file: "+d},r="\u2716 Error: File does not exist or is empty",a={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},o="data-src-status",s="loading",u="loaded",i="failed",y="pre[data-src]:not(["+o+'="'+u+'"]):not(['+o+'="'+s+'"])';function l(c,d,f){var h=new XMLHttpRequest;h.open("GET",c,!0),h.onreadystatechange=function(){h.readyState==4&&(h.status<400&&h.responseText?d(h.responseText):h.status>=400?f(n(h.status,h.statusText)):f(r))},h.send(null)}function p(c){var d=/^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(c||"");if(d){var f=Number(d[1]),h=d[2],g=d[3];return h?g?[f,Number(g)]:[f,void 0]:[f,f]}}t.hooks.add("before-highlightall",function(c){c.selector+=", "+y}),t.hooks.add("before-sanity-check",function(c){var d=c.element;if(d.matches(y)){c.code="",d.setAttribute(o,s);var f=d.appendChild(document.createElement("CODE"));f.textContent=e;var h=d.getAttribute("data-src"),g=c.language;if(g==="none"){var v=(/\.(\w+)$/.exec(h)||[,"none"])[1];g=a[v]||v}t.util.setLanguage(f,g),t.util.setLanguage(d,g);var b=t.plugins.autoloader;b&&b.loadLanguages(g),l(h,function(x){d.setAttribute(o,u);var w=p(d.getAttribute("data-range"));if(w){var S=x.split(/\r\n?|\n/g),k=w[0],E=w[1]==null?S.length:w[1];k<0&&(k+=S.length),k=Math.max(0,Math.min(k-1,S.length)),E<0&&(E+=S.length),E=Math.max(0,Math.min(E,S.length)),x=S.slice(k,E).join(`
`),d.hasAttribute("data-start")||d.setAttribute("data-start",String(k+1))}f.textContent=x,t.highlightElement(f)},function(x){d.setAttribute(o,i),f.textContent=x})}}),t.plugins.fileHighlight={highlight:function(d){for(var f=(d||document).querySelectorAll(y),h=0,g;g=f[h++];)t.highlightElement(g)}};var m=!1;t.fileHighlight=function(){m||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),m=!0),t.plugins.fileHighlight.highlight.apply(this,arguments)}}var j=class extends M{constructor(...e){super(...e),F(this),J(this),z(this),Y(this),Q(this)}};var V=":not(slot,defs,g,rect,path,circle,ellipse,line,polygon,text,tspan,use,svg image,svg title,desc,template,template *)";function P(t){let e=[...t.querySelectorAll(`${V}[id]`)];for(let r=0;r<e.length;r++)e[r].part.add(e[r].id);let n=[...t.querySelectorAll(`${V}[class]`)];for(let r=0;r<n.length;r++)n[r].part.add(...n[r].classList)}var ce=(i=>(i.slot="slot",i.html="html",i.script="script",i.javascript="javascript",i.js="js",i.code="code",i.style="style",i.css="css",i))(ce||{}),B=new CSSStyleSheet;B.replaceSync(`
${G}
${K}`);var ee="code-example",R=class extends HTMLElement{findElement(e){return this.shadowRoot.getElementById(e)}prism;#e="";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=N,this.shadowRoot.adoptedStyleSheets.push(B),document.adoptedStyleSheets.push(B),this.prism=new j({manual:!0})}#a(e,n,r){let a=this.dispatchEvent(new CustomEvent("preview",{detail:{code:r,html:n,style:e},cancelable:!0,bubbles:!0,composed:!0})),o=this.querySelector(':scope > [slot="preview"]');if(a==!1||o!=null)return;let s=this.findElement("preview"),u=s.contentDocument||s.contentWindow?.document;if(u==null)throw new Error("Preview iframe's document is null.");let i=this.#e.match(/{html}/),y=this.#e.match(/{js}|{javascript}|{script}/),l=this.#e.match(/{css}|{style}/),p={slot:[],html:[],style:[],code:[]};i?.[0]=="{html}"?p.html.push(n):p.slot.push(n);let m=y?.[0];m=="{javascript}"||m=="{js}"||m=="{code}"||m=="{script}"?p.code.push(r):p.slot.push(`<script${this.hasAttribute("script-module")?' type="module"':""}>${r}</script>`);let c=l?.[0];c=="{css}"||c=="{style}"?p.style.push(e):p.slot.push(e);let d=`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Preview Frame</title>
<style>${p.style.join("/n")}</style>
</head>
<body part="preview-body">
${p.slot.join("/n")}
<script${this.hasAttribute("script-module")?' type="module"':""}>${p.code.join("/n")}</script>
</body>
</html>`;u.open(),u.write(d),u.close();let f=this.getAttribute("preview-script");if(f!=null){let h=this.getAttribute("preview-script-module"),g=f.split(","),v=h?.split(",")??[];for(let b=0;b<g.length;b++)try{let x=u.createElement("script");if(h==null||v[b]==null||v[b]=="false"){x.src=g[b],u.head.appendChild(x);continue}x.setAttribute("type","module"),x.src=g[b],u.head.appendChild(x)}catch(x){console.error(`Error loading preview dependency script: ${x.message}`)}}}#r(){this.classList.toggle("loading",!0);let e=this.findElement("html-source"),n=this.findElement("style-source"),r=this.findElement("code-source"),a=[...this.querySelectorAll(":scope > code[slot]")];for(let o=0;o<a.length;o++){let s=a[o];this.#t(s,e,n,r)}this.#a(n.textContent,e.textContent,r.textContent),this.classList.toggle("loading",!1)}#t(e,n,r,a){let o=[...e.classList].find(p=>p.startsWith("language-")),s=o!=null?o.substring(9):"",u=s=="html"?n??this.findElement("html-source"):s=="style"||s=="css"?r??this.findElement("style-source"):a??this.findElement("code-source");u.setAttribute("class",""),o!=null&&(u.classList.add("source",o),u.parentElement.classList.add(o)),(s=="js"||s=="javascript")&&(u.parentElement.querySelector("header .badge").textContent="JS",u.parentElement.querySelector("header .title").textContent="JS"),s=="css"||s=="style"?this.classList.add("show-style"):s=="html"?this.classList.add("show-html"):this.classList.add("show-code");let i=s=="html"?e.innerHTML:e.textContent,y=i.split(`
`),l=this.#s(y);i=i.replaceAll(new RegExp(`^[ ]{0,${l}}`,"gm"),""),i=i.trim(),this.#o(u.parentElement,y),this.prism.languages[s]!=null&&(i=this.prism.highlight(i,this.prism.languages[s],s)),u.innerHTML=i}#s(e){let n=e[1],r=n.trimStart();return n.length-r.length}#o(e,n){let r=[];for(let o=0;o<n.length-2;o++)r.push('<div class="line-number" part="line-number"></div>');let a=e.querySelector(".line-numbers");a.innerHTML=r.join(`
`)}loadLanguage(e){e(this.prism);let r=[...this.querySelectorAll(":scope > code[slot]")].find(a=>!a.classList.contains(".language-html")&&!a.classList.contains(".language-css")&&!a.classList.contains(".language-style"));r!=null&&this.#t(r)}connectedCallback(){let e=this.querySelector("template")??this.findElement("preview-template");if(e.textContent.indexOf("{slot}")==null)throw new Error('Cannot use a preview template that does not contain a slot named "slot".');this.#e=e.innerHTML,this.#r(),P(this.shadowRoot),this.addEventListener("click",this.#n)}disconnectedCallback(){this.removeEventListener("click",this.#n)}#n=this.#i.bind(this);async#i(e){let r=e.composedPath().find(a=>a instanceof HTMLButtonElement&&a.classList.contains("copy"));if(r!=null){let a=r.closest(".panel");if(a==null)return;let o=a.querySelector("code").textContent;try{await navigator.clipboard.writeText(o),a.classList.add("success"),a.part.add("success")}catch(s){a.classList.add("error"),a.part.add("error"),console.error("Failed to copy text:",s)}setTimeout(()=>{a.classList.remove("success","error"),a.part.remove("success","error")},1e3)}}};customElements.get(ee)==null&&customElements.define(ee,R);export{R as CodeExampleElement,ce as CodeExampleSlotKeys};
/*! Bundled license information:
prism-esm/prism-core.js:
(**
* Prism: Lightweight, robust, elegant syntax highlighting
*
* @license MIT <https://opensource.org/licenses/MIT>
* @author Lea Verou <https://lea.verou.me>
* @namespace
* @public
*)
*/