apprun 3.32.0 → 3.33.0

package/README.md

@@ -1,9 +1,22 @@
 # AppRun [![Build][travis-image]][travis-url] [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![License][license-image]][license-url] [![twitter][twitter-badge]][twitter] [![Discord Chat][discord-image]][discord-invite]
 
-AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and components.
+
+## Introduction
+
+AppRun is a sleek and efficient JavaScript library designed to revolutionize statement management in web development. At its core, AppRun harnesses the power of the event PubsSub (Publish-Subscribe) pattern to streamline your application’s state handling.
+
+
+## Why the Event Pubsub Pattern?
+
+The event PubSub pattern isn't new; it's a well-established design pattern used widely in software development to handle communication between components or services in a decoupled manner. Web developers are likely already familiar with the PubSub pattern through their use of DOM event handling.
+
+AppRun takes the familiar PubSub concept and extends it into your application's logic, providing a more structured and powerful approach to state management. The result? Cleaner, more maintainable code and a smoother development experience.
+
+Here is an example of a simple counter application built with AppRun:
+
 
 ```js
-// define the application state
+// define the initial state
 const state = 0;
 
 // view is a pure function to display the state
@@ -18,15 +31,16 @@ const update = {
   '+1': state => state + 1,
   '-1': state => state - 1
 };
-app.start(document.body, state, view, update, { transition: true });
+
+// start the app
+app.start(document.body, state, view, update);
 ```
 <apprun-play style="height:200px"></apprun-play>
 
-> Note, the transition option is newly added to enable the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) during the rendering of the view.
 
 ## AppRun Benefits
 
-* Clean architecure that needs less code
+* Clean architecture that needs less code
 * State management and routing included
 * No proprietary syntax to learn (no hooks)
 * Use directly in the browser or with a compiler/bundler
