@sula-tech/webcomponents 0.4.0 → 0.5.0

package/dist/webcomponents/{p-Yyeke16a.js → p-or7qTZgT.js}

@@ -3,8 +3,7 @@ const e = "webcomponents";
 const t = /* webcomponents */ {
   hydratedSelectorName: "hydrated",
   lazyLoad: true,
-  updatable: true,
-  watchCallback: false
+  updatable: true
 };
 
 const globalScripts = () => {};
@@ -58,15 +57,15 @@ var consoleError = (e, t) => (0, console.error)(e, t)
 // src/client/client-load-module.ts
 ;
 
-var r =  new Map;
+var i =  new Map;
 
 var loadModule = (e, t, n) => {
   const o = e._$$tagName$$_.replace(/-/g, "_");
-  const i = e._$$lazyBundleId$$_;
-  if (!i) {
+  const r = e._$$lazyBundleId$$_;
+  if (!r) {
     return void 0;
   }
-  const s = r.get(i);
+  const s = i.get(r);
   if (s) {
     return s[o];
   }
@@ -75,9 +74,9 @@ var loadModule = (e, t, n) => {
   /* webpackInclude: /\.entry\.js$/ */
   /* webpackExclude: /\.system\.entry\.js$/ */
   /* webpackMode: "lazy" */
-  `./${i}.entry.js${""}`).then((e => {
+  `./${r}.entry.js${""}`).then((e => {
     {
-      r.set(i, e);
+      i.set(r, e);
     }
     return e[o];
   }), (e => {
@@ -86,7 +85,7 @@ var loadModule = (e, t, n) => {
 };
 
 // src/client/client-style.ts
-var i =  new Map;
+var r =  new Map;
 
 var s = "{visibility:hidden}.hydrated{visibility:inherit}";
 
@@ -264,8 +263,8 @@ var uniqueTime = (e, t) => {
 
 var h = (e, t, ...n) => {
   let o = null;
-  let r = null;
-  let i = false;
+  let i = null;
+  let r = false;
   let s = false;
   const l = [];
   const walk = t => {
@@ -274,22 +273,22 @@ var h = (e, t, ...n) => {
       if (Array.isArray(o)) {
         walk(o);
       } else if (o != null && typeof o !== "boolean") {
-        if (i = typeof e !== "function" && !isComplexType(o)) {
+        if (r = typeof e !== "function" && !isComplexType(o)) {
           o = String(o);
         }
-        if (i && s) {
+        if (r && s) {
           l[l.length - 1]._$$text$$_ += o;
         } else {
-          l.push(i ? newVNode(null, o) : o);
+          l.push(r ? newVNode(null, o) : o);
         }
-        s = i;
+        s = r;
       }
     }
   };
   walk(n);
   if (t) {
     if (t.key) {
-      r = t.key;
+      i = t.key;
     }
     {
       const e = t.className || t.class;
@@ -304,7 +303,7 @@ var h = (e, t, ...n) => {
     a._$$children$$_ = l;
   }
   {
-    a._$$key$$_ = r;
+    a._$$key$$_ = i;
   }
   return a;
 };
@@ -387,7 +386,7 @@ var emitEvent = (e, t, n) => {
 var g =  new WeakMap;
 
 var registerStyle = (e, t, n) => {
-  let o = i.get(e);
+  let o = r.get(e);
   if (u && n) {
     o = o || new CSSStyleSheet;
     if (typeof o === "string") {
@@ -398,38 +397,38 @@ var registerStyle = (e, t, n) => {
   } else {
     o = t;
   }
-  i.set(e, o);
+  r.set(e, o);
 };
 
 var addStyle = (e, t, n) => {
   var o;
-  const r = getScopeId(t);
-  const s = i.get(r);
+  const i = getScopeId(t);
+  const s = r.get(i);
   if (!a.document) {
-    return r;
+    return i;
   }
   e = e.nodeType === 11 /* DocumentFragment */ ? e : a.document;
   if (s) {
     if (typeof s === "string") {
       e = e.head || e;
       let n = g.get(e);
-      let i;
+      let r;
       if (!n) {
         g.set(e, n =  new Set);
       }
-      if (!n.has(r)) {
+      if (!n.has(i)) {
         {
-          i = a.document.createElement("style");
-          i.innerHTML = s;
+          r = a.document.createElement("style");
+          r.innerHTML = s;
           const n = (o = c._$$nonce$$_) != null ? o : queryNonceMetaTagContent(a.document);
           if (n != null) {
-            i.setAttribute("nonce", n);
+            r.setAttribute("nonce", n);
           }
           if (!(t._$$flags$$_ & 1 /* shadowDomEncapsulation */)) {
             if (e.nodeName === "HEAD") {
               const t = e.querySelectorAll("link[rel=preconnect]");
               const n = t.length > 0 ? t[t.length - 1].nextSibling : e.querySelector("style");
-              e.insertBefore(i, (n == null ? void 0 : n.parentNode) === e ? n : null);
+              e.insertBefore(r, (n == null ? void 0 : n.parentNode) === e ? n : null);
             } else if ("host" in e) {
               if (u) {
                 const t = new CSSStyleSheet;
@@ -440,47 +439,47 @@ var addStyle = (e, t, n) => {
                 if (t) {
                   t.innerHTML = s + t.innerHTML;
                 } else {
-                  e.prepend(i);
+                  e.prepend(r);
                 }
               }
             } else {
-              e.append(i);
+              e.append(r);
             }
           }
           if (t._$$flags$$_ & 1 /* shadowDomEncapsulation */) {
-            e.insertBefore(i, null);
+            e.insertBefore(r, null);
           }
         }
         if (t._$$flags$$_ & 4 /* hasSlotRelocation */) {
-          i.innerHTML += l;
+          r.innerHTML += l;
         }
         if (n) {
-          n.add(r);
+          n.add(i);
         }
       }
     } else if (!e.adoptedStyleSheets.includes(s)) {
       e.adoptedStyleSheets = [ ...e.adoptedStyleSheets, s ];
     }
   }
-  return r;
+  return i;
 };
 
 var attachStyles = e => {
   const t = e._$$cmpMeta$$_;
   const n = e.$hostElement$;
   const o = t._$$flags$$_;
-  const r = createTime("attachStyles", t._$$tagName$$_);
-  const i = addStyle(n.shadowRoot ? n.shadowRoot : n.getRootNode(), t);
+  const i = createTime("attachStyles", t._$$tagName$$_);
+  const r = addStyle(n.shadowRoot ? n.shadowRoot : n.getRootNode(), t);
   if (o & 10 /* needsScopedEncapsulation */) {
-    n["s-sc"] = i;
-    n.classList.add(i + "-h");
+    n["s-sc"] = r;
+    n.classList.add(r + "-h");
   }
-  r();
+  i();
 };
 
 var getScopeId = (e, t) => "sc-" + e._$$tagName$$_;
 
-var setAccessor = (e, t, n, o, r, i, s) => {
+var setAccessor = (e, t, n, o, i, r, s) => {
   if (n === o) {
     return;
   }
@@ -488,11 +487,11 @@ var setAccessor = (e, t, n, o, r, i, s) => {
   let f = t.toLowerCase();
   if (t === "class") {
     const t = e.classList;
-    const r = parseClassList(n);
-    let i = parseClassList(o);
+    const i = parseClassList(n);
+    let r = parseClassList(o);
     {
-      t.remove(...r.filter((e => e && !i.includes(e))));
-      t.add(...i.filter((e => e && !r.includes(e))));
+      t.remove(...i.filter((e => e && !r.includes(e))));
+      t.add(...r.filter((e => e && !i.includes(e))));
     }
   } else if (t === "style") {
     {
@@ -528,13 +527,13 @@ var setAccessor = (e, t, n, o, r, i, s) => {
       t = f[2] + t.slice(3);
     }
     if (n || o) {
-      const r = t.endsWith(S);
+      const i = t.endsWith(S);
       t = t.replace($, "");
       if (n) {
-        c.rel(e, t, n, r);
+        c.rel(e, t, n, i);
       }
       if (o) {
-        c.ael(e, t, o, r);
+        c.ael(e, t, o, i);
       }
     }
   } else {
@@ -542,14 +541,14 @@ var setAccessor = (e, t, n, o, r, i, s) => {
     if ((l || s && o !== null) && true) {
       try {
         if (!e.tagName.includes("-")) {
-          const r = o == null ? "" : o;
+          const i = o == null ? "" : o;
           if (t === "list") {
             l = false;
-          } else if (n == null || e[t] != r) {
+          } else if (n == null || e[t] != i) {
             if (typeof e.__lookupSetter__(t) === "function") {
-              e[t] = r;
+              e[t] = i;
             } else {
-              e.setAttribute(t, r);
+              e.setAttribute(t, i);
             }
           }
         } else if (e[t] !== o) {
@@ -563,7 +562,7 @@ var setAccessor = (e, t, n, o, r, i, s) => {
           e.removeAttribute(t);
         }
       }
-    } else if ((!l || i & 4 /* isHost */ || r) && !s && e.nodeType === 1 /* ElementNode */) {
+    } else if ((!l || r & 4 /* isHost */ || i) && !s && e.nodeType === 1 /* ElementNode */) {
       o = o === true ? "" : o;
       {
         e.setAttribute(t, o);
@@ -590,18 +589,18 @@ var $ = new RegExp(S + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (e, t, n, o) => {
-  const r = t._$$elm$$_.nodeType === 11 /* DocumentFragment */ && t._$$elm$$_.host ? t._$$elm$$_.host : t._$$elm$$_;
-  const i = e && e._$$attrs$$_ || {};
+  const i = t._$$elm$$_.nodeType === 11 /* DocumentFragment */ && t._$$elm$$_.host ? t._$$elm$$_.host : t._$$elm$$_;
+  const r = e && e._$$attrs$$_ || {};
   const s = t._$$attrs$$_ || {};
   {
-    for (const e of sortedAttrNames(Object.keys(i))) {
+    for (const e of sortedAttrNames(Object.keys(r))) {
       if (!(e in s)) {
-        setAccessor(r, e, i[e], void 0, n, t._$$flags$$_);
+        setAccessor(i, e, r[e], void 0, n, t._$$flags$$_);
       }
     }
   }
   for (const e of sortedAttrNames(Object.keys(s))) {
-    setAccessor(r, e, i[e], s[e], n, t._$$flags$$_);
+    setAccessor(i, e, r[e], s[e], n, t._$$flags$$_);
   }
 };
 
@@ -619,43 +618,43 @@ var x = false;
 
 var createElm = (e, t, n) => {
   const o = t._$$children$$_[n];
-  let r = 0;
-  let i;
+  let i = 0;
+  let r;
   let s;
   if (o._$$text$$_ !== null) {
-    i = o._$$elm$$_ = a.document.createTextNode(o._$$text$$_);
+    r = o._$$elm$$_ = a.document.createTextNode(o._$$text$$_);
   } else {
     if (!a.document) {
       throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.");
     }
-    i = o._$$elm$$_ = a.document.createElement(o._$$tag$$_);
+    r = o._$$elm$$_ = a.document.createElement(o._$$tag$$_);
     {
       updateElement(null, o, x);
     }
     if (o._$$children$$_) {
-      for (r = 0; r < o._$$children$$_.length; ++r) {
-        s = createElm(e, o, r);
+      for (i = 0; i < o._$$children$$_.length; ++i) {
+        s = createElm(e, o, i);
         if (s) {
-          i.appendChild(s);
+          r.appendChild(s);
         }
       }
     }
   }
-  i["s-hn"] = k;
-  return i;
+  r["s-hn"] = k;
+  return r;
 };
 
-var addVnodes = (e, t, n, o, r, i) => {
+var addVnodes = (e, t, n, o, i, r) => {
   let s = e;
   let l;
   if (s.shadowRoot && s.tagName === k) {
     s = s.shadowRoot;
   }
-  for (;r <= i; ++r) {
-    if (o[r]) {
-      l = createElm(null, n, r);
+  for (;i <= r; ++i) {
+    if (o[i]) {
+      l = createElm(null, n, i);
       if (l) {
-        o[r]._$$elm$$_ = l;
+        o[i]._$$elm$$_ = l;
         insertBefore(s, l, t);
       }
     }
@@ -675,8 +674,8 @@ var removeVnodes = (e, t, n) => {
   }
 };
 
-var updateChildren = (e, t, n, o, r = false) => {
-  let i = 0;
+var updateChildren = (e, t, n, o, i = false) => {
+  let r = 0;
   let s = 0;
   let l = 0;
   let a = 0;
@@ -688,37 +687,37 @@ var updateChildren = (e, t, n, o, r = false) => {
   let v = o[d];
   let m;
   let w;
-  while (i <= c && s <= d) {
+  while (r <= c && s <= d) {
     if (f == null) {
-      f = t[++i];
+      f = t[++r];
     } else if (u == null) {
       u = t[--c];
     } else if (p == null) {
       p = o[++s];
     } else if (v == null) {
       v = o[--d];
-    } else if (isSameVnode(f, p, r)) {
-      patch(f, p, r);
-      f = t[++i];
+    } else if (isSameVnode(f, p, i)) {
+      patch(f, p, i);
+      f = t[++r];
       p = o[++s];
-    } else if (isSameVnode(u, v, r)) {
-      patch(u, v, r);
+    } else if (isSameVnode(u, v, i)) {
+      patch(u, v, i);
       u = t[--c];
       v = o[--d];
-    } else if (isSameVnode(f, v, r)) {
-      patch(f, v, r);
+    } else if (isSameVnode(f, v, i)) {
+      patch(f, v, i);
       insertBefore(e, f._$$elm$$_, u._$$elm$$_.nextSibling);
-      f = t[++i];
+      f = t[++r];
       v = o[--d];
-    } else if (isSameVnode(u, p, r)) {
-      patch(u, p, r);
+    } else if (isSameVnode(u, p, i)) {
+      patch(u, p, i);
       insertBefore(e, u._$$elm$$_, f._$$elm$$_);
       u = t[--c];
       p = o[++s];
     } else {
       l = -1;
       {
-        for (a = i; a <= c; ++a) {
+        for (a = r; a <= c; ++a) {
           if (t[a] && t[a]._$$key$$_ !== null && t[a]._$$key$$_ === p._$$key$$_) {
             l = a;
             break;
@@ -730,7 +729,7 @@ var updateChildren = (e, t, n, o, r = false) => {
         if (w._$$tag$$_ !== p._$$tag$$_) {
           m = createElm(t && t[s], n, l);
         } else {
-          patch(w, p, r);
+          patch(w, p, i);
           t[l] = void 0;
           m = w._$$elm$$_;
         }
@@ -746,10 +745,10 @@ var updateChildren = (e, t, n, o, r = false) => {
       }
     }
   }
-  if (i > c) {
+  if (r > c) {
     addVnodes(e, o[d + 1] == null ? null : o[d + 1]._$$elm$$_, n, o, s, d);
   } else if (s > d) {
-    removeVnodes(t, i, c);
+    removeVnodes(t, r, c);
   }
 };
 
@@ -767,28 +766,28 @@ var isSameVnode = (e, t, n = false) => {
 };
 
 var patch = (e, n, o = false) => {
-  const r = n._$$elm$$_ = e._$$elm$$_;
-  const i = e._$$children$$_;
+  const i = n._$$elm$$_ = e._$$elm$$_;
+  const r = e._$$children$$_;
   const s = n._$$children$$_;
   const l = n._$$text$$_;
   if (l === null) {
     {
       updateElement(e, n, x);
     }
-    if (i !== null && s !== null) {
-      updateChildren(r, i, n, s, o);
+    if (r !== null && s !== null) {
+      updateChildren(i, r, n, s, o);
     } else if (s !== null) {
       if (e._$$text$$_ !== null) {
-        r.textContent = "";
+        i.textContent = "";
       }
-      addVnodes(r, null, n, s, 0, s.length - 1);
+      addVnodes(i, null, n, s, 0, s.length - 1);
     } else if (
     // don't do this on initial render as it can cause non-hydrated content to be removed
-    !o && t.updatable && i !== null) {
-      removeVnodes(i, 0, i.length - 1);
+    !o && t.updatable && r !== null) {
+      removeVnodes(r, 0, r.length - 1);
     }
   } else if (e._$$text$$_ !== l) {
-    r.data = l;
+    i.data = l;
   }
 };
 
@@ -807,9 +806,9 @@ var insertBefore = (e, t, n) => {
 
 var renderVdom = (e, t, n = false) => {
   const o = e.$hostElement$;
-  const r = e._$$vnode$$_ || newVNode(null, null);
-  const i = isHost(t);
-  const s = i ? t : h(null, null, t);
+  const i = e._$$vnode$$_ || newVNode(null, null);
+  const r = isHost(t);
+  const s = r ? t : h(null, null, t);
   k = o.tagName;
   if (n && s._$$attrs$$_) {
     for (const e of Object.keys(s._$$attrs$$_)) {
@@ -821,8 +820,8 @@ var renderVdom = (e, t, n = false) => {
   s._$$tag$$_ = null;
   s._$$flags$$_ |= 4 /* isHost */;
   e._$$vnode$$_ = s;
-  s._$$elm$$_ = r._$$elm$$_ = o.shadowRoot || o;
-  patch(r, s, n);
+  s._$$elm$$_ = i._$$elm$$_ = o.shadowRoot || o;
+  patch(i, s, n);
 };
 
 // src/runtime/update-component.ts
@@ -851,29 +850,29 @@ var scheduleUpdate = (e, t) => {
 var dispatchHooks = (e, t) => {
   const n = e.$hostElement$;
   const o = createTime("scheduleUpdate", e._$$cmpMeta$$_._$$tagName$$_);
-  const r = e._$$lazyInstance$$_;
-  if (!r) {
+  const i = e._$$lazyInstance$$_;
+  if (!i) {
     throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);
   }
-  let i;
+  let r;
   if (t) {
     {
       e._$$flags$$_ |= 256 /* isListenReady */;
       if (e._$$queuedListeners$$_) {
-        e._$$queuedListeners$$_.map((([e, t]) => safeCall(r, e, t, n)));
+        e._$$queuedListeners$$_.map((([e, t]) => safeCall(i, e, t, n)));
         e._$$queuedListeners$$_ = void 0;
       }
     }
     emitLifecycleEvent(n, "componentWillLoad");
-    i = safeCall(r, "componentWillLoad", void 0, n);
+    r = safeCall(i, "componentWillLoad", void 0, n);
   } else {
     emitLifecycleEvent(n, "componentWillUpdate");
-    i = safeCall(r, "componentWillUpdate", void 0, n);
+    r = safeCall(i, "componentWillUpdate", void 0, n);
   }
   emitLifecycleEvent(n, "componentWillRender");
-  i = enqueue(i, (() => safeCall(r, "componentWillRender", void 0, n)));
+  r = enqueue(r, (() => safeCall(i, "componentWillRender", void 0, n)));
   o();
-  return enqueue(i, (() => updateComponent(e, r, t)));
+  return enqueue(r, (() => updateComponent(e, i, t)));
 };
 
 var enqueue = (e, t) => isPromisey(e) ? e.then(t).catch((e => {
@@ -885,24 +884,24 @@ var isPromisey = e => e instanceof Promise || e && e.then && typeof e.then === "
 
 var updateComponent = async (e, t, n) => {
   var o;
-  const r = e.$hostElement$;
-  const i = createTime("update", e._$$cmpMeta$$_._$$tagName$$_);
-  const s = r["s-rc"];
+  const i = e.$hostElement$;
+  const r = createTime("update", e._$$cmpMeta$$_._$$tagName$$_);
+  const s = i["s-rc"];
   if (n) {
     attachStyles(e);
   }
   const l = createTime("render", e._$$cmpMeta$$_._$$tagName$$_);
   {
-    callRender(e, t, r, n);
+    callRender(e, t, i, n);
   }
   if (s) {
     s.map((e => e()));
-    r["s-rc"] = void 0;
+    i["s-rc"] = void 0;
   }
   l();
-  i();
+  r();
   {
-    const t = (o = r["s-p"]) != null ? o : [];
+    const t = (o = i["s-p"]) != null ? o : [];
     const postUpdate = () => postUpdateComponent(e);
     if (t.length === 0) {
       postUpdate();
@@ -940,26 +939,26 @@ var postUpdateComponent = e => {
   const t = e._$$cmpMeta$$_._$$tagName$$_;
   const n = e.$hostElement$;
   const o = createTime("postUpdate", t);
-  const r = e._$$lazyInstance$$_;
-  const i = e._$$ancestorComponent$$_;
-  safeCall(r, "componentDidRender", void 0, n);
+  const i = e._$$lazyInstance$$_;
+  const r = e._$$ancestorComponent$$_;
+  safeCall(i, "componentDidRender", void 0, n);
   emitLifecycleEvent(n, "componentDidRender");
   if (!(e._$$flags$$_ & 64 /* hasLoadedComponent */)) {
     e._$$flags$$_ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(n);
     }
-    safeCall(r, "componentDidLoad", void 0, n);
+    safeCall(i, "componentDidLoad", void 0, n);
     emitLifecycleEvent(n, "componentDidLoad");
     o();
     {
       e._$$onReadyResolve$$_(n);
-      if (!i) {
+      if (!r) {
         appDidLoad();
       }
     }
   } else {
-    safeCall(r, "componentDidUpdate", void 0, n);
+    safeCall(i, "componentDidUpdate", void 0, n);
     emitLifecycleEvent(n, "componentDidUpdate");
     o();
   }
@@ -1015,26 +1014,39 @@ var addHydratedFlag = e => {
 var getValue = (e, t) => getHostRef(e)._$$instanceValues$$_.get(t);
 
 var setValue = (e, t, n, o) => {
-  const r = getHostRef(e);
-  if (!r) {
+  const i = getHostRef(e);
+  if (!i) {
     throw new Error(`Couldn't find host element for "${o._$$tagName$$_}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);
   }
-  const i = r._$$instanceValues$$_.get(t);
-  const s = r._$$flags$$_;
-  const l = r._$$lazyInstance$$_;
+  const r = i.$hostElement$;
+  const s = i._$$instanceValues$$_.get(t);
+  const l = i._$$flags$$_;
+  const a = i._$$lazyInstance$$_;
   n = parsePropertyValue(n, o._$$members$$_[t][0]);
-  const a = Number.isNaN(i) && Number.isNaN(n);
-  const c = n !== i && !a;
-  if ((!(s & 8 /* isConstructingInstance */) || i === void 0) && c) {
-    r._$$instanceValues$$_.set(t, n);
-    if (l) {
-      if ((s & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (l.componentShouldUpdate) {
-          if (l.componentShouldUpdate(n, i, t) === false) {
+  const c = Number.isNaN(s) && Number.isNaN(n);
+  const f = n !== s && !c;
+  if ((!(l & 8 /* isConstructingInstance */) || s === void 0) && f) {
+    i._$$instanceValues$$_.set(t, n);
+    if (a) {
+      if (o._$$watchers$$_ && l & 128 /* isWatchReady */) {
+        const e = o._$$watchers$$_[t];
+        if (e) {
+          e.map((e => {
+            try {
+              a[e](n, s, t);
+            } catch (e) {
+              consoleError(e, r);
+            }
+          }));
+        }
+      }
+      if ((l & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (a.componentShouldUpdate) {
+          if (a.componentShouldUpdate(n, s, t) === false) {
             return;
           }
         }
-        scheduleUpdate(r, false);
+        scheduleUpdate(i, false);
       }
     }
   }
@@ -1042,16 +1054,19 @@ var setValue = (e, t, n, o) => {
 
 // src/runtime/proxy-component.ts
 var proxyComponent = (e, n, o) => {
-  var r, i;
+  var i, r;
   const s = e.prototype;
-  if (n._$$members$$_ || t.watchCallback) {
-    const l = Object.entries((r = n._$$members$$_) != null ? r : {});
+  if (n._$$members$$_ || (n._$$watchers$$_ || e.watchers)) {
+    if (e.watchers && !n._$$watchers$$_) {
+      n._$$watchers$$_ = e.watchers;
+    }
+    const l = Object.entries((i = n._$$members$$_) != null ? i : {});
     l.map((([e, [t]]) => {
       if (t & 31 /* Prop */ || o & 2 /* proxyState */ && t & 32 /* State */) {
-        const {get: r, set: i} = Object.getOwnPropertyDescriptor(s, e) || {};
-        if (r) n._$$members$$_[e][0] |= 2048 /* Getter */;
-        if (i) n._$$members$$_[e][0] |= 4096 /* Setter */;
-        if (o & 1 /* isElementConstructor */ || !r) {
+        const {get: i, set: r} = Object.getOwnPropertyDescriptor(s, e) || {};
+        if (i) n._$$members$$_[e][0] |= 2048 /* Getter */;
+        if (r) n._$$members$$_[e][0] |= 4096 /* Setter */;
+        if (o & 1 /* isElementConstructor */ || !i) {
           Object.defineProperty(s, e, {
             get() {
               {
@@ -1069,27 +1084,27 @@ var proxyComponent = (e, n, o) => {
           });
         }
         Object.defineProperty(s, e, {
-          set(r) {
+          set(i) {
             const s = getHostRef(this);
-            if (i) {
+            if (r) {
               const o = t & 32 /* State */ ? this[e] : s.$hostElement$[e];
               if (typeof o === "undefined" && s._$$instanceValues$$_.get(e)) {
-                r = s._$$instanceValues$$_.get(e);
+                i = s._$$instanceValues$$_.get(e);
               } else if (!s._$$instanceValues$$_.get(e) && o) {
                 s._$$instanceValues$$_.set(e, o);
               }
-              i.apply(this, [ parsePropertyValue(r, t) ]);
-              r = t & 32 /* State */ ? this[e] : s.$hostElement$[e];
-              setValue(this, e, r, n);
+              r.apply(this, [ parsePropertyValue(i, t) ]);
+              i = t & 32 /* State */ ? this[e] : s.$hostElement$[e];
+              setValue(this, e, i, n);
               return;
             }
             {
               if ((o & 1 /* isElementConstructor */) === 0 || (n._$$members$$_[e][0] & 4096 /* Setter */) === 0) {
-                setValue(this, e, r, n);
+                setValue(this, e, i, n);
                 if (o & 1 /* isElementConstructor */ && !s._$$lazyInstance$$_) {
                   s._$$onReadyPromise$$_.then((() => {
                     if (n._$$members$$_[e][0] & 4096 /* Setter */ && s._$$lazyInstance$$_[e] !== s._$$instanceValues$$_.get(e)) {
-                      s._$$lazyInstance$$_[e] = r;
+                      s._$$lazyInstance$$_[e] = i;
                     }
                   }));
                 }
@@ -1100,7 +1115,7 @@ var proxyComponent = (e, n, o) => {
                 if (!s._$$instanceValues$$_.get(e) && o) {
                   s._$$instanceValues$$_.set(e, o);
                 }
-                s._$$lazyInstance$$_[e] = parsePropertyValue(r, t);
+                s._$$lazyInstance$$_[e] = parsePropertyValue(i, t);
                 setValue(this, e, s._$$lazyInstance$$_[e], n);
               };
               if (s._$$lazyInstance$$_) {
@@ -1115,39 +1130,39 @@ var proxyComponent = (e, n, o) => {
     }));
     if (o & 1 /* isElementConstructor */) {
       const o =  new Map;
-      s.attributeChangedCallback = function(e, r, i) {
+      s.attributeChangedCallback = function(e, i, r) {
         c.jmp((() => {
           var l;
           const a = o.get(e);
           if (this.hasOwnProperty(a) && t.lazyLoad) {
-            i = this[a];
+            r = this[a];
             delete this[a];
           } else if (s.hasOwnProperty(a) && typeof this[a] === "number" && // cast type to number to avoid TS compiler issues
-          this[a] == i) {
+          this[a] == r) {
             return;
           } else if (a == null) {
             const t = getHostRef(this);
             const o = t == null ? void 0 : t._$$flags$$_;
-            if (o && !(o & 8 /* isConstructingInstance */) && o & 128 /* isWatchReady */ && i !== r) {
+            if (o && !(o & 8 /* isConstructingInstance */) && o & 128 /* isWatchReady */ && r !== i) {
               const o = t._$$lazyInstance$$_;
               const s = (l = n._$$watchers$$_) == null ? void 0 : l[e];
               s == null ? void 0 : s.forEach((t => {
                 if (o[t] != null) {
-                  o[t].call(o, i, r, e);
+                  o[t].call(o, r, i, e);
                 }
               }));
             }
             return;
           }
           const c = Object.getOwnPropertyDescriptor(s, a);
-          i = i === null && typeof this[a] === "boolean" ? false : i;
-          if (i !== this[a] && (!c.get || !!c.set)) {
-            this[a] = i;
+          r = r === null && typeof this[a] === "boolean" ? false : r;
+          if (r !== this[a] && (!c.get || !!c.set)) {
+            this[a] = r;
           }
         }));
       };
       e.observedAttributes = Array.from(
-       new Set([ ...Object.keys((i = n._$$watchers$$_) != null ? i : {}), ...l.filter((([e, t]) => t[0] & 15 /* HasAttribute */)).map((([e, t]) => {
+       new Set([ ...Object.keys((r = n._$$watchers$$_) != null ? r : {}), ...l.filter((([e, t]) => t[0] & 15 /* HasAttribute */)).map((([e, t]) => {
         const n = t[1] || e;
         o.set(n, e);
         return n;
@@ -1159,7 +1174,7 @@ var proxyComponent = (e, n, o) => {
 
 // src/runtime/initialize-component.ts
 var initializeComponent = async (e, t, n, o) => {
-  let r;
+  let i;
   if ((t._$$flags$$_ & 32 /* hasInitializedComponent */) === 0) {
     t._$$flags$$_ |= 32 /* hasInitializedComponent */;
     const o = n._$$lazyBundleId$$_;
@@ -1167,44 +1182,50 @@ var initializeComponent = async (e, t, n, o) => {
       const o = loadModule(n, t);
       if (o && "then" in o) {
         const e = uniqueTime();
-        r = await o;
+        i = await o;
         e();
       } else {
-        r = o;
+        i = o;
       }
-      if (!r) {
+      if (!i) {
         throw new Error(`Constructor for "${n._$$tagName$$_}#${t._$$modeName$$_}" was not found`);
       }
-      if (!r.isProxied) {
-        proxyComponent(r, n, 2 /* proxyState */);
-        r.isProxied = true;
+      if (!i.isProxied) {
+        {
+          n._$$watchers$$_ = i.watchers;
+        }
+        proxyComponent(i, n, 2 /* proxyState */);
+        i.isProxied = true;
       }
-      const i = createTime("createInstance", n._$$tagName$$_);
+      const r = createTime("createInstance", n._$$tagName$$_);
       {
         t._$$flags$$_ |= 8 /* isConstructingInstance */;
       }
       try {
-        new r(t);
+        new i(t);
       } catch (t) {
         consoleError(t, e);
       }
       {
         t._$$flags$$_ &= -9 /* isConstructingInstance */;
       }
-      i();
+      {
+        t._$$flags$$_ |= 128 /* isWatchReady */;
+      }
+      r();
       fireConnectedCallback(t._$$lazyInstance$$_, e);
     } else {
-      r = e.constructor;
+      i = e.constructor;
       const n = e.localName;
       customElements.whenDefined(n).then((() => t._$$flags$$_ |= 128 /* isWatchReady */));
     }
-    if (r && r.style) {
+    if (i && i.style) {
       let e;
-      if (typeof r.style === "string") {
-        e = r.style;
+      if (typeof i.style === "string") {
+        e = i.style;
       }
       const t = getScopeId(n);
-      if (!i.has(t)) {
+      if (!r.has(t)) {
         const o = createTime("registerStyles", n._$$tagName$$_);
         registerStyle(t, e, !!(n._$$flags$$_ & 1 /* shadowDomEncapsulation */));
         o();
@@ -1304,8 +1325,8 @@ var bootstrapLazy = (e, t = {}) => {
     return;
   }
   const o = createTime();
-  const r = [];
-  const i = t.exclude || [];
+  const i = [];
+  const r = t.exclude || [];
   const f = a.customElements;
   const u = a.document.head;
   const d =  u.querySelector("meta[charset]");
@@ -1318,36 +1339,40 @@ var bootstrapLazy = (e, t = {}) => {
   let b = false;
   e.map((e => {
     e[1].map((t => {
-      const n = {
+      var n;
+      const o = {
         _$$flags$$_: t[0],
         _$$tagName$$_: t[1],
         _$$members$$_: t[2],
         _$$listeners$$_: t[3]
       };
-      if (n._$$flags$$_ & 4 /* hasSlotRelocation */) {
+      if (o._$$flags$$_ & 4 /* hasSlotRelocation */) {
         b = true;
       }
       {
-        n._$$members$$_ = t[2];
+        o._$$members$$_ = t[2];
+      }
+      {
+        o._$$listeners$$_ = t[3];
       }
       {
-        n._$$listeners$$_ = t[3];
+        o._$$watchers$$_ = (n = t[4]) != null ? n : {};
       }
-      const o = n._$$tagName$$_;
-      const s = class extends HTMLElement {
+      const s = o._$$tagName$$_;
+      const l = class extends HTMLElement {
         // StencilLazyHost
         constructor(e) {
           super(e);
           this.hasRegisteredEventListeners = false;
           e = this;
-          registerHost(e, n);
-          if (n._$$flags$$_ & 1 /* shadowDomEncapsulation */) {
+          registerHost(e, o);
+          if (o._$$flags$$_ & 1 /* shadowDomEncapsulation */) {
             {
               if (!e.shadowRoot) {
-                createShadowRoot.call(e, n);
+                createShadowRoot.call(e, o);
               } else {
                 if (e.shadowRoot.mode !== "open") {
-                  throw new Error(`Unable to re-use existing shadow root for ${n._$$tagName$$_}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`);
+                  throw new Error(`Unable to re-use existing shadow root for ${o._$$tagName$$_}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`);
                 }
               }
             }
@@ -1357,7 +1382,7 @@ var bootstrapLazy = (e, t = {}) => {
           const e = getHostRef(this);
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
-            addHostEventListeners(this, e, n._$$listeners$$_);
+            addHostEventListeners(this, e, o._$$listeners$$_);
           }
           if (m) {
             clearTimeout(m);
@@ -1387,19 +1412,19 @@ var bootstrapLazy = (e, t = {}) => {
           return getHostRef(this)._$$onReadyPromise$$_;
         }
       };
-      n._$$lazyBundleId$$_ = e[0];
-      if (!i.includes(o) && !f.get(o)) {
-        r.push(o);
-        f.define(o, proxyComponent(s, n, 1 /* isElementConstructor */));
+      o._$$lazyBundleId$$_ = e[0];
+      if (!r.includes(s) && !f.get(s)) {
+        i.push(s);
+        f.define(s, proxyComponent(l, o, 1 /* isElementConstructor */));
       }
     }));
   }));
-  if (r.length > 0) {
+  if (i.length > 0) {
     if (b) {
       p.textContent += l;
     }
     {
-      p.textContent += r.sort() + s;
+      p.textContent += i.sort() + s;
     }
     if (p.innerHTML.length) {
       p.setAttribute("data-styles", "");
@@ -1423,12 +1448,12 @@ var bootstrapLazy = (e, t = {}) => {
 
 var addHostEventListeners = (e, t, n, o) => {
   if (n && a.document) {
-    n.map((([n, o, r]) => {
-      const i = getHostListenerTarget(a.document, e, n);
-      const s = hostListenerProxy(t, r);
+    n.map((([n, o, i]) => {
+      const r = getHostListenerTarget(a.document, e, n);
+      const s = hostListenerProxy(t, i);
       const l = hostListenerOpts(n);
-      c.ael(i, o, s, l);
-      (t._$$rmListeners$$_ = t._$$rmListeners$$_ || []).push((() => c.rel(i, o, s, l)));
+      c.ael(r, o, s, l);
+      (t._$$rmListeners$$_ = t._$$rmListeners$$_ || []).push((() => c.rel(r, o, s, l)));
     }));
   }
 };
@@ -1465,5 +1490,5 @@ var hostListenerOpts = e => f ? {
 var setNonce = e => c._$$nonce$$_ = e;
 
 export { b as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=p-Yyeke16a.js.map
-//# sourceMappingURL=p-Yyeke16a.js.map
+//# sourceMappingURL=p-or7qTZgT.js.map
+//# sourceMappingURL=p-or7qTZgT.js.map