@sula-tech/webcomponents 0.1.1 → 0.2.1

package/dist/webcomponents/{p-cca32e44.js → p-5a36af0f.js}

@@ -7,12 +7,12 @@ const t = /* webcomponents */ {
   asyncQueue: false,
   attachStyles: true,
   cloneNodeFix: false,
-  cmpDidLoad: false,
+  cmpDidLoad: true,
   cmpDidRender: false,
   cmpDidUnload: false,
   cmpDidUpdate: false,
   cmpShouldUpdate: false,
-  cmpWillLoad: false,
+  cmpWillLoad: true,
   cmpWillRender: false,
   cmpWillUpdate: false,
   connectedCallback: false,
@@ -26,10 +26,10 @@ const t = /* webcomponents */ {
   experimentalSlotFixes: false,
   formAssociated: false,
   hasRenderFn: true,
-  hostListener: false,
-  hostListenerTarget: false,
+  hostListener: true,
+  hostListenerTarget: true,
   hostListenerTargetBody: false,
-  hostListenerTargetDocument: false,
+  hostListenerTargetDocument: true,
   hostListenerTargetParent: false,
   hostListenerTargetWindow: false,
   hotModuleReplacement: false,
@@ -44,7 +44,7 @@ const t = /* webcomponents */ {
   isDev: false,
   isTesting: false,
   lazyLoad: true,
-  lifecycle: false,
+  lifecycle: true,
   lifecycleDOMEvents: true,
   member: true,
   method: false,
@@ -55,7 +55,7 @@ const t = /* webcomponents */ {
   prop: true,
   propBoolean: true,
   propMutable: true,
-  propNumber: false,
+  propNumber: true,
   propString: true,
   reflect: false,
   scoped: false,
@@ -63,10 +63,10 @@ const t = /* webcomponents */ {
   scriptDataOpts: false,
   shadowDelegatesFocus: false,
   shadowDom: true,
-  slot: false,
+  slot: true,
   slotChildNodesFix: false,
   slotRelocation: false,
-  state: false,
+  state: true,
   style: true,
   svg: false,
   taskQueue: true,
@@ -78,9 +78,9 @@ const t = /* webcomponents */ {
   vdomKey: true,
   vdomListener: true,
   vdomPropOrAttr: true,
-  vdomRef: false,
+  vdomRef: true,
   vdomRender: true,
-  vdomStyle: false,
+  vdomStyle: true,
   vdomText: true,
   vdomXlink: false,
   watchCallback: false
@@ -118,8 +118,8 @@ var registerHost = (e, t) => {
     e["s-p"] = [];
     e["s-rc"] = [];
   }
-  const l = s.set(e, n);
-  return l;
+  const r = s.set(e, n);
+  return r;
 };
 
 var isMemberInElement = (e, t) => t in e;
@@ -128,15 +128,15 @@ var consoleError = (e, t) => (0, console.error)(e, t)
 // src/client/client-load-module.ts
 ;
 
-var l =  new Map;
+var r =  new Map;
 
 var loadModule = (e, t, n) => {
   const s = e._$$tagName$$_.replace(/-/g, "_");
-  const r = e._$$lazyBundleId$$_;
-  if (!r) {
+  const l = e._$$lazyBundleId$$_;
+  if (!l) {
     return void 0;
   }
-  const o = l.get(r);
+  const o = r.get(l);
   if (o) {
     return o[s];
   }
@@ -145,9 +145,9 @@ var loadModule = (e, t, n) => {
   /* webpackInclude: /\.entry\.js$/ */
   /* webpackExclude: /\.system\.entry\.js$/ */
   /* webpackMode: "lazy" */
-  `./${r}.entry.js${""}`).then((e => {
+  `./${l}.entry.js${""}`).then((e => {
     {
-      l.set(r, e);
+      r.set(l, e);
     }
     return e[s];
   }), (e => {
@@ -156,7 +156,7 @@ var loadModule = (e, t, n) => {
 };
 
 // src/client/client-style.ts
-var r =  new Map;
+var l =  new Map;
 
 var o = "sty-id";
 
@@ -180,9 +180,21 @@ var u = {
   ce: (e, t) => new CustomEvent(e, t)
 };
 
+var d =  (() => {
+  let e = false;
+  try {
+    c.addEventListener("e", null, Object.defineProperty({}, "passive", {
+      get() {
+        e = true;
+      }
+    }));
+  } catch (e) {}
+  return e;
+})();
+
 var promiseResolve = e => Promise.resolve(e);
 
-var d =  (() => {
+var v =  (() => {
   try {
     new CSSStyleSheet;
     return typeof (new CSSStyleSheet).replaceSync === "function";
@@ -190,16 +202,16 @@ var d =  (() => {
   return false;
 })();
 
-var v = false;
-
-var p = [];
+var p = false;
 
 var m = [];
 
+var y = [];
+
 var queueTask = (e, t) => n => {
   e.push(n);
-  if (!v) {
-    v = true;
+  if (!p) {
+    p = true;
     if (t && u._$$flags$$_ & 4 /* queueSync */) {
       nextTick(flush);
     } else {
@@ -220,10 +232,10 @@ var consume = e => {
 };
 
 var flush = () => {
-  consume(p);
+  consume(m);
   {
-    consume(m);
-    if (v = p.length > 0) {
+    consume(y);
+    if (p = m.length > 0) {
       u.raf(flush);
     }
   }
@@ -231,7 +243,7 @@ var flush = () => {
 
 var nextTick = e => promiseResolve().then(e);
 
-var y =  queueTask(m, true);
+var b =  queueTask(y, true);
 
 var isComplexType = e => {
   e = typeof e;
@@ -245,9 +257,9 @@ function queryNonceMetaTagContent(e) {
 }
 
 // src/utils/result.ts
-var b = {};
+var w = {};
 
-__export(b, {
+__export(w, {
   err: () => err,
   map: () => map,
   ok: () => ok,
@@ -313,8 +325,8 @@ var uniqueTime = (e, t) => {
 
 var h = (e, t, ...n) => {
   let s = null;
-  let l = null;
-  let r = false;
+  let r = null;
+  let l = false;
   let o = false;
   const i = [];
   const walk = t => {
@@ -323,22 +335,22 @@ var h = (e, t, ...n) => {
       if (Array.isArray(s)) {
         walk(s);
       } else if (s != null && typeof s !== "boolean") {
-        if (r = typeof e !== "function" && !isComplexType(s)) {
+        if (l = typeof e !== "function" && !isComplexType(s)) {
           s = String(s);
         }
-        if (r && o) {
+        if (l && o) {
           i[i.length - 1]._$$text$$_ += s;
         } else {
-          i.push(r ? newVNode(null, s) : s);
+          i.push(l ? newVNode(null, s) : s);
         }
-        o = r;
+        o = l;
       }
     }
   };
   walk(n);
   if (t) {
     if (t.key) {
-      l = t.key;
+      r = t.key;
     }
     {
       const e = t.className || t.class;
@@ -353,7 +365,7 @@ var h = (e, t, ...n) => {
     a._$$children$$_ = i;
   }
   {
-    a._$$key$$_ = l;
+    a._$$key$$_ = r;
   }
   return a;
 };
@@ -375,15 +387,18 @@ var newVNode = (e, t) => {
   return n;
 };
 
-var w = {};
+var S = {};
 
-var isHost = e => e && e._$$tag$$_ === w;
+var isHost = e => e && e._$$tag$$_ === S;
 
 var parsePropertyValue = (e, t) => {
   if (e != null && !isComplexType(e)) {
     if (t & 4 /* Boolean */) {
       return e === "false" ? false : e === "" || !!e;
     }
+    if (t & 2 /* Number */) {
+      return parseFloat(e);
+    }
     if (t & 1 /* String */) {
       return String(e);
     }
@@ -414,11 +429,11 @@ var emitEvent = (e, t, n) => {
   return s;
 };
 
-var S =  new WeakMap;
+var g =  new WeakMap;
 
 var registerStyle = (e, t, n) => {
-  let s = r.get(e);
-  if (d && n) {
+  let s = l.get(e);
+  if (v && n) {
     s = s || new CSSStyleSheet;
     if (typeof s === "string") {
       s = t;
@@ -428,37 +443,37 @@ var registerStyle = (e, t, n) => {
   } else {
     s = t;
   }
-  r.set(e, s);
+  l.set(e, s);
 };
 
 var addStyle = (e, t, n) => {
   var s;
-  const l = getScopeId(t);
-  const i = r.get(l);
+  const r = getScopeId(t);
+  const i = l.get(r);
   e = e.nodeType === 11 /* DocumentFragment */ ? e : c;
   if (i) {
     if (typeof i === "string") {
       e = e.head || e;
-      let n = S.get(e);
-      let r;
+      let n = g.get(e);
+      let l;
       if (!n) {
-        S.set(e, n =  new Set);
+        g.set(e, n =  new Set);
       }
-      if (!n.has(l)) {
+      if (!n.has(r)) {
         {
-          r = document.querySelector(`[${o}="${l}"]`) || c.createElement("style");
-          r.innerHTML = i;
+          l = document.querySelector(`[${o}="${r}"]`) || c.createElement("style");
+          l.innerHTML = i;
           const n = (s = u._$$nonce$$_) != null ? s : queryNonceMetaTagContent(c);
           if (n != null) {
-            r.setAttribute("nonce", n);
+            l.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(r, (n == null ? void 0 : n.parentNode) === e ? n : null);
+              e.insertBefore(l, (n == null ? void 0 : n.parentNode) === e ? n : null);
             } else if ("host" in e) {
-              if (d) {
+              if (v) {
                 const t = new CSSStyleSheet;
                 t.replaceSync(i);
                 e.adoptedStyleSheets = [ t, ...e.adoptedStyleSheets ];
@@ -467,59 +482,84 @@ var addStyle = (e, t, n) => {
                 if (t) {
                   t.innerHTML = i + t.innerHTML;
                 } else {
-                  e.prepend(r);
+                  e.prepend(l);
                 }
               }
             } else {
-              e.append(r);
+              e.append(l);
             }
           }
           if (t._$$flags$$_ & 1 /* shadowDomEncapsulation */) {
-            e.insertBefore(r, null);
+            e.insertBefore(l, null);
           }
         }
         if (t._$$flags$$_ & 4 /* hasSlotRelocation */) {
-          r.innerHTML += a;
+          l.innerHTML += a;
         }
         if (n) {
-          n.add(l);
+          n.add(r);
         }
       }
     } else if (!e.adoptedStyleSheets.includes(i)) {
       e.adoptedStyleSheets = [ ...e.adoptedStyleSheets, i ];
     }
   }
-  return l;
+  return r;
 };
 
 var attachStyles = e => {
   const t = e._$$cmpMeta$$_;
   const n = e.$hostElement$;
   const s = t._$$flags$$_;
-  const l = createTime("attachStyles", t._$$tagName$$_);
-  const r = addStyle(n.shadowRoot ? n.shadowRoot : n.getRootNode(), t);
+  const r = createTime("attachStyles", t._$$tagName$$_);
+  const l = addStyle(n.shadowRoot ? n.shadowRoot : n.getRootNode(), t);
   if (s & 10 /* needsScopedEncapsulation */ && s & 2 /* scopedCssEncapsulation */ || s & 128 /* shadowNeedsScopedCss */) {
-    n["s-sc"] = r;
-    n.classList.add(r + "-h");
+    n["s-sc"] = l;
+    n.classList.add(l + "-h");
   }
-  l();
+  r();
 };
 
 var getScopeId = (e, t) => "sc-" + e._$$tagName$$_;
 
-var setAccessor = (e, t, n, s, l, r, o) => {
+var setAccessor = (e, t, n, s, r, l, o) => {
   if (n !== s) {
     let o = isMemberInElement(e, t);
     let i = t.toLowerCase();
     if (t === "class") {
       const t = e.classList;
-      const l = parseClassList(n);
-      let r = parseClassList(s);
+      const r = parseClassList(n);
+      let l = parseClassList(s);
       {
-        t.remove(...l.filter((e => e && !r.includes(e))));
-        t.add(...r.filter((e => e && !l.includes(e))));
+        t.remove(...r.filter((e => e && !l.includes(e))));
+        t.add(...l.filter((e => e && !r.includes(e))));
       }
-    } else if (t === "key") ; else if (!o && t[0] === "o" && t[1] === "n") {
+    } else if (t === "style") {
+      {
+        for (const t in n) {
+          if (!s || s[t] == null) {
+            if (t.includes("-")) {
+              e.style.removeProperty(t);
+            } else {
+              e.style[t] = "";
+            }
+          }
+        }
+      }
+      for (const t in s) {
+        if (!n || s[t] !== n[t]) {
+          if (t.includes("-")) {
+            e.style.setProperty(t, s[t]);
+          } else {
+            e.style[t] = s[t];
+          }
+        }
+      }
+    } else if (t === "key") ; else if (t === "ref") {
+      if (s) {
+        s(e);
+      }
+    } else if (!o && t[0] === "o" && t[1] === "n") {
       if (t[2] === "-") {
         t = t.slice(3);
       } else if (isMemberInElement(f, i)) {
@@ -528,28 +568,28 @@ var setAccessor = (e, t, n, s, l, r, o) => {
         t = i[2] + t.slice(3);
       }
       if (n || s) {
-        const l = t.endsWith($);
-        t = t.replace(C, "");
+        const r = t.endsWith(C);
+        t = t.replace(j, "");
         if (n) {
-          u.rel(e, t, n, l);
+          u.rel(e, t, n, r);
         }
         if (s) {
-          u.ael(e, t, s, l);
+          u.ael(e, t, s, r);
         }
       }
     } else {
       const i = isComplexType(s);
-      if ((o || i && s !== null) && !l) {
+      if ((o || i && s !== null) && !r) {
         try {
           if (!e.tagName.includes("-")) {
-            const l = s == null ? "" : s;
+            const r = s == null ? "" : s;
             if (t === "list") {
               o = false;
-            } else if (n == null || e[t] != l) {
+            } else if (n == null || e[t] != r) {
               if (typeof e.__lookupSetter__(t) === "function") {
-                e[t] = l;
+                e[t] = r;
               } else {
-                e.setAttribute(t, l);
+                e.setAttribute(t, r);
               }
             }
           } else if (e[t] !== s) {
@@ -563,7 +603,7 @@ var setAccessor = (e, t, n, s, l, r, o) => {
             e.removeAttribute(t);
           }
         }
-      } else if ((!o || r & 4 /* isHost */ || l) && !i) {
+      } else if ((!o || l & 4 /* isHost */ || r) && !i) {
         s = s === true ? "" : s;
         {
           e.setAttribute(t, s);
@@ -573,7 +613,7 @@ var setAccessor = (e, t, n, s, l, r, o) => {
   }
 };
 
-var g = /\s/;
+var $ = /\s/;
 
 var parseClassList = e => {
   if (typeof e === "object" && e && "baseVal" in e) {
@@ -582,27 +622,27 @@ var parseClassList = e => {
   if (!e || typeof e !== "string") {
     return [];
   }
-  return e.split(g);
+  return e.split($);
 };
 
-var $ = "Capture";
+var C = "Capture";
 
-var C = new RegExp($ + "$");
+var j = new RegExp(C + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (e, t, n, s) => {
-  const l = t._$$elm$$_.nodeType === 11 /* DocumentFragment */ && t._$$elm$$_.host ? t._$$elm$$_.host : t._$$elm$$_;
-  const r = e && e._$$attrs$$_ || {};
+  const r = t._$$elm$$_.nodeType === 11 /* DocumentFragment */ && t._$$elm$$_.host ? t._$$elm$$_.host : t._$$elm$$_;
+  const l = e && e._$$attrs$$_ || {};
   const o = t._$$attrs$$_ || {};
   {
-    for (const e of sortedAttrNames(Object.keys(r))) {
+    for (const e of sortedAttrNames(Object.keys(l))) {
       if (!(e in o)) {
-        setAccessor(l, e, r[e], void 0, n, t._$$flags$$_);
+        setAccessor(r, e, l[e], void 0, n, t._$$flags$$_);
       }
     }
   }
   for (const e of sortedAttrNames(Object.keys(o))) {
-    setAccessor(l, e, r[e], o[e], n, t._$$flags$$_);
+    setAccessor(r, e, l[e], o[e], n, t._$$flags$$_);
   }
 };
 
@@ -616,25 +656,25 @@ function sortedAttrNames(e) {
 
 var k;
 
-var j = false;
-
 var O = false;
 
+var D = false;
+
 var createElm = (e, n, s) => {
-  const l = n._$$children$$_[s];
-  let r = 0;
+  const r = n._$$children$$_[s];
+  let l = 0;
   let o;
   let i;
-  if (l._$$text$$_ !== null) {
-    o = l._$$elm$$_ = c.createTextNode(l._$$text$$_);
+  if (r._$$text$$_ !== null) {
+    o = r._$$elm$$_ = c.createTextNode(r._$$text$$_);
   } else {
-    o = l._$$elm$$_ = c.createElement(!j && t.slotRelocation && l._$$flags$$_ & 2 /* isSlotFallback */ ? "slot-fb" : l._$$tag$$_);
+    o = r._$$elm$$_ = c.createElement(!O && t.slotRelocation && r._$$flags$$_ & 2 /* isSlotFallback */ ? "slot-fb" : r._$$tag$$_);
     {
-      updateElement(null, l, O);
+      updateElement(null, r, D);
     }
-    if (l._$$children$$_) {
-      for (r = 0; r < l._$$children$$_.length; ++r) {
-        i = createElm(e, l, r);
+    if (r._$$children$$_) {
+      for (l = 0; l < r._$$children$$_.length; ++l) {
+        i = createElm(e, r, l);
         if (i) {
           o.appendChild(i);
         }
@@ -645,17 +685,17 @@ var createElm = (e, n, s) => {
   return o;
 };
 
-var addVnodes = (e, t, n, s, l, r) => {
+var addVnodes = (e, t, n, s, r, l) => {
   let o = e;
   let i;
   if (o.shadowRoot && o.tagName === k) {
     o = o.shadowRoot;
   }
-  for (;l <= r; ++l) {
-    if (s[l]) {
-      i = createElm(null, n, l);
+  for (;r <= l; ++r) {
+    if (s[r]) {
+      i = createElm(null, n, r);
       if (i) {
-        s[l]._$$elm$$_ = i;
+        s[r]._$$elm$$_ = i;
         insertBefore(o, i, t);
       }
     }
@@ -667,6 +707,7 @@ var removeVnodes = (e, t, n) => {
     const t = e[s];
     if (t) {
       const e = t._$$elm$$_;
+      nullifyVNodeRefs(t);
       if (e) {
         e.remove();
       }
@@ -674,8 +715,8 @@ var removeVnodes = (e, t, n) => {
   }
 };
 
-var updateChildren = (e, t, n, s, l = false) => {
-  let r = 0;
+var updateChildren = (e, t, n, s, r = false) => {
+  let l = 0;
   let o = 0;
   let i = 0;
   let a = 0;
@@ -687,37 +728,37 @@ var updateChildren = (e, t, n, s, l = false) => {
   let p = s[d];
   let m;
   let y;
-  while (r <= f && o <= d) {
+  while (l <= f && o <= d) {
     if (c == null) {
-      c = t[++r];
+      c = t[++l];
     } else if (u == null) {
       u = t[--f];
     } else if (v == null) {
       v = s[++o];
     } else if (p == null) {
       p = s[--d];
-    } else if (isSameVnode(c, v, l)) {
-      patch(c, v, l);
-      c = t[++r];
+    } else if (isSameVnode(c, v, r)) {
+      patch(c, v, r);
+      c = t[++l];
       v = s[++o];
-    } else if (isSameVnode(u, p, l)) {
-      patch(u, p, l);
+    } else if (isSameVnode(u, p, r)) {
+      patch(u, p, r);
       u = t[--f];
       p = s[--d];
-    } else if (isSameVnode(c, p, l)) {
-      patch(c, p, l);
+    } else if (isSameVnode(c, p, r)) {
+      patch(c, p, r);
       insertBefore(e, c._$$elm$$_, u._$$elm$$_.nextSibling);
-      c = t[++r];
+      c = t[++l];
       p = s[--d];
-    } else if (isSameVnode(u, v, l)) {
-      patch(u, v, l);
+    } else if (isSameVnode(u, v, r)) {
+      patch(u, v, r);
       insertBefore(e, u._$$elm$$_, c._$$elm$$_);
       u = t[--f];
       v = s[++o];
     } else {
       i = -1;
       {
-        for (a = r; a <= f; ++a) {
+        for (a = l; a <= f; ++a) {
           if (t[a] && t[a]._$$key$$_ !== null && t[a]._$$key$$_ === v._$$key$$_) {
             i = a;
             break;
@@ -729,7 +770,7 @@ var updateChildren = (e, t, n, s, l = false) => {
         if (y._$$tag$$_ !== v._$$tag$$_) {
           m = createElm(t && t[o], n, i);
         } else {
-          patch(y, v, l);
+          patch(y, v, r);
           t[i] = void 0;
           m = y._$$elm$$_;
         }
@@ -745,10 +786,10 @@ var updateChildren = (e, t, n, s, l = false) => {
       }
     }
   }
-  if (r > f) {
+  if (l > f) {
     addVnodes(e, s[d + 1] == null ? null : s[d + 1]._$$elm$$_, n, s, o, d);
   } else if (o > d) {
-    removeVnodes(t, r, f);
+    removeVnodes(t, l, f);
   }
 };
 
@@ -766,30 +807,38 @@ var isSameVnode = (e, t, n = false) => {
 };
 
 var patch = (e, n, s = false) => {
-  const l = n._$$elm$$_ = e._$$elm$$_;
-  const r = e._$$children$$_;
+  const r = n._$$elm$$_ = e._$$elm$$_;
+  const l = e._$$children$$_;
   const o = n._$$children$$_;
-  const i = n._$$text$$_;
-  if (i === null) {
+  const i = n._$$tag$$_;
+  const a = n._$$text$$_;
+  if (a === null) {
     {
-      {
-        updateElement(e, n, O);
+      if (i === "slot" && !O) ; else {
+        updateElement(e, n, D);
       }
     }
-    if (r !== null && o !== null) {
-      updateChildren(l, r, n, o, s);
+    if (l !== null && o !== null) {
+      updateChildren(r, l, n, o, s);
     } else if (o !== null) {
       if (e._$$text$$_ !== null) {
-        l.textContent = "";
+        r.textContent = "";
       }
-      addVnodes(l, null, n, o, 0, o.length - 1);
+      addVnodes(r, null, n, o, 0, o.length - 1);
     } else if (
     // don't do this on initial render as it can cause non-hydrated content to be removed
-    !s && t.updatable && r !== null) {
-      removeVnodes(r, 0, r.length - 1);
+    !s && t.updatable && l !== null) {
+      removeVnodes(l, 0, l.length - 1);
     }
-  } else if (e._$$text$$_ !== i) {
-    l.data = i;
+  } else if (e._$$text$$_ !== a) {
+    r.data = a;
+  }
+};
+
+var nullifyVNodeRefs = e => {
+  {
+    e._$$attrs$$_ && e._$$attrs$$_.ref && e._$$attrs$$_.ref(null);
+    e._$$children$$_ && e._$$children$$_.map(nullifyVNodeRefs);
   }
 };
 
@@ -801,8 +850,8 @@ var insertBefore = (e, t, n) => {
 
 var renderVdom = (e, t, n = false) => {
   const s = e.$hostElement$;
-  const l = e._$$cmpMeta$$_;
-  const r = e._$$vnode$$_ || newVNode(null, null);
+  const r = e._$$cmpMeta$$_;
+  const l = e._$$vnode$$_ || newVNode(null, null);
   const o = isHost(t) ? t : h(null, null, t);
   k = s.tagName;
   if (n && o._$$attrs$$_) {
@@ -815,9 +864,9 @@ var renderVdom = (e, t, n = false) => {
   o._$$tag$$_ = null;
   o._$$flags$$_ |= 4 /* isHost */;
   e._$$vnode$$_ = o;
-  o._$$elm$$_ = r._$$elm$$_ = s.shadowRoot || s;
-  j = !!(l._$$flags$$_ & 1 /* shadowDomEncapsulation */) && !(l._$$flags$$_ & 128 /* shadowNeedsScopedCss */);
-  patch(r, o, n);
+  o._$$elm$$_ = l._$$elm$$_ = s.shadowRoot || s;
+  O = !!(r._$$flags$$_ & 1 /* shadowDomEncapsulation */) && !(r._$$flags$$_ & 128 /* shadowNeedsScopedCss */);
+  patch(l, o, n);
 };
 
 // src/runtime/update-component.ts
@@ -840,25 +889,35 @@ var scheduleUpdate = (e, t) => {
   }
   attachToAncestor(e, e._$$ancestorComponent$$_);
   const dispatch = () => dispatchHooks(e, t);
-  return y(dispatch);
+  return b(dispatch);
 };
 
 var dispatchHooks = (e, t) => {
   const n = e.$hostElement$;
   const s = createTime("scheduleUpdate", e._$$cmpMeta$$_._$$tagName$$_);
-  const l = e._$$lazyInstance$$_;
-  if (!l) {
+  const r = e._$$lazyInstance$$_;
+  if (!r) {
     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 r;
+  let l;
   if (t) {
+    {
+      e._$$flags$$_ |= 256 /* isListenReady */;
+      if (e._$$queuedListeners$$_) {
+        e._$$queuedListeners$$_.map((([e, t]) => safeCall(r, e, t, n)));
+        e._$$queuedListeners$$_ = void 0;
+      }
+    }
     emitLifecycleEvent(n, "componentWillLoad");
+    {
+      l = safeCall(r, "componentWillLoad", void 0, n);
+    }
   } else {
     emitLifecycleEvent(n, "componentWillUpdate");
   }
   emitLifecycleEvent(n, "componentWillRender");
   s();
-  return enqueue(r, (() => updateComponent(e, l, t)));
+  return enqueue(l, (() => updateComponent(e, r, t)));
 };
 
 var enqueue = (e, t) => isPromisey(e) ? e.then(t).catch((e => {
@@ -870,24 +929,24 @@ var isPromisey = e => e instanceof Promise || e && e.then && typeof e.then === "
 
 var updateComponent = async (e, t, n) => {
   var s;
-  const l = e.$hostElement$;
-  const r = createTime("update", e._$$cmpMeta$$_._$$tagName$$_);
-  const o = l["s-rc"];
+  const r = e.$hostElement$;
+  const l = createTime("update", e._$$cmpMeta$$_._$$tagName$$_);
+  const o = r["s-rc"];
   if (n) {
     attachStyles(e);
   }
   const i = createTime("render", e._$$cmpMeta$$_._$$tagName$$_);
   {
-    callRender(e, t, l, n);
+    callRender(e, t, r, n);
   }
   if (o) {
     o.map((e => e()));
-    l["s-rc"] = void 0;
+    r["s-rc"] = void 0;
   }
   i();
-  r();
+  l();
   {
-    const t = (s = l["s-p"]) != null ? s : [];
+    const t = (s = r["s-p"]) != null ? s : [];
     const postUpdate = () => postUpdateComponent(e);
     if (t.length === 0) {
       postUpdate();
@@ -925,6 +984,7 @@ var postUpdateComponent = e => {
   const t = e._$$cmpMeta$$_._$$tagName$$_;
   const n = e.$hostElement$;
   const s = createTime("postUpdate", t);
+  const r = e._$$lazyInstance$$_;
   const l = e._$$ancestorComponent$$_;
   emitLifecycleEvent(n, "componentDidRender");
   if (!(e._$$flags$$_ & 64 /* hasLoadedComponent */)) {
@@ -932,6 +992,9 @@ var postUpdateComponent = e => {
     {
       addHydratedFlag(n);
     }
+    {
+      safeCall(r, "componentDidLoad", void 0, n);
+    }
     emitLifecycleEvent(n, "componentDidLoad");
     s();
     {
@@ -964,6 +1027,17 @@ var appDidLoad = t => {
   })));
 };
 
+var safeCall = (e, t, n, s) => {
+  if (e && e[t]) {
+    try {
+      return e[t](n);
+    } catch (e) {
+      consoleError(e, s);
+    }
+  }
+  return void 0;
+};
+
 var emitLifecycleEvent = (t, n) => {
   {
     emitEvent(t, "stencil_" + n, {
@@ -985,21 +1059,21 @@ var addHydratedFlag = e => {
 var getValue = (e, t) => getHostRef(e)._$$instanceValues$$_.get(t);
 
 var setValue = (e, t, n, s) => {
-  const l = getHostRef(e);
-  if (!l) {
+  const r = getHostRef(e);
+  if (!r) {
     throw new Error(`Couldn't find host element for "${s._$$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/ionic-team/stencil/issues/5457).`);
   }
-  const r = l._$$instanceValues$$_.get(t);
-  const o = l._$$flags$$_;
-  const i = l._$$lazyInstance$$_;
+  const l = r._$$instanceValues$$_.get(t);
+  const o = r._$$flags$$_;
+  const i = r._$$lazyInstance$$_;
   n = parsePropertyValue(n, s._$$members$$_[t][0]);
-  const a = Number.isNaN(r) && Number.isNaN(n);
-  const f = n !== r && !a;
-  if ((!(o & 8 /* isConstructingInstance */) || r === void 0) && f) {
-    l._$$instanceValues$$_.set(t, n);
+  const a = Number.isNaN(l) && Number.isNaN(n);
+  const f = n !== l && !a;
+  if ((!(o & 8 /* isConstructingInstance */) || l === void 0) && f) {
+    r._$$instanceValues$$_.set(t, n);
     if (i) {
       if ((o & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        scheduleUpdate(l, false);
+        scheduleUpdate(r, false);
       }
     }
   }
@@ -1007,16 +1081,16 @@ var setValue = (e, t, n, s) => {
 
 // src/runtime/proxy-component.ts
 var proxyComponent = (e, n, s) => {
-  var l, r;
+  var r, l;
   const o = e.prototype;
   if (n._$$members$$_ || t.watchCallback) {
-    const i = Object.entries((l = n._$$members$$_) != null ? l : {});
+    const i = Object.entries((r = n._$$members$$_) != null ? r : {});
     i.map((([e, [t]]) => {
       if (t & 31 /* Prop */ || s & 2 /* proxyState */ && t & 32 /* State */) {
-        const {get: l, set: r} = Object.getOwnPropertyDescriptor(o, e) || {};
-        if (l) n._$$members$$_[e][0] |= 2048 /* Getter */;
-        if (r) n._$$members$$_[e][0] |= 4096 /* Setter */;
-        if (s & 1 /* isElementConstructor */ || !l) {
+        const {get: r, set: l} = Object.getOwnPropertyDescriptor(o, e) || {};
+        if (r) n._$$members$$_[e][0] |= 2048 /* Getter */;
+        if (l) n._$$members$$_[e][0] |= 4096 /* Setter */;
+        if (s & 1 /* isElementConstructor */ || !r) {
           Object.defineProperty(o, e, {
             get() {
               {
@@ -1034,27 +1108,27 @@ var proxyComponent = (e, n, s) => {
           });
         }
         Object.defineProperty(o, e, {
-          set(l) {
+          set(r) {
             const o = getHostRef(this);
-            if (r) {
+            if (l) {
               const s = t & 32 /* State */ ? this[e] : o.$hostElement$[e];
               if (typeof s === "undefined" && o._$$instanceValues$$_.get(e)) {
-                l = o._$$instanceValues$$_.get(e);
+                r = o._$$instanceValues$$_.get(e);
               } else if (!o._$$instanceValues$$_.get(e) && s) {
                 o._$$instanceValues$$_.set(e, s);
               }
-              r.apply(this, [ parsePropertyValue(l, t) ]);
-              l = t & 32 /* State */ ? this[e] : o.$hostElement$[e];
-              setValue(this, e, l, n);
+              l.apply(this, [ parsePropertyValue(r, t) ]);
+              r = t & 32 /* State */ ? this[e] : o.$hostElement$[e];
+              setValue(this, e, r, n);
               return;
             }
             {
               if ((s & 1 /* isElementConstructor */) === 0 || (n._$$members$$_[e][0] & 4096 /* Setter */) === 0) {
-                setValue(this, e, l, n);
+                setValue(this, e, r, n);
                 if (s & 1 /* isElementConstructor */ && !o._$$lazyInstance$$_) {
                   o._$$onReadyPromise$$_.then((() => {
                     if (n._$$members$$_[e][0] & 4096 /* Setter */ && o._$$lazyInstance$$_[e] !== o._$$instanceValues$$_.get(e)) {
-                      o._$$lazyInstance$$_[e] = l;
+                      o._$$lazyInstance$$_[e] = r;
                     }
                   }));
                 }
@@ -1065,7 +1139,7 @@ var proxyComponent = (e, n, s) => {
                 if (!o._$$instanceValues$$_.get(e) && s) {
                   o._$$instanceValues$$_.set(e, s);
                 }
-                o._$$lazyInstance$$_[e] = parsePropertyValue(l, t);
+                o._$$lazyInstance$$_[e] = parsePropertyValue(r, t);
                 setValue(this, e, o._$$lazyInstance$$_[e], n);
               };
               if (o._$$lazyInstance$$_) {
@@ -1080,39 +1154,39 @@ var proxyComponent = (e, n, s) => {
     }));
     if (s & 1 /* isElementConstructor */) {
       const s =  new Map;
-      o.attributeChangedCallback = function(e, l, r) {
+      o.attributeChangedCallback = function(e, r, l) {
         u.jmp((() => {
           var i;
           const a = s.get(e);
           if (this.hasOwnProperty(a) && t.lazyLoad) {
-            r = this[a];
+            l = this[a];
             delete this[a];
           } else if (o.hasOwnProperty(a) && typeof this[a] === "number" && // cast type to number to avoid TS compiler issues
-          this[a] == r) {
+          this[a] == l) {
             return;
           } else if (a == null) {
             const t = getHostRef(this);
             const s = t == null ? void 0 : t._$$flags$$_;
-            if (s && !(s & 8 /* isConstructingInstance */) && s & 128 /* isWatchReady */ && r !== l) {
+            if (s && !(s & 8 /* isConstructingInstance */) && s & 128 /* isWatchReady */ && l !== r) {
               const s = t._$$lazyInstance$$_;
               const o = (i = n._$$watchers$$_) == null ? void 0 : i[e];
               o == null ? void 0 : o.forEach((t => {
                 if (s[t] != null) {
-                  s[t].call(s, r, l, e);
+                  s[t].call(s, l, r, e);
                 }
               }));
             }
             return;
           }
           const f = Object.getOwnPropertyDescriptor(o, a);
-          r = r === null && typeof this[a] === "boolean" ? false : r;
-          if (r !== this[a] && (!f.get || !!f.set)) {
-            this[a] = r;
+          l = l === null && typeof this[a] === "boolean" ? false : l;
+          if (l !== this[a] && (!f.get || !!f.set)) {
+            this[a] = l;
           }
         }));
       };
       e.observedAttributes = Array.from(
-       new Set([ ...Object.keys((r = n._$$watchers$$_) != null ? r : {}), ...i.filter((([e, t]) => t[0] & 15 /* HasAttribute */)).map((([e, t]) => {
+       new Set([ ...Object.keys((l = n._$$watchers$$_) != null ? l : {}), ...i.filter((([e, t]) => t[0] & 15 /* HasAttribute */)).map((([e, t]) => {
         const n = t[1] || e;
         s.set(n, e);
         return n;
@@ -1124,7 +1198,7 @@ var proxyComponent = (e, n, s) => {
 
 // src/runtime/initialize-component.ts
 var initializeComponent = async (e, t, n, s) => {
-  let l;
+  let r;
   if ((t._$$flags$$_ & 32 /* hasInitializedComponent */) === 0) {
     t._$$flags$$_ |= 32 /* hasInitializedComponent */;
     const s = n._$$lazyBundleId$$_;
@@ -1132,43 +1206,43 @@ var initializeComponent = async (e, t, n, s) => {
       const s = loadModule(n, t);
       if (s && "then" in s) {
         const e = uniqueTime();
-        l = await s;
+        r = await s;
         e();
       } else {
-        l = s;
+        r = s;
       }
-      if (!l) {
+      if (!r) {
         throw new Error(`Constructor for "${n._$$tagName$$_}#${t._$$modeName$$_}" was not found`);
       }
-      if (!l.isProxied) {
-        proxyComponent(l, n, 2 /* proxyState */);
-        l.isProxied = true;
+      if (!r.isProxied) {
+        proxyComponent(r, n, 2 /* proxyState */);
+        r.isProxied = true;
       }
-      const r = createTime("createInstance", n._$$tagName$$_);
+      const l = createTime("createInstance", n._$$tagName$$_);
       {
         t._$$flags$$_ |= 8 /* isConstructingInstance */;
       }
       try {
-        new l(t);
+        new r(t);
       } catch (t) {
         consoleError(t, e);
       }
       {
         t._$$flags$$_ &= ~8 /* isConstructingInstance */;
       }
-      r();
+      l();
     } else {
-      l = e.constructor;
+      r = e.constructor;
       const n = e.localName;
       customElements.whenDefined(n).then((() => t._$$flags$$_ |= 128 /* isWatchReady */));
     }
-    if (l && l.style) {
+    if (r && r.style) {
       let e;
-      if (typeof l.style === "string") {
-        e = l.style;
+      if (typeof r.style === "string") {
+        e = r.style;
       }
       const t = getScopeId(n);
-      if (!r.has(t)) {
+      if (!l.has(t)) {
         const s = createTime("registerStyles", n._$$tagName$$_);
         registerStyle(t, e, !!(n._$$flags$$_ & 1 /* shadowDomEncapsulation */));
         s();
@@ -1216,6 +1290,7 @@ var connectedCallback = e => {
         initializeComponent(e, t, n);
       }
     } else {
+      addHostEventListeners(e, t, n._$$listeners$$_);
       if (t == null ? void 0 : t._$$lazyInstance$$_) ; else if (t == null ? void 0 : t._$$onReadyPromise$$_) {
         t._$$onReadyPromise$$_.then((() => fireConnectedCallback()));
       }
@@ -1229,15 +1304,21 @@ var disconnectInstance = (e, t) => {};
 var disconnectedCallback = async e => {
   if ((u._$$flags$$_ & 1 /* isTmpDisconnected */) === 0) {
     const t = getHostRef(e);
+    {
+      if (t._$$rmListeners$$_) {
+        t._$$rmListeners$$_.map((e => e()));
+        t._$$rmListeners$$_ = void 0;
+      }
+    }
     if (t == null ? void 0 : t._$$lazyInstance$$_) ; else if (t == null ? void 0 : t._$$onReadyPromise$$_) {
       t._$$onReadyPromise$$_.then((() => disconnectInstance()));
     }
   }
-  if (S.has(e)) {
-    S.delete(e);
+  if (g.has(e)) {
+    g.delete(e);
   }
-  if (e.shadowRoot && S.has(e.shadowRoot)) {
-    S.delete(e.shadowRoot);
+  if (e.shadowRoot && g.has(e.shadowRoot)) {
+    g.delete(e.shadowRoot);
   }
 };
 
@@ -1245,8 +1326,8 @@ var disconnectedCallback = async e => {
 var bootstrapLazy = (e, t = {}) => {
   var n;
   const s = createTime();
-  const l = [];
-  const r = t.exclude || [];
+  const r = [];
+  const l = t.exclude || [];
   const o = f.customElements;
   const d = c.head;
   const v =  d.querySelector("meta[charset]");
@@ -1271,6 +1352,9 @@ var bootstrapLazy = (e, t = {}) => {
       {
         n._$$members$$_ = t[2];
       }
+      {
+        n._$$listeners$$_ = t[3];
+      }
       const s = n._$$tagName$$_;
       const i = class extends HTMLElement {
         // StencilLazyHost
@@ -1296,9 +1380,10 @@ var bootstrapLazy = (e, t = {}) => {
           }
         }
         connectedCallback() {
-          getHostRef(this);
+          const e = getHostRef(this);
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, e, n._$$listeners$$_);
           }
           if (y) {
             clearTimeout(y);
@@ -1329,18 +1414,18 @@ var bootstrapLazy = (e, t = {}) => {
         }
       };
       n._$$lazyBundleId$$_ = e[0];
-      if (!r.includes(s) && !o.get(s)) {
-        l.push(s);
+      if (!l.includes(s) && !o.get(s)) {
+        r.push(s);
         o.define(s, proxyComponent(i, n, 1 /* isElementConstructor */));
       }
     }));
   }));
-  if (l.length > 0) {
+  if (r.length > 0) {
     if (w) {
       p.textContent += a;
     }
     {
-      p.textContent += l.sort() + i;
+      p.textContent += r.sort() + i;
     }
     if (p.innerHTML.length) {
       p.setAttribute("data-styles", "");
@@ -1362,8 +1447,46 @@ var bootstrapLazy = (e, t = {}) => {
   s();
 };
 
+var addHostEventListeners = (e, t, n, s) => {
+  if (n) {
+    n.map((([n, s, r]) => {
+      const l = getHostListenerTarget(e, n);
+      const o = hostListenerProxy(t, r);
+      const i = hostListenerOpts(n);
+      u.ael(l, s, o, i);
+      (t._$$rmListeners$$_ = t._$$rmListeners$$_ || []).push((() => u.rel(l, s, o, i)));
+    }));
+  }
+};
+
+var hostListenerProxy = (e, t) => n => {
+  var s;
+  try {
+    {
+      if (e._$$flags$$_ & 256 /* isListenReady */) {
+        (s = e._$$lazyInstance$$_) == null ? void 0 : s[t](n);
+      } else {
+        (e._$$queuedListeners$$_ = e._$$queuedListeners$$_ || []).push([ t, n ]);
+      }
+    }
+  } catch (t) {
+    consoleError(t, e.$hostElement$);
+  }
+};
+
+var getHostListenerTarget = (e, t) => {
+  if (t & 4 /* TargetDocument */) return c;
+  return e;
+};
+
+var hostListenerOpts = e => d ? {
+  passive: (e & 1 /* Passive */) !== 0,
+  capture: (e & 2 /* Capture */) !== 0
+} : (e & 2 /* Capture */) !== 0
 // src/runtime/nonce.ts
+;
+
 var setNonce = e => u._$$nonce$$_ = e;
 
-export { w as H, bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=p-cca32e44.js.map
+export { S as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+//# sourceMappingURL=p-5a36af0f.js.map