@adyen/bento-vue3 1.28.0 → 1.28.1

package/dist/chunks/{segmented-control.NnFfAdTq.js → segmented-control.DyINOWUl.js}

@@ -20,7 +20,7 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
   },
   emits: ["update:model-value"],
   setup(o, { emit: b }) {
-    const e = o, p = m(), r = U("segmented-control-button"), a = c(() => e.value === e.modelValue), d = c(() => ({
+    const e = o, p = m(), d = U("segmented-control-button"), a = c(() => e.value === e.modelValue), r = c(() => ({
       "b-segmented-control-button--hug-content": !e.fullWidth,
       "b-segmented-control-button--full-width": e.fullWidth,
       "b-segmented-control-button--truncate": e.truncate,
@@ -29,10 +29,10 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
       e.disabled || b("update:model-value", e.value);
     };
     return (g, v) => (i(), f("div", {
-      class: _(["b-segmented-control-button", t(d)])
+      class: _(["b-segmented-control-button", t(r)])
     }, [
       C("input", {
-        id: t(r),
+        id: t(d),
         "aria-checked": t(a),
         "aria-label": o.label,
         checked: t(a),
@@ -45,7 +45,7 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
       }, null, 40, O),
       o.label ? (i(), f("label", {
         key: 0,
-        for: t(r),
+        for: t(d),
         class: "b-segmented-control-button__label-container"
       }, [
         k(t(z), {
@@ -77,7 +77,7 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
   },
   emits: ["update:model-value"],
   setup(o, { emit: b }) {
-    const e = o, p = I(e, "modelValue"), r = m(), a = m(), d = m(), s = c(() => !e.wrap);
+    const e = o, p = I(e, "modelValue"), d = m(), a = m(), r = m(), s = c(() => !e.wrap);
     L(
       () => e.items,
       () => {
@@ -87,9 +87,9 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
       },
       { immediate: !0 }
     ), D(() => {
-      F(r.value, () => {
+      F(d.value, () => {
         var l;
-        r.value && (d.value = (l = a == null ? void 0 : a.value) == null ? void 0 : l.map(
+        d.value && (r.value = (l = a == null ? void 0 : a.value) == null ? void 0 : l.map(
           (u) => u.$refs.segmentedControlButtonLabel.$el.offsetWidth < u.$refs.segmentedControlButtonLabel.$el.scrollWidth
         ));
       });
@@ -99,7 +99,7 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
         var n;
         return {
           ...l,
-          tooltipText: s.value && ((n = d == null ? void 0 : d.value) != null && n[u]) ? l.label : void 0
+          tooltipText: s.value && ((n = r == null ? void 0 : r.value) != null && n[u]) ? l.label : void 0
         };
       })
     ), v = (l) => {
@@ -112,7 +112,7 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
     }));
     return (l, u) => (i(), f("div", {
       ref_key: "segmentedControlRef",
-      ref: r,
+      ref: d,
       role: "group",
       class: _(["b-segmented-control", t(w)])
     }, [
@@ -135,8 +135,8 @@ const O = ["id", "aria-checked", "aria-label", "checked", "disabled", "value"],
       ])), 128))
     ], 2));
   }
-}), ee = /* @__PURE__ */ B(J, [["__scopeId", "data-v-783f6ec5"]]);
+}), ee = /* @__PURE__ */ B(J, [["__scopeId", "data-v-71d1a35c"]]);
 export {
   ee as B
 };
-//# sourceMappingURL=segmented-control.NnFfAdTq.js.map
+//# sourceMappingURL=segmented-control.DyINOWUl.js.map

package/dist/chunks/segmented-control.DyINOWUl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.DyINOWUl.js","sources":["../../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../../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            <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 setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, ref } from 'vue';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled?: boolean;\n\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth?: boolean;\n\n            /**\n             * The string the button will showcase\n             */\n            label: string;\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?: string | number;\n\n            /**\n             * Renders the button with a truncated text if the space is not enough to render the whole content\n             */\n            truncate?: boolean;\n\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: string | number;\n\n            /**\n             * Renders the button with centered text in case the text has to wrap multiple lines\n             */\n            wrap?: boolean;\n        }>(),\n        {\n            disabled: false,\n            fullWidth: false,\n            modelValue: null,\n            truncate: false,\n            wrap: false,\n        }\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Emitted every time the segmented control internal value is changed\n         */\n        (e: 'update:model-value', value: string | number);\n    }>();\n\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</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\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        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlItem } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const emit = defineEmits<{\n        /**\n         * Emitted every time the segmented control internal value is changed\n         */\n        (e: 'update:model-value', value: any);\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Accessible name describing the segmented control.\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            ariaLabel?: string;\n\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth?: boolean;\n\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: BentoSegmentedControlItem[];\n\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: string | number;\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?: boolean;\n        }>(),\n        {\n            ariaLabel: null,\n            fullWidth: false,\n            wrap: false,\n        }\n    );\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\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('update:model-value', 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</script>\n\n<script lang=\"ts\">\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 {\n        name: 'bento-segmented-control',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","onClick","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value"],"mappings":";;;;;;;6FA2GIA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA,GAE7DE,IAAA,MAAA;AACI,MAAAF,EAAA,YACIG,EAAA,sBAAAH,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kECsCJI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBArEAC,IAAAC,EAAAN,GAAA,YAAA,GAEAO,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GACAc,IAAAd,EAAA,GAEAe,IAAAX,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAW;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIY;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;;AACI,QAAAA,EAAA,UACIE,EAAA,SAAAM,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,UAAsD,CAAAC,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA;AAAA,MAK1D,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAlB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAgB,GAAAE,MAAA;;AAAA;AAAA,UACc,GAAAF;AAAA,UACzB,aAAAN,EAAA,WAAAK,IAAAN,KAAA,gBAAAA,EAAA,UAAA,QAAAM,EAAAG,MAAAF,EAAA,QAAA;AAAA,QACqE;AAAA,OAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAjB,EAAA,sBAAAiB,CAAA;AAAA,IAAgC,GAGpCnB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAU,EAAA;AAAA,MACC,6BAAAV,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/data-grid.js

