(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 h, useSlots as y, computed as k, createElementBlock as l, openBlock as o, normalizeClass as i, createCommentVNode as n, createVNode as g, createElementVNode as V, createBlock as B, toDisplayString as r, unref as a, withCtx as p, renderSlot as C, Fragment as w, renderList as $, withKeys as E } from "vue";

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