joe-header 2.0.11 → 2.0.13

package/dist/joe-header.js

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1 = window, e$4 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), n$4 = /* @__PURE__ */ new WeakMap();
+const t$1 = window, e$4 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), n$5 = /* @__PURE__ */ new WeakMap();
 class o$3 {
   constructor(t2, e2, n2) {
     if (this._$cssResult$ = true, n2 !== s$3)
@@ -15,7 +15,7 @@ class o$3 {
     const s2 = this.t;
     if (e$4 && void 0 === t2) {
       const e2 = void 0 !== s2 && 1 === s2.length;
-      e2 && (t2 = n$4.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && n$4.set(s2, t2));
+      e2 && (t2 = n$5.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && n$5.set(s2, t2));
     }
     return t2;
   }
@@ -49,7 +49,7 @@ const r$2 = (t2) => new o$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$3),
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var s$2;
-const e$3 = window, r$1 = e$3.trustedTypes, h$1 = r$1 ? r$1.emptyScript : "", o$2 = e$3.reactiveElementPolyfillSupport, n$3 = { toAttribute(t2, i2) {
+const e$3 = window, r$1 = e$3.trustedTypes, h$1 = r$1 ? r$1.emptyScript : "", o$2 = e$3.reactiveElementPolyfillSupport, n$4 = { toAttribute(t2, i2) {
   switch (i2) {
     case Boolean:
       t2 = t2 ? h$1 : null;
@@ -77,14 +77,14 @@ const e$3 = window, r$1 = e$3.trustedTypes, h$1 = r$1 ? r$1.emptyScript : "", o$
       }
   }
   return s2;
-} }, a$1 = (t2, i2) => i2 !== t2 && (i2 == i2 || t2 == t2), l$2 = { attribute: true, type: String, converter: n$3, reflect: false, hasChanged: a$1 };
-class d$1 extends HTMLElement {
+} }, a$1 = (t2, i2) => i2 !== t2 && (i2 == i2 || t2 == t2), l$2 = { attribute: true, type: String, converter: n$4, reflect: false, hasChanged: a$1 }, d$1 = "finalized";
+class u$1 extends HTMLElement {
   constructor() {
-    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = false, this.hasUpdated = false, this._$El = null, this.u();
+    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = false, this.hasUpdated = false, this._$El = null, this._$Eu();
   }
   static addInitializer(t2) {
     var i2;
-    null !== (i2 = this.h) && void 0 !== i2 || (this.h = []), this.h.push(t2);
+    this.finalize(), (null !== (i2 = this.h) && void 0 !== i2 ? i2 : this.h = []).push(t2);
   }
   static get observedAttributes() {
     this.finalize();
@@ -112,11 +112,11 @@ class d$1 extends HTMLElement {
     return this.elementProperties.get(t2) || l$2;
   }
   static finalize() {
-    if (this.hasOwnProperty("finalized"))
+    if (this.hasOwnProperty(d$1))
       return false;
-    this.finalized = true;
+    this[d$1] = true;
     const t2 = Object.getPrototypeOf(this);
-    if (t2.finalize(), this.elementProperties = new Map(t2.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
+    if (t2.finalize(), void 0 !== t2.h && (this.h = [...t2.h]), this.elementProperties = new Map(t2.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
       const t3 = this.properties, i2 = [...Object.getOwnPropertyNames(t3), ...Object.getOwnPropertySymbols(t3)];
       for (const s2 of i2)
         this.createProperty(s2, t3[s2]);
@@ -137,7 +137,7 @@ class d$1 extends HTMLElement {
     const s2 = i2.attribute;
     return false === s2 ? void 0 : "string" == typeof s2 ? s2 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
   }
-  u() {
+  _$Eu() {
     var t2;
     this._$E_ = new Promise((t3) => this.enableUpdating = t3), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), null === (t2 = this.constructor.h) || void 0 === t2 || t2.forEach((t3) => t3(this));
   }
@@ -182,7 +182,7 @@ class d$1 extends HTMLElement {
     var e2;
     const r2 = this.constructor._$Ep(t2, s2);
     if (void 0 !== r2 && true === s2.reflect) {
-      const h2 = (void 0 !== (null === (e2 = s2.converter) || void 0 === e2 ? void 0 : e2.toAttribute) ? s2.converter : n$3).toAttribute(i2, s2.type);
+      const h2 = (void 0 !== (null === (e2 = s2.converter) || void 0 === e2 ? void 0 : e2.toAttribute) ? s2.converter : n$4).toAttribute(i2, s2.type);
       this._$El = t2, null == h2 ? this.removeAttribute(r2) : this.setAttribute(r2, h2), this._$El = null;
     }
   }
@@ -190,7 +190,7 @@ class d$1 extends HTMLElement {
     var s2;
     const e2 = this.constructor, r2 = e2._$Ev.get(t2);
     if (void 0 !== r2 && this._$El !== r2) {
-      const t3 = e2.getPropertyOptions(r2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== (null === (s2 = t3.converter) || void 0 === s2 ? void 0 : s2.fromAttribute) ? t3.converter : n$3;
+      const t3 = e2.getPropertyOptions(r2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== (null === (s2 = t3.converter) || void 0 === s2 ? void 0 : s2.fromAttribute) ? t3.converter : n$4;
       this._$El = r2, this[r2] = h2.fromAttribute(i2, t3.type), this._$El = null;
     }
   }
@@ -257,104 +257,95 @@ class d$1 extends HTMLElement {
   firstUpdated(t2) {
   }
 }
-d$1.finalized = true, d$1.elementProperties = /* @__PURE__ */ new Map(), d$1.elementStyles = [], d$1.shadowRootOptions = { mode: "open" }, null == o$2 || o$2({ ReactiveElement: d$1 }), (null !== (s$2 = e$3.reactiveElementVersions) && void 0 !== s$2 ? s$2 : e$3.reactiveElementVersions = []).push("1.4.1");
+u$1[d$1] = true, u$1.elementProperties = /* @__PURE__ */ new Map(), u$1.elementStyles = [], u$1.shadowRootOptions = { mode: "open" }, null == o$2 || o$2({ ReactiveElement: u$1 }), (null !== (s$2 = e$3.reactiveElementVersions) && void 0 !== s$2 ? s$2 : e$3.reactiveElementVersions = []).push("1.6.3");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var t;
-const i$1 = window, s$1 = i$1.trustedTypes, e$2 = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o$1 = `lit$${(Math.random() + "").slice(9)}$`, n$2 = "?" + o$1, l$1 = `<${n$2}>`, h = document, r = (t2 = "") => h.createComment(t2), d = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u = Array.isArray, c = (t2) => u(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, a = /-->/g, f = />/g, _ = RegExp(`>|[ 	
-\f\r](?:([^\\s"'>=/]+)([ 	
-\f\r]*=[ 	
-\f\r]*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), m = /'/g, p = /"/g, $ = /^(?:script|style|textarea|title)$/i, g = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), y = g(1), x = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), T = /* @__PURE__ */ new WeakMap(), A = (t2, i2, s2) => {
-  var e2, o2;
-  const n2 = null !== (e2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== e2 ? e2 : i2;
-  let l2 = n2._$litPart$;
-  if (void 0 === l2) {
-    const t3 = null !== (o2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== o2 ? o2 : null;
-    n2._$litPart$ = l2 = new S(i2.insertBefore(r(), t3), t3, void 0, null != s2 ? s2 : {});
-  }
-  return l2._$AI(t2), l2;
-}, E = h.createTreeWalker(h, 129, null, false), C = (t2, i2) => {
-  const s2 = t2.length - 1, n2 = [];
-  let h2, r2 = 2 === i2 ? "<svg>" : "", d2 = v;
+const i$1 = window, s$1 = i$1.trustedTypes, e$2 = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o$1 = "$lit$", n$3 = `lit$${(Math.random() + "").slice(9)}$`, l$1 = "?" + n$3, h = `<${l$1}>`, r = document, u = () => r.createComment(""), d = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, c = Array.isArray, v = (t2) => c(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), a = "[ 	\n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, w = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), x = w(1), T = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), E = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129, null, false);
+function P(t2, i2) {
+  if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
+    throw Error("invalid template strings array");
+  return void 0 !== e$2 ? e$2.createHTML(i2) : i2;
+}
+const V = (t2, i2) => {
+  const s2 = t2.length - 1, e2 = [];
+  let l2, r2 = 2 === i2 ? "<svg>" : "", u2 = f;
   for (let i3 = 0; i3 < s2; i3++) {
     const s3 = t2[i3];
-    let e2, u3, c2 = -1, g2 = 0;
-    for (; g2 < s3.length && (d2.lastIndex = g2, u3 = d2.exec(s3), null !== u3); )
-      g2 = d2.lastIndex, d2 === v ? "!--" === u3[1] ? d2 = a : void 0 !== u3[1] ? d2 = f : void 0 !== u3[2] ? ($.test(u3[2]) && (h2 = RegExp("</" + u3[2], "g")), d2 = _) : void 0 !== u3[3] && (d2 = _) : d2 === _ ? ">" === u3[0] ? (d2 = null != h2 ? h2 : v, c2 = -1) : void 0 === u3[1] ? c2 = -2 : (c2 = d2.lastIndex - u3[2].length, e2 = u3[1], d2 = void 0 === u3[3] ? _ : '"' === u3[3] ? p : m) : d2 === p || d2 === m ? d2 = _ : d2 === a || d2 === f ? d2 = v : (d2 = _, h2 = void 0);
-    const y2 = d2 === _ && t2[i3 + 1].startsWith("/>") ? " " : "";
-    r2 += d2 === v ? s3 + l$1 : c2 >= 0 ? (n2.push(e2), s3.slice(0, c2) + "$lit$" + s3.slice(c2) + o$1 + y2) : s3 + o$1 + (-2 === c2 ? (n2.push(void 0), i3) : y2);
+    let d2, c2, v2 = -1, a2 = 0;
+    for (; a2 < s3.length && (u2.lastIndex = a2, c2 = u2.exec(s3), null !== c2); )
+      a2 = u2.lastIndex, u2 === f ? "!--" === c2[1] ? u2 = _ : void 0 !== c2[1] ? u2 = m : void 0 !== c2[2] ? (y.test(c2[2]) && (l2 = RegExp("</" + c2[2], "g")), u2 = p) : void 0 !== c2[3] && (u2 = p) : u2 === p ? ">" === c2[0] ? (u2 = null != l2 ? l2 : f, v2 = -1) : void 0 === c2[1] ? v2 = -2 : (v2 = u2.lastIndex - c2[2].length, d2 = c2[1], u2 = void 0 === c2[3] ? p : '"' === c2[3] ? $ : g) : u2 === $ || u2 === g ? u2 = p : u2 === _ || u2 === m ? u2 = f : (u2 = p, l2 = void 0);
+    const w2 = u2 === p && t2[i3 + 1].startsWith("/>") ? " " : "";
+    r2 += u2 === f ? s3 + h : v2 >= 0 ? (e2.push(d2), s3.slice(0, v2) + o$1 + s3.slice(v2) + n$3 + w2) : s3 + n$3 + (-2 === v2 ? (e2.push(void 0), i3) : w2);
   }
-  const u2 = r2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : "");
-  if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
-    throw Error("invalid template strings array");
-  return [void 0 !== e$2 ? e$2.createHTML(u2) : u2, n2];
+  return [P(t2, r2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : "")), e2];
 };
-class P {
+class N {
   constructor({ strings: t2, _$litType$: i2 }, e2) {
-    let l2;
+    let h2;
     this.parts = [];
-    let h2 = 0, d2 = 0;
-    const u2 = t2.length - 1, c2 = this.parts, [v2, a2] = C(t2, i2);
-    if (this.el = P.createElement(v2, e2), E.currentNode = this.el.content, 2 === i2) {
+    let r2 = 0, d2 = 0;
+    const c2 = t2.length - 1, v2 = this.parts, [a2, f2] = V(t2, i2);
+    if (this.el = N.createElement(a2, e2), C.currentNode = this.el.content, 2 === i2) {
       const t3 = this.el.content, i3 = t3.firstChild;
       i3.remove(), t3.append(...i3.childNodes);
     }
-    for (; null !== (l2 = E.nextNode()) && c2.length < u2; ) {
-      if (1 === l2.nodeType) {
-        if (l2.hasAttributes()) {
+    for (; null !== (h2 = C.nextNode()) && v2.length < c2; ) {
+      if (1 === h2.nodeType) {
+        if (h2.hasAttributes()) {
           const t3 = [];
-          for (const i3 of l2.getAttributeNames())
-            if (i3.endsWith("$lit$") || i3.startsWith(o$1)) {
-              const s2 = a2[d2++];
+          for (const i3 of h2.getAttributeNames())
+            if (i3.endsWith(o$1) || i3.startsWith(n$3)) {
+              const s2 = f2[d2++];
               if (t3.push(i3), void 0 !== s2) {
-                const t4 = l2.getAttribute(s2.toLowerCase() + "$lit$").split(o$1), i4 = /([.?@])?(.*)/.exec(s2);
-                c2.push({ type: 1, index: h2, name: i4[2], strings: t4, ctor: "." === i4[1] ? R : "?" === i4[1] ? H : "@" === i4[1] ? I : M });
+                const t4 = h2.getAttribute(s2.toLowerCase() + o$1).split(n$3), i4 = /([.?@])?(.*)/.exec(s2);
+                v2.push({ type: 1, index: r2, name: i4[2], strings: t4, ctor: "." === i4[1] ? H : "?" === i4[1] ? L : "@" === i4[1] ? z : k });
               } else
-                c2.push({ type: 6, index: h2 });
+                v2.push({ type: 6, index: r2 });
             }
           for (const i3 of t3)
-            l2.removeAttribute(i3);
+            h2.removeAttribute(i3);
         }
-        if ($.test(l2.tagName)) {
-          const t3 = l2.textContent.split(o$1), i3 = t3.length - 1;
+        if (y.test(h2.tagName)) {
+          const t3 = h2.textContent.split(n$3), i3 = t3.length - 1;
           if (i3 > 0) {
-            l2.textContent = s$1 ? s$1.emptyScript : "";
+            h2.textContent = s$1 ? s$1.emptyScript : "";
             for (let s2 = 0; s2 < i3; s2++)
-              l2.append(t3[s2], r()), E.nextNode(), c2.push({ type: 2, index: ++h2 });
-            l2.append(t3[i3], r());
+              h2.append(t3[s2], u()), C.nextNode(), v2.push({ type: 2, index: ++r2 });
+            h2.append(t3[i3], u());
           }
         }
-      } else if (8 === l2.nodeType)
-        if (l2.data === n$2)
-          c2.push({ type: 2, index: h2 });
+      } else if (8 === h2.nodeType)
+        if (h2.data === l$1)
+          v2.push({ type: 2, index: r2 });
         else {
           let t3 = -1;
-          for (; -1 !== (t3 = l2.data.indexOf(o$1, t3 + 1)); )
-            c2.push({ type: 7, index: h2 }), t3 += o$1.length - 1;
+          for (; -1 !== (t3 = h2.data.indexOf(n$3, t3 + 1)); )
+            v2.push({ type: 7, index: r2 }), t3 += n$3.length - 1;
         }
-      h2++;
+      r2++;
     }
   }
   static createElement(t2, i2) {
-    const s2 = h.createElement("template");
+    const s2 = r.createElement("template");
     return s2.innerHTML = t2, s2;
   }
 }
-function V(t2, i2, s2 = t2, e2) {
+function S(t2, i2, s2 = t2, e2) {
   var o2, n2, l2, h2;
-  if (i2 === x)
+  if (i2 === T)
     return i2;
-  let r2 = void 0 !== e2 ? null === (o2 = s2._$Cl) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cu;
+  let r2 = void 0 !== e2 ? null === (o2 = s2._$Co) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cl;
   const u2 = d(i2) ? void 0 : i2._$litDirective$;
-  return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Cl) && void 0 !== l2 ? l2 : h2._$Cl = [])[e2] = r2 : s2._$Cu = r2), void 0 !== r2 && (i2 = V(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
+  return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Co) && void 0 !== l2 ? l2 : h2._$Co = [])[e2] = r2 : s2._$Cl = r2), void 0 !== r2 && (i2 = S(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
 }
-class N {
+class M {
   constructor(t2, i2) {
-    this.v = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -362,39 +353,39 @@ class N {
   get _$AU() {
     return this._$AM._$AU;
   }
-  p(t2) {
+  u(t2) {
     var i2;
-    const { el: { content: s2 }, parts: e2 } = this._$AD, o2 = (null !== (i2 = null == t2 ? void 0 : t2.creationScope) && void 0 !== i2 ? i2 : h).importNode(s2, true);
-    E.currentNode = o2;
-    let n2 = E.nextNode(), l2 = 0, r2 = 0, d2 = e2[0];
-    for (; void 0 !== d2; ) {
-      if (l2 === d2.index) {
+    const { el: { content: s2 }, parts: e2 } = this._$AD, o2 = (null !== (i2 = null == t2 ? void 0 : t2.creationScope) && void 0 !== i2 ? i2 : r).importNode(s2, true);
+    C.currentNode = o2;
+    let n2 = C.nextNode(), l2 = 0, h2 = 0, u2 = e2[0];
+    for (; void 0 !== u2; ) {
+      if (l2 === u2.index) {
         let i3;
-        2 === d2.type ? i3 = new S(n2, n2.nextSibling, this, t2) : 1 === d2.type ? i3 = new d2.ctor(n2, d2.name, d2.strings, this, t2) : 6 === d2.type && (i3 = new L(n2, this, t2)), this.v.push(i3), d2 = e2[++r2];
+        2 === u2.type ? i3 = new R(n2, n2.nextSibling, this, t2) : 1 === u2.type ? i3 = new u2.ctor(n2, u2.name, u2.strings, this, t2) : 6 === u2.type && (i3 = new Z(n2, this, t2)), this._$AV.push(i3), u2 = e2[++h2];
       }
-      l2 !== (null == d2 ? void 0 : d2.index) && (n2 = E.nextNode(), l2++);
+      l2 !== (null == u2 ? void 0 : u2.index) && (n2 = C.nextNode(), l2++);
     }
-    return o2;
+    return C.currentNode = r, o2;
   }
-  m(t2) {
+  v(t2) {
     let i2 = 0;
-    for (const s2 of this.v)
+    for (const s2 of this._$AV)
       void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
   }
 }
-class S {
+class R {
   constructor(t2, i2, s2, e2) {
     var o2;
-    this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$C_ = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
+    this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cp = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
   }
   get _$AU() {
     var t2, i2;
-    return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$C_;
+    return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$Cp;
   }
   get parentNode() {
     let t2 = this._$AA.parentNode;
     const i2 = this._$AM;
-    return void 0 !== i2 && 11 === t2.nodeType && (t2 = i2.parentNode), t2;
+    return void 0 !== i2 && 11 === (null == t2 ? void 0 : t2.nodeType) && (t2 = i2.parentNode), t2;
   }
   get startNode() {
     return this._$AA;
@@ -403,37 +394,37 @@ class S {
     return this._$AB;
   }
   _$AI(t2, i2 = this) {
-    t2 = V(this, t2, i2), d(t2) ? t2 === b || null == t2 || "" === t2 ? (this._$AH !== b && this._$AR(), this._$AH = b) : t2 !== this._$AH && t2 !== x && this.$(t2) : void 0 !== t2._$litType$ ? this.T(t2) : void 0 !== t2.nodeType ? this.k(t2) : c(t2) ? this.O(t2) : this.$(t2);
-  }
-  S(t2, i2 = this._$AB) {
-    return this._$AA.parentNode.insertBefore(t2, i2);
+    t2 = S(this, t2, i2), d(t2) ? t2 === A || null == t2 || "" === t2 ? (this._$AH !== A && this._$AR(), this._$AH = A) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.g(t2) : void 0 !== t2.nodeType ? this.$(t2) : v(t2) ? this.T(t2) : this._(t2);
   }
   k(t2) {
-    this._$AH !== t2 && (this._$AR(), this._$AH = this.S(t2));
+    return this._$AA.parentNode.insertBefore(t2, this._$AB);
   }
   $(t2) {
-    this._$AH !== b && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.k(h.createTextNode(t2)), this._$AH = t2;
+    this._$AH !== t2 && (this._$AR(), this._$AH = this.k(t2));
   }
-  T(t2) {
+  _(t2) {
+    this._$AH !== A && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.$(r.createTextNode(t2)), this._$AH = t2;
+  }
+  g(t2) {
     var i2;
-    const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = P.createElement(e2.h, this.options)), e2);
+    const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = N.createElement(P(e2.h, e2.h[0]), this.options)), e2);
     if ((null === (i2 = this._$AH) || void 0 === i2 ? void 0 : i2._$AD) === o2)
-      this._$AH.m(s2);
+      this._$AH.v(s2);
     else {
-      const t3 = new N(o2, this), i3 = t3.p(this.options);
-      t3.m(s2), this.k(i3), this._$AH = t3;
+      const t3 = new M(o2, this), i3 = t3.u(this.options);
+      t3.v(s2), this.$(i3), this._$AH = t3;
     }
   }
   _$AC(t2) {
-    let i2 = T.get(t2.strings);
-    return void 0 === i2 && T.set(t2.strings, i2 = new P(t2)), i2;
+    let i2 = E.get(t2.strings);
+    return void 0 === i2 && E.set(t2.strings, i2 = new N(t2)), i2;
   }
-  O(t2) {
-    u(this._$AH) || (this._$AH = [], this._$AR());
+  T(t2) {
+    c(this._$AH) || (this._$AH = [], this._$AR());
     const i2 = this._$AH;
     let s2, e2 = 0;
     for (const o2 of t2)
-      e2 === i2.length ? i2.push(s2 = new S(this.S(r()), this.S(r()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
+      e2 === i2.length ? i2.push(s2 = new R(this.k(u()), this.k(u()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
     e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
   }
   _$AR(t2 = this._$AA.nextSibling, i2) {
@@ -445,12 +436,12 @@ class S {
   }
   setConnected(t2) {
     var i2;
-    void 0 === this._$AM && (this._$C_ = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
+    void 0 === this._$AM && (this._$Cp = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
   }
 }
-class M {
+class k {
   constructor(t2, i2, s2, e2, o2) {
-    this.type = 1, this._$AH = b, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = o2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = b;
+    this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = o2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = A;
   }
   get tagName() {
     return this.element.tagName;
@@ -462,45 +453,45 @@ class M {
     const o2 = this.strings;
     let n2 = false;
     if (void 0 === o2)
-      t2 = V(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== x, n2 && (this._$AH = t2);
+      t2 = S(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== T, n2 && (this._$AH = t2);
     else {
       const e3 = t2;
       let l2, h2;
       for (t2 = o2[0], l2 = 0; l2 < o2.length - 1; l2++)
-        h2 = V(this, e3[s2 + l2], i2, l2), h2 === x && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === b ? t2 = b : t2 !== b && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
+        h2 = S(this, e3[s2 + l2], i2, l2), h2 === T && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === A ? t2 = A : t2 !== A && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
     }
-    n2 && !e2 && this.P(t2);
+    n2 && !e2 && this.j(t2);
   }
-  P(t2) {
-    t2 === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t2 ? t2 : "");
+  j(t2) {
+    t2 === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t2 ? t2 : "");
   }
 }
-class R extends M {
+class H extends k {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  P(t2) {
-    this.element[this.name] = t2 === b ? void 0 : t2;
+  j(t2) {
+    this.element[this.name] = t2 === A ? void 0 : t2;
   }
 }
-const k = s$1 ? s$1.emptyScript : "";
-class H extends M {
+const I = s$1 ? s$1.emptyScript : "";
+class L extends k {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  P(t2) {
-    t2 && t2 !== b ? this.element.setAttribute(this.name, k) : this.element.removeAttribute(this.name);
+  j(t2) {
+    t2 && t2 !== A ? this.element.setAttribute(this.name, I) : this.element.removeAttribute(this.name);
   }
 }
-class I extends M {
+class z extends k {
   constructor(t2, i2, s2, e2, o2) {
     super(t2, i2, s2, e2, o2), this.type = 5;
   }
   _$AI(t2, i2 = this) {
     var s2;
-    if ((t2 = null !== (s2 = V(this, t2, i2, 0)) && void 0 !== s2 ? s2 : b) === x)
+    if ((t2 = null !== (s2 = S(this, t2, i2, 0)) && void 0 !== s2 ? s2 : A) === T)
       return;
-    const e2 = this._$AH, o2 = t2 === b && e2 !== b || t2.capture !== e2.capture || t2.once !== e2.once || t2.passive !== e2.passive, n2 = t2 !== b && (e2 === b || o2);
+    const e2 = this._$AH, o2 = t2 === A && e2 !== A || t2.capture !== e2.capture || t2.once !== e2.once || t2.passive !== e2.passive, n2 = t2 !== A && (e2 === A || o2);
     o2 && this.element.removeEventListener(this.name, this, e2), n2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
   }
   handleEvent(t2) {
@@ -508,7 +499,7 @@ class I extends M {
     "function" == typeof this._$AH ? this._$AH.call(null !== (s2 = null === (i2 = this.options) || void 0 === i2 ? void 0 : i2.host) && void 0 !== s2 ? s2 : this.element, t2) : this._$AH.handleEvent(t2);
   }
 }
-class L {
+class Z {
   constructor(t2, i2, s2) {
     this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
   }
@@ -516,18 +507,28 @@ class L {
     return this._$AM._$AU;
   }
   _$AI(t2) {
-    V(this, t2);
+    S(this, t2);
   }
 }
-const Z = i$1.litHtmlPolyfillSupport;
-null == Z || Z(P, S), (null !== (t = i$1.litHtmlVersions) && void 0 !== t ? t : i$1.litHtmlVersions = []).push("2.3.1");
+const B = i$1.litHtmlPolyfillSupport;
+null == B || B(N, R), (null !== (t = i$1.litHtmlVersions) && void 0 !== t ? t : i$1.litHtmlVersions = []).push("2.8.0");
+const D = (t2, i2, s2) => {
+  var e2, o2;
+  const n2 = null !== (e2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== e2 ? e2 : i2;
+  let l2 = n2._$litPart$;
+  if (void 0 === l2) {
+    const t3 = null !== (o2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== o2 ? o2 : null;
+    n2._$litPart$ = l2 = new R(i2.insertBefore(u(), t3), t3, void 0, null != s2 ? s2 : {});
+  }
+  return l2._$AI(t2), l2;
+};
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var l, o;
-class s extends d$1 {
+class s extends u$1 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -538,7 +539,7 @@ class s extends d$1 {
   }
   update(t2) {
     const i2 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = A(i2, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = D(i2, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var t2;
@@ -549,13 +550,13 @@ class s extends d$1 {
     super.disconnectedCallback(), null === (t2 = this._$Do) || void 0 === t2 || t2.setConnected(false);
   }
   render() {
-    return x;
+    return T;
   }
 }
 s.finalized = true, s._$litElement$ = true, null === (l = globalThis.litElementHydrateSupport) || void 0 === l || l.call(globalThis, { LitElement: s });
-const n$1 = globalThis.litElementPolyfillSupport;
-null == n$1 || n$1({ LitElement: s });
-(null !== (o = globalThis.litElementVersions) && void 0 !== o ? o : globalThis.litElementVersions = []).push("3.2.2");
+const n$2 = globalThis.litElementPolyfillSupport;
+null == n$2 || n$2({ LitElement: s });
+(null !== (o = globalThis.litElementVersions) && void 0 !== o ? o : globalThis.litElementVersions = []).push("3.3.3");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -578,11 +579,11 @@ const i = (i2, e2) => "method" === e2.kind && e2.descriptor && !("value" in e2.d
   "function" == typeof e2.initializer && (this[e2.key] = e2.initializer.call(this));
 }, finisher(n2) {
   n2.createProperty(e2.key, i2);
-} };
-function e(e2) {
-  return (n2, t2) => void 0 !== t2 ? ((i2, e3, n3) => {
-    e3.constructor.createProperty(n3, i2);
-  })(e2, n2, t2) : i(e2, n2);
+} }, e = (i2, e2, n2) => {
+  e2.constructor.createProperty(n2, i2);
+};
+function n$1(n2) {
+  return (t2, o2) => void 0 !== o2 ? e(n2, t2, o2) : i(n2, t2);
 }
 /**
  * @license
@@ -938,26 +939,36 @@ let JoeHeader = class extends s {
     this.links = [
       {
         label: "Home",
+        gtm: "nav_menu_home",
         href: "https://www.joejuice.com/"
       },
       {
         label: "Menu",
+        gtm: "nav_menu_menu",
         href: "https://gtly.ink/Csp5K56vz"
       },
       {
         label: "Stores",
+        gtm: "nav_menu_stores",
         href: "https://gtly.ink/Xh7TCljV2"
       },
+      {
+        label: "Catering",
+        href: "https://catering.joejuice.com/",
+        gtm: "nav_menu_catering"
+      },
       {
         label: "App",
         href: "https://www.joejuice.com/app"
       },
       {
         label: "Careers",
+        gtm: "nav_menu_careers",
         href: "https://www.joejuice.com/apply"
       },
       {
         label: "Event Bookings",
+        gtm: "nav_menu_events",
         href: "https://www.joejuice.com/events",
         collapsed: [
           {
@@ -977,6 +988,7 @@ let JoeHeader = class extends s {
           },
           {
             label: "Request Booking",
+            gtm: "request_event_booking",
             href: "https://joejuice.typeform.com/events",
             hideMobile: true,
             target: "_blank"
@@ -986,6 +998,7 @@ let JoeHeader = class extends s {
       {
         label: "& MORE",
         hideMobile: true,
+        gtm: "nav_menu_more",
         collapsed: [
           {
             label: "Culture",
@@ -1004,7 +1017,7 @@ let JoeHeader = class extends s {
     ];
   }
   render() {
-    return y`
+    return x`
       <div class="container">
         <div class="navigation">
           <button
@@ -1024,10 +1037,11 @@ let JoeHeader = class extends s {
           >
             <ul>
               ${this.links.map(
-      (link) => link.collapsed ? y`<li class="collapsed">
-                      ${link.href ? y`<a
+      (link) => link.collapsed ? x`<li class="collapsed">
+                      ${link.href ? x`<a
                             href=${link.href}
                             target=${link.target}
+                            data-gtm-id=${link.gtm}
                             itemprop="url"
                           >
                             <span
@@ -1037,20 +1051,21 @@ let JoeHeader = class extends s {
                               ${link.label}
                               <div class="arrow"></div
                             ></span>
-                          </a>` : y`<span
+                          </a>` : x`<span
                             class=${link.hideMobile ? "collapsed__title hide-on-mobile" : "collapsed__title"}
                             >${link.label}</span
                           >`}
 
                       <ul class="collapsed__list">
                         ${link.collapsed.map(
-        (link2) => y`<li
+        (link2) => x`<li
                             itemprop="name"
                             class=${link2.hideMobile ? "hide-on-mobile" : ""}
                           >
                             <a
                               href=${link2.href}
                               target=${link2.target}
+                              data-gtm-id=${link2.gtm}
                               itemprop="url"
                             >
                               <span
@@ -1061,11 +1076,16 @@ let JoeHeader = class extends s {
                           </li>`
       )}
                       </ul>
-                    </li>` : y`<li
+                    </li>` : x`<li
                       itemprop="name"
                       class=${link.hideMobile ? "hide-on-mobile" : ""}
                     >
-                      <a href=${link.href} target=${link.target} itemprop="url">
+                      <a
+                        href=${link.href}
+                        target=${link.target}
+                        data-gtm-id=${link.gtm}
+                        itemprop="url"
+                      >
                         <span itemprop="name">
                           ${link.label}
                           <div class="arrow"></div
@@ -1090,7 +1110,7 @@ let JoeHeader = class extends s {
 
         <div class="slot">
           <slot></slot>
-          ${this.showOrderButton ? y`
+          ${this.showOrderButton ? x`
                 <a
                   class="order-button"
                   rel="follow"
@@ -1108,13 +1128,13 @@ let JoeHeader = class extends s {
 };
 JoeHeader.styles = styles;
 __decorateClass([
-  e()
+  n$1()
 ], JoeHeader.prototype, "expanded", 2);
 __decorateClass([
-  e()
+  n$1()
 ], JoeHeader.prototype, "showOrderButton", 2);
 __decorateClass([
-  e()
+  n$1()
 ], JoeHeader.prototype, "links", 2);
 JoeHeader = __decorateClass([
   e$1("joe-header")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joe-header",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "license": "MIT",
   "type": "module",
   "main": "dist/joe-header.js",
@@ -9,7 +9,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "build:gzip": "tsc && vite build && gzip -k dist/joe-header.js"
   },
   "types": "types/joe-header.d.ts",
   "files": [
@@ -22,6 +23,6 @@
     "vite": "^3.0.6"
   },
   "dependencies": {
-    "lit": "^2.2.8"
+    "lit": "^2.8.0"
   }
 }

package/types/joe-header.d.ts

@@ -5,6 +5,7 @@ interface Link {
     collapsed?: Link[];
     hideMobile?: boolean;
     target?: string;
+    gtm?: string;
 }
 /**
  * Joe Header