apprun 3.35.0 → 3.36.0

package/dist/apprun-play.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.apprun=e():t.apprun=e()}(this,(()=>(()=>{"use strict";var t={859:(t,e,n)=>{n.d(e,{A:()=>r,q:()=>o});class o{constructor(){this._events={}}on(t,e,n={}){this._events[t]=this._events[t]||[],this._events[t].push({fn:e,options:n})}off(t,e){const n=this._events[t]||[];this._events[t]=n.filter((t=>t.fn!==e))}find(t){return this._events[t]}run(t,...e){const n=this.getSubscribers(t,this._events);return console.assert(n&&n.length>0,"No subscriber for event: "+t),n.forEach((n=>{const{fn:o,options:s}=n;return s.delay?this.delay(t,o,e,s):Object.keys(s).length>0?o.apply(this,[...e,s]):o.apply(this,e),!n.options.once})),n.length}once(t,e,n={}){this.on(t,e,Object.assign(Object.assign({},n),{once:!0}))}delay(t,e,n,o){o._t&&clearTimeout(o._t),o._t=setTimeout((()=>{clearTimeout(o._t),Object.keys(o).length>0?e.apply(this,[...n,o]):e.apply(this,n)}),o.delay)}runAsync(t,...e){const n=this.getSubscribers(t,this._events);console.assert(n&&n.length>0,"No subscriber for event: "+t);const o=n.map((t=>{const{fn:n,options:o}=t;return Object.keys(o).length>0?n.apply(this,[...e,o]):n.apply(this,e)}));return Promise.all(o)}query(t,...e){return this.runAsync(t,...e)}getSubscribers(t,e){const n=e[t]||[];return e[t]=n.filter((t=>!t.options.once)),Object.keys(e).filter((e=>e.endsWith("*")&&t.startsWith(e.replace("*","")))).sort(((t,e)=>e.length-t.length)).forEach((o=>n.push(...e[o].map((e=>Object.assign(Object.assign({},e),{options:Object.assign(Object.assign({},e.options),{event:t})})))))),n}}let s;const i="undefined"!=typeof window?window:void 0!==n.g?n.g:"undefined"!=typeof self?self:{};i.app&&i._AppRunVersions?s=i.app:(s=new o,i.app=s,i._AppRunVersions="AppRun-3.3.11");const r=s},466:(t,e,n)=>{n.d(e,{Component:()=>p,app:()=>o.A});var o=n(859),s=n(320);const i=(t,e={})=>class extends HTMLElement{constructor(){super()}get component(){return this._component}get state(){return this._component.state}static get observedAttributes(){return(e.observedAttributes||[]).map((t=>t.toLowerCase()))}connectedCallback(){if(this.isConnected&&!this._component){const n=e||{};this._shadowRoot=n.shadow?this.attachShadow({mode:"open"}):this;const o=n.observedAttributes||[],s=o.reduce(((t,e)=>{const n=e.toLowerCase();return n!==e&&(t[n]=e),t}),{});this._attrMap=t=>s[t]||t;const i={};Array.from(this.attributes).forEach((t=>i[this._attrMap(t.name)]=t.value)),o.forEach((t=>{void 0!==this[t]&&(i[t]=this[t]),Object.defineProperty(this,t,{get:()=>i[t],set(e){this.attributeChangedCallback(t,i[t],e)},configurable:!0,enumerable:!0})})),requestAnimationFrame((()=>{const e=this.children?Array.from(this.children):[];if(this._component=new t(Object.assign(Object.assign({},i),{children:e})).mount(this._shadowRoot,n),this._component._props=i,this._component.dispatchEvent=this.dispatchEvent.bind(this),this._component.mounted){const t=this._component.mounted(i,e,this._component.state);void 0!==t&&(this._component.state=t)}this.on=this._component.on.bind(this._component),this.run=this._component.run.bind(this._component),!1!==n.render&&this._component.run(".")}))}}disconnectedCallback(){var t,e,n,o;null===(e=null===(t=this._component)||void 0===t?void 0:t.unload)||void 0===e||e.call(t),null===(o=null===(n=this._component)||void 0===n?void 0:n.unmount)||void 0===o||o.call(n),this._component=null}attributeChangedCallback(t,n,o){if(this._component){const s=this._attrMap(t);this._component._props[s]=o,this._component.run("attributeChanged",s,n,o),o!==n&&!1!==e.render&&window.requestAnimationFrame((()=>{this._component.run(".")}))}}},r=(t,e,n)=>{"undefined"!=typeof customElements&&customElements.define(t,i(e,n))},a={meta:new WeakMap,defineMetadata(t,e,n){this.meta.has(n)||this.meta.set(n,{}),this.meta.get(n)[t]=e},getMetadataKeys(t){return t=Object.getPrototypeOf(t),this.meta.get(t)?Object.keys(this.meta.get(t)):[]},getMetadata(t,e){return e=Object.getPrototypeOf(e),this.meta.get(e)?this.meta.get(e)[t]:null}};var c=n(741);const l=new Map;o.A.find("get-components")||o.A.on("get-components",(t=>t.components=l));const d=t=>t;class p{renderState(t,e=null){if(!this.view)return;let n=e||this.view(t);if(o.A.debug&&o.A.run("debug",{component:this,_:n?".":"-",state:t,vdom:n,el:this.element}),"object"!=typeof document)return;const s="string"==typeof this.element&&this.element?document.getElementById(this.element)||document.querySelector(this.element):this.element;if(!s)return;const i="_c";this.unload?s._component===this&&s.getAttribute(i)===this.tracking_id||(this.tracking_id=(new Date).valueOf().toString(),s.setAttribute(i,this.tracking_id),"undefined"!=typeof MutationObserver&&(this.observer||(this.observer=new MutationObserver((t=>{t[0].oldValue!==this.tracking_id&&document.body.contains(s)||(this.unload(this.state),this.observer.disconnect(),this.observer=null)}))),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[i]}))):s.removeAttribute&&s.removeAttribute(i),s._component=this,!e&&n&&(n=(0,c.A)(n,this),this.options.transition&&document&&document.startViewTransition?document.startViewTransition((()=>o.A.render(s,n,this))):o.A.render(s,n,this)),this.rendered&&this.rendered(this.state)}setState(t,e={render:!0,history:!1}){const n=t;if(null==n?void 0:n[Symbol.asyncIterator])this.setState((async t=>{try{for(;;){const{value:n,done:o}=await t.next();if(o)break;this.setState(n,e)}}catch(t){console.error("Error in async iterator:",t)}})(n[Symbol.asyncIterator]()),e);else if((null==n?void 0:n[Symbol.iterator])&&"function"==typeof n.next)for(const t of n)this.setState(t,e);else if(t&&t instanceof Promise)Promise.resolve(t).then((n=>{this.setState(n,e),this._state=t}));else{if(this._state=t,null==t)return;this.state=t,!1!==e.render&&(e.transition&&document&&document.startViewTransition?document.startViewTransition((()=>this.renderState(t))):this.renderState(t)),!1!==e.history&&this.enable_history&&(this._history=[...this._history,t],this._history_idx=this._history.length-1),"function"==typeof e.callback&&e.callback(this.state)}}constructor(t,e,n,s){this.state=t,this.view=e,this.update=n,this.options=s,this._app=new o.q,this._actions=[],this._global_events=[],this._history=[],this._history_idx=-1,this._history_prev=()=>{this._history_idx--,this._history_idx>=0?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=0},this._history_next=()=>{this._history_idx++,this._history_idx<this._history.length?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=this._history.length-1},this.start=(t=null,e)=>{if(this.mount(t,Object.assign({render:!0},e)),this.mounted&&"function"==typeof this.mounted){const t=this.mounted({},[],this.state);void 0!==t&&this.setState(t)}return this}}mount(t=null,e){var n,s;return console.assert(!this.element,"Component already mounted."),this.options=e=Object.assign(Object.assign({},this.options),e),this.element=t,this.global_event=e.global_event,this.enable_history=!!e.history,this.enable_history&&(this.on(e.history.prev||"history-prev",this._history_prev),this.on(e.history.next||"history-next",this._history_next)),e.route&&(this.update=this.update||{},this.update[e.route]||(this.update[e.route]=d)),this.add_actions(),this.state=null!==(s=null!==(n=this.state)&&void 0!==n?n:this.model)&&void 0!==s?s:{},"function"==typeof this.state&&(this.state=this.state()),this.setState(this.state,{render:!!e.render,history:!0}),o.A.debug&&(l.get(t)?l.get(t).push(this):l.set(t,[this])),this}is_global_event(t){return t&&(this.global_event||this._global_events.indexOf(t)>=0||t.startsWith("#")||t.startsWith("/")||t.startsWith("@"))}add_action(t,e,n={}){e&&"function"==typeof e&&(n.global&&this._global_events.push(t),this.on(t,((...s)=>{o.A.debug&&o.A.run("debug",{component:this,_:">",event:t,p:s,current_state:this.state,options:n});const i=e(this.state,...s);o.A.debug&&o.A.run("debug",{component:this,_:"<",event:t,p:s,newState:i,state:this.state,options:n}),this.setState(i,n)}),n))}add_actions(){const t=this.update||{};a.getMetadataKeys(this).forEach((e=>{if(e.startsWith("apprun-update:")){const n=a.getMetadata(e,this);t[n.name]=[this[n.key].bind(this),n.options]}}));const e={};Array.isArray(t)?t.forEach((t=>{const[n,o,s]=t;n.toString().split(",").forEach((t=>e[t.trim()]=[o,s]))})):Object.keys(t).forEach((n=>{const o=t[n];("function"==typeof o||Array.isArray(o))&&n.split(",").forEach((t=>e[t.trim()]=o))})),e["."]||(e["."]=d),Object.keys(e).forEach((t=>{const n=e[t];"function"==typeof n?this.add_action(t,n):Array.isArray(n)&&this.add_action(t,n[0],n[1])}))}run(t,...e){if(this.state instanceof Promise)return Promise.resolve(this.state).then((n=>{this.state=n,this.run(t,...e)}));{const n=t.toString();return this.is_global_event(n)?o.A.run(n,...e):this._app.run(n,...e)}}on(t,e,n){const s=t.toString();return this._actions.push({name:s,fn:e}),this.is_global_event(s)?o.A.on(s,e,n):this._app.on(s,e,n)}runAsync(t,...e){const n=t.toString();return this.is_global_event(n)?o.A.runAsync(n,...e):this._app.runAsync(n,...e)}query(t,...e){return this.runAsync(t,...e)}unmount(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this._actions.forEach((t=>{const{name:e,fn:n}=t;this.is_global_event(e)?o.A.off(e,n):this._app.off(e,n)}))}}p.__isAppRunComponent=!0;const u="//",h="///",m=t=>{if(o.A.lastUrl!==t)if(o.A.lastUrl=t,t||(t="#"),t.startsWith("#")){const[e,...n]=t.split("/");o.A.run(e,...n)||o.A.run(h,e,...n),o.A.run(u,e,...n)}else if(t.startsWith("/")){const[e,n,...s]=t.split("/");o.A.run("/"+n,...s)||o.A.run(h,"/"+n,...s),o.A.run(u,"/"+n,...s)}else o.A.run(t)||o.A.run(h,t),o.A.run(u,t)};if(!o.A.start){o.A.version="3.35.0",o.A.h=o.A.createElement=s.createElement,o.A.render=s.render,o.A.Fragment=s.Fragment,o.A.webComponent=r,o.A.safeHTML=s.safeHTML,o.A.start=(t,e,n,o,s)=>{const i=Object.assign({render:!0,global_event:!0},s),r=new p(e,n,o);return s&&s.rendered&&(r.rendered=s.rendered),s&&s.mounted&&(r.mounted=s.mounted),r.start(t,i),r};const t=t=>{};o.A.on("debug",(e=>t)),o.A.on(u,t),o.A.on(h,t),o.A.route=m,o.A.on("route",(t=>o.A.route&&o.A.route(t))),"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{const t=document.body.hasAttribute("apprun-no-init")||o.A["no-init-route"]||!1,e=o.A.find("#")||o.A.find("#/")||!1;window.addEventListener("hashchange",(()=>m(location.hash))),window.addEventListener("popstate",(()=>m(location.pathname))),e?t&&m(location.hash):(t&&m(location.pathname),document.body.addEventListener("click",(t=>{const e=t.target,n="A"===e.tagName?e:e.closest("a");n&&n.origin===location.origin&&(t.preventDefault(),history.pushState(null,"",n.pathname),m(n.pathname))})))})),"object"==typeof window&&(window.Component=p,window._React=window.React,window.React=o.A,window.on=function(t,e={}){return function(n,o){const s=t?t.toString():o;a.defineMetadata(`apprun-update:${s}`,{name:s,key:o,options:e},n)}},window.customElement=function(t,e){return function(n){return r(t,n,e),n}},window.safeHTML=s.safeHTML),o.A.use_render=(t,e=0)=>{o.A.render=0===e?(e,n)=>t(n,e):(e,n)=>t(e,n)},o.A.use_react=(t,e)=>{o.A.h=o.A.createElement=t.createElement,o.A.Fragment=t.Fragment,o.A.render=(t,n)=>e.render(n,t),t.version&&t.version.startsWith("18")&&(o.A.render=(t,n)=>{t&&n&&(t._root||(t._root=e.createRoot(t)),t._root.render(n))})}}},741:(t,e,n)=>{n.d(e,{A:()=>a});var o=n(859);const s=(t,e)=>(e?t.state[e]:t.state)||"",i=(t,e,n)=>{if(e){const o=t.state||{};o[e]=n,t.setState(o)}else t.setState(n)},r=(t,e)=>{if(Array.isArray(t))return t.map((t=>r(t,e)));{let{type:n,tag:a,props:c,children:l}=t;return a=a||n,l=l||(null==c?void 0:c.children),c&&Object.keys(c).forEach((t=>{t.startsWith("$")&&(((t,e,n,r)=>{if(t.startsWith("$on")){const n=e[t];if(t=t.substring(1),"boolean"==typeof n)e[t]=e=>r.run?r.run(t,e):o.A.run(t,e);else if("string"==typeof n)e[t]=t=>r.run?r.run(n,t):o.A.run(n,t);else if("function"==typeof n)e[t]=t=>r.setState(n(r.state,t));else if(Array.isArray(n)){const[s,...i]=n;"string"==typeof s?e[t]=t=>r.run?r.run(s,...i,t):o.A.run(s,...i,t):"function"==typeof s&&(e[t]=t=>r.setState(s(r.state,...i,t)))}}else if("$bind"===t){const o=e.type||"text",a="string"==typeof e[t]?e[t]:e.name;if("input"===n)switch(o){case"checkbox":e.checked=s(r,a),e.onclick=t=>i(r,a||t.target.name,t.target.checked);break;case"radio":e.checked=s(r,a)===e.value,e.onclick=t=>i(r,a||t.target.name,t.target.value);break;case"number":case"range":e.value=s(r,a),e.oninput=t=>i(r,a||t.target.name,Number(t.target.value));break;default:e.value=s(r,a),e.oninput=t=>i(r,a||t.target.name,t.target.value)}else"select"===n?(e.value=s(r,a),e.onchange=t=>{t.target.multiple||i(r,a||t.target.name,t.target.value)}):"option"===n?(e.selected=s(r,a),e.onclick=t=>i(r,a||t.target.name,t.target.selected)):"textarea"===n&&(e.innerHTML=s(r,a),e.oninput=t=>i(r,a||t.target.name,t.target.value))}else o.A.run("$",{key:t,tag:n,props:e,component:r})})(t,c,a,e),delete c[t])})),l&&r(l,e),t}},a=r},791:(t,e,n)=>{n.d(e,{FK:()=>s,cJ:()=>l,n:()=>a,t_:()=>u});var o=n(741);function s(t,...e){return r(e)}const i="_props";function r(t){const e=[],n=t=>{null!=t&&""!==t&&!1!==t&&e.push("function"==typeof t||"object"==typeof t?t:`${t}`)};return t&&t.forEach((t=>{Array.isArray(t)?t.forEach((t=>n(t))):n(t)})),e}function a(t,e,...n){const o=r(n);if("string"==typeof t)return{tag:t,props:e,children:o};if(Array.isArray(t))return t;if(void 0===t&&n)return o;if(Object.getPrototypeOf(t).__isAppRunComponent)return{tag:t,props:e,children:o};if("function"==typeof t)return t(e,o);throw new Error(`Unknown tag in vdom ${t}`)}const c=new WeakMap,l=(t,e,n={})=>{null!=e&&!1!==e&&function(t,e,n={}){if(null==e||!1===e)return;if(e=y(e,n),!t)return;const o="SVG"===t.nodeName;Array.isArray(e)?p(t,e,o):p(t,[e],o)}("string"==typeof t&&t?document.getElementById(t)||document.querySelector(t):t,e=(0,o.A)(e,n),n)};function d(t,e,n){3!==e._op&&(n=n||"svg"===e.tag,function(t,e){const n=t.nodeName,o=`${e.tag||""}`;return n.toUpperCase()===o.toUpperCase()}(t,e)?(!(2&e._op)&&p(t,e.children,n),!(1&e._op)&&f(t,e.props,n)):t.parentNode.replaceChild(m(e,n),t))}function p(t,e,n){var o,s;const i=(null===(o=t.childNodes)||void 0===o?void 0:o.length)||0,r=(null==e?void 0:e.length)||0,a=Math.min(i,r);for(let o=0;o<a;o++){const s=e[o];if(3===s._op)continue;const i=t.childNodes[o];if("string"==typeof s)i.textContent!==s&&(3===i.nodeType?i.nodeValue=s:t.replaceChild(h(s),i));else if(s instanceof HTMLElement||s instanceof SVGElement)t.insertBefore(s,i);else{const e=s.props&&s.props.key;if(e)if(i.key===e)d(t.childNodes[o],s,n);else{const r=c[e];if(r){const e=r.nextSibling;t.insertBefore(r,i),e?t.insertBefore(i,e):t.appendChild(i),d(t.childNodes[o],s,n)}else t.replaceChild(m(s,n),i)}else d(t.childNodes[o],s,n)}}let l=(null===(s=t.childNodes)||void 0===s?void 0:s.length)||0;for(;l>a;)t.removeChild(t.lastChild),l--;if(r>a){const o=document.createDocumentFragment();for(let t=a;t<e.length;t++)o.appendChild(m(e[t],n));t.appendChild(o)}}const u=t=>{const e=document.createElement("section");return e.insertAdjacentHTML("afterbegin",t),Array.from(e.children)};function h(t){if(0===(null==t?void 0:t.indexOf("_html:"))){const e=document.createElement("div");return e.insertAdjacentHTML("afterbegin",t.substring(6)),e}return document.createTextNode(null!=t?t:"")}function m(t,e){if(t instanceof HTMLElement||t instanceof SVGElement)return t;if("string"==typeof t)return h(t);if(!t.tag||"function"==typeof t.tag)return h(JSON.stringify(t));const n=(e=e||"svg"===t.tag)?document.createElementNS("http://www.w3.org/2000/svg",t.tag):document.createElement(t.tag);return f(n,t.props,e),t.children&&t.children.forEach((t=>n.appendChild(m(t,e)))),n}function f(t,e,n){const o=t[i]||{};e=function(t,e){e.class=e.class||e.className,delete e.className;const n={};return t&&Object.keys(t).forEach((t=>n[t]=null)),e&&Object.keys(e).forEach((t=>n[t]=e[t])),n}(o,e||{}),t[i]=e;for(const o in e){const s=e[o];if(o.startsWith("data-")){const e=o.substring(5).replace(/-(\w)/g,(t=>t[1].toUpperCase()));t.dataset[e]!==s&&(s||""===s?t.dataset[e]=s:delete t.dataset[e])}else if("style"===o)if(t.style.cssText&&(t.style.cssText=""),"string"==typeof s)t.style.cssText=s;else for(const e in s)t.style[e]!==s[e]&&(t.style[e]=s[e]);else if(o.startsWith("xlink")){const e=o.replace("xlink","").toLowerCase();null==s||!1===s?t.removeAttributeNS("http://www.w3.org/1999/xlink",e):t.setAttributeNS("http://www.w3.org/1999/xlink",e,s)}else o.startsWith("on")?s&&"function"!=typeof s?"string"==typeof s&&(s?t.setAttribute(o,s):t.removeAttribute(o)):t[o]=s:/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-|^for$/g.test(o)||n?t.getAttribute(o)!==s&&(s?t.setAttribute(o,s):t.removeAttribute(o)):t[o]!==s&&(t[o]=s);"key"===o&&s&&(c[s]=t)}e&&"function"==typeof e.ref&&window.requestAnimationFrame((()=>e.ref(t)))}function y(t,e,n=0){var o;if("string"==typeof t)return t;if(Array.isArray(t))return t.map((t=>y(t,e,n++)));let s=t;if(t&&"function"==typeof t.tag&&Object.getPrototypeOf(t.tag).__isAppRunComponent&&(s=function(t,e,n){const{tag:o,props:s,children:i}=t;let r=`_${n}`,a=s&&s.id;a?r=a:a=`_${n}${Date.now()}`;let c="section";s&&s.as&&(c=s.as,delete s.as),e.__componentCache||(e.__componentCache={});let l=e.__componentCache[r];if(l&&l instanceof o&&l.element)l.renderState(l.state);else{const t=document.createElement(c);l=e.__componentCache[r]=new o(Object.assign(Object.assign({},s),{children:i})).mount(t,{render:!0})}if(l.mounted){const t=l.mounted(s,i,l.state);void 0!==t&&l.setState(t)}return f(l.element,s,!1),l.element}(t,e,n)),s&&Array.isArray(s.children)){const t=null===(o=s.props)||void 0===o?void 0:o._component;if(t){let e=0;s.children=s.children.map((n=>y(n,t,e++)))}else s.children=s.children.map((t=>y(t,e,n++)))}return s}},320:(t,e,n)=>{n.d(e,{Fragment:()=>o.FK,createElement:()=>o.n,render:()=>o.cJ,safeHTML:()=>o.t_});var o=n(791)}},e={};function n(o){var s=e[o];if(void 0!==s)return s.exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};n.r(o);var s=n(466);const i=(t,e,n,o)=>{if(!e||!n)return;const s=t=>{var n,o;const s=e.cloneNode();null===(n=e.parentNode)||void 0===n||n.replaceChild(s,e);const i=null===(o=(e=s).contentWindow)||void 0===o?void 0:o.document;i&&(i.open(),t.indexOf("<html")>=0?i.write(t):i.write((t=>`<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <meta http-equiv="X-UA-Compatible" content="ie=edge">\n  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"><\/script>\n  <title>AppRun Playground</title>\n  <style>\n    body {\n      font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;\n      margin: 2em;\n    }\n  </style>\n  <script src="https://unpkg.com/@babel/standalone/babel.min.js"><\/script>\n  <script src="https://unpkg.com/apprun/dist/apprun-html.js"><\/script>\n</head>\n<body>\n<script>\n  Babel.registerPlugin("d", [Babel.availablePlugins["proposal-decorators"], {legacy: true}]);\n  Babel.registerPlugin("c", [Babel.availablePlugins["proposal-class-properties"], {loose: true}]);\n  Babel.registerPlugin("b", [Babel.availablePlugins["proposal-private-methods"], {loose: true}]);\n<\/script>\n<script type="text/babel" data-plugins="d, c, b">\n  ${t}\n<\/script>\n</body>\n</html>`)(t)),i.close())};s(n),!o&&t&&"TEXTAREA"===t.nodeName&&("undefined"==typeof CodeMirror?t.onkeyup=()=>s(t.value):t.editor||(t.editor=CodeMirror.fromTextArea(t,{lineNumbers:!0,mode:"jsx"}),t.editor.on("change",(t=>s(t.getValue())))))};class r extends s.Component{constructor(){super(...arguments),this.view=t=>{const e=t["code-element-id"],n=this.element;let o,i;return o=e?document.getElementById(e):n.previousElementSibling||n.parentElement.previousElementSibling,i=(null==o?void 0:o.innerText)||(null==o?void 0:o.value)||t.code,this.state.code_area=o,this.state.code=i,i?s.app.h(s.app.Fragment,null,s.app.h("div",{class:"toolbox"},!t.hide_button&&s.app.h("a",{class:"button",$onclick:"show-popup"},"Try the Code"))):s.app.h("div",null,"AppRun Play cannot find code to run, please set code-element-id or code.")},this.rendered=({style:t,hide_src:e,code_area:n,code:o})=>{if(!o)return;if(!document.getElementById("play-popup")){document.body.insertAdjacentHTML("beforeend",'<div id="play-popup" class="overlay">\n<style id="apprun-play-style">\n.apprun-play .col {\n  height: 100%;\n  flex: 1;\n}\n.apprun-preview {\n  width: 100%\n}\n.apprun-play .editor, .apprun-play .preview {\n  display: inline-block;\n  width: calc(100% - 20px);\n  height: calc(100% - 10px);\n}\n\na.button {\n  font-size: .8em;\n  padding: 10px;\n  cursor: pointer;\n  color: var(--md-primary-bg-color);\n  background: var(--md-primary-fg-color)\n}\na.button:hover {\n  color: var(--md-primary-fg-color);\n  background: var(--md-primary-bg-color)\n}\n\n.overlay {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.7);\n  visibility: hidden;\n  opacity: 0;\n  z-index: 999;\n}\n.overlay.show {\n  visibility: visible;\n  opacity: 1;\n}\n\n.popup {\n  margin: 80px auto;\n  padding: 20px;\n  background: #fff;\n  border-radius: 3px;\n  position: relative;\n  width: 90%;\n  height: calc(100% - 150px);\n}\n\n.popup .close {\n  position: absolute;\n  top: 10px;\n  right: 20px;\n  font-size: 20px;\n  font-weight: bold;\n  text-decoration: none;\n  color: #333;\n}\n.popup .close:hover {\n  color: #06D85F;\n}\n.popup .content {\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n}\n\n.cm-s-default {\n  height: 100%;\n  font-size: small;\n  line-height: 1.5em;\n  z-index: 0;\n}\n</style>\n\n\t<div class="popup apprun-play">\n\t\t<a class="close" href="javascript:app.run(\'@close-popup\')">&times;</a>\n\t\t<div class="content">\n\t\t\t<div class="col">\n        <textarea class="editor"></textarea>\n      </div>\n      <div class="col">\n      <iframe class="preview"/>\n      </div>\n    </div>\n\t</div>\n</div>');const t=document.querySelector(".apprun-play .editor"),e=document.querySelector(".apprun-play .preview");t.value=o,i(t,e,o,!1)}const s=document.createElement("iframe");s.classList.add("apprun-preview"),s.style.cssText=t,this.element.before(s),e&&(n.style.display="none"),i(n,s,o,e)},this.update={"show-popup":({code:t})=>{var e;null===(e=document.querySelector(".apprun-play .editor").editor)||void 0===e||e.setValue(t),document.getElementById("play-popup").classList.add("show")},"@close-popup":()=>{document.getElementById("play-popup").classList.remove("show")}}}}return s.app.webComponent("apprun-play",r),o})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.apprun=e():t.apprun=e()}(this,(()=>(()=>{"use strict";var t={859:(t,e,n)=>{n.d(e,{A:()=>c,q:()=>s});var o=n(672);class s{constructor(){this._events={}}on(t,e,n={}){this._events[t]=this._events[t]||[],this._events[t].push({fn:e,options:n})}off(t,e){const n=this._events[t]||[];this._events[t]=n.filter((t=>t.fn!==e))}find(t){return this._events[t]}run(t,...e){const n=this.getSubscribers(t,this._events);return console.assert(n&&n.length>0,"No subscriber for event: "+t),n.forEach((n=>{const{fn:o,options:s}=n;if(!o||"function"!=typeof o)return console.error(`AppRun event handler for '${t}' is not a function:`,o),!1;if(s.delay)this.delay(t,o,e,s);else try{Object.keys(s).length>0?o.apply(this,[...e,s]):o.apply(this,e)}catch(e){console.error(`Error in event handler for '${t}':`,e)}return!n.options.once})),n.length}once(t,e,n={}){this.on(t,e,Object.assign(Object.assign({},n),{once:!0}))}delay(t,e,n,o){o._t&&clearTimeout(o._t),o._t=setTimeout((()=>{clearTimeout(o._t);try{Object.keys(o).length>0?e.apply(this,[...n,o]):e.apply(this,n)}catch(e){console.error(`Error in delayed event handler for '${t}':`,e)}}),o.delay)}runAsync(t,...e){const n=this.getSubscribers(t,this._events);console.assert(n&&n.length>0,"No subscriber for event: "+t);const o=n.map((n=>{const{fn:o,options:s}=n;if(!o||"function"!=typeof o)return console.error(`AppRun async event handler for '${t}' is not a function:`,o),Promise.resolve(null);try{return Object.keys(s).length>0?o.apply(this,[...e,s]):o.apply(this,e)}catch(e){return console.error(`Error in async event handler for '${t}':`,e),Promise.reject(e)}}));return Promise.all(o)}query(t,...e){return this.runAsync(t,...e)}getSubscribers(t,e){const n=e[t]||[];return e[t]=n.filter((t=>!t.options.once)),Object.keys(e).filter((e=>e.endsWith("*")&&t.startsWith(e.replace("*","")))).sort(((t,e)=>e.length-t.length)).forEach((o=>n.push(...e[o].map((e=>Object.assign(Object.assign({},e),{options:Object.assign(Object.assign({},e.options),{event:t})})))))),n}}const r=o.C;let i;const a="undefined"!=typeof window?window:void 0!==n.g?n.g:"undefined"!=typeof self?self:{};a.app&&a._AppRunVersions?i=a.app:(i=new s,a.app=i,a._AppRunVersions=r);const c=i},466:(t,e,n)=>{n.d(e,{Component:()=>p,app:()=>o.A});var o=n(859),s=n(320);const r=(t,e={})=>class extends HTMLElement{constructor(){super()}get component(){return this._component}get state(){return this._component.state}static get observedAttributes(){return(e.observedAttributes||[]).map((t=>t.toLowerCase()))}connectedCallback(){if(this.isConnected&&!this._component){const n=e||{};this._shadowRoot=n.shadow?this.attachShadow({mode:"open"}):this;const o=n.observedAttributes||[],s=o.reduce(((t,e)=>{const n=e.toLowerCase();return n!==e&&(t[n]=e),t}),{});this._attrMap=t=>s[t]||t;const r={};Array.from(this.attributes).forEach((t=>r[this._attrMap(t.name)]=t.value)),o.forEach((t=>{void 0!==this[t]&&(r[t]=this[t]),Object.defineProperty(this,t,{get:()=>r[t],set(e){this.attributeChangedCallback(t,r[t],e)},configurable:!0,enumerable:!0})})),requestAnimationFrame((()=>{const e=this.children?Array.from(this.children):[];if(this._component=new t(Object.assign(Object.assign({},r),{children:e})).mount(this._shadowRoot,n),this._component._props=r,this._component.dispatchEvent=this.dispatchEvent.bind(this),this._component.mounted){const t=this._component.mounted(r,e,this._component.state);void 0!==t&&(this._component.state=t)}this.on=this._component.on.bind(this._component),this.run=this._component.run.bind(this._component),!1!==n.render&&this._component.run(".")}))}}disconnectedCallback(){var t,e,n,o;null===(e=null===(t=this._component)||void 0===t?void 0:t.unload)||void 0===e||e.call(t),null===(o=null===(n=this._component)||void 0===n?void 0:n.unmount)||void 0===o||o.call(n),this._component=null}attributeChangedCallback(t,n,o){if(this._component){const s=this._attrMap(t);this._component._props[s]=o,this._component.run("attributeChanged",s,n,o),o!==n&&!1!==e.render&&window.requestAnimationFrame((()=>{this._component.run(".")}))}}},i=(t,e,n)=>{"undefined"!=typeof customElements&&customElements.define(t,r(e,n))},a={meta:new WeakMap,defineMetadata(t,e,n){this.meta.has(n)||this.meta.set(n,{}),this.meta.get(n)[t]=e},getMetadataKeys(t){return t=Object.getPrototypeOf(t),this.meta.get(t)?Object.keys(this.meta.get(t)):[]},getMetadata(t,e){return e=Object.getPrototypeOf(e),this.meta.get(e)?this.meta.get(e)[t]:null}};var c=n(741),l=n(634);const u=new Map;o.A.find("get-components")||o.A.on("get-components",(t=>t.components=u));const d=t=>t;class p{renderState(t,e=null){if(!this.view)return;let n=e||this.view(t);if(o.A.debug&&o.A.run("debug",{component:this,_:n?".":"-",state:t,vdom:n,el:this.element}),"object"!=typeof document)return;const s="string"==typeof this.element&&this.element?(0,l.oP)(this.element)||(0,l.bV)(this.element):this.element;if(!s)return void console.warn(`Component element not found: ${this.element}`);const r="_c";this.unload?s._component===this&&s.getAttribute(r)===this.tracking_id||(this.tracking_id=(new Date).valueOf().toString(),s.setAttribute(r,this.tracking_id),"undefined"!=typeof MutationObserver&&(this.observer||(this.observer=new MutationObserver((t=>{t[0].oldValue!==this.tracking_id&&document.body.contains(s)||(this.unload(this.state),this.observer.disconnect(),this.observer=null)}))),this.observer.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[r]}))):s.removeAttribute&&s.removeAttribute(r),s._component=this,!e&&n&&(n=(0,c.A)(n,this),this.options.transition&&document&&document.startViewTransition?document.startViewTransition((()=>o.A.render(s,n,this))):o.A.render(s,n,this)),this.rendered&&this.rendered(this.state)}setState(t,e={render:!0,history:!1}){const n=t;if(null==n?void 0:n[Symbol.asyncIterator])this.setState((async t=>{try{for(;;){const{value:n,done:o}=await t.next();if(o)break;this.setState(n,e)}}catch(t){console.error("Error in async iterator:",t)}})(n[Symbol.asyncIterator]()),e);else if((null==n?void 0:n[Symbol.iterator])&&"function"==typeof n.next)for(const t of n)this.setState(t,e);else if(t&&t instanceof Promise)Promise.resolve(t).then((n=>{this.setState(n,e),this._state=t}));else{if(this._state=t,null==t)return;this.state=t,!1!==e.render&&(e.transition&&document&&document.startViewTransition?document.startViewTransition((()=>this.renderState(t))):this.renderState(t)),!1!==e.history&&this.enable_history&&(this._history=[...this._history,t],this._history_idx=this._history.length-1),"function"==typeof e.callback&&e.callback(this.state)}}constructor(t,e,n,s){this.state=t,this.view=e,this.update=n,this.options=s,this._app=new o.q,this._actions=[],this._global_events=[],this._history=[],this._history_idx=-1,this._history_prev=()=>{this._history_idx--,this._history_idx>=0?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=0},this._history_next=()=>{this._history_idx++,this._history_idx<this._history.length?this.setState(this._history[this._history_idx],{render:!0,history:!1}):this._history_idx=this._history.length-1},this.start=(t=null,e)=>{if(this.mount(t,Object.assign({render:!0},e)),this.mounted&&"function"==typeof this.mounted){const t=this.mounted({},[],this.state);void 0!==t&&this.setState(t)}return this}}mount(t=null,e){var n,s;return console.assert(!this.element,"Component already mounted."),this.options=e=Object.assign(Object.assign({},this.options),e),this.element=t,this.global_event=e.global_event,this.enable_history=!!e.history,this.enable_history&&(this.on(e.history.prev||"history-prev",this._history_prev),this.on(e.history.next||"history-next",this._history_next)),e.route&&(this.update=this.update||{},this.update[e.route]||(this.update[e.route]=d)),this.add_actions(),this.state=null!==(s=null!==(n=this.state)&&void 0!==n?n:this.model)&&void 0!==s?s:{},"function"==typeof this.state&&(this.state=this.state()),this.setState(this.state,{render:!!e.render,history:!0}),o.A.debug&&(u.get(t)?u.get(t).push(this):u.set(t,[this])),this}is_global_event(t){return t&&(this.global_event||this._global_events.indexOf(t)>=0||t.startsWith("#")||t.startsWith("/")||t.startsWith("@"))}add_action(t,e,n={}){e&&"function"==typeof e?(n.global&&this._global_events.push(t),this.on(t,((...s)=>{o.A.debug&&o.A.run("debug",{component:this,_:">",event:t,p:s,current_state:this.state,options:n});try{const r=e(this.state,...s);o.A.debug&&o.A.run("debug",{component:this,_:"<",event:t,p:s,newState:r,state:this.state,options:n}),this.setState(r,n)}catch(e){console.error(`Error in component action '${t}':`,e),o.A.debug&&o.A.run("debug",{component:this,_:"!",event:t,p:s,error:e,state:this.state,options:n})}}),n)):console.warn(`Component action for '${t}' is not a valid function:`,e)}add_actions(){const t=this.update||{};a.getMetadataKeys(this).forEach((e=>{if(e.startsWith("apprun-update:")){const n=a.getMetadata(e,this);t[n.name]=[this[n.key].bind(this),n.options]}}));const e={};Array.isArray(t)?t.forEach((t=>{const[n,o,s]=t;n.toString().split(",").forEach((t=>e[t.trim()]=[o,s]))})):Object.keys(t).forEach((n=>{const o=t[n];("function"==typeof o||Array.isArray(o))&&n.split(",").forEach((t=>e[t.trim()]=o))})),e["."]||(e["."]=d),Object.keys(e).forEach((t=>{const n=e[t];"function"==typeof n?this.add_action(t,n):Array.isArray(n)&&this.add_action(t,n[0],n[1])}))}run(t,...e){if(this.state instanceof Promise)return Promise.resolve(this.state).then((n=>{this.state=n,this.run(t,...e)}));{const n=t.toString();return this.is_global_event(n)?o.A.run(n,...e):this._app.run(n,...e)}}on(t,e,n){const s=t.toString();return this._actions.push({name:s,fn:e}),this.is_global_event(s)?o.A.on(s,e,n):this._app.on(s,e,n)}runAsync(t,...e){const n=t.toString();return this.is_global_event(n)?o.A.runAsync(n,...e):this._app.runAsync(n,...e)}query(t,...e){return this.runAsync(t,...e)}unmount(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this._actions.forEach((t=>{const{name:e,fn:n}=t;this.is_global_event(e)?o.A.off(e,n):this._app.off(e,n)}))}}p.__isAppRunComponent=!0;const h="//",f="///",m=t=>{if(o.A.lastUrl!==t)if(o.A.lastUrl=t,t||(t="#"),t.startsWith("#")){const[e,...n]=t.split("/");o.A.run(e,...n)||o.A.run(f,e,...n),o.A.run(h,e,...n)}else if(t.startsWith("/")){const[e,n,...s]=t.split("/");o.A.run("/"+n,...s)||o.A.run(f,"/"+n,...s),o.A.run(h,"/"+n,...s)}else o.A.run(t)||o.A.run(f,t),o.A.run(h,t)};var y=n(672);if(!o.A.start){o.A.version=y.a,o.A.h=o.A.createElement=s.createElement,o.A.render=s.render,o.A.Fragment=s.Fragment,o.A.webComponent=i,o.A.safeHTML=s.safeHTML,o.A.start=(t,e,n,o,s)=>{const r=Object.assign({render:!0,global_event:!0},s),i=new p(e,n,o);return s&&s.rendered&&(i.rendered=s.rendered),s&&s.mounted&&(i.mounted=s.mounted),i.start(t,r),i},o.A.once=o.A.once||((t,e,n={})=>{o.A.on(t,e,Object.assign(Object.assign({},n),{once:!0}))}),o.A.query=o.A.query||o.A.runAsync;const t=t=>{};if(o.A.on("debug",(e=>t)),o.A.on(h,t),o.A.on(f,t),o.A.route=m,o.A.on("route",(t=>o.A.route&&o.A.route(t))),"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{const t=document.body.hasAttribute("apprun-no-init")||o.A["no-init-route"]||!1,e=o.A.find("#")||o.A.find("#/")||!1;window.addEventListener("hashchange",(()=>m(location.hash))),window.addEventListener("popstate",(()=>m(location.pathname))),e?!t&&m(location.hash):(!t&&m(location.pathname),document.body.addEventListener("click",(t=>{const e=t.target;if(!e)return;const n="A"===e.tagName?e:e.closest("a");n&&n.origin===location.origin&&n.pathname&&(t.preventDefault(),history.pushState(null,"",n.pathname),m(n.pathname))})))})),"object"==typeof window){const t=window;t.Component=p,t._React=t.React,t.React=o.A,t.on=function(t,e={}){return function(n,o){const s=t?t.toString():o;a.defineMetadata(`apprun-update:${s}`,{name:s,key:o,options:e},n)}},t.customElement=function(t,e){return function(n){return i(t,n,e),n}},t.safeHTML=s.safeHTML}o.A.use_render=(t,e=0)=>{o.A.render=0===e?(e,n)=>t(n,e):(e,n)=>t(e,n)},o.A.use_react=(t,e)=>{if(t&&e)if("function"==typeof t.createElement)if(t.Fragment)if(o.A.h=o.A.createElement=t.createElement,o.A.Fragment=t.Fragment,t.version&&t.version.startsWith("18")){if(!e.createRoot||"function"!=typeof e.createRoot)return void console.error("AppRun use_react: ReactDOM.createRoot not found in React 18+");o.A.render=(t,n)=>{t&&void 0!==n&&(t._root||(t._root=e.createRoot(t)),t._root.render(n))}}else{if(!e.render||"function"!=typeof e.render)return void console.error("AppRun use_react: ReactDOM.render not found in legacy React");o.A.render=(t,n)=>e.render(n,t)}else console.error("AppRun use_react: Invalid React object - Fragment not found");else console.error("AppRun use_react: Invalid React object - createElement method not found");else console.error("AppRun use_react: React and ReactDOM parameters are required")}}},741:(t,e,n)=>{n.d(e,{A:()=>c});var o=n(859),s=n(634);const r=(t,e)=>(e?t.state[e]:t.state)||"",i=(t,e,n)=>{if(e){const o=t.state||{};o[e]=n,t.setState(o)}else t.setState(n)},a=(t,e)=>{if(Array.isArray(t))return t.map((t=>a(t,e)));{let{type:n,tag:c,props:l,children:u}=t;return c=c||n,u=u||(null==l?void 0:l.children),l&&Object.keys(l).forEach((t=>{t.startsWith("$")&&(((t,e,n,a)=>{if(t.startsWith("$on")){const n=e[t];if(t=t.substring(1),"boolean"==typeof n)e[t]=e=>a.run?a.run(t,e):o.A.run(t,e);else if("string"==typeof n)e[t]=t=>a.run?a.run(n,t):o.A.run(n,t);else if("function"==typeof n)e[t]=t=>a.setState(n(a.state,t));else if(Array.isArray(n)){const[s,...r]=n;"string"==typeof s?e[t]=t=>a.run?a.run(s,...r,t):o.A.run(s,...r,t):"function"==typeof s&&(e[t]=t=>a.setState(s(a.state,...r,t)))}}else if("$bind"===t){const o=e.type||"text",c="string"==typeof e[t]?e[t]:e.name;if("input"===n)switch(o){case"checkbox":e.checked=r(a,c),e.onclick=t=>{const e=(0,s.PB)(t);e&&i(a,c||e.name,e.checked)};break;case"radio":e.checked=r(a,c)===e.value,e.onclick=t=>{const e=(0,s.PB)(t);e&&i(a,c||e.name,e.value)};break;case"number":case"range":e.value=r(a,c),e.oninput=t=>{const e=(0,s.PB)(t);e&&i(a,c||e.name,Number(e.value))};break;default:e.value=r(a,c),e.oninput=t=>{const e=(0,s.PB)(t);e&&i(a,c||e.name,e.value)}}else"select"===n?(e.value=r(a,c),e.onchange=t=>{const e=(0,s.PB)(t);e&&!e.multiple&&i(a,c||e.name,e.value)}):"option"===n?(e.selected=r(a,c),e.onclick=t=>{const e=(0,s.PB)(t);e&&i(a,c||e.name,e.selected)}):"textarea"===n&&(e.innerHTML=r(a,c),e.oninput=t=>{const e=(0,s.PB)(t);e&&i(a,c||e.name,e.value)})}else o.A.run("$",{key:t,tag:n,props:e,component:a})})(t,l,c,e),delete l[t])})),u&&a(u,e),t}},c=a},634:(t,e,n)=>{function o(t){return(null==t?void 0:t.target)instanceof HTMLElement?t.target:null}function s(t,e=document){try{return e.querySelector(t)}catch(e){return console.warn(`Invalid selector: ${t}`,e),null}}function r(t){try{return document.getElementById(t)}catch(e){return console.warn(`Error getting element by id: ${t}`,e),null}}n.d(e,{PB:()=>o,bV:()=>s,oP:()=>r})},791:(t,e,n)=>{n.d(e,{FK:()=>s,cJ:()=>l,n:()=>a,t_:()=>p});var o=n(741);function s(t,...e){return i(e)}const r="_props";function i(t){const e=[],n=t=>{null!=t&&""!==t&&!1!==t&&e.push("function"==typeof t||"object"==typeof t?t:`${t}`)};return t&&t.forEach((t=>{Array.isArray(t)?t.forEach((t=>n(t))):n(t)})),e}function a(t,e,...n){const o=i(n);if("string"==typeof t)return{tag:t,props:e,children:o};if(Array.isArray(t))return t;if(void 0===t&&n)return o;if(Object.getPrototypeOf(t).__isAppRunComponent)return{tag:t,props:e,children:o};if("function"==typeof t)return t(e,o);throw new Error(`Unknown tag in vdom ${t}`)}const c={},l=(t,e,n={})=>{null!=e&&!1!==e&&function(t,e,n={}){if(null==e||!1===e)return;if(e=y(e,n),!t)return;const o="SVG"===t.nodeName;Array.isArray(e)?d(t,e,o):d(t,[e],o)}("string"==typeof t&&t?document.getElementById(t)||document.querySelector(t):t,e=(0,o.A)(e,n),n)};function u(t,e,n){n=n||"svg"===e.tag,function(t,e){const n=t.nodeName,o=`${e.tag||""}`;return n.toUpperCase()===o.toUpperCase()}(t,e)?(d(t,e.children,n),m(t,e.props,n)):t.parentNode.replaceChild(f(e,n),t)}function d(t,e,n){var o;const s=(null===(o=t.childNodes)||void 0===o?void 0:o.length)||0,r=(null==e?void 0:e.length)||0;if(null==e?void 0:e.some((t=>t&&"object"==typeof t&&t.props&&void 0!==t.props.key))){const o=new Map;for(let e=0;e<s;e++){const n=t.childNodes[e];n&&n.key&&o.set(n.key,n)}const i=document.createDocumentFragment();for(let t=0;t<r;t++){const s=e[t];if(null==s)continue;const r=s.props&&s.props.key;if(r&&o.has(r)){const t=o.get(r);u(t,s,n),i.appendChild(t),o.delete(r)}else i.appendChild(f(s,n))}for(;t.firstChild;)t.removeChild(t.firstChild);return void t.appendChild(i)}const i=Math.min(s,r);for(let o=0;o<i;o++){const s=e[o];if(null==s)continue;const r=t.childNodes[o];r&&("string"==typeof s?3===r.nodeType?r.nodeValue!==s&&(r.nodeValue=s):t.replaceChild(h(s),r):s instanceof HTMLElement||s instanceof SVGElement?t.replaceChild(s,r):s&&"object"==typeof s&&u(t.childNodes[o],s,n))}for(;t.childNodes.length>i;)t.removeChild(t.lastChild);if(r>i){const o=document.createDocumentFragment();for(let t=i;t<e.length;t++){const s=e[t];null!=s&&o.appendChild(f(s,n))}t.appendChild(o)}}const p=t=>{const e=document.createElement("section");return e.insertAdjacentHTML("afterbegin",t),Array.from(e.children)};function h(t){if(0===(null==t?void 0:t.indexOf("_html:"))){const e=document.createElement("div");return e.insertAdjacentHTML("afterbegin",t.substring(6)),e}return document.createTextNode(null!=t?t:"")}function f(t,e){if(t instanceof HTMLElement||t instanceof SVGElement)return t;if("string"==typeof t)return h(t);if(!t||"object"!=typeof t||!t.tag||"function"==typeof t.tag)return h("object"==typeof t?JSON.stringify(t):String(null!=t?t:""));const n=(e=e||"svg"===t.tag)?document.createElementNS("http://www.w3.org/2000/svg",t.tag):document.createElement(t.tag);return m(n,t.props,e),t.children&&t.children.forEach((t=>n.appendChild(f(t,e)))),n}function m(t,e,n){const o=t[r]||{};e=function(t,e){e.class=e.class||e.className,delete e.className;const n={};return t&&Object.keys(t).forEach((t=>n[t]=null)),e&&Object.keys(e).forEach((t=>n[t]=e[t])),n}(o,e||{}),t[r]=e;for(const o in e){const s=e[o];if(o.startsWith("data-")){const e=o.substring(5).replace(/-(\w)/g,(t=>t[1].toUpperCase()));t.dataset[e]!==s&&(s||""===s?t.dataset[e]=s:delete t.dataset[e])}else if("style"===o)if(t.style.cssText&&(t.style.cssText=""),"string"==typeof s)t.style.cssText=s;else for(const e in s)t.style[e]!==s[e]&&(t.style[e]=s[e]);else if(o.startsWith("xlink")){const e=o.replace("xlink","").toLowerCase();null==s||!1===s?t.removeAttributeNS("http://www.w3.org/1999/xlink",e):t.setAttributeNS("http://www.w3.org/1999/xlink",e,s)}else o.startsWith("on")?s&&"function"!=typeof s?"string"==typeof s&&(s?t.setAttribute(o,s):t.removeAttribute(o)):t[o]=s:/^id$|^class$|^list$|^readonly$|^contenteditable$|^role|-|^for$/g.test(o)||n?t.getAttribute(o)!==s&&(s?t.setAttribute(o,s):t.removeAttribute(o)):t[o]!==s&&(t[o]=s);"key"===o&&void 0!==s&&(c[s]=t,t.key=s)}e&&"function"==typeof e.ref&&window.requestAnimationFrame((()=>e.ref(t)))}function y(t,e,n=0){var o;if("string"==typeof t)return t;if(Array.isArray(t))return t.map((t=>y(t,e,n++)));let s=t;if(t&&"function"==typeof t.tag&&Object.getPrototypeOf(t.tag).__isAppRunComponent&&(s=function(t,e,n){const{tag:o,props:s,children:r}=t;let i=`_${n}`,a=s&&s.id;a?i=a:a=`_${n}${Date.now()}`;let c="section";s&&s.as&&(c=s.as,delete s.as),e.__componentCache||(e.__componentCache={});let l=e.__componentCache[i];if(l&&l instanceof o&&l.element)l.renderState(l.state);else{const t=document.createElement(c);l=e.__componentCache[i]=new o(Object.assign(Object.assign({},s),{children:r})).mount(t,{render:!0})}if(l.mounted){const t=l.mounted(s,r,l.state);void 0!==t&&l.setState(t)}return m(l.element,s,!1),l.element}(t,e,n)),s&&Array.isArray(s.children)){const t=null===(o=s.props)||void 0===o?void 0:o._component;if(t){let e=0;s.children=s.children.map((n=>y(n,t,e++)))}else s.children=s.children.map((t=>y(t,e,n++)))}return s}},320:(t,e,n)=>{n.d(e,{Fragment:()=>o.FK,createElement:()=>o.n,render:()=>o.cJ,safeHTML:()=>o.t_});var o=n(791)},672:(t,e,n)=>{n.d(e,{C:()=>s,a:()=>o});const o="3.36.0",s=`AppRun-${o}`}},e={};function n(o){var s=e[o];if(void 0!==s)return s.exports;var r=e[o]={exports:{}};return t[o](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};n.r(o);var s=n(466);const r=(t,e,n,o)=>{if(!e||!n)return;const s=t=>{var n,o;const s=e.cloneNode();null===(n=e.parentNode)||void 0===n||n.replaceChild(s,e);const r=null===(o=(e=s).contentWindow)||void 0===o?void 0:o.document;r&&(r.open(),t.indexOf("<html")>=0?r.write(t):r.write((t=>`<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <meta http-equiv="X-UA-Compatible" content="ie=edge">\n  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"><\/script>\n  <title>AppRun Playground</title>\n  <style>\n    body {\n      font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;\n      margin: 2em;\n    }\n  </style>\n  <script src="https://unpkg.com/@babel/standalone/babel.min.js"><\/script>\n  <script src="https://unpkg.com/apprun/dist/apprun-html.js"><\/script>\n</head>\n<body>\n<script>\n  Babel.registerPlugin("d", [Babel.availablePlugins["proposal-decorators"], {legacy: true}]);\n  Babel.registerPlugin("c", [Babel.availablePlugins["proposal-class-properties"], {loose: true}]);\n  Babel.registerPlugin("b", [Babel.availablePlugins["proposal-private-methods"], {loose: true}]);\n<\/script>\n<script type="text/babel" data-plugins="d, c, b">\n  ${t}\n<\/script>\n</body>\n</html>`)(t)),r.close())};s(n),!o&&t&&"TEXTAREA"===t.nodeName&&("undefined"==typeof CodeMirror?t.onkeyup=()=>s(t.value):t.editor||(t.editor=CodeMirror.fromTextArea(t,{lineNumbers:!0,mode:"jsx"}),t.editor.on("change",(t=>s(t.getValue())))))};class i extends s.Component{constructor(){super(...arguments),this.view=t=>{const e=t["code-element-id"],n=this.element;let o,r;return o=e?document.getElementById(e):n.previousElementSibling||n.parentElement.previousElementSibling,r=(null==o?void 0:o.innerText)||(null==o?void 0:o.value)||t.code,this.state.code_area=o,this.state.code=r,r?s.app.h(s.app.Fragment,null,s.app.h("div",{class:"toolbox"},!t.hide_button&&s.app.h("a",{class:"button",$onclick:"show-popup"},"Try the Code"))):s.app.h("div",null,"AppRun Play cannot find code to run, please set code-element-id or code.")},this.rendered=({style:t,hide_src:e,code_area:n,code:o})=>{if(!o)return;if(!document.getElementById("play-popup")){document.body.insertAdjacentHTML("beforeend",'<div id="play-popup" class="overlay">\n<style id="apprun-play-style">\n.apprun-play .col {\n  height: 100%;\n  flex: 1;\n}\n.apprun-preview {\n  width: 100%\n}\n.apprun-play .editor, .apprun-play .preview {\n  display: inline-block;\n  width: calc(100% - 20px);\n  height: calc(100% - 10px);\n}\n\na.button {\n  font-size: .8em;\n  padding: 10px;\n  cursor: pointer;\n  color: var(--md-primary-bg-color);\n  background: var(--md-primary-fg-color)\n}\na.button:hover {\n  color: var(--md-primary-fg-color);\n  background: var(--md-primary-bg-color)\n}\n\n.overlay {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.7);\n  visibility: hidden;\n  opacity: 0;\n  z-index: 999;\n}\n.overlay.show {\n  visibility: visible;\n  opacity: 1;\n}\n\n.popup {\n  margin: 80px auto;\n  padding: 20px;\n  background: #fff;\n  border-radius: 3px;\n  position: relative;\n  width: 90%;\n  height: calc(100% - 150px);\n}\n\n.popup .close {\n  position: absolute;\n  top: 10px;\n  right: 20px;\n  font-size: 20px;\n  font-weight: bold;\n  text-decoration: none;\n  color: #333;\n}\n.popup .close:hover {\n  color: #06D85F;\n}\n.popup .content {\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n}\n\n.cm-s-default {\n  height: 100%;\n  font-size: small;\n  line-height: 1.5em;\n  z-index: 0;\n}\n</style>\n\n\t<div class="popup apprun-play">\n\t\t<a class="close" href="javascript:app.run(\'@close-popup\')">&times;</a>\n\t\t<div class="content">\n\t\t\t<div class="col">\n        <textarea class="editor"></textarea>\n      </div>\n      <div class="col">\n      <iframe class="preview"/>\n      </div>\n    </div>\n\t</div>\n</div>');const t=document.querySelector(".apprun-play .editor"),e=document.querySelector(".apprun-play .preview");t.value=o,r(t,e,o,!1)}const s=document.createElement("iframe");s.classList.add("apprun-preview"),s.style.cssText=t,this.element.before(s),e&&(n.style.display="none"),r(n,s,o,e)},this.update={"show-popup":({code:t})=>{var e;null===(e=document.querySelector(".apprun-play .editor").editor)||void 0===e||e.setValue(t),document.getElementById("play-popup").classList.add("show")},"@close-popup":()=>{document.getElementById("play-popup").classList.remove("show")}}}}return s.app.webComponent("apprun-play",i),o})()));
 //# sourceMappingURL=apprun-play.js.map