@@ -1,4 +1,4 @@
-import { B as e, d as o, a as r, f as n, e as i, c as B, b as d } from "./chunks/data-grid.BwfZhc09.js";
+import { B as e, d as o, a as r, f as n, e as i, c as B, b as d } from "./chunks/data-grid.CTLlk_RW.js";
 export {
   e as BentoColumnOverflow,
   o as BentoDataGrid,

package/dist/date-range-picker.js

@@ -1,4 +1,4 @@
-import { B as t, a as r } from "./chunks/date-range-picker.CiwDo2jW.js";
+import { B as t, a as r } from "./chunks/date-range-picker.C36PxTCQ.js";
 import { C as o } from "./chunks/calendar.CwULNbSL.js";
 export {
   t as BentoDateRangePicker,

package/dist/filter-bar.js

@@ -1,4 +1,4 @@
-import { B as r, b as a, a as B, c as n } from "./chunks/filter-bar.U2ZcPmSU.js";
+import { B as r, b as a, a as B, c as n } from "./chunks/filter-bar.DmPkRBf4.js";
 export {
   r as BentoFilterBar,
   a as BentoFilterBarEvent,

package/dist/index.js

@@ -7,9 +7,9 @@ import { B as M, c as G, b as A, a as O } from "./chunks/alert.C0gIf7Ka.js";
 import { B as z, b as j, a as N } from "./chunks/button.DoqHEvPh.js";
 import { c as _, B as U, a as Z } from "./chunks/card.C7zLKdcy.js";
 import { d as H } from "./chunks/dashed-underline.DGTW7Y_-.js";
-import { B as J, d as Q, a as X, f as Y, e as $, c as ee, b as te } from "./chunks/data-grid.BwfZhc09.js";
+import { B as J, d as Q, a as X, f as Y, e as $, c as ee, b as te } from "./chunks/data-grid.CTLlk_RW.js";
 import { B as ae, a as ne } from "./chunks/date-picker.CoPmllNh.js";
-import { B as se, a as Be } from "./chunks/date-range-picker.CiwDo2jW.js";
+import { B as se, a as Be } from "./chunks/date-range-picker.C36PxTCQ.js";
 import { B as me, a as pe, u as de } from "./chunks/dropdown.CxBlK83Q.js";
 import { B as le } from "./chunks/divider.CnwfddJD.js";
 import { B as fe, a as xe } from "./chunks/checkbox.xjIFibII.js";
@@ -20,7 +20,7 @@ import { a as Ee, B as Fe, u as Pe, b as Le, c as Ve } from "./chunks/country.ty
 import { c as we, B as Me } from "./chunks/currency.CgVd9fQN.js";
 import { B as Ae, a as Oe } from "./chunks/date.2ndGvIGE.js";
 import { B as ze, b as je, c as Ne, a as Ke } from "./chunks/empty-state.BBxgpI-D.js";
-import { B as Ue, b as Ze, a as We, c as He } from "./chunks/filter-bar.U2ZcPmSU.js";
+import { B as Ue, b as Ze, a as We, c as He } from "./chunks/filter-bar.DmPkRBf4.js";
 import { f as Je, a as Qe, c as Xe, b as Ye } from "./chunks/form-layout-title.4Gz8-dJv.js";
 import { B as et, a as tt, b as ot } from "./chunks/image.0KzfycGE.js";
 import { B as nt } from "./chunks/info-icon.DvL1e5Iu.js";
@@ -38,7 +38,7 @@ import { B as Kt, a as _t } from "./chunks/popover.DRb2GW7t.js";
 import { b as Zt, B as Wt, a as Ht } from "./chunks/radio-group.B9HCffiZ.js";
 import { B as Jt, b as Qt, a as Xt } from "./chunks/search-bar.DxskyM4e.js";
 import { s as $t } from "./chunks/secondary-nav.D66nxbU-.js";
-import { B as to } from "./chunks/segmented-control.NnFfAdTq.js";
+import { B as to } from "./chunks/segmented-control.DyINOWUl.js";
 import { B as ao } from "./chunks/segmented-control.types.BHRLV8KU.js";
 import { B as ro, s as so, a as Bo } from "./chunks/selection-card-group.C-YLePO4.js";
 import { a as mo, B as po, s as uo } from "./chunks/sidepanel.B-LtA15e.js";

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/segmented-control.NnFfAdTq.js";
+import { B as t } from "./chunks/segmented-control.DyINOWUl.js";
 import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
 export {
   t as BentoSegmentedControl,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue3",
-    "version": "1.28.0",
+    "version": "1.28.1",
     "description": "Adyen Bento Vue 3 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -52,7 +52,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.28.0",
+        "@adyen/bento-design-tokens": "1.28.1",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",

package/dist/chunks/segmented-control.NnFfAdTq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"segmented-control.NnFfAdTq.js","sources":["../../../vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue","../../../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            <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 setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { computed, ComputedRef, ref } from 'vue';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Disable the radio button (optional)\n             */\n            disabled?: boolean;\n\n            /**\n             * Renders the button with a 100% width\n             */\n            fullWidth?: boolean;\n\n            /**\n             * The string the button will showcase\n             */\n            label: string;\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?: string | number;\n\n            /**\n             * Renders the button with a truncated text if the space is not enough to render the whole content\n             */\n            truncate?: boolean;\n\n            /**\n             * Indicates the value of the input that will be returned when it's selected\n             */\n            value: string | number;\n\n            /**\n             * Renders the button with centered text in case the text has to wrap multiple lines\n             */\n            wrap?: boolean;\n        }>(),\n        {\n            disabled: false,\n            fullWidth: false,\n            modelValue: null,\n            truncate: false,\n            wrap: false,\n        }\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Emitted every time the segmented control internal value is changed\n         */\n        (e: 'update:model-value', value: string | number);\n    }>();\n\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</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used within the BentoSegmentedControl component only\n     */\n    export default {\n        name: 'bento-segmented-control-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control-button.scss\" />\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        />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, toRef, watch } from 'vue';\n    import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue';\n    import { BentoSegmentedControlItem } from './segmented-control.types';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    const emit = defineEmits<{\n        /**\n         * Emitted every time the segmented control internal value is changed\n         */\n        (e: 'update:model-value', value: string | number);\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Accessible name describing the segmented control.\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            ariaLabel?: string;\n\n            /**\n             * If set to true, renders the component full width.\n             */\n            fullWidth?: boolean;\n\n            /**\n             * Items that will populate the segmented control.\n             */\n            items: BentoSegmentedControlItem[];\n\n            /**\n             * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value.\n             */\n            modelValue: string | number;\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?: boolean;\n        }>(),\n        {\n            ariaLabel: null,\n            fullWidth: false,\n            wrap: false,\n        }\n    );\n\n    const inputValue = toRef(props, 'modelValue');\n\n    const segmentedControlRef = ref();\n    const segmentedControlButtonRef = ref();\n    const hasEllipsis = ref();\n\n    const truncate = computed(() => !props.wrap);\n\n    watch(\n        () => props.items,\n        () => {\n            if (props.items.length > 5) {\n                printDevelopmentWarning(\n                    'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.'\n                );\n            }\n        },\n        { immediate: true }\n    );\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('update:model-value', 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</script>\n\n<script lang=\"ts\">\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 {\n        name: 'bento-segmented-control',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./segmented-control.scss\" />\n"],"names":["__default__$1","segmentedControlButtonLabel","ref","segmentedControlButtonId","generateUid","isChecked","computed","props","conditionalClasses","onClick","emit","__default__","inputValue","toRef","segmentedControlRef","segmentedControlButtonRef","hasEllipsis","truncate","watch","printDevelopmentWarning","onMounted","observeSizeOfElement","_a","el","computedItems","index","onInput","value"],"mappings":";;;;;;;6FA2GIA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;iBAtBAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,0BAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,UAAAA,EAAA,UAAA,GACAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,2CAAA,CAAAC,EAAA;AAAA,MACW,0CAAAA,EAAA;AAAA,MACF,wCAAAA,EAAA;AAAA,MACF,oCAAAA,EAAA,QAAA,CAAAA,EAAA;AAAA,IACW,EAAA,GAE7DE,IAAA,MAAA;AACI,MAAAF,EAAA,YACIG,EAAA,sBAAAH,EAAA,KAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kECsCJI,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBArEAC,IAAAC,EAAAN,GAAA,YAAA,GAEAO,IAAAZ,EAAA,GACAa,IAAAb,EAAA,GACAc,IAAAd,EAAA,GAEAe,IAAAX,EAAA,MAAA,CAAAC,EAAA,IAAA;AAEA,IAAAW;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,MAAA,SAAA,KACIY;AAAA,UAAA;AAAA,QACI;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBC,EAAA,MAAA;AACI,MAAAC,EAAAP,EAAA,OAAA,MAAA;;AACI,QAAAA,EAAA,UACIE,EAAA,SAAAM,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,UAAsD,CAAAC,MAAAA,EAAA,MAAA,4BAAA,IAAA,cAAAA,EAAA,MAAA,4BAAA,IAAA;AAAA;AAAA,MAK1D,CAAA;AAAA,IACH,CAAA;AAGL,UAAAC,IAAAlB;AAAA,MAAsB,MAAAC,EAAA,MAAA,IAAA,CAAAgB,GAAAE,MAAA;;AAAA;AAAA,UACc,GAAAF;AAAA,UACzB,aAAAN,EAAA,WAAAK,IAAAN,KAAA,gBAAAA,EAAA,UAAA,QAAAM,EAAAG,MAAAF,EAAA,QAAA;AAAA,QACqE;AAAA,OAAA;AAAA,IAC1E,GAGNG,IAAA,CAAAC,MAAA;AACI,MAAAjB,EAAA,sBAAAiB,CAAA;AAAA,IAAgC,GAGpCnB,IAAAF,EAAA,OAAA;AAAA,MAA2C,4BAAA,CAAAC,EAAA;AAAA,MACJ,mCAAAA,EAAA;AAAA,MACM,iCAAAU,EAAA;AAAA,MACC,6BAAAV,EAAA;AAAA,IACP,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}