/*! For license information please see editor-tabbed.js.LICENSE.txt */
"use strict";(self.webpackChunkinteractive_examples=self.webpackChunkinteractive_examples||[]).push([[719],{451:(e,t,n)=>{function r(e){let t="";for(let n=0,i=e.length;n<i;n++)"string"==typeof e[n]?t+='"'+e[n]+'"':Array.isArray(e[n])?(t+="Array [",t+=r(e[n]),t+="]"):t+=o(e[n]),n<e.length-1&&(t+=", ");return t}function o(e){return null==e||"boolean"==typeof e?String(e):"number"==typeof e?Object.is(e,-0)?"-0":String(e):"bigint"==typeof e?String(e)+"n":"string"==typeof e?e.includes('"')?"'"+e+"'":'"'+e+'"':Array.isArray(e)?"Array ["+r(e)+"]":function(e){const t=e.constructor?e.constructor.name:e;if("String"===t)return`String { "${e.valueOf()}" }`;if(e===JSON)return"JSON {}";if(t.match&&t.match(/^(ArrayBuffer|SharedArrayBuffer|DataView)$/))return t+" {}";if(t.match&&t.match(/^(Int8Array|Int16Array|Int32Array|Uint8Array|Uint16Array|Uint32Array|Uint8ClampedArray|Float32Array|Float64Array|BigInt64Array|BigUint64Array)$/))return e.length>0?t+" ["+r(e)+"]":t+" []";if("Symbol"===t&&void 0!==e)return e.toString();if("Object"===t){let n="",r=!0;for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r?r=!1:n+=", ",n=n+t+": "+o(e[t]));return t+" { "+n+" }"}if(!e.constructor&&!e.prototype){let t="",n=!0;for(const r in e)n?n=!1:t+=", ",t=t+r+": "+o(e[r]);return"Object { "+t+" }"}return e}(e)}function i(e){const t=document.querySelector("#console code"),n=t.textContent,r="> "+e+"\n";t.textContent=n+r}function c(e){const t=e?e.console:window.console,n=t.log,r=t.error;t.error=function(e,...n){i(e),r.apply(t,[e,...n])},t.log=function(...e){const r=[];for(let t=0,n=e.length;t<n;t++){const n=o(e[t]);r.push(n)}i(r.join(" ")),n.apply(t,e)}}n.d(t,{A:()=>c})},557:(e,t,n)=>{function r(e){return void 0===e||void 0!==function(e){let t;switch(e){case"array-entries":t=Array.prototype.entries;break;case"shared-array-buffer":t=window.SharedArrayBuffer}return t}(e)}function o(){const e=document.createElement("div"),t="http://www.w3.org/1998/Math/MathML",n=document.createElementNS(t,"math"),r=document.createElementNS(t,"mspace");r.setAttribute("height","23px"),r.setAttribute("width","77px"),n.append(r),e.append(n),e.classList.add("offscreen");const o=document.body.appendChild(e);if(!r)return!1;const i=r.getBoundingClientRect();return document.body.removeChild(o),!!i&&Math.abs(i.height-23)<=1&&Math.abs(i.width-77)<=1}n.d(t,{O:()=>r,q:()=>o})},621:(e,t,n)=>{var r=n(451),o=n(367),i=n(503);const c=document.getElementById("css-editor"),a=document.getElementById("html-editor"),d=document.getElementById("js-editor"),s=a.querySelector("pre"),l=c.querySelector("pre"),u=d.querySelector("pre"),m=document.getElementById("tab-container"),f=m.querySelectorAll('button[role="tab"]'),y=document.getElementById("tablist");function h(e,t){t&&(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1")),e.setAttribute("aria-selected","true"),e.removeAttribute("tabindex"),e.focus()}function p(e){const t=y.querySelector('button[aria-selected="true"]');"forward"!==e&&"reverse"!==e||("forward"===e?t.nextElementSibling instanceof HTMLElement?(h(t.nextElementSibling,t),t.nextElementSibling.click()):(h(f[0]),f[0].click()):"reverse"===e&&(t.previousElementSibling instanceof HTMLElement?(h(t.previousElementSibling,t),t.previousElementSibling.click()):(h(f[f.length-1]),f[f.length-1].click())))}const g={html:{editor:void 0,code:a,initialContent:s.querySelector("code")?.textContent||"",language:(0,i.OV)()},css:{editor:void 0,code:c,initialContent:l.querySelector("code")?.textContent||"",language:(0,i.Cr)()},js:{editor:void 0,code:d,initialContent:u.querySelector("code")?.textContent||"",language:(0,i.Uv)()}};function b(){y.addEventListener("click",(e=>{const t=e.target;if("tab"===t.getAttribute("role")){const e=y.querySelector('button[aria-selected="true"]'),n=t.getAttribute("aria-controls")||"",r=document.getElementById(n);!function(){const e=m.querySelectorAll('[role="tabpanel"]');for(const t of e)t.classList.add("hidden")}(),h(t,e),r.classList.remove("hidden"),r.setAttribute("aria-hidden","false")}})),y.addEventListener("keyup",(e=>{switch(e.stopPropagation(),e.key){case"ArrowRight":case"ArrowDown":p("forward");break;case"ArrowLeft":case"ArrowUp":p("reverse");break;case"Home":h(f[0]);break;case"End":h(f[f.length-1]);break;case"default":return}}))}var E=n(557);!function(){const e=document.getElementById("clear"),t=document.getElementById("editor-container"),n=document.getElementById("tab-container"),c=document.getElementById("output"),a=document.querySelector(".output-header"),d=document.getElementById("css-editor"),s=document.getElementById("html-editor"),l=document.getElementById("js-editor"),u=d.querySelector("pre"),m=s.querySelector("pre"),f=l.querySelector("pre"),y=document.getElementById("output-iframe"),h=function(){const e=document.getElementById("output-head"),t=document.getElementById("output-body");return`\n<!DOCTYPE html>\n<html id="output-root">\n<head>${e.innerHTML}</head>\n<body>${t.innerHTML}</body>\n</html>\n`}(),p=t.dataset.editorType;let A,v=!1;function S(){const e=function(){const e={};function t(t,n){const r=g[n].editor;e[t]=r?(0,i.RT)(r):""}return t("htmlContent","html"),t("cssContent","css"),t("jsContent","js"),e}(),t=function(e,t){let n=e;return n=n.replace("%css-content%",t.cssContent),n=n.replace("%html-content%",t.htmlContent),n=n.replace("%js-content%",t.jsContent),n}(h,e);y.srcdoc=t}function w(){if(c.offsetTop>=n.offsetTop+n.offsetHeight){const e=y.contentWindow?.document.getElementById("html-output"),t=e.clientHeight;t!==y.clientHeight&&(y.style.height=t+"px",v=!0)}else v&&(y.style.height="",v=!1)}function L(){clearTimeout(A),A=setTimeout((()=>S()),500)}if("mathml"===p&&!(0,E.q)())return void document.getElementById("warning-mathml-not-supported").classList.remove("hidden");y.addEventListener("load",(()=>function(){const e=y.contentWindow,t=e.document.body;t.querySelectorAll('a[href^="http"]').forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault(),window.open(e.href)}))})),function(e,t,n){n.forEach((n=>{n.addEventListener("click",(r=>{r.preventDefault();const o=t.querySelector(n.hash);o&&(o.scrollIntoView(),e.location.hash=n.hash)}))}))}(e,t,t.querySelectorAll('a[href^="#"]')),w(),e.addEventListener("resize",(()=>w())),(0,r.A)(e),y.contentWindow.executeExample()}())),a.addEventListener("click",(e=>{e.target.classList.contains("reset")&&window.location.reload()})),s.addEventListener("keyup",(()=>L())),d.addEventListener("keyup",(()=>L())),l.addEventListener("keyup",(()=>L())),e.addEventListener("click",(()=>{document.querySelector("#console code").textContent=""})),m.classList.add("hidden"),u.classList.add("hidden"),f.classList.add("hidden"),t.classList.remove("hidden");const B=function(e){return e.dataset&&e.dataset.tabs?e.dataset.tabs.split(","):["html","css"]}(t),I=function(e,t){return e.dataset&&e.dataset.defaultTab?e.dataset.defaultTab:t.includes("js")?"js":"html"}(t,B);(function(e,t){t&&function(e){const t=document.getElementById(e.id+"-panel");e.setAttribute("aria-selected","true"),e.removeAttribute("tabindex"),t.classList.remove("hidden"),t.setAttribute("aria-hidden","false"),e.focus()}(t);for(const t of e){if(!(t in g))continue;const e=g[t];document.getElementById(t)?.classList.remove("hidden"),e.editor=(0,i.zu)(e.code,e.initialContent,e.language)}})(B,document.getElementById(I)),(0,r.A)(),b(),o.kz(),S()}()}},e=>{e(e.s=621)}]);