@turquoisehealth/pit-viper 2.122.0 → 2.122.1-dev.0

package/pv-components/dist/web/components/pv-segmented-control/pv-segmented-control.js

@@ -0,0 +1,214 @@
+import { ref as E, getCurrentInstance as w, defineComponent as A, computed as v, createElementBlock as m, openBlock as f, normalizeClass as S, createElementVNode as I, mergeModels as k, useModel as $, Fragment as g, renderList as O, createBlock as y, createCommentVNode as b, createTextVNode as j, toDisplayString as N, defineCustomElement as B } from "vue";
+function x() {
+  const e = E(!1), n = w()?.root || {};
+  return "isCE" in n && n.isCE === !0 && (e.value = !0), e;
+}
+const T = [void 0, 10, 12, 20, 24, 32, 64], V = ["xlink:href"], P = /* @__PURE__ */ A({
+  __name: "PvIcon",
+  props: {
+    name: { type: String },
+    size: { type: null }
+  },
+  setup(e) {
+    const t = e, n = x(), s = E(null), c = v(() => ({
+      "pv-icon": !0,
+      [`pv-icon-${t.size}`]: T.includes(t.size)
+    })), r = v(() => n.value && s.value ? `${s.value}#${t.name}` : `#${t.name}`);
+    return globalThis.__PV_GLOBAL_SPRITE_PATH__ && (s.value = globalThis.__PV_GLOBAL_SPRITE_PATH__), (l, o) => (f(), m(
+      "svg",
+      {
+        "data-testid": "pv-icon",
+        "aria-hidden": "true",
+        class: S(c.value)
+      },
+      [
+        I("use", { "xlink:href": r.value }, null, 8, V)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+}), z = ["onClick", "data-active"], L = /* @__PURE__ */ A({
+  __name: "PvSegmentedControl",
+  props: /* @__PURE__ */ k({
+    size: { default: "lg", type: String },
+    options: { default: () => [], type: Array }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = $(e, "modelValue"), n = (s) => {
+      t.value = s;
+    };
+    return (s, c) => (f(), m(
+      "div",
+      {
+        class: S([
+          "pv-segmented-control",
+          {
+            "pv-segmented-control-large": e.size === "xl"
+          }
+        ])
+      },
+      [
+        (f(!0), m(
+          g,
+          null,
+          O(e.options, (r) => (f(), m("button", {
+            key: r.value,
+            class: "pv-full-width",
+            onClick: (l) => n(r.value),
+            "data-active": t.value === r.value ? !0 : null
+          }, [
+            r.iconPosition == "left" && r.icon ? (f(), y(P, {
+              key: 0,
+              name: r.icon
+            }, null, 8, ["name"])) : b("v-if", !0),
+            r.label ? (f(), m(
+              g,
+              { key: 1 },
+              [
+                j(
+                  N(r.label),
+                  1
+                  /* TEXT */
+                )
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            )) : b("v-if", !0),
+            r.iconPosition == "right" && r.icon ? (f(), y(P, {
+              key: 2,
+              name: r.icon
+            }, null, 8, ["name"])) : b("v-if", !0)
+          ], 8, z))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+}), M = /* @__PURE__ */ new Set(["PvIcon", "PvPopoverMenu", "PvPopover"]);
+function R(e) {
+  return !M.has(e);
+}
+function _(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 c = document.createElement("link");
+    return c.rel = "stylesheet", c.href = s, e.shadowRoot.prepend(c), !0;
+  }
+  return !1;
+}
+function D(e) {
+  if (!_(e, "pit-viper-v2")) {
+    if (_(e, "pit-viper")) {
+      _(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 W = (e) => ({ shadowRoot: R(e) });
+function H(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 G(e, t) {
+  const n = Number(t);
+  return isNaN(n) && console.warn(`Invalid number attribute value for "${e}": "${t}". Expected a valid number.`), n;
+}
+function q(e) {
+  const t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = (e.__vccOpts || e).props;
+  return r && typeof r == "object" && Object.entries(r).forEach(([l, o]) => {
+    o === Boolean || o && o.type === Boolean ? t.add(l) : o === Number || o && o.type === Number ? n.add(l) : (o === Object || o === Array || o && (o.type === Object || o.type === Array)) && s.add(l);
+  }), { booleanProps: t, numberProps: n, jsonProps: s };
+}
+function C(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 J(e) {
+  const t = e.__name || e.name;
+  if (!t)
+    throw new Error("Component must have a __name or name property");
+  const n = B(e, W(t)), { booleanProps: s, numberProps: c, jsonProps: r } = q(e);
+  class l 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(u) {
+      this._hiddenInput && (this._hiddenInput.value = u ?? "");
+    }
+    _parseAttributes() {
+      s.forEach((i) => {
+        const a = this.getAttribute(i);
+        this[i] = H(i, a);
+      }), c.forEach((i) => {
+        const a = this.getAttribute(i);
+        a !== null && (this[i] = G(i, a));
+      }), r.forEach((i) => {
+        const a = this.getAttribute(i);
+        if (a !== null) {
+          const d = C(i, a);
+          d !== null && (this[i] = d);
+        }
+      });
+      const u = this.getAttribute("data-json-props");
+      u && u.split(",").map((a) => a.trim()).filter(Boolean).forEach((a) => {
+        const d = a.replace(/-([a-z])/g, (p) => p[1].toUpperCase());
+        let h = this.getAttribute(a);
+        if (h === null) {
+          const p = d.replace(/([A-Z])/g, "-$1").toLowerCase();
+          h = this.getAttribute(p);
+        }
+        if (h !== null && !this[d]) {
+          const p = C(d, h);
+          p !== null && (this[d] = p);
+        }
+      });
+    }
+    connectedCallback() {
+      this._parseAttributes(), super.connectedCallback?.(), D(this);
+      const u = this.getAttribute("name");
+      u && (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.name = u, this.after(this._hiddenInput));
+    }
+  }
+  return l;
+}
+function U(e) {
+  return e.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+}
+function Z(e) {
+  const t = e.__name || e.name;
+  if (!t)
+    throw new Error("Component must have a __name or name property");
+  const n = U(t), s = J(e);
+  customElements.get(n) || customElements.define(n, s);
+}
+Z(L);