@turquoisehealth/pit-viper 2.122.0 → 2.122.1-dev.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((o) => o()), t.length = 0;
+  }, s = (o, r, i, u) => (o.addEventListener(r, i, u), () => o.removeEventListener(r, i, u)), l = _(() => {
+    const o = B(S(e[0])).filter((r) => r != null);
+    return o.every((r) => typeof r != "string") ? o : void 0;
+  }), p = fe(
+    () => {
+      var o, r;
+      return [
+        (r = (o = l.value) == null ? void 0 : o.map((i) => k(i))) != null ? r : [z].filter((i) => i != null),
+        B(S(l.value ? e[1] : e[0])),
+        B(te(l.value ? e[2] : e[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        S(l.value ? e[3] : e[2])
+      ];
+    },
+    ([o, r, i, u]) => {
+      if (n(), !o?.length || !r?.length || !i?.length)
+        return;
+      const h = ce(u) ? { ...u } : u;
+      t.push(
+        ...o.flatMap(
+          (g) => r.flatMap(
+            (v) => i.map(($) => s(g, v, $, h))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), c = () => {
+    p(), n();
+  };
+  return ae(n), c;
+}
+let R = !1;
+function he(e, t, n = {}) {
+  const { window: s = z, ignore: l = [], capture: p = !0, detectIframe: c = !1, controls: o = !1 } = n;
+  if (!s)
+    return o ? { stop: P, cancel: P, trigger: P } : P;
+  if (de && !R) {
+    R = !0;
+    const a = { passive: !0 };
+    Array.from(s.document.body.children).forEach((d) => d.addEventListener("click", P, a)), s.document.documentElement.addEventListener("click", P, a);
+  }
+  let r = !0;
+  const i = (a) => S(l).some((d) => {
+    if (typeof d == "string")
+      return Array.from(s.document.querySelectorAll(d)).some((m) => m === a.target || a.composedPath().includes(m));
+    {
+      const m = k(d);
+      return m && (a.target === m || a.composedPath().includes(m));
+    }
+  });
+  function u(a) {
+    const d = S(a);
+    return d && d.$.subTree.shapeFlag === 16;
+  }
+  function h(a, d) {
+    const m = S(a), O = m.$.subTree && m.$.subTree.children;
+    return O == null || !Array.isArray(O) ? !1 : O.some((N) => N.el === d.target || d.composedPath().includes(N.el));
+  }
+  const g = (a) => {
+    const d = k(e);
+    if (a.target != null && !(!(d instanceof Element) && u(e) && h(e, a)) && !(!d || d === a.target || a.composedPath().includes(d))) {
+      if ("detail" in a && a.detail === 0 && (r = !i(a)), !r) {
+        r = !0;
+        return;
+      }
+      t(a);
+    }
+  };
+  let v = !1;
+  const $ = [
+    I(s, "click", (a) => {
+      v || (v = !0, setTimeout(() => {
+        v = !1;
+      }, 0), g(a));
+    }, { passive: !0, capture: p }),
+    I(s, "pointerdown", (a) => {
+      const d = k(e);
+      r = !i(a) && !!(d && !a.composedPath().includes(d));
+    }, { passive: !0 }),
+    c && I(s, "blur", (a) => {
+      setTimeout(() => {
+        var d;
+        const m = k(e);
+        ((d = s.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !m?.contains(s.document.activeElement) && t(a);
+      }, 0);
+    }, { passive: !0 })
+  ].filter(Boolean), L = () => $.forEach((a) => a());
+  return o ? {
+    stop: L,
+    cancel: () => {
+      r = !1;
+    },
+    trigger: (a) => {
+      r = !0, g(a), r = !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, s = {};
+  e.length === 3 ? (t = e[0], n = e[1], s = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, n = e[0], s = e[1]) : (t = e[0], n = e[1]) : (t = !0, n = e[0]);
+  const {
+    target: l = z,
+    eventName: p = "keydown",
+    passive: c = !1,
+    dedupe: o = !1
+  } = s, r = ve(t);
+  return I(l, p, (u) => {
+    u.repeat && S(o) || r(u) && n(u);
+  }, c);
+}
+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, s = J("search-input"), l = V(e, "modelValue"), p = _(() => ({
+      "pv-input-search": !0,
+      "pv-full-width": !0,
+      "pv-input-padded-end": !0
+    }));
+    return K(() => {
+      n.displayShortcut && X(W, (c) => {
+        const o = c.target, r = o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || (o?.isContentEditable ?? !1), i = document.activeElement === s.value;
+        (!r || i) && (i || (c.preventDefault(), s.value?.focus()));
+      });
+    }), t({ input: s }), (c, o) => (f(), b("div", me, [
+      ne(w("input", {
+        ref: "search-input",
+        "onUpdate:modelValue": o[0] || (o[0] = (r) => l.value = r),
+        "data-testid": "pv-search-input",
+        type: "text",
+        disabled: e.disabled,
+        class: A(p.value),
+        placeholder: e.placeholder
+      }, null, 10, be), [
+        [se, l.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(), s = F(null), l = _(() => ({
+      "pv-icon": !0,
+      [`pv-icon-${t.size}`]: we.includes(t.size)
+    })), p = _(() => n.value && s.value ? `${s.value}#${t.name}` : `#${t.name}`);
+    return globalThis.__PV_GLOBAL_SPRITE_PATH__ && (s.value = globalThis.__PV_GLOBAL_SPRITE_PATH__), (c, o) => (f(), b(
+      "svg",
+      {
+        "data-testid": "pv-icon",
+        "aria-hidden": "true",
+        class: A(l.value)
+      },
+      [
+        w("use", { "xlink:href": p.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 (s, l) => (f(), b(
+      "div",
+      {
+        "data-testid": "pv-spinner",
+        class: A(n[e.variant]),
+        style: re({ "--size": t[e.size] })
+      },
+      null,
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), _e = ["ghost"], q = {
+  md: "pv-button-small",
+  lg: void 0,
+  xl: "pv-button-large"
+}, Ee = (e) => e == null || !q.hasOwnProperty(e) ? null : q[e] || null, Ie = ["disabled"], Ce = {
+  key: 1,
+  "data-testid": "pv-button-label"
+}, Ae = /* @__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 = e, n = _(() => {
+      const s = [];
+      t.inverse && _e.includes(t.variant) ? s.push(`pv-button-${t.variant}-inverse`) : s.push(`pv-button-${t.variant}`);
+      const l = Ee(t.size);
+      return l && s.push(l), s;
+    });
+    return (s, l) => (f(), b("button", {
+      type: "button",
+      class: A(n.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",
+            Ce,
+            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, Ie));
+  }
+}), $e = {
+  class: "pv-inset-squish-12 pv-border-bottom",
+  style: { "flex-shrink": "0" }
+}, Oe = {
+  class: "pv-flex-vertical pv-stack-16",
+  style: { "--flex-align": "flex-start" }
+}, Te = { class: "pv-flex pv-full-width" }, xe = { class: "pv-full-width pv-heading-3" }, Be = {
+  key: 0,
+  class: "pv-text-body-md"
+}, Me = {
+  key: 0,
+  class: "pv-inset-inline-16"
+}, je = {
+  class: "pv-inset-inline-16",
+  style: { flex: "1", "overflow-y": "auto", "min-height": "0" }
+}, Ve = {
+  key: 0,
+  class: "pv-inset-squish-12 pv-border-top",
+  style: { "flex-shrink": "0" }
+}, ze = /* @__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, s = t, l = J("sidePanel"), p = V(e, "searchInput"), c = V(e, "modelValue");
+    K(() => {
+      c.value && l?.value?.setAttribute("open", "true"), n.closeOnClickOutside && o();
+    });
+    const o = () => {
+      l.value && he(
+        l.value,
+        () => {
+          c.value && (s("click-outside"), r());
+        },
+        { ignore: [".pv-click-outside-ignore"] }
+      );
+    }, r = () => {
+      l?.value?.removeAttribute("open"), c.value = !1;
+    };
+    return U(
+      () => c.value,
+      () => {
+        c.value ? l?.value?.setAttribute("open", "true") : l?.value?.removeAttribute("open");
+      }
+    ), X("Escape", () => {
+      l.value && c.value && r();
+    }), (i, u) => (f(), b(
+      "div",
+      {
+        class: "pv-drawer pv-surface",
+        ref_key: "sidePanel",
+        ref: l,
+        "data-testid": "pv-drawer",
+        style: { display: "flex", "flex-direction": "column", height: "100%" }
+      },
+      [
+        y(" Header Section (Fixed) "),
+        w("div", $e, [
+          i.$slots.header ? x(i.$slots, "header", { key: 0 }) : (f(), b(
+            Z,
+            { key: 1 },
+            [
+              w("div", Oe, [
+                w("div", Te, [
+                  w(
+                    "span",
+                    xe,
+                    C(e.header),
+                    1
+                    /* TEXT */
+                  ),
+                  D(Ae, {
+                    "left-icon": "close",
+                    size: "md",
+                    onClick: r,
+                    "data-testid": "pv-side-panel-close-button",
+                    variant: "ghost"
+                  })
+                ]),
+                e.subheader ? (f(), b(
+                  "span",
+                  Be,
+                  C(e.subheader),
+                  1
+                  /* TEXT */
+                )) : y("v-if", !0)
+              ]),
+              e.showSearchbar && p.value !== void 0 ? (f(), b("div", Me, [
+                D(ge, ie({
+                  "data-testid": "pv-side-panel-input-search",
+                  modelValue: p.value,
+                  "onUpdate:modelValue": u[0] || (u[0] = (h) => p.value = h)
+                }, n.searchInputProps), null, 16, ["modelValue"])
+              ])) : y("v-if", !0)
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ]),
+        y(" Main Content Section (Scrollable) "),
+        w("div", je, [
+          x(i.$slots, "default")
+        ]),
+        y(" Footer Section (Fixed) "),
+        i.$slots.footer ? (f(), b("div", Ve, [
+          x(i.$slots, "footer")
+        ])) : y("v-if", !0)
+      ],
+      512
+      /* NEED_PATCH */
+    ));
+  }
+}), Le = /* @__PURE__ */ new Set(["PvIcon", "PvPopoverMenu", "PvPopover"]);
+function Ne(e) {
+  return !Le.has(e);
+}
+function M(e, t) {
+  const n = document.querySelector('link[href*="' + t + '"]');
+  if (!e.shadowRoot)
+    return !1;
+  if (n && e.shadowRoot) {
+    const s = n.href;
+    if (e.shadowRoot.querySelector(`link[href="${s}"]`))
+      return;
+    const l = document.createElement("link");
+    return l.rel = "stylesheet", l.href = s, e.shadowRoot.prepend(l), !0;
+  }
+  return !1;
+}
+function De(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 Re = (e) => ({ shadowRoot: Ne(e) });
+function We(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 He(e, t) {
+  const n = Number(t);
+  return isNaN(n) && console.warn(`Invalid number attribute value for "${e}": "${t}". Expected a valid number.`), n;
+}
+function qe(e) {
+  const t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), p = (e.__vccOpts || e).props;
+  return p && typeof p == "object" && Object.entries(p).forEach(([c, o]) => {
+    o === Boolean || o && o.type === Boolean ? t.add(c) : o === Number || o && o.type === Number ? n.add(c) : (o === Object || o === Array || o && (o.type === Object || o.type === Array)) && s.add(c);
+  }), { booleanProps: t, numberProps: n, jsonProps: s };
+}
+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 Ge(e) {
+  const t = e.__name || e.name;
+  if (!t)
+    throw new Error("Component must have a __name or name property");
+  const n = le(e, Re(t)), { booleanProps: s, numberProps: l, jsonProps: p } = qe(e);
+  class c 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(r) {
+      this._hiddenInput && (this._hiddenInput.value = r ?? "");
+    }
+    _parseAttributes() {
+      s.forEach((i) => {
+        const u = this.getAttribute(i);
+        this[i] = We(i, u);
+      }), l.forEach((i) => {
+        const u = this.getAttribute(i);
+        u !== null && (this[i] = He(i, u));
+      }), p.forEach((i) => {
+        const u = this.getAttribute(i);
+        if (u !== null) {
+          const h = G(i, u);
+          h !== null && (this[i] = h);
+        }
+      });
+      const r = this.getAttribute("data-json-props");
+      r && r.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?.(), De(this);
+      const r = this.getAttribute("name");
+      r && (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.name = r, this.after(this._hiddenInput));
+    }
+  }
+  return c;
+}
+function Ue(e) {
+  return e.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+}
+function Je(e) {
+  const t = e.__name || e.name;
+  if (!t)
+    throw new Error("Component must have a __name or name property");
+  const n = Ue(t), s = Ge(e);
+  customElements.get(n) || customElements.define(n, s);
+}
+Je(ze);