(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('.pl-btn-group{--pl-btn-group-height: 40px;box-sizing:border-box;position:relative;font-family:var(--control-font-family)}.pl-btn-group label{margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;font-size:var(--font-size-base);line-height:20px}.pl-btn-group__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-btn-group__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-btn-group .inner-border{height:var(--pl-btn-group-height);min-height:var(--pl-btn-group-height)}.pl-btn-group .inner-border:after{border:1px solid var(--color-border-default);border-radius:6px}.pl-btn-group__container{flex:1;display:flex;align-items:center;width:100%;box-sizing:content-box;border-radius:6px;font-weight:500;font-size:10px;text-align:center;-webkit-user-select:none;user-select:none}.pl-btn-group__option{position:relative;display:flex;flex:1;flex-direction:row;justify-content:center;align-items:center;padding:0 12px;align-self:stretch;cursor:pointer;outline:none;text-transform:capitalize;color:var(--btn-switcher-option-color);white-space:nowrap}.pl-btn-group__option:hover:not(.active){background-color:var(--btn-sec-hover-grey)}.pl-btn-group__option:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.pl-btn-group__option:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.pl-btn-group__option:focus-visible{position:relative}.pl-btn-group__option:focus-visible:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border:2px solid var(--border-color-focus);border-radius:inherit;z-index:1}.pl-btn-group__option:not(.active)+.pl-btn-group__option:not(.active):before{content:"";position:absolute;width:1px;height:24px;left:-1px;top:50%;transform:translateY(-50%);background-color:var(--color-border-default)}.pl-btn-group__option.active{background:var(--btn-switcher-bg);border:var(--btn-switcher-active-option-border);box-shadow:var(--btn-group-shape-shadow);color:var(--btn-switcher-active-option-color);border-radius:6px;z-index:1;padding:0 11px}.pl-btn-group.compact{--pl-btn-group-height: 32px}.pl-btn-group.disabled{--color-border-default: var(--color-dis-01);--btn-switcher-bg: var(--color-dis-01);--btn-switcher-option-color: var(--color-dis-01);--btn-switcher-active-option-color: var(--color-dis-00);--btn-switcher-active-option-border: 0px;pointer-events:none;tab-index:unset!important}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as y, useSlots as k, computed as g, createElementBlock as o, openBlock as l, normalizeClass as d, createCommentVNode as r, createVNode as V, createElementVNode as B, createBlock as x, toDisplayString as a, unref as i, withCtx as c, renderSlot as C, Fragment as _, renderList as w, withKeys as $ } from "vue";

import E from "../PlTooltip/PlTooltip.vue.js";
import K from "../../utils/InnerBorder.vue.js";
import { getErrorMessage as N } from "../../helpers/error.js";
const S = { key: 0 }, z = ["tabindex", "onKeydown", "onClick"], M = {
  key: 1,
  class: "pl-btn-group__helper"
}, D = {
  key: 2,
  class: "pl-btn-group__error"
}, F = {
  name: "PlBtnGroup"
}, q = /* @__PURE__ */ y({
  ...F,
  props: {
    modelValue: {},
    label: {},
    options: {},
    disabled: { type: Boolean },
    compact: { type: Boolean },
    helper: {},
    error: {}
  },
  emits: ["update:modelValue"],
  setup(e, { emit: u }) {
    const m = k(), p = u, s = (t) => p("update:modelValue", t), b = e, v = g(
      () => b.options.map((t) => ({
        label: "label" in t ? t.label : t.text,
        value: t.value
      }))
    );
    return (t, G) => (l(), o("div", {
      class: d(["pl-btn-group", { disabled: e.disabled, compact: e.compact }])
    }, [
      e.label ? (l(), o("label", S, [
        B("span", null, a(e.label), 1),
        i(m).tooltip ? (l(), x(i(E), {
          key: 0,
          class: "info",
          position: "top"
        }, {
          tooltip: c(() => [
            C(t.$slots, "tooltip")
          ]),
          _: 3
        })) : r("", !0)
      ])) : r("", !0),
      V(K, { class: "pl-btn-group__container" }, {
        default: c(() => [
          (l(!0), o(_, null, w(v.value, (n, f) => (l(), o("div", {
            key: f,
            class: d(["pl-btn-group__option text-s", { active: e.modelValue === n.value }]),
            tabindex: e.modelValue === n.value || e.disabled ? void 0 : 0,
            onKeydown: $((h) => s(n.value), ["enter"]),
            onClick: (h) => s(n.value)
          }, a(n.label), 43, z))), 128))
        ]),
        _: 1
      }),
      e.helper ? (l(), o("div", M, a(e.helper), 1)) : e.error ? (l(), o("div", D, a(i(N)(e.error)), 1)) : r("", !0)
    ], 2));
  }
});
export {
  q as default
};
//# sourceMappingURL=PlBtnGroup.vue.js.map
