@adyen/bento-vue3 1.6.1 → 1.7.0

package/dist/segmented-control.js

@@ -1,15 +1,16 @@
-import { defineComponent as y, computed as c, resolveComponent as m, openBlock as l, createElementBlock as b, normalizeClass as I, createElementVNode as B, createBlock as _, createCommentVNode as h, createVNode as A, withCtx as U, createTextVNode as N, toDisplayString as W, toRef as D, ref as g, onMounted as E, onUnmounted as T, toRefs as q, Fragment as F, renderList as R } from "vue";
-import { B as H } from "./chunks/index.7f24db66.js";
-import { g as S } from "./chunks/unique-id.a2a2b458.js";
-import { C as P } from "./chunks/listbox.0f25778d.js";
-import { _ as V } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as M } from "./chunks/dropdown.7a104ce3.js";
-import { u as z } from "./chunks/i18n.6c402773.js";
-import { u as O } from "./chunks/aria-label.ac9651a5.js";
-import "./assets/index27.css";
-const j = y({
+import { defineComponent as B, ref as m, computed as b, resolveComponent as v, openBlock as r, createElementBlock as g, normalizeClass as w, createElementVNode as W, createBlock as $, createCommentVNode as y, createVNode as T, withCtx as A, createTextVNode as D, toDisplayString as N, toRef as U, toRefs as E, onMounted as q, resolveDirective as F, Fragment as R, renderList as P, withDirectives as z } from "vue";
+import { B as M } from "./chunks/index.2bd3812b.js";
+import { g as O } from "./chunks/unique-id.a2a2b458.js";
+import { C as j } from "./chunks/checkmark.83e4f1e0.js";
+import { _ as L } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { b as G } from "./chunks/tooltip.f769eb14.js";
+import { u as H } from "./chunks/i18n.6c402773.js";
+import { u as J } from "./chunks/aria-label.ac9651a5.js";
+import { o as K } from "./chunks/resize.a041304d.js";
+import "./assets/index30.css";
+const Q = B({
   name: "bento-segmented-control-button",
-  components: { BentoTypography: H, CheckmarkIcon: P },
+  components: { BentoTypography: M, CheckmarkIcon: j },
   props: {
     /**
      * The string the button will showcase
@@ -46,33 +47,50 @@ const j = y({
     fullWidth: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Renders the button with a truncated text if the space is not enough to render the whole content
+     */
+    truncate: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the button with centered text in case the text has to wrap multiple lines
+     */
+    wrap: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:model-value"],
-  setup(e, { emit: n }) {
-    const d = S("segmented-control-button"), r = c(() => e.value === e.modelValue), s = c(() => ({
+  setup(e, { emit: o }) {
+    const d = m(), s = O("segmented-control-button"), u = b(() => e.value === e.modelValue), i = b(() => ({
       "b-segmented-control-button--hug-content": !e.fullWidth,
-      "b-segmented-control-button--full-width": e.fullWidth
+      "b-segmented-control-button--full-width": e.fullWidth,
+      "b-segmented-control-button--truncate": e.truncate,
+      "b-segmented-control-button--wrap": e.wrap && !e.truncate
     }));
     return {
       // Values
-      segmentedControlButtonId: d,
-      isChecked: r,
-      conditionalClasses: s,
+      segmentedControlButtonLabel: d,
+      segmentedControlButtonId: s,
+      isChecked: u,
+      conditionalClasses: i,
       // Methods
       onClick: () => {
-        e.disabled || n("update:model-value", e.value);
+        e.disabled || o("update:model-value", e.value);
       }
     };
   }
 });
-const G = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"], J = ["for"];
-function K(e, n, d, r, s, i) {
-  const a = m("checkmark-icon"), o = m("bento-typography");
-  return l(), b("div", {
-    class: I(["b-segmented-control-button", e.conditionalClasses])
+const X = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"], Y = ["for"];
+function Z(e, o, d, s, u, i) {
+  const l = v("checkmark-icon"), c = v("bento-typography");
+  return r(), g("div", {
+    class: w(["b-segmented-control-button", e.conditionalClasses])
   }, [
-    B("input", {
+    W("input", {
       id: e.segmentedControlButtonId,
       "aria-checked": e.isChecked,
       "aria-label": e.label,
@@ -82,42 +100,44 @@ function K(e, n, d, r, s, i) {
       type: "radio",
       class: "b-segmented-control-button__input",
       role: "radio",
-      onChange: n[0] || (n[0] = (...t) => e.onClick && e.onClick(...t))
-    }, null, 40, G),
-    e.label ? (l(), b("label", {
+      onChange: o[0] || (o[0] = (...t) => e.onClick && e.onClick(...t))
+    }, null, 40, X),
+    e.label ? (r(), g("label", {
       key: 0,
       for: e.segmentedControlButtonId,
       class: "b-segmented-control-button__label-container"
     }, [
-      e.isChecked ? (l(), _(a, {
+      e.isChecked ? (r(), $(l, {
         key: 0,
         "aria-hidden": "true",
         class: "b-segmented-control-button__icon"
-      })) : h("", !0),
-      A(o, {
+      })) : y("", !0),
+      T(c, {
+        ref: "segmentedControlButtonLabel",
         class: "b-segmented-control-button__label",
         el: "span",
         variant: "body",
         stronger: ""
       }, {
-        default: U(() => [
-          N(W(e.label), 1)
+        default: A(() => [
+          D(N(e.label), 1)
         ]),
         _: 1
-      })
-    ], 8, J)) : h("", !0)
+      }, 512)
+    ], 8, Y)) : y("", !0)
   ], 2);
 }
-const Q = /* @__PURE__ */ V(j, [["render", K], ["__scopeId", "data-v-92fc438f"]]);
-var v = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(v || {});
+const x = /* @__PURE__ */ L(Q, [["render", Z], ["__scopeId", "data-v-72a8a7dc"]]);
+var h = /* @__PURE__ */ ((e) => (e.UPDATE = "update:model-value", e))(h || {});
 const k = {
   "en-US": {
     ariaLabelFallback: "Segmented control"
   }
-}, X = y({
+}, ee = B({
   name: "bento-segmented-control",
   i18n: { messages: k },
-  components: { BentoDropdown: M, SegmentedControlButton: Q },
+  components: { SegmentedControlButton: x },
+  directives: { BentoTooltipDirective: G },
   props: {
     /**
      * Items that will populate the segmented control.
@@ -150,85 +170,89 @@ const k = {
     fullWidth: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.
+     */
+    wrap: {
+      type: Boolean,
+      default: !1
     }
   },
-  emits: [v.UPDATE],
-  setup(e, { attrs: n, emit: d }) {
-    const { t: r } = z({ messages: k }), s = D(e, "modelValue"), i = S("segmented-control-dropdown"), a = g(null), o = g(!0);
-    let t;
-    E(() => {
-      const f = {
-        root: null,
-        // To prevent the observer from triggering on vertical intersection
-        rootMargin: "100% 0% 100% 0%",
-        threshold: 1
-      };
-      t = new IntersectionObserver((u) => {
-        u && u.length && (u[u.length - 1].isIntersecting ? o.value = !0 : o.value = !1);
-      }, f), t.observe(a.value);
-    }), T(() => {
-      t.disconnect();
-    });
-    const p = g(n["aria-label"]), { ariaLabel: $ } = q(e), w = O({
-      ariaLabel: p.value,
+  emits: [h.UPDATE],
+  setup(e, { attrs: o, emit: d }) {
+    const { t: s } = H({ messages: k }), u = U(e, "modelValue"), i = m(o["aria-label"]), { ariaLabel: l } = E(e), c = J({
+      ariaLabel: i.value,
       // TODO: take this line away when the aria-label props is removed
-      label: $,
-      defaultFallback: r("ariaLabelFallback")
-    }), C = c(() => o.value === !1), L = c(() => ({
-      "b-segmented-control--hidden": C.value,
-      "b-segmented-control--full-width": e.fullWidth
+      label: l,
+      defaultFallback: s("ariaLabelFallback")
+    }), t = m(), a = m(), p = m(), _ = b(() => !e.wrap);
+    q(() => {
+      K(t.value, () => {
+        var n;
+        t.value && (p.value = (n = a == null ? void 0 : a.value) == null ? void 0 : n.map(
+          (f) => f.$refs.segmentedControlButtonLabel.$el.offsetWidth < f.$refs.segmentedControlButtonLabel.$el.scrollWidth
+        ));
+      });
+    });
+    const V = b(
+      () => e.items.map((n, f) => {
+        var C;
+        return {
+          ...n,
+          tooltipText: _.value && ((C = p == null ? void 0 : p.value) != null && C[f]) ? n.label : void 0
+        };
+      })
+    ), I = (n) => {
+      d(h.UPDATE, n);
+    }, S = b(() => ({
+      "b-segmented-control--hug": !e.fullWidth,
+      "b-segmented-control--full-width": e.fullWidth,
+      "b-segmented-control--truncate": _.value,
+      "b-segmented-control--wrap": e.wrap
     }));
     return {
       // Values
-      computedAriaLabel: w,
-      inputValue: s,
-      dropdownId: i,
-      segmentedControlRef: a,
-      conditionalClasses: L,
-      isSegmentedControlVisible: o,
-      isSegmentedControlHidden: C,
+      computedAriaLabel: c,
+      inputValue: u,
+      segmentedControlRef: t,
+      segmentedControlButtonRef: a,
+      computedItems: V,
+      truncate: _,
+      conditionalClasses: S,
       // Methods
-      onInput: (f) => {
-        d(v.UPDATE, f);
-      }
+      onInput: I
     };
   }
 });
-const Y = { class: "b-segmented-control__wrapper" }, Z = ["aria-hidden"];
-function x(e, n, d, r, s, i) {
-  const a = m("bento-dropdown"), o = m("segmented-control-button");
-  return l(), b("div", Y, [
-    e.isSegmentedControlHidden ? (l(), _(a, {
-      key: 0,
-      id: e.dropdownId,
-      "aria-hidden": e.isSegmentedControlVisible,
-      value: e.modelValue,
-      items: e.items,
-      "aria-label": e.computedAriaLabel,
-      onInput: e.onInput
-    }, null, 8, ["id", "aria-hidden", "value", "items", "aria-label", "onInput"])) : h("", !0),
-    B("fieldset", {
-      ref: "segmentedControlRef",
-      role: "group",
-      class: I(["b-segmented-control", e.conditionalClasses]),
-      "aria-hidden": e.isSegmentedControlHidden
-    }, [
-      (l(!0), b(F, null, R(e.items, (t, p) => (l(), _(o, {
-        key: `segmented-control-item-${p}-${t.label}`,
-        class: "b-segmented-control__item",
-        label: t.label,
-        value: t.value,
-        disabled: t.disabled,
-        "full-width": e.fullWidth,
-        "model-value": e.inputValue,
-        "onUpdate:modelValue": e.onInput
-      }, null, 8, ["label", "value", "disabled", "full-width", "model-value", "onUpdate:modelValue"]))), 128))
-    ], 10, Z)
-  ]);
+function te(e, o, d, s, u, i) {
+  const l = v("segmented-control-button"), c = F("bento-tooltip-directive");
+  return r(), g("div", {
+    ref: "segmentedControlRef",
+    role: "group",
+    class: w(["b-segmented-control", e.conditionalClasses])
+  }, [
+    (r(!0), g(R, null, P(e.computedItems, (t, a) => z((r(), $(l, {
+      ref_for: !0,
+      ref: "segmentedControlButtonRef",
+      key: `segmented-control-item-${a}-${t.label}`,
+      class: "b-segmented-control__item",
+      label: t.label,
+      value: t.value,
+      disabled: t.disabled,
+      truncate: e.truncate,
+      wrap: e.wrap,
+      "full-width": e.fullWidth,
+      "model-value": e.inputValue,
+      "onUpdate:modelValue": e.onInput
+    }, null, 8, ["label", "value", "disabled", "truncate", "wrap", "full-width", "model-value", "onUpdate:modelValue"])), [
+      [c, t.tooltipText]
+    ])), 128))
+  ], 2);
 }
-const ie = /* @__PURE__ */ V(X, [["render", x], ["__scopeId", "data-v-f97adccf"]]);
+const ce = /* @__PURE__ */ L(ee, [["render", te], ["__scopeId", "data-v-d443d921"]]);
 export {
-  ie as BentoSegmentedControl,
-  v as BentoSegmentedControlEvent
+  ce as BentoSegmentedControl,
+  h as BentoSegmentedControlEvent
 };
 //# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../vue2/src/components/segmented-control/segmented-control.types.ts","../../vue2/src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <checkmark-icon v-if=\"isChecked\" aria-hidden=\"true\" class=\"b-segmented-control-button__icon\" />\n            <bento-typography class=\"b-segmented-control-button__label\" el=\"span\" variant=\"body\" stronger>\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent } from 'vue';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control-button',\n        components: { BentoTypography, CheckmarkIcon },\n        props: {\n            /**\n             * The string the button will showcase\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on the segmented control component\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['update:model-value'],\n        setup(props, { emit }) {\n            const segmentedControlButtonId = generateUid('segmented-control-button');\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control-button--hug-content': !props.fullWidth,\n                'b-segmented-control-button--full-width': props.fullWidth,\n            }));\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('update:model-value', props.value);\n                }\n            };\n            return {\n                // Values\n                segmentedControlButtonId,\n                isChecked,\n                conditionalClasses,\n                // Methods\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","export interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n","<template>\n    <div class=\"b-segmented-control__wrapper\">\n        <bento-dropdown\n            v-if=\"isSegmentedControlHidden\"\n            :id=\"dropdownId\"\n            :aria-hidden=\"isSegmentedControlVisible\"\n            :value=\"modelValue\"\n            :items=\"items\"\n            :aria-label=\"computedAriaLabel\"\n            @input=\"onInput\"\n        />\n        <fieldset\n            ref=\"segmentedControlRef\"\n            role=\"group\"\n            class=\"b-segmented-control\"\n            :class=\"conditionalClasses\"\n            :aria-hidden=\"isSegmentedControlHidden\"\n        >\n            <segmented-control-button\n                v-for=\"(item, index) in items\"\n                :key=\"`segmented-control-item-${index}-${item.label}`\"\n                class=\"b-segmented-control__item\"\n                :label=\"item.label\"\n                :value=\"item.value\"\n                :disabled=\"item.disabled\"\n                :full-width=\"fullWidth\"\n                :model-value=\"inputValue\"\n                @update:model-value=\"onInput\"\n            ></segmented-control-button>\n        </fieldset>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, toRef, toRefs } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              :update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control',\n        i18n: { messages },\n        components: { BentoDropdown, SegmentedControlButton },\n        props: {\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: {\n                type: Array as PropType<BentoSegmentedControlItem[]>,\n                required: true,\n                validator: (arr: Array<BentoSegmentedControlItem[]>) => arr.length <= 5,\n            },\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: {\n                type: [Number, String, null],\n                required: true,\n            },\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name describing the segmented control.\n             */\n            ariaLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        emits: [BentoSegmentedControlEvent.UPDATE],\n        setup(props, { attrs, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const inputValue = toRef(props, 'modelValue');\n            const dropdownId = generateUid('segmented-control-dropdown');\n            const segmentedControlRef = ref(null);\n            const isSegmentedControlVisible = ref(true);\n            let observer: IntersectionObserver;\n\n            onMounted(() => {\n                const config = {\n                    root: null,\n                    // To prevent the observer from triggering on vertical intersection\n                    rootMargin: '100% 0% 100% 0%',\n                    threshold: 1,\n                };\n                observer = new IntersectionObserver(entries => {\n                    if (entries && entries.length) {\n                        if (entries[entries.length - 1].isIntersecting) {\n                            // The segmented control is still visible within the viewport\n                            isSegmentedControlVisible.value = true;\n                        } else {\n                            // The segmented control is not fully visible anymore in the viewport\n                            isSegmentedControlVisible.value = false;\n                        }\n                    }\n                }, config);\n                observer.observe(segmentedControlRef.value);\n            });\n\n            onUnmounted(() => {\n                observer.disconnect();\n            });\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: t('ariaLabelFallback'),\n            });\n\n            const isSegmentedControlHidden = computed(() => isSegmentedControlVisible.value === false);\n\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control--hidden': isSegmentedControlHidden.value,\n                'b-segmented-control--full-width': props.fullWidth,\n            }));\n\n            const onInput = value => {\n                emit(BentoSegmentedControlEvent.UPDATE, value);\n            };\n\n            return {\n                // Values\n                computedAriaLabel,\n                inputValue,\n                dropdownId,\n                segmentedControlRef,\n                conditionalClasses,\n                isSegmentedControlVisible,\n                isSegmentedControlHidden,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["_sfc_main$1","defineComponent","BentoTypography","CheckmarkIcon","props","emit","segmentedControlButtonId","generateUid","isChecked","computed","conditionalClasses","createElementVNode","_ctx","_hoisted_1$1","openBlock","createElementBlock","createBlock","_component_checkmark_icon","createCommentVNode","createVNode","_component_bento_typography","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","messages","BentoDropdown","SegmentedControlButton","arr","attrs","t","useI18n","inputValue","toRef","dropdownId","segmentedControlRef","ref","isSegmentedControlVisible","observer","onMounted","config","entries","onUnmounted","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","isSegmentedControlHidden","value","_component_segmented_control_button","resolveComponent","_component_bento_dropdown","normalizeClass","Fragment","renderList","item","index"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../vue2/src/components/segmented-control/segmented-control.types.ts","../../vue2/src/components/segmented-control/segmented-control.vue"],"sourcesContent":["<template>\n    <div class=\"b-segmented-control-button\" :class=\"conditionalClasses\">\n        <input\n            :id=\"segmentedControlButtonId\"\n            :aria-checked=\"isChecked\"\n            :aria-label=\"label\"\n            :checked=\"isChecked\"\n            :disabled=\"disabled\"\n            :value=\"value\"\n            type=\"radio\"\n            class=\"b-segmented-control-button__input\"\n            role=\"radio\"\n            @change=\"onClick\"\n        />\n        <label v-if=\"label\" :for=\"segmentedControlButtonId\" class=\"b-segmented-control-button__label-container\">\n            <checkmark-icon v-if=\"isChecked\" aria-hidden=\"true\" class=\"b-segmented-control-button__icon\" />\n            <bento-typography\n                ref=\"segmentedControlButtonLabel\"\n                class=\"b-segmented-control-button__label\"\n                el=\"span\"\n                variant=\"body\"\n                stronger\n            >\n                {{ label }}\n            </bento-typography>\n        </label>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, defineComponent, ref } from 'vue';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control-button',\n        components: { BentoTypography, CheckmarkIcon },\n        props: {\n            /**\n             * The string the button will showcase\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: {\n                type: [String, Number],\n                required: true,\n            },\n            /**\n             * This property should not be used directly.\n             * It will be used by v-model directive on the segmented control component\n             */\n            modelValue: {\n                type: [String, Number],\n                default: null,\n            },\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with a truncated text if the space is not enough to render the whole content\n             */\n            truncate: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the button with centered text in case the text has to wrap multiple lines\n             */\n            wrap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['update:model-value'],\n        setup(props, { emit }) {\n            const segmentedControlButtonLabel = ref();\n            const segmentedControlButtonId = generateUid('segmented-control-button');\n            const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control-button--hug-content': !props.fullWidth,\n                'b-segmented-control-button--full-width': props.fullWidth,\n                'b-segmented-control-button--truncate': props.truncate,\n                'b-segmented-control-button--wrap': props.wrap && !props.truncate,\n            }));\n            const onClick = () => {\n                if (!props.disabled) {\n                    emit('update:model-value', props.value);\n                }\n            };\n            return {\n                // Values\n                segmentedControlButtonLabel,\n                segmentedControlButtonId,\n                isChecked,\n                conditionalClasses,\n                // Methods\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\n","export interface BentoSegmentedControlItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport enum BentoSegmentedControlEvent {\n    UPDATE = 'update:model-value',\n}\n","<template>\n    <div ref=\"segmentedControlRef\" role=\"group\" class=\"b-segmented-control\" :class=\"conditionalClasses\">\n        <segmented-control-button\n            v-for=\"(item, index) in computedItems\"\n            ref=\"segmentedControlButtonRef\"\n            :key=\"`segmented-control-item-${index}-${item.label}`\"\n            v-bento-tooltip-directive=\"item.tooltipText\"\n            class=\"b-segmented-control__item\"\n            :label=\"item.label\"\n            :value=\"item.value\"\n            :disabled=\"item.disabled\"\n            :truncate=\"truncate\"\n            :wrap=\"wrap\"\n            :full-width=\"fullWidth\"\n            :model-value=\"inputValue\"\n            @update:model-value=\"onInput\"\n        ></segmented-control-button>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, toRef, toRefs } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlEvent, BentoSegmentedControlItem } from './segmented-control.types';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import messages from './messages.json';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * @example\n     * import { BentoSegmentedControl } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSegmentedControl },\n     *     template: `\n     *          <bento-segmented-control\n     *              :items=\"[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]\"\n     *              :model-value=\"1\"\n     *              @update:model-value=\"yourUpdateHandler\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-segmented-control',\n        i18n: { messages },\n        components: { SegmentedControlButton },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: {\n                type: Array as PropType<BentoSegmentedControlItem[]>,\n                required: true,\n                validator: (arr: Array<BentoSegmentedControlItem[]>) => arr.length <= 5,\n            },\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: {\n                type: [Number, String, null],\n                required: true,\n            },\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * Accessible name describing the segmented control.\n             */\n            ariaLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore.\n             */\n            wrap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        emits: [BentoSegmentedControlEvent.UPDATE],\n        setup(props, { attrs, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const inputValue = toRef(props, 'modelValue');\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: t('ariaLabelFallback'),\n            });\n\n            const segmentedControlRef = ref();\n            const segmentedControlButtonRef = ref();\n            const hasEllipsis = ref();\n\n            const truncate = computed(() => !props.wrap);\n\n            onMounted(() => {\n                observeSizeOfElement(segmentedControlRef.value, () => {\n                    if (segmentedControlRef.value) {\n                        hasEllipsis.value = segmentedControlButtonRef?.value?.map(\n                            el =>\n                                el.$refs.segmentedControlButtonLabel.$el.offsetWidth <\n                                el.$refs.segmentedControlButtonLabel.$el.scrollWidth\n                        );\n                    }\n                });\n            });\n\n            const computedItems = computed(() =>\n                props.items.map((el, index) => ({\n                    ...el,\n                    tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined,\n                }))\n            );\n\n            const onInput = value => {\n                emit(BentoSegmentedControlEvent.UPDATE, value);\n            };\n\n            const conditionalClasses = computed(() => ({\n                'b-segmented-control--hug': !props.fullWidth,\n                'b-segmented-control--full-width': props.fullWidth,\n                'b-segmented-control--truncate': truncate.value,\n                'b-segmented-control--wrap': props.wrap,\n            }));\n\n            return {\n                // Values\n                computedAriaLabel,\n                inputValue,\n                segmentedControlRef,\n                segmentedControlButtonRef,\n                computedItems,\n                truncate,\n                conditionalClasses,\n\n                // Methods\n                onInput,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["_sfc_main$1","defineComponent","BentoTypography","CheckmarkIcon","props","emit","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","conditionalClasses","createElementVNode","_ctx","_hoisted_1","openBlock","createElementBlock","createBlock","_component_checkmark_icon","createCommentVNode","createVNode","_component_bento_typography","BentoSegmentedControlEvent","BentoSegmentedControlEvent2","_sfc_main","messages","SegmentedControlButton","BentoTooltipDirective","arr","attrs","t","useI18n","inputValue","toRef","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value","_directive_bento_tooltip_directive","resolveDirective","normalizeClass","item"],"mappings":"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"}