@turquoisehealth/pit-viper 2.104.0 → 2.104.2-dev.0

package/pv-components/dist/web/components/pv-drawer/pv-drawer.js

@@ -0,0 +1,486 @@
+import { watch as K, getCurrentScope as X, onScopeDispose as Y, computed as P, toValue as y, unref as ee, defineComponent as C, mergeModels as B, useTemplateRef as F, useModel as z, onMounted as L, createElementBlock as m, openBlock as f, withDirectives as te, createCommentVNode as h, createElementVNode as b, normalizeClass as T, vModelText as ne, toDisplayString as I, ref as H, getCurrentInstance as oe, normalizeStyle as se, createBlock as x, Fragment as Z, renderSlot as O, createVNode as N, mergeProps as le, defineCustomElement as ie } from "vue";
+function re(e) {
+  return X() ? (Y(e), !0) : !1;
+}
+const J = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const ae = Object.prototype.toString, ue = (e) => ae.call(e) === "[object Object]", g = () => {
+}, ce = /* @__PURE__ */ de();
+function de() {
+  var e, t;
+  return J && ((e = window?.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window?.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
+}
+function M(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function pe(e, t, n) {
+  return K(
+    e,
+    t,
+    {
+      ...n,
+      immediate: !0
+    }
+  );
+}
+const R = J ? window : void 0;
+function w(e) {
+  var t;
+  const n = y(e);
+  return (t = n?.$el) != null ? t : n;
+}
+function _(...e) {
+  const t = [], n = () => {
+    t.forEach((r) => r()), t.length = 0;
+  }, o = (r, l, a, p) => (r.addEventListener(l, a, p), () => r.removeEventListener(l, a, p)), s = P(() => {
+    const r = M(y(e[0])).filter((l) => l != null);
+    return r.every((l) => typeof l != "string") ? r : void 0;
+  }), d = pe(
+    () => {
+      var r, l;
+      return [
+        (l = (r = s.value) == null ? void 0 : r.map((a) => w(a))) != null ? l : [R].filter((a) => a != null),
+        M(y(s.value ? e[1] : e[0])),
+        M(ee(s.value ? e[2] : e[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        y(s.value ? e[3] : e[2])
+      ];
+    },
+    ([r, l, a, p]) => {
+      if (n(), !r?.length || !l?.length || !a?.length)
+        return;
+      const S = ue(p) ? { ...p } : p;
+      t.push(
+        ...r.flatMap(
+          (E) => l.flatMap(
+            (k) => a.map(($) => o(E, k, $, S))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), c = () => {
+    d(), n();
+  };
+  return re(n), c;
+}
+let W = !1;
+function fe(e, t, n = {}) {
+  const { window: o = R, ignore: s = [], capture: d = !0, detectIframe: c = !1, controls: r = !1 } = n;
+  if (!o)
+    return r ? { stop: g, cancel: g, trigger: g } : g;
+  if (ce && !W) {
+    W = !0;
+    const i = { passive: !0 };
+    Array.from(o.document.body.children).forEach((u) => u.addEventListener("click", g, i)), o.document.documentElement.addEventListener("click", g, i);
+  }
+  let l = !0;
+  const a = (i) => y(s).some((u) => {
+    if (typeof u == "string")
+      return Array.from(o.document.querySelectorAll(u)).some((v) => v === i.target || i.composedPath().includes(v));
+    {
+      const v = w(u);
+      return v && (i.target === v || i.composedPath().includes(v));
+    }
+  });
+  function p(i) {
+    const u = y(i);
+    return u && u.$.subTree.shapeFlag === 16;
+  }
+  function S(i, u) {
+    const v = y(i), A = v.$.subTree && v.$.subTree.children;
+    return A == null || !Array.isArray(A) ? !1 : A.some((j) => j.el === u.target || u.composedPath().includes(j.el));
+  }
+  const E = (i) => {
+    const u = w(e);
+    if (i.target != null && !(!(u instanceof Element) && p(e) && S(e, i)) && !(!u || u === i.target || i.composedPath().includes(u))) {
+      if ("detail" in i && i.detail === 0 && (l = !a(i)), !l) {
+        l = !0;
+        return;
+      }
+      t(i);
+    }
+  };
+  let k = !1;
+  const $ = [
+    _(o, "click", (i) => {
+      k || (k = !0, setTimeout(() => {
+        k = !1;
+      }, 0), E(i));
+    }, { passive: !0, capture: d }),
+    _(o, "pointerdown", (i) => {
+      const u = w(e);
+      l = !a(i) && !!(u && !i.composedPath().includes(u));
+    }, { passive: !0 }),
+    c && _(o, "blur", (i) => {
+      setTimeout(() => {
+        var u;
+        const v = w(e);
+        ((u = o.document.activeElement) == null ? void 0 : u.tagName) === "IFRAME" && !v?.contains(o.document.activeElement) && t(i);
+      }, 0);
+    }, { passive: !0 })
+  ].filter(Boolean), D = () => $.forEach((i) => i());
+  return r ? {
+    stop: D,
+    cancel: () => {
+      l = !1;
+    },
+    trigger: (i) => {
+      l = !0, E(i), l = !1;
+    }
+  } : D;
+}
+function ve(e) {
+  return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
+}
+function Q(...e) {
+  let t, n, o = {};
+  e.length === 3 ? (t = e[0], n = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, n = e[0], o = e[1]) : (t = e[0], n = e[1]) : (t = !0, n = e[0]);
+  const {
+    target: s = R,
+    eventName: d = "keydown",
+    passive: c = !1,
+    dedupe: r = !1
+  } = o, l = ve(t);
+  return _(s, d, (p) => {
+    p.repeat && y(r) || l(p) && n(p);
+  }, c);
+}
+const me = { class: "pv-relative" }, he = ["disabled", "placeholder"], ye = {
+  key: 0,
+  "data-testid": "pv-search-input-shortcut",
+  class: "pv-kbd"
+}, q = "/", be = /* @__PURE__ */ C({
+  __name: "PvSearchInput",
+  props: /* @__PURE__ */ B({
+    placeholder: { default: "Search", type: String },
+    disabled: { type: Boolean, default: !1 },
+    displayShortcut: { type: Boolean }
+  }, {
+    modelValue: { required: !1, default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: t }) {
+    const n = e, o = F("search-input"), s = z(e, "modelValue"), d = P(() => ({
+      "pv-input-search": !0,
+      "pv-full-width": !0,
+      "pv-input-padded-end": !0
+    }));
+    return L(() => {
+      n.displayShortcut && Q(q, (c) => {
+        const r = c.target, l = r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || (r?.isContentEditable ?? !1), a = document.activeElement === o.value;
+        (!l || a) && (a || (c.preventDefault(), o.value?.focus()));
+      });
+    }), t({ input: o }), (c, r) => (f(), m("div", me, [
+      te(b("input", {
+        ref: "search-input",
+        "onUpdate:modelValue": r[0] || (r[0] = (l) => s.value = l),
+        "data-testid": "pv-search-input",
+        type: "text",
+        disabled: e.disabled,
+        class: T(d.value),
+        placeholder: e.placeholder
+      }, null, 10, he), [
+        [ne, s.value]
+      ]),
+      e.displayShortcut ? (f(), m("kbd", ye, I(q))) : h("v-if", !0)
+    ]));
+  }
+}), ge = [void 0, 10, 12, 20, 24, 32, 64], Se = ["xlink:href"], G = /* @__PURE__ */ C({
+  __name: "PvIcon",
+  props: {
+    name: { type: String },
+    size: { type: null }
+  },
+  setup(e) {
+    const t = e, n = H(!1), o = H(null), s = P(() => ({
+      "pv-icon": !0,
+      [`pv-icon-${t.size}`]: ge.includes(t.size)
+    })), d = P(() => n.value && o.value ? `${o.value}#${t.name}` : `#${t.name}`);
+    return globalThis.__PV_GLOBAL_SPRITE_PATH__ && (o.value = globalThis.__PV_GLOBAL_SPRITE_PATH__), L(() => {
+      const c = oe()?.root;
+      n.value = c && "isCE" in c && c.isCE;
+    }), (c, r) => (f(), m(
+      "svg",
+      {
+        "data-testid": "pv-icon",
+        "aria-hidden": "true",
+        class: T(s.value)
+      },
+      [
+        b("use", { "xlink:href": d.value }, null, 8, Se)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+}), ke = /* @__PURE__ */ C({
+  __name: "PvSpinner",
+  props: {
+    variant: { default: "primary", type: String },
+    size: { default: "lg", type: String }
+  },
+  setup(e) {
+    const t = {
+      xs: "0.75rem",
+      sm: "1rem",
+      md: "1.25rem",
+      lg: "1.5rem",
+      xl: "2rem"
+    }, n = {
+      primary: "pv-spinner",
+      dark: "pv-spinner-dark",
+      white: "pv-spinner-light"
+    };
+    return (o, s) => (f(), m(
+      "div",
+      {
+        "data-testid": "pv-spinner",
+        class: T(n[e.variant]),
+        style: se({ "--size": t[e.size] })
+      },
+      null,
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), U = {
+  md: "pv-button-small",
+  lg: void 0,
+  xl: "pv-button-large"
+}, we = (e) => e == null || !U.hasOwnProperty(e) ? null : U[e] || null, Pe = ["disabled"], Ce = {
+  key: 1,
+  "data-testid": "pv-button-label"
+}, Ee = /* @__PURE__ */ C({
+  __name: "PvButton",
+  props: {
+    variant: { default: "primary", type: String },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "lg", type: String },
+    loading: { type: Boolean, default: !1 },
+    label: { type: String },
+    leftIcon: { type: String },
+    rightIcon: { type: String },
+    inverse: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = ["ghost"], n = e, o = P(() => {
+      const s = [];
+      n.inverse && t.includes(n.variant) ? s.push(`pv-button-${n.variant}-inverse`) : s.push(`pv-button-${n.variant}`);
+      const d = we(n.size);
+      return d && s.push(d), s;
+    });
+    return (s, d) => (f(), m("button", {
+      type: "button",
+      class: T(o.value),
+      disabled: e.disabled,
+      "data-testid": "pv-button"
+    }, [
+      e.loading ? (f(), x(ke, {
+        key: 0,
+        size: "sm"
+      })) : (f(), m(
+        Z,
+        { key: 1 },
+        [
+          e.leftIcon ? (f(), x(G, {
+            key: 0,
+            name: e.leftIcon,
+            "data-testid": "pv-button-left-icon"
+          }, null, 8, ["name"])) : h("v-if", !0),
+          e.label ? (f(), m(
+            "span",
+            Ce,
+            I(e.label),
+            1
+            /* TEXT */
+          )) : h("v-if", !0),
+          e.rightIcon ? (f(), x(G, {
+            key: 2,
+            name: e.rightIcon,
+            "data-testid": "pv-button-right-icon"
+          }, null, 8, ["name"])) : h("v-if", !0)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      ))
+    ], 10, Pe));
+  }
+}), _e = {
+  class: "pv-inset-squish-12 pv-border-bottom",
+  style: { "flex-shrink": "0" }
+}, Ie = {
+  class: "pv-flex-vertical pv-stack-16",
+  style: { "--flex-align": "flex-start" }
+}, Te = { class: "pv-flex pv-full-width" }, $e = { class: "pv-full-width pv-heading-3" }, Ae = {
+  key: 0,
+  class: "pv-text-body-md"
+}, xe = {
+  key: 0,
+  class: "pv-inset-inline-16"
+}, Oe = {
+  class: "pv-inset-inline-16",
+  style: { flex: "1", "overflow-y": "auto", "min-height": "0" }
+}, Me = {
+  key: 0,
+  class: "pv-inset-squish-12 pv-border-top",
+  style: { "flex-shrink": "0" }
+}, Ve = /* @__PURE__ */ C({
+  __name: "PvDrawer",
+  props: /* @__PURE__ */ B({
+    header: { type: String },
+    subheader: { type: String },
+    showSearchbar: { type: Boolean },
+    closeOnClickOutside: { type: Boolean, default: !1 },
+    searchInputProps: { type: Object }
+  }, {
+    searchInput: {
+      required: !1
+    },
+    searchInputModifiers: {},
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ B(["click-outside"], ["update:searchInput", "update:modelValue"]),
+  setup(e, { emit: t }) {
+    const n = e, o = t, s = F("sidePanel"), d = z(e, "searchInput"), c = z(e, "modelValue");
+    L(() => {
+      c.value && s?.value?.setAttribute("open", "true"), n.closeOnClickOutside && r();
+    });
+    const r = () => {
+      s.value && fe(
+        s.value,
+        () => {
+          c.value && (o("click-outside"), l());
+        },
+        { ignore: [".pv-click-outside-ignore"] }
+      );
+    }, l = () => {
+      s?.value?.removeAttribute("open"), c.value = !1;
+    };
+    return K(
+      () => c.value,
+      () => {
+        c.value ? s?.value?.setAttribute("open", "true") : s?.value?.removeAttribute("open");
+      }
+    ), Q("Escape", () => {
+      s.value && c.value && l();
+    }), (a, p) => (f(), m(
+      "div",
+      {
+        class: "pv-drawer pv-surface",
+        ref_key: "sidePanel",
+        ref: s,
+        "data-testid": "pv-drawer",
+        style: { display: "flex", "flex-direction": "column", height: "100%" }
+      },
+      [
+        h(" Header Section (Fixed) "),
+        b("div", _e, [
+          a.$slots.header ? O(a.$slots, "header", { key: 0 }) : (f(), m(
+            Z,
+            { key: 1 },
+            [
+              b("div", Ie, [
+                b("div", Te, [
+                  b(
+                    "span",
+                    $e,
+                    I(e.header),
+                    1
+                    /* TEXT */
+                  ),
+                  N(Ee, {
+                    "left-icon": "close",
+                    size: "md",
+                    onClick: l,
+                    "data-testid": "pv-side-panel-close-button",
+                    variant: "ghost"
+                  })
+                ]),
+                e.subheader ? (f(), m(
+                  "span",
+                  Ae,
+                  I(e.subheader),
+                  1
+                  /* TEXT */
+                )) : h("v-if", !0)
+              ]),
+              e.showSearchbar && d.value !== void 0 ? (f(), m("div", xe, [
+                N(be, le({
+                  "data-testid": "pv-side-panel-input-search",
+                  modelValue: d.value,
+                  "onUpdate:modelValue": p[0] || (p[0] = (S) => d.value = S)
+                }, n.searchInputProps), null, 16, ["modelValue"])
+              ])) : h("v-if", !0)
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ]),
+        h(" Main Content Section (Scrollable) "),
+        b("div", Oe, [
+          O(a.$slots, "default")
+        ]),
+        h(" Footer Section (Fixed) "),
+        a.$slots.footer ? (f(), m("div", Me, [
+          O(a.$slots, "footer")
+        ])) : h("v-if", !0)
+      ],
+      512
+      /* NEED_PATCH */
+    ));
+  }
+}), Be = /* @__PURE__ */ new Set(["PvIcon", "PvPopoverMenu", "PvPopover"]);
+function ze(e) {
+  return !Be.has(e);
+}
+function V(e, t) {
+  const n = document.querySelector('link[href*="' + t + '"]');
+  if (!e.shadowRoot)
+    return !1;
+  if (n && e.shadowRoot) {
+    const o = n.href;
+    if (e.shadowRoot.querySelector(`link[href="${o}"]`))
+      return;
+    const s = document.createElement("link");
+    return s.rel = "stylesheet", s.href = o, e.shadowRoot.prepend(s), !0;
+  }
+  return !1;
+}
+function Le(e) {
+  if (!V(e, "pit-viper-v2")) {
+    if (V(e, "pit-viper")) {
+      V(e, "pit-viper-v2-scoped");
+      return;
+    }
+    console.warn(
+      "No global styles found for Pit Viper components. Make sure to include pit-viper.css or pit-viper-v2.css in your project."
+    );
+  }
+}
+const Re = (e) => ({ shadowRoot: ze(e) });
+function De(e) {
+  const t = e.__name || e.name;
+  if (!t)
+    throw new Error("Component must have a __name or name property");
+  const n = ie(e, Re(t));
+  class o extends n {
+    connectedCallback() {
+      super.connectedCallback?.(), Le(this);
+    }
+  }
+  return o;
+}
+function je(e) {
+  return e.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+}
+function He(e) {
+  const t = e.__name || e.name;
+  if (!t)
+    throw new Error("Component must have a __name or name property");
+  const n = je(t), o = De(e);
+  customElements.get(n) || customElements.define(n, o);
+}
+He(Ve);