@turquoisehealth/pit-viper 2.122.0 → 2.123.0

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

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