@@ -66,46 +80,6 @@ Or, you can create an AppRun app by using the `npm create apprun-app` command.
 npm create apprun-app [my-app]
 ```
 
-## Component and Web Component
-
-An AppRun component is a mini-application with elm architecture, which means inside a component, there are _state_, _view_, and _update_. In addition, components provide a local scope.
-
-```js
-class Counter extends Component {
-  state = 0;
-  view = state => {
-    const add = (state, num) => state + num;
-    return <>
-      <h1>{state}</h1>
-      <button $onclick={[add, -1]}>-1</button>
-      <button $onclick={[add, +1]}>+1</button>
-      </>;
-  }
-}
-app.render(document.body, <Counter/>);
-```
-
-You can convert AppRun components into [web components/custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components). AppRun components become the custom elements that also can handle AppRun events.
-
-```js
-class Counter extends Component {
-  state = 0;
-  view = state => {
-    const add = (state, num) => state + num;
-    return <>
-      <h1>{state}</h1>
-      <button $onclick={[add, -1]}>-1</button>
-      <button $onclick={[add, +1]}>+1</button>
-      </>;
-  }
-}
-app.webComponent('my-app', Counter);
-app.render(document.body, <my-app />);
-```
-
-> [All the Ways to Make a Web Component - May 2021 Update](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/) compares the coding style, bundle size, and performance of 55 different ways to make a Web Component. It put AppRun on the top 1/3 of the list of bundle size and performance.
->
-
 ### Learn More
 
 You can get started with [AppRun Docs](https://apprun.js.org/docs) and [the AppRun Playground](https://apprun.js.org/#play).
@@ -158,7 +132,7 @@ AppRun is an MIT-licensed open source project. Please consider [supporting the p
 
 MIT
 
-Copyright (c) 2015-2022 Yiyi Sun
+Copyright (c) 2015-2024 Yiyi Sun
 
 
 [travis-image]: https://travis-ci.org/yysun/apprun.svg?branch=master

package/WHATSNEW.md

@@ -1,5 +1,19 @@
 ## What's New
 
+> Aug 12, 2024, V3.33.0
+
+### Add app.use_render and app.use_react function
+
+The `app.use_render` function allows you to use a custom render function for rendering the view (e.g., React < 18 ). The `app.use_react` function allows you to use React 18 and up for rendering the view.
+
+```js
+import { createRoot } from 'react-dom/client'
+import app from 'apprun';
+app.use_react(createRoot);
+```
+
+See https://github.com/yysun/apprun-antd-demo-js for an example.
+
 ### Support the _mounted_ function when starting a component manually
 
 > Dec, 8, 2023

package/dist/apprun-html.esm.js

@@ -4,7 +4,7 @@ class t{constructor(){this._events={}}on(t,i,s={}){this._events[t]=this._events[
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var N;n.on("$",S),n.on("debug",(t=>S)),n.on(M,S),n.on("#",S),n.route=C,n.on("route",(t=>n.route&&n.route(t))),"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{n.route===C&&(window.onpopstate=()=>C(location.hash),document.body.hasAttribute("apprun-no-init")||n["no-init-route"]||C(location.hash))})),"object"==typeof window&&(window.Component=T,window._React=window.React,window.React=n,window.on=O,window.customElement=_,window.safeHTML=p);const L=globalThis.trustedTypes,U=L?L.createPolicy("lit-html",{createHTML:t=>t}):void 0,H=`lit$${(Math.random()+"").slice(9)}$`,P="?"+H,D=`<${P}>`,I=document,V=(t="")=>I.createComment(t),q=t=>null===t||"object"!=typeof t&&"function"!=typeof t,G=Array.isArray,R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,W=/-->/g,z=/>/g,F=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,Z=/'/g,J=/"/g,K=/^(?:script|style|textarea|title)$/i,B=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),Q=B(1),X=B(2),Y=Symbol.for("lit-noChange"),tt=Symbol.for("lit-nothing"),it=new WeakMap,st=(t,i,s)=>{var n,e;const o=null!==(n=null==s?void 0:s.renderBefore)&&void 0!==n?n:i;let r=o._$litPart$;if(void 0===r){const t=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:null;o._$litPart$=r=new ct(i.insertBefore(V(),t),t,void 0,null!=s?s:{})}return r._$AI(t),r},nt=I.createTreeWalker(I,129,null,!1),et=(t,i)=>{const s=t.length-1,n=[];let e,o=2===i?"<svg>":"",r=R;for(let i=0;i<s;i++){const s=t[i];let h,c,l=-1,u=0;for(;u<s.length&&(r.lastIndex=u,c=r.exec(s),null!==c);)u=r.lastIndex,r===R?"!--"===c[1]?r=W:void 0!==c[1]?r=z:void 0!==c[2]?(K.test(c[2])&&(e=RegExp("</"+c[2],"g")),r=F):void 0!==c[3]&&(r=F):r===F?">"===c[0]?(r=null!=e?e:R,l=-1):void 0===c[1]?l=-2:(l=r.lastIndex-c[2].length,h=c[1],r=void 0===c[3]?F:'"'===c[3]?J:Z):r===J||r===Z?r=F:r===W||r===z?r=R:(r=F,e=void 0);const d=r===F&&t[i+1].startsWith("/>")?" ":"";o+=r===R?s+D:l>=0?(n.push(h),s.slice(0,l)+"$lit$"+s.slice(l)+H+d):s+H+(-2===l?(n.push(void 0),i):d)}const h=o+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==U?U.createHTML(h):h,n]};class ot{constructor({strings:t,_$litType$:i},s){let n;this.parts=[];let e=0,o=0;const r=t.length-1,h=this.parts,[c,l]=et(t,i);if(this.el=ot.createElement(c,s),nt.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(n=nt.nextNode())&&h.length<r;){if(1===n.nodeType){if(n.hasAttributes()){const t=[];for(const i of n.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(H)){const s=l[o++];if(t.push(i),void 0!==s){const t=n.getAttribute(s.toLowerCase()+"$lit$").split(H),i=/([.?@])?(.*)/.exec(s);h.push({type:1,index:e,name:i[2],strings:t,ctor:"."===i[1]?ut:"?"===i[1]?ft:"@"===i[1]?at:lt})}else h.push({type:6,index:e})}for(const i of t)n.removeAttribute(i)}if(K.test(n.tagName)){const t=n.textContent.split(H),i=t.length-1;if(i>0){n.textContent=L?L.emptyScript:"";for(let s=0;s<i;s++)n.append(t[s],V()),nt.nextNode(),h.push({type:2,index:++e});n.append(t[i],V())}}}else if(8===n.nodeType)if(n.data===P)h.push({type:2,index:e});else{let t=-1;for(;-1!==(t=n.data.indexOf(H,t+1));)h.push({type:7,index:e}),t+=H.length-1}e++}}static createElement(t,i){const s=I.createElement("template");return s.innerHTML=t,s}}function rt(t,i,s=t,n){var e,o,r,h;if(i===Y)return i;let c=void 0!==n?null===(e=s._$Cl)||void 0===e?void 0:e[n]:s._$Cu;const l=q(i)?void 0:i._$litDirective$;return(null==c?void 0:c.constructor)!==l&&(null===(o=null==c?void 0:c._$AO)||void 0===o||o.call(c,!1),void 0===l?c=void 0:(c=new l(t),c._$AT(t,s,n)),void 0!==n?(null!==(r=(h=s)._$Cl)&&void 0!==r?r:h._$Cl=[])[n]=c:s._$Cu=c),void 0!==c&&(i=rt(t,c._$AS(t,i.values),c,n)),i}class ht{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:n}=this._$AD,e=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:I).importNode(s,!0);nt.currentNode=e;let o=nt.nextNode(),r=0,h=0,c=n[0];for(;void 0!==c;){if(r===c.index){let i;2===c.type?i=new ct(o,o.nextSibling,this,t):1===c.type?i=new c.ctor(o,c.name,c.strings,this,t):6===c.type&&(i=new vt(o,this,t)),this.v.push(i),c=n[++h]}r!==(null==c?void 0:c.index)&&(o=nt.nextNode(),r++)}return e}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class ct{constructor(t,i,s,n){var e;this.type=2,this._$AH=tt,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=n,this._$Cg=null===(e=null==n?void 0:n.isConnected)||void 0===e||e}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=rt(this,t,i),q(t)?t===tt||null==t||""===t?(this._$AH!==tt&&this._$AR(),this._$AH=tt):t!==this._$AH&&t!==Y&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):(t=>{var i;return G(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.S(t):this.$(t)}A(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==tt&&q(this._$AH)?this._$AA.nextSibling.data=t:this.k(I.createTextNode(t)),this._$AH=t}T(t){var i;const{values:s,_$litType$:n}=t,e="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=ot.createElement(n.h,this.options)),n);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===e)this._$AH.m(s);else{const t=new ht(e,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t}}_$AC(t){let i=it.get(t.strings);return void 0===i&&it.set(t.strings,i=new ot(t)),i}S(t){G(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,n=0;for(const e of t)n===i.length?i.push(s=new ct(this.A(V()),this.A(V()),this,this.options)):s=i[n],s._$AI(e),n++;n<i.length&&(this._$AR(s&&s._$AB.nextSibling,n),i.length=n)}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class lt{constructor(t,i,s,n,e){this.type=1,this._$AH=tt,this._$AN=void 0,this.element=t,this.name=i,this._$AM=n,this.options=e,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=tt}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,n){const e=this.strings;let o=!1;if(void 0===e)t=rt(this,t,i,0),o=!q(t)||t!==this._$AH&&t!==Y,o&&(this._$AH=t);else{const n=t;let r,h;for(t=e[0],r=0;r<e.length-1;r++)h=rt(this,n[s+r],i,r),h===Y&&(h=this._$AH[r]),o||(o=!q(h)||h!==this._$AH[r]),h===tt?t=tt:t!==tt&&(t+=(null!=h?h:"")+e[r+1]),this._$AH[r]=h}o&&!n&&this.C(t)}C(t){t===tt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class ut extends lt{constructor(){super(...arguments),this.type=3}C(t){this.element[this.name]=t===tt?void 0:t}}const dt=L?L.emptyScript:"";class ft extends lt{constructor(){super(...arguments),this.type=4}C(t){t&&t!==tt?this.element.setAttribute(this.name,dt):this.element.removeAttribute(this.name)}}class at extends lt{constructor(t,i,s,n,e){super(t,i,s,n,e),this.type=5}_$AI(t,i=this){var s;if((t=null!==(s=rt(this,t,i,0))&&void 0!==s?s:tt)===Y)return;const n=this._$AH,e=t===tt&&n!==tt||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,o=t!==tt&&(n===tt||e);e&&this.element.removeEventListener(this.name,this,n),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class vt{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){rt(this,t)}}const pt=window.litHtmlPolyfillSupport;null==pt||pt(ot,ct),(null!==(N=globalThis.litHtmlVersions)&&void 0!==N?N:globalThis.litHtmlVersions=[]).push("2.2.1");
+var N;n.on("$",S),n.on("debug",(t=>S)),n.on(M,S),n.on("#",S),n.route=C,n.on("route",(t=>n.route&&n.route(t))),"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{n.route===C&&(window.onpopstate=()=>C(location.hash),document.body.hasAttribute("apprun-no-init")||n["no-init-route"]||C(location.hash))})),"object"==typeof window&&(window.Component=T,window._React=window.React,window.React=n,window.on=O,window.customElement=_,window.safeHTML=p),n.use_render=(t,i=0)=>n.render=0===i?(i,s)=>t(s,i):(i,s)=>t(i,s),n.use_react=t=>{n.render=(i,s)=>{i&&s&&(i._root||(i._root=t(i)),i._root.render(s))}};const L=globalThis.trustedTypes,U=L?L.createPolicy("lit-html",{createHTML:t=>t}):void 0,H=`lit$${(Math.random()+"").slice(9)}$`,P="?"+H,D=`<${P}>`,I=document,V=(t="")=>I.createComment(t),q=t=>null===t||"object"!=typeof t&&"function"!=typeof t,G=Array.isArray,R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,W=/-->/g,z=/>/g,F=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,Z=/'/g,J=/"/g,K=/^(?:script|style|textarea|title)$/i,B=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),Q=B(1),X=B(2),Y=Symbol.for("lit-noChange"),tt=Symbol.for("lit-nothing"),it=new WeakMap,st=(t,i,s)=>{var n,e;const o=null!==(n=null==s?void 0:s.renderBefore)&&void 0!==n?n:i;let r=o._$litPart$;if(void 0===r){const t=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:null;o._$litPart$=r=new ct(i.insertBefore(V(),t),t,void 0,null!=s?s:{})}return r._$AI(t),r},nt=I.createTreeWalker(I,129,null,!1),et=(t,i)=>{const s=t.length-1,n=[];let e,o=2===i?"<svg>":"",r=R;for(let i=0;i<s;i++){const s=t[i];let h,c,l=-1,u=0;for(;u<s.length&&(r.lastIndex=u,c=r.exec(s),null!==c);)u=r.lastIndex,r===R?"!--"===c[1]?r=W:void 0!==c[1]?r=z:void 0!==c[2]?(K.test(c[2])&&(e=RegExp("</"+c[2],"g")),r=F):void 0!==c[3]&&(r=F):r===F?">"===c[0]?(r=null!=e?e:R,l=-1):void 0===c[1]?l=-2:(l=r.lastIndex-c[2].length,h=c[1],r=void 0===c[3]?F:'"'===c[3]?J:Z):r===J||r===Z?r=F:r===W||r===z?r=R:(r=F,e=void 0);const d=r===F&&t[i+1].startsWith("/>")?" ":"";o+=r===R?s+D:l>=0?(n.push(h),s.slice(0,l)+"$lit$"+s.slice(l)+H+d):s+H+(-2===l?(n.push(void 0),i):d)}const h=o+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==U?U.createHTML(h):h,n]};class ot{constructor({strings:t,_$litType$:i},s){let n;this.parts=[];let e=0,o=0;const r=t.length-1,h=this.parts,[c,l]=et(t,i);if(this.el=ot.createElement(c,s),nt.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(n=nt.nextNode())&&h.length<r;){if(1===n.nodeType){if(n.hasAttributes()){const t=[];for(const i of n.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(H)){const s=l[o++];if(t.push(i),void 0!==s){const t=n.getAttribute(s.toLowerCase()+"$lit$").split(H),i=/([.?@])?(.*)/.exec(s);h.push({type:1,index:e,name:i[2],strings:t,ctor:"."===i[1]?ut:"?"===i[1]?ft:"@"===i[1]?at:lt})}else h.push({type:6,index:e})}for(const i of t)n.removeAttribute(i)}if(K.test(n.tagName)){const t=n.textContent.split(H),i=t.length-1;if(i>0){n.textContent=L?L.emptyScript:"";for(let s=0;s<i;s++)n.append(t[s],V()),nt.nextNode(),h.push({type:2,index:++e});n.append(t[i],V())}}}else if(8===n.nodeType)if(n.data===P)h.push({type:2,index:e});else{let t=-1;for(;-1!==(t=n.data.indexOf(H,t+1));)h.push({type:7,index:e}),t+=H.length-1}e++}}static createElement(t,i){const s=I.createElement("template");return s.innerHTML=t,s}}function rt(t,i,s=t,n){var e,o,r,h;if(i===Y)return i;let c=void 0!==n?null===(e=s._$Cl)||void 0===e?void 0:e[n]:s._$Cu;const l=q(i)?void 0:i._$litDirective$;return(null==c?void 0:c.constructor)!==l&&(null===(o=null==c?void 0:c._$AO)||void 0===o||o.call(c,!1),void 0===l?c=void 0:(c=new l(t),c._$AT(t,s,n)),void 0!==n?(null!==(r=(h=s)._$Cl)&&void 0!==r?r:h._$Cl=[])[n]=c:s._$Cu=c),void 0!==c&&(i=rt(t,c._$AS(t,i.values),c,n)),i}class ht{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:n}=this._$AD,e=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:I).importNode(s,!0);nt.currentNode=e;let o=nt.nextNode(),r=0,h=0,c=n[0];for(;void 0!==c;){if(r===c.index){let i;2===c.type?i=new ct(o,o.nextSibling,this,t):1===c.type?i=new c.ctor(o,c.name,c.strings,this,t):6===c.type&&(i=new vt(o,this,t)),this.v.push(i),c=n[++h]}r!==(null==c?void 0:c.index)&&(o=nt.nextNode(),r++)}return e}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class ct{constructor(t,i,s,n){var e;this.type=2,this._$AH=tt,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=n,this._$Cg=null===(e=null==n?void 0:n.isConnected)||void 0===e||e}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=rt(this,t,i),q(t)?t===tt||null==t||""===t?(this._$AH!==tt&&this._$AR(),this._$AH=tt):t!==this._$AH&&t!==Y&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):(t=>{var i;return G(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.S(t):this.$(t)}A(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==tt&&q(this._$AH)?this._$AA.nextSibling.data=t:this.k(I.createTextNode(t)),this._$AH=t}T(t){var i;const{values:s,_$litType$:n}=t,e="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=ot.createElement(n.h,this.options)),n);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===e)this._$AH.m(s);else{const t=new ht(e,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t}}_$AC(t){let i=it.get(t.strings);return void 0===i&&it.set(t.strings,i=new ot(t)),i}S(t){G(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,n=0;for(const e of t)n===i.length?i.push(s=new ct(this.A(V()),this.A(V()),this,this.options)):s=i[n],s._$AI(e),n++;n<i.length&&(this._$AR(s&&s._$AB.nextSibling,n),i.length=n)}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class lt{constructor(t,i,s,n,e){this.type=1,this._$AH=tt,this._$AN=void 0,this.element=t,this.name=i,this._$AM=n,this.options=e,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=tt}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,n){const e=this.strings;let o=!1;if(void 0===e)t=rt(this,t,i,0),o=!q(t)||t!==this._$AH&&t!==Y,o&&(this._$AH=t);else{const n=t;let r,h;for(t=e[0],r=0;r<e.length-1;r++)h=rt(this,n[s+r],i,r),h===Y&&(h=this._$AH[r]),o||(o=!q(h)||h!==this._$AH[r]),h===tt?t=tt:t!==tt&&(t+=(null!=h?h:"")+e[r+1]),this._$AH[r]=h}o&&!n&&this.C(t)}C(t){t===tt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class ut extends lt{constructor(){super(...arguments),this.type=3}C(t){this.element[this.name]=t===tt?void 0:t}}const dt=L?L.emptyScript:"";class ft extends lt{constructor(){super(...arguments),this.type=4}C(t){t&&t!==tt?this.element.setAttribute(this.name,dt):this.element.removeAttribute(this.name)}}class at extends lt{constructor(t,i,s,n,e){super(t,i,s,n,e),this.type=5}_$AI(t,i=this){var s;if((t=null!==(s=rt(this,t,i,0))&&void 0!==s?s:tt)===Y)return;const n=this._$AH,e=t===tt&&n!==tt||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,o=t!==tt&&(n===tt||e);e&&this.element.removeEventListener(this.name,this,n),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class vt{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){rt(this,t)}}const pt=window.litHtmlPolyfillSupport;null==pt||pt(ot,ct),(null!==(N=globalThis.litHtmlVersions)&&void 0!==N?N:globalThis.litHtmlVersions=[]).push("2.2.1");
 /**
  * @license
  * Copyright 2017 Google LLC