@phila/phila-ui-app-header 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/index.mjs

@@ -0,0 +1,674 @@
+import { ref as C, reactive as ie, onBeforeMount as se, onUnmounted as J, defineComponent as E, useSlots as fe, computed as le, createElementBlock as m, openBlock as d, Fragment as I, createElementVNode as i, createCommentVNode as _, unref as n, createTextVNode as z, createVNode as w, renderSlot as x, normalizeProps as W, guardReactiveProps as ae, mergeProps as P, withModifiers as me, createBlock as k, withCtx as M, resolveDynamicComponent as U, normalizeClass as j, renderList as te, toDisplayString as H, withKeys as pe, useAttrs as he, useTemplateRef as ge, watch as be, onMounted as ke, normalizeStyle as ye } from "vue";
+import { FontAwesomeIcon as A } from "@fortawesome/vue-fontawesome";
+import './index.css';var xe = {
+  prefix: "fas",
+  iconName: "magnifying-glass",
+  icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
+}, Ce = xe, oe = {
+  prefix: "fas",
+  iconName: "xmark",
+  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
+}, _e = oe, re = oe, we = {
+  prefix: "fas",
+  iconName: "lock",
+  icon: [384, 512, [128274], "f023", "M128 96l0 64 128 0 0-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zM64 160l0-64C64 25.3 121.3-32 192-32S320 25.3 320 96l0 64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z"]
+}, ce = {
+  prefix: "fas",
+  iconName: "caret-up",
+  icon: [320, 512, [], "f0d8", "M140.3 135.2c12.6-10.3 31.1-9.5 42.8 2.2l128 128c9.2 9.2 11.9 22.9 6.9 34.9S301.4 320 288.5 320l-256 0c-12.9 0-24.6-7.8-29.6-19.8S.7 274.5 9.9 265.4l128-128 2.4-2.2z"]
+}, de = {
+  prefix: "fas",
+  iconName: "caret-down",
+  icon: [320, 512, [], "f0d7", "M140.3 376.8c12.6 10.2 31.1 9.5 42.8-2.2l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301.4 192 288.5 192l-256 0c-12.9 0-24.6 7.8-29.6 19.8S.7 237.5 9.9 246.6l128 128 2.4 2.2z"]
+}, Be = {
+  prefix: "fas",
+  iconName: "building-columns",
+  icon: [512, 512, ["bank", "institution", "museum", "university"], "f19c", "M271.9 20.2c-9.8-5.6-21.9-5.6-31.8 0l-224 128c-12.6 7.2-18.8 22-15.1 36S17.5 208 32 208l32 0 0 208 0 0-51.2 38.4C4.7 460.4 0 469.9 0 480 0 497.7 14.3 512 32 512l448 0c17.7 0 32-14.3 32-32 0-10.1-4.7-19.6-12.8-25.6l-51.2-38.4 0-208 32 0c14.5 0 27.2-9.8 30.9-23.8s-2.5-28.8-15.1-36l-224-128zM400 208l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zM256 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]
+}, Le = {
+  prefix: "fas",
+  iconName: "bars",
+  icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
+}, $e = {
+  prefix: "fas",
+  iconName: "circle-info",
+  icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
+}, Te = $e;
+const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%200%2016%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20width='16'%20height='11'%20fill='url(%23pattern0_61022_1867)'/%3e%3cdefs%3e%3cpattern%20id='pattern0_61022_1867'%20patternContentUnits='objectBoundingBox'%20width='1'%20height='1'%3e%3cuse%20xlink:href='%23image0_61022_1867'%20transform='scale(0.0625%200.0909091)'/%3e%3c/pattern%3e%3cimage%20id='image0_61022_1867'%20width='16'%20height='11'%20preserveAspectRatio='none'%20xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII='/%3e%3c/defs%3e%3c/svg%3e";
+C("");
+ie({
+  validateOnBlur: !1,
+  validateOnInput: !1,
+  validateOnChange: !1,
+  validateOnMount: !1,
+  required: !1,
+  isValid: !0,
+  errors: []
+});
+const B = C({}), L = C(), D = 400, Y = C(null);
+function ue(e) {
+  const s = e?.group ?? "global", l = (t, v) => {
+    B.value[s][t] = v;
+  }, a = (t, v) => {
+    B.value[s] = { [t]: v };
+  }, u = (t) => B.value[s][t] ?? !1, c = (t) => {
+    l(t, !u(t));
+  }, r = (t) => {
+    a(t, !u(t));
+  }, o = () => {
+    B.value[s] = {};
+  }, f = (t) => {
+    t.key === "Escape" && (l(e.id, !1), p());
+  }, g = (t) => {
+    if (!e) return;
+    const v = t.target, [h] = Object.keys(B.value[s]).filter((X) => B.value[s][X] === !0), O = document.getElementById(h), F = document.querySelector(`[aria-controls="${h}"]`), R = v.getAttribute("aria-controls") === h || F?.contains(t.target);
+    O && !O.contains(v) && !R && (l(e.id, !1), p());
+  }, b = () => {
+    e && (L.value = setTimeout(() => {
+      l(e.id, !1), p();
+    }, D));
+  }, y = () => {
+    e && e.mouseOverToggle === !0 && (Y.value = e.id, L.value = setTimeout(() => {
+      N();
+    }, D));
+  }, V = () => {
+    e && e.mouseOverToggle === !0 && (Y.value = null, clearTimeout(L.value), L.value = setTimeout(() => {
+      Y.value !== e.id && (l(e.id, !1), p());
+    }, D));
+  }, K = (t) => {
+    if (!e) return;
+    const { relatedTarget: v } = t;
+    if (!v || v.getAttribute("aria-controls") === e.id)
+      return;
+    const h = document.getElementById(e.id);
+    h && h.contains(v) || (clearTimeout(L.value), L.value = setTimeout(() => {
+      e.openSingle ? a(e.id, !1) : l(e.id, !1), p();
+    }, D));
+  }, Q = () => {
+    e && (e.outsideClickClose && (document.addEventListener("click", g), document.addEventListener("touchend", g)), e.escapeKeyClose && document.addEventListener("keydown", f));
+  }, p = () => {
+    document.removeEventListener("click", g), document.removeEventListener("touchend", g), document.removeEventListener("keydown", f), document.removeEventListener("scroll", b);
+  }, S = (t) => {
+    e && (t?.preventDefault(), clearTimeout(L.value), Q());
+  }, q = (t) => {
+    e && (S(t), e.openSingle ? r(e.id) : c(e.id));
+  }, N = (t) => {
+    e && (S(t), e.openSingle ? a(e.id, !0) : l(e.id, !0));
+  };
+  return se(() => {
+    B.value[s] || o();
+  }), J(() => {
+    p();
+  }), {
+    state: B,
+    timeout: L,
+    toggle: c,
+    toggleSingle: r,
+    setCollapsed: l,
+    setSingleCollapsed: a,
+    isCollapsed: u,
+    reset: o,
+    onMouseEnter: y,
+    onMouseLeave: V,
+    focusChange: K,
+    onClickToggle: q,
+    onClickOpen: N
+  };
+}
+const Ee = {
+  id: "trusted-site",
+  class: "has-background-ghost-gray is-flex is-justify-space-between"
+}, Me = { class: "trusted-wrap" }, Se = { class: "hidden-tablet trusted-toggle is-flex is-align-center" }, Ne = ["src"], Oe = ["aria-label", "aria-expanded"], ze = {
+  class: "icon",
+  "aria-hidden": "true"
+}, Ie = { class: "hidden-desktop trusted-toggle is-flex is-align-center" }, De = ["aria-label", "aria-expanded"], Ge = {
+  class: "icon",
+  "aria-hidden": "true"
+}, He = {
+  key: 0,
+  class: "trusted-translation is-flex is-align-center"
+}, Ue = ["hidden"], je = { class: "trusted-site-info-content content has-text-body-small is-flex is-justify-space-between" }, Ve = { class: "info-item-wrap is-flex" }, Ke = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Qe = { class: "trusted-icon is-flex is-flex-column has-text-center" }, qe = { class: "icon circle-icon p-3 mb-2" }, Fe = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Re = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Xe = { class: "icon circle-icon p-3 mb-2" }, Ye = { class: "info-content-close mt-4" }, Ze = /* @__PURE__ */ E({
+  __name: "TrustedSite",
+  setup(e) {
+    const s = fe(), { isCollapsed: l, onClickToggle: a } = ue({
+      id: "trusted-site-info",
+      escapeKeyClose: !0
+    }), u = le(() => l("trusted-site-info"));
+    return (c, r) => (d(), m(I, null, [
+      i("div", Ee, [
+        i("div", Me, [
+          i("div", Se, [
+            i("img", {
+              src: n(Ae),
+              alt: "",
+              class: "icon"
+            }, null, 8, Ne),
+            r[4] || (r[4] = i("div", { class: "content mx-2" }, "An official website of the City of Philadelphia government", -1)),
+            i("button", {
+              class: "phila-button is-extra-small",
+              "aria-label": `${u.value ? "Close" : "Open"} Trusted Site information panel`,
+              "aria-controls": "trusted-site-info",
+              "aria-expanded": u.value,
+              onClick: r[0] || (r[0] = //@ts-ignore
+              (...o) => n(a) && n(a)(...o))
+            }, [
+              r[3] || (r[3] = z(" Here's how you know ", -1)),
+              i("span", ze, [
+                w(n(A), {
+                  icon: u.value ? n(ce) : n(de)
+                }, null, 8, ["icon"])
+              ])
+            ], 8, Oe)
+          ]),
+          i("div", Ie, [
+            i("button", {
+              class: "phila-button is-extra-small",
+              "aria-label": `${u.value ? "Close" : "Open"} Trusted Site information panel`,
+              "aria-controls": "trusted-site-info",
+              "aria-expanded": u.value,
+              onClick: r[1] || (r[1] = //@ts-ignore
+              (...o) => n(a) && n(a)(...o))
+            }, [
+              r[5] || (r[5] = z(" An official website ", -1)),
+              i("span", Ge, [
+                w(n(A), { icon: n(Te) }, null, 8, ["icon"])
+              ])
+            ], 8, De)
+          ])
+        ]),
+        n(s).translation ? (d(), m("div", He, [
+          x(c.$slots, "translation", {}, void 0, !0)
+        ])) : _("", !0)
+      ]),
+      i("div", {
+        id: "trusted-site-info",
+        class: "has-background-secondary px-6",
+        hidden: !u.value
+      }, [
+        i("div", je, [
+          i("div", Ve, [
+            i("div", Ke, [
+              i("div", Qe, [
+                i("div", qe, [
+                  w(n(A), { icon: n(we) }, null, 8, ["icon"])
+                ]),
+                r[6] || (r[6] = i("span", { class: "has-text-bold" }, "https://", -1))
+              ]),
+              r[7] || (r[7] = i("div", { class: "trusted-text m-4" }, [
+                z(" The "),
+                i("strong", null, "https://"),
+                z(" in the address bar means your information is encrypted and can not be accessed by anyone else ")
+              ], -1))
+            ]),
+            i("div", Fe, [
+              i("div", Re, [
+                i("span", Xe, [
+                  w(n(A), { icon: n(Be) }, null, 8, ["icon"])
+                ]),
+                r[8] || (r[8] = i("span", { class: "has-text-bold" }, ".gov", -1))
+              ]),
+              r[9] || (r[9] = i("div", { class: "trusted-text m-4" }, "Only government entities in the U.S. can end in .gov", -1))
+            ])
+          ]),
+          i("div", Ye, [
+            i("button", {
+              class: "phila-button phila-button--primary icon-button is-extra-small",
+              "aria-label": "Close Trusted Site information panel",
+              onClick: r[2] || (r[2] = //@ts-ignore
+              (...o) => n(a) && n(a)(...o))
+            }, [
+              w(n(A), { icon: n(_e) }, null, 8, ["icon"])
+            ])
+          ])
+        ])
+      ], 8, Ue)
+    ], 64));
+  }
+}), ve = (e, s) => {
+  const l = e.__vccOpts || e;
+  for (const [a, u] of s)
+    l[a] = u;
+  return l;
+}, We = /* @__PURE__ */ ve(Ze, [["__scopeId", "data-v-75d8aee7"]]);
+C("");
+ie({
+  validateOnBlur: !1,
+  validateOnInput: !1,
+  validateOnChange: !1,
+  validateOnMount: !1,
+  required: !1,
+  isValid: !0,
+  errors: []
+});
+const $ = C({}), T = C(), G = 400, Z = C(null);
+function Je(e) {
+  const s = e?.group ?? "global", l = (t, v) => {
+    $.value[s][t] = v;
+  }, a = (t, v) => {
+    $.value[s] = { [t]: v };
+  }, u = (t) => $.value[s][t] ?? !1, c = (t) => {
+    l(t, !u(t));
+  }, r = (t) => {
+    a(t, !u(t));
+  }, o = () => {
+    $.value[s] = {};
+  }, f = (t) => {
+    t.key === "Escape" && (l(e.id, !1), p());
+  }, g = (t) => {
+    if (!e) return;
+    const v = t.target, [h] = Object.keys($.value[s]).filter((X) => $.value[s][X] === !0), O = document.getElementById(h), F = document.querySelector(`[aria-controls="${h}"]`), R = v.getAttribute("aria-controls") === h || F?.contains(t.target);
+    O && !O.contains(v) && !R && (l(e.id, !1), p());
+  }, b = () => {
+    e && (T.value = setTimeout(() => {
+      l(e.id, !1), p();
+    }, G));
+  }, y = () => {
+    e && e.mouseOverToggle === !0 && (Z.value = e.id, T.value = setTimeout(() => {
+      N();
+    }, G));
+  }, V = () => {
+    e && e.mouseOverToggle === !0 && (Z.value = null, clearTimeout(T.value), T.value = setTimeout(() => {
+      Z.value !== e.id && (l(e.id, !1), p());
+    }, G));
+  }, K = (t) => {
+    if (!e) return;
+    const { relatedTarget: v } = t;
+    if (!v || v.getAttribute("aria-controls") === e.id)
+      return;
+    const h = document.getElementById(e.id);
+    h && h.contains(v) || (clearTimeout(T.value), T.value = setTimeout(() => {
+      e.openSingle ? a(e.id, !1) : l(e.id, !1), p();
+    }, G));
+  }, Q = () => {
+    e && (e.outsideClickClose && (document.addEventListener("click", g), document.addEventListener("touchend", g)), e.escapeKeyClose && document.addEventListener("keydown", f));
+  }, p = () => {
+    document.removeEventListener("click", g), document.removeEventListener("touchend", g), document.removeEventListener("keydown", f), document.removeEventListener("scroll", b);
+  }, S = (t) => {
+    e && (t?.preventDefault(), clearTimeout(T.value), Q());
+  }, q = (t) => {
+    e && (S(t), e.openSingle ? r(e.id) : c(e.id));
+  }, N = (t) => {
+    e && (S(t), e.openSingle ? a(e.id, !0) : l(e.id, !0));
+  };
+  return se(() => {
+    $.value[s] || o();
+  }), J(() => {
+    p();
+  }), {
+    state: $,
+    timeout: T,
+    toggle: c,
+    toggleSingle: r,
+    setCollapsed: l,
+    setSingleCollapsed: a,
+    isCollapsed: u,
+    reset: o,
+    onMouseEnter: y,
+    onMouseLeave: V,
+    focusChange: K,
+    onClickToggle: q,
+    onClickOpen: N
+  };
+}
+const Pe = ["data-toggle", "aria-label", "aria-expanded", "aria-controls"], ee = /* @__PURE__ */ E({
+  __name: "CollapsePanel",
+  props: {
+    className: {},
+    id: {},
+    group: { default: void 0 },
+    blurClose: { type: Boolean, default: !1 },
+    openSingle: { type: Boolean, default: !1 },
+    mouseOverToggle: { type: Boolean, default: !1 },
+    outsideClickClose: { type: Boolean, default: !1 },
+    escapeKeyClose: { type: Boolean, default: !1 },
+    toggleAttrs: { default: void 0 }
+  },
+  setup(e) {
+    const s = e, { isCollapsed: l, onMouseEnter: a, onMouseLeave: u, onClickToggle: c, onClickOpen: r, focusChange: o } = Je(s), f = le(() => l(s.id));
+    return (g, b) => (d(), m("div", {
+      onMouseenter: b[1] || (b[1] = //@ts-ignore
+      (...y) => n(a) && n(a)(...y)),
+      onMouseleave: b[2] || (b[2] = //@ts-ignore
+      (...y) => n(u) && n(u)(...y)),
+      onFocusout: b[3] || (b[3] = //@ts-ignore
+      (...y) => n(o) && n(o)(...y))
+    }, [
+      x(g.$slots, "toggle", W(ae({
+        open: f.value,
+        ariaLabel: f.value ? "Close panel" : "Open panel",
+        ariaExpanded: f.value,
+        ariaControls: e.id,
+        onClickToggle: n(c),
+        onClickOpen: n(r),
+        focusChange: n(o),
+        onClick: n(c)
+      })), () => [
+        i("button", P({
+          "data-toggle": e.id,
+          "aria-label": f.value ? "Close panel" : "Open panel",
+          "aria-expanded": f.value,
+          "aria-controls": e.id
+        }, e.toggleAttrs, {
+          onClick: b[0] || (b[0] = me(
+            //@ts-ignore
+            (...y) => n(c) && n(c)(...y),
+            ["prevent"]
+          ))
+        }), null, 16, Pe)
+      ]),
+      x(g.$slots, "default", W(ae({ id: e.id, open: f.value, onClickToggle: n(c), focusChange: n(o), hidden: !f.value })))
+    ], 32));
+  }
+}), ea = ["aria-controls", "aria-expanded", "aria-label", "onClick"], aa = { class: "icon" }, ta = ["id", "hidden"], na = /* @__PURE__ */ E({
+  __name: "NavbarBurger",
+  props: {
+    mobileNav: {},
+    collapseGroup: {}
+  },
+  setup(e) {
+    return (s, l) => (d(), k(n(ee), {
+      id: "mobile-nav",
+      group: e.collapseGroup,
+      "outside-click-close": "",
+      "escape-key-close": "",
+      "blur-close": "",
+      "open-single": ""
+    }, {
+      toggle: M((a) => [
+        i("button", {
+          class: j(["phila-navbar-burger phila-button icon-button", { "phila-navbar-item-flyout-active": a.open }]),
+          "aria-controls": a.ariaControls,
+          "aria-expanded": a.open,
+          "aria-label": `${a.open ? "Close" : "Open"} mobile navigation panel`,
+          onClick: a.onClick
+        }, [
+          i("span", aa, [
+            w(n(A), {
+              icon: a.open ? n(re) : n(Le)
+            }, null, 8, ["icon"])
+          ])
+        ], 10, ea)
+      ]),
+      default: M((a) => [
+        i("div", {
+          id: a.id,
+          class: "phila-mobile-nav",
+          hidden: !a.open
+        }, [
+          x(s.$slots, "mobile-nav", {}, () => [
+            (d(), k(U(e.mobileNav)))
+          ])
+        ], 8, ta)
+      ]),
+      _: 3
+    }, 8, ["group"]));
+  }
+}), ia = ["href"], sa = ["href", "aria-controls", "aria-expanded", "onKeypress", "onTouchend", "onClick"], la = ["id", "hidden"], oa = {
+  key: 0,
+  class: "content nav-flyout has-background-ghost-gray px-6 py-4",
+  tabindex: "-1"
+}, ra = {
+  class: "is-flex is-flex-column is-flex-wrap-wrap",
+  style: { gap: "var(--spacing-4xl)" }
+}, ca = ["href"], da = /* @__PURE__ */ E({
+  __name: "NavbarLinks",
+  props: {
+    links: {},
+    collapseGroup: {}
+  },
+  setup(e) {
+    const s = (a) => !!(a.subLinks || a.subNav), l = (a) => `main-nav-${a.text.split(" ").join("-").toLowerCase().replace(/[^a-z0-9-]/g, "")}`;
+    return (a, u) => (d(!0), m(I, null, te(e.links, (c, r) => (d(), m(I, null, [
+      s(c) ? (d(), k(n(ee), {
+        id: l(c),
+        key: `collapse-${r}`,
+        group: e.collapseGroup,
+        "outside-click-close": "",
+        "escape-key-close": "",
+        "blur-close": "",
+        "mouse-over-toggle": "",
+        "open-single": "",
+        class: "phila-navbar-link-list-item"
+      }, {
+        toggle: M((o) => [
+          i("a", {
+            href: c.href,
+            class: j(["phila-navbar-link px-4", { "phila-navbar-item-flyout-active": o.open }]),
+            "aria-controls": o.ariaControls,
+            "aria-expanded": o.open,
+            tabindex: "0",
+            onKeypress: pe(o.onClick, ["enter"]),
+            onTouchend: o.onClick,
+            onClick: o.onClick
+          }, [
+            z(H(c.text) + " ", 1),
+            w(n(A), {
+              class: "ml-1",
+              icon: o.open ? n(ce) : n(de)
+            }, null, 8, ["icon"])
+          ], 42, sa)
+        ]),
+        default: M((o) => [
+          (d(), m("div", {
+            id: o.id,
+            key: c.text,
+            hidden: !o.open
+          }, [
+            c.subLinks ? (d(), m("div", oa, [
+              i("ul", ra, [
+                (d(!0), m(I, null, te(c.subLinks, (f) => (d(), m("li", {
+                  key: f.text,
+                  class: "sub-nav-link is-flex is-align-center",
+                  style: { width: "150px" }
+                }, [
+                  i("a", {
+                    href: f.href,
+                    class: "has-text-link has-text-weight-medium",
+                    tabindex: "0"
+                  }, H(f.text), 9, ca)
+                ]))), 128))
+              ])
+            ])) : (d(), k(U(c.subNav), { key: 1 }))
+          ], 8, la))
+        ]),
+        _: 2
+      }, 1032, ["id", "group"])) : (d(), m("div", {
+        key: `link-${r}`,
+        class: "phila-navbar-link-list-item"
+      }, [
+        i("a", {
+          href: c.href,
+          class: "phila-navbar-link px-4",
+          tabindex: "0"
+        }, H(c.text), 9, ia)
+      ]))
+    ], 64))), 256));
+  }
+}), ua = {
+  href: "/",
+  class: "phila-navbar-item phila-navbar-brand-logo",
+  tabindex: "0"
+}, va = ["src", "alt"], fa = /* @__PURE__ */ E({
+  inheritAttrs: !1,
+  __name: "NavbarBrandLogo",
+  props: {
+    src: {},
+    href: {},
+    altText: {}
+  },
+  setup(e) {
+    const s = he();
+    return (l, a) => (d(), m("a", ua, [
+      i("img", P({
+        src: e.src,
+        alt: e.altText,
+        class: "phila-navbar-logo",
+        width: "150"
+      }, n(s)), null, 16, va)
+    ]));
+  }
+}), ma = { class: "pr-4" }, pa = ["aria-controls", "aria-expanded", "aria-label", "onClick"], ha = { class: "icon" }, ga = ["id", "hidden"], ba = /* @__PURE__ */ E({
+  __name: "NavbarSearch",
+  props: {
+    search: {},
+    collapseGroup: {}
+  },
+  setup(e) {
+    return (s, l) => (d(), k(n(ee), {
+      id: "navbar-search",
+      group: e.collapseGroup,
+      "outside-click-close": "",
+      "escape-key-close": "",
+      "blur-close": "",
+      "open-single": ""
+    }, {
+      toggle: M((a) => [
+        i("div", ma, [
+          i("button", {
+            class: j(["phila-button phila-button--primary icon-button is-small", { "phila-navbar-item-flyout-active": a.open }]),
+            "aria-controls": a.ariaControls,
+            "aria-expanded": a.open,
+            "aria-label": `${a.open ? "Close" : "Open"} search panel`,
+            onClick: a.onClick
+          }, [
+            i("span", ha, [
+              w(n(A), {
+                icon: a.open ? n(re) : n(Ce)
+              }, null, 8, ["icon"])
+            ])
+          ], 10, pa)
+        ])
+      ]),
+      default: M((a) => [
+        i("div", {
+          id: a.id,
+          class: "nav-flyout is-12",
+          hidden: !a.open
+        }, [
+          x(s.$slots, "default", {}, () => [
+            e.search && a.open ? (d(), k(U(e.search), { key: 0 })) : _("", !0)
+          ])
+        ], 8, ga)
+      ]),
+      _: 3
+    }, 8, ["group"]));
+  }
+});
+function ka(e, s) {
+  let l;
+  return (...a) => {
+    l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
+      e(...a);
+    }, s);
+  };
+}
+const ya = { class: "phila-navbar-brand" }, xa = { class: "phila-navbar-item phila-navbar-brand-link hidden-tablet" }, Ca = {
+  key: 0,
+  class: "content"
+}, _a = ["href"], wa = { class: "phila-navbar-item phila-navbar-list is-flex is-align-center is-justify-space-between content has-text-label-default hidden-tablet" }, Ba = { class: "phila-navbar-search" }, ne = "5rem", La = /* @__PURE__ */ E({
+  __name: "index",
+  props: {
+    id: {},
+    sticky: { type: Boolean },
+    navbarBrand: {},
+    mobileNav: {},
+    collapseGroup: {},
+    search: {},
+    links: { default: () => [{ text: "Home", href: "#" }] }
+  },
+  setup(e) {
+    const s = e, { state: l } = ue(), a = ge("navBarElement"), u = C(ne), c = C(0), r = ka(() => {
+      const o = (a.value?.offsetTop || 0) + (a.value?.offsetHeight || 0);
+      u.value = !s.sticky || window.innerWidth < 1024 ? o + "px" : ne, c.value = o;
+    }, 100);
+    return be(() => l.value, r, { deep: !0, immediate: !0 }), ke(() => {
+      window.addEventListener("resize", r);
+    }), J(() => {
+      window.removeEventListener("resize", r);
+    }), (o, f) => (d(), m("nav", {
+      ref_key: "navBarElement",
+      ref: a,
+      class: j(["phila-navbar has-background-primary", { "is-sticky-desktop": e.sticky }]),
+      "aria-label": "Main navigation",
+      style: ye(`--nav-height:${u.value};--nav-bottom:${c.value}px`)
+    }, [
+      x(o.$slots, "navbar-burger", {}, () => [
+        e.mobileNav ? (d(), k(na, {
+          key: 0,
+          "mobile-nav": e.mobileNav,
+          "collapse-group": e.id
+        }, null, 8, ["mobile-nav", "collapse-group"])) : _("", !0)
+      ], !0),
+      i("div", ya, [
+        x(o.$slots, "navbar-logo", {}, () => [
+          e.navbarBrand?.brandingImage ? (d(), k(fa, W(P({ key: 0 }, e.navbarBrand.brandingImage)), null, 16)) : _("", !0)
+        ], !0),
+        i("div", xa, [
+          x(o.$slots, "navbar-brand-link", {}, () => [
+            e.navbarBrand?.brandingLink ? (d(), m("div", Ca, [
+              i("a", {
+                tabindex: "0",
+                href: e.navbarBrand.brandingLink.href,
+                class: "has-text-underline"
+              }, H(e.navbarBrand.brandingLink.text), 9, _a)
+            ])) : _("", !0)
+          ], !0)
+        ])
+      ]),
+      i("div", wa, [
+        x(o.$slots, "navbar-links", {}, () => [
+          e.links ? (d(), k(da, {
+            key: 0,
+            links: e.links,
+            "collapse-group": e.id
+          }, null, 8, ["links", "collapse-group"])) : _("", !0)
+        ], !0)
+      ]),
+      i("div", Ba, [
+        x(o.$slots, "navbar-search", {}, () => [
+          e.search ? (d(), k(ba, {
+            key: 0,
+            search: e.search,
+            "collapse-group": e.id
+          }, null, 8, ["search", "collapse-group"])) : _("", !0)
+        ], !0)
+      ])
+    ], 6));
+  }
+}), $a = /* @__PURE__ */ ve(La, [["__scopeId", "data-v-985eaeb2"]]), Ea = /* @__PURE__ */ E({
+  __name: "AppHeader",
+  props: {
+    showTrustedSite: { type: Boolean, default: !0 },
+    translations: { default: void 0 },
+    className: {},
+    id: { default: "main-nav" },
+    sticky: { type: Boolean, default: !0 },
+    navbarBrand: { default: void 0 },
+    mobileNav: { default: void 0 },
+    collapseGroup: {},
+    search: { default: void 0 },
+    links: { default: void 0 }
+  },
+  setup(e) {
+    return (s, l) => (d(), m(I, null, [
+      e.showTrustedSite ? (d(), k(We, { key: 0 }, {
+        translation: M(() => [
+          x(s.$slots, "translations", {}, () => [
+            e.translations ? (d(), k(U(e.translations), { key: 0 })) : _("", !0)
+          ])
+        ]),
+        _: 3
+      })) : _("", !0),
+      w($a, {
+        id: e.id,
+        sticky: e.sticky,
+        "mobile-nav": e.mobileNav,
+        links: e.links,
+        "navbar-brand": e.navbarBrand,
+        search: e.search
+      }, null, 8, ["id", "sticky", "mobile-nav", "links", "navbar-brand", "search"])
+    ], 64));
+  }
+});
+export {
+  Ea as AppHeader
+};