@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/chunks/{index.36742dc7.js → index.05d4c01b.js}

@@ -1,23 +1,22 @@
-import { defineComponent as _, openBlock as o, createElementBlock as u, renderSlot as m, inject as I, computed as i, resolveComponent as e, resolveDirective as $, normalizeClass as k, createElementVNode as c, createVNode as l, withCtx as p, createTextVNode as N, toDisplayString as V, createBlock as r, createCommentVNode as a, withDirectives as D } from "vue";
+import { defineComponent as _, openBlock as o, createElementBlock as u, renderSlot as m, inject as I, computed as c, resolveComponent as e, resolveDirective as $, normalizeClass as k, createElementVNode as a, createVNode as l, withCtx as d, createTextVNode as N, toDisplayString as V, createBlock as r, createCommentVNode as i, withDirectives as D } from "vue";
 import { _ as y } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as E, a as L } from "./button.51be5335.js";
-import { BentoInfoIcon as A } from "../info-icon.js";
-import { B as O, a as d } from "./index.1d501e31.js";
-import { C as R } from "./copy.92d2d21c.js";
-import { S as U } from "./search.d18f9657.js";
-import { b as Y } from "./tooltip.68fc3821.js";
-import "../assets/index10.css";
-const j = _({
-  name: "bento-structured-list",
-  inheritAttrs: !1
+import { B as E, a as L } from "./button.4ccc3a72.js";
+import { BentoInfoIcon as O } from "../info-icon.js";
+import { B as R, b as p } from "./index.92f7d550.js";
+import { C as U } from "./copy.012e43f2.js";
+import { S as Y } from "./search.d18f9657.js";
+import { b as j } from "./tooltip.ca53a83a.js";
+import "../assets/index25.css";
+const w = _({
+  name: "bento-structured-list"
 });
-const w = { class: "b-structured-list" };
-function q(t, s, n, b, f, h) {
-  return o(), u("dl", w, [
+const A = { class: "b-structured-list" };
+function q(t, s, n, b, f, v) {
+  return o(), u("dl", A, [
     m(t.$slots, "default", {}, void 0, !0)
   ]);
 }
-const et = /* @__PURE__ */ y(j, [["render", q], ["__scopeId", "data-v-becac3aa"]]), z = Symbol("structured list condensed style injection key"), F = {
+const et = /* @__PURE__ */ y(w, [["render", q], ["__scopeId", "data-v-ee125315"]]), z = Symbol("structured list condensed style injection key"), F = {
   "en-US": {
     search: "Search"
   }
@@ -26,13 +25,12 @@ const et = /* @__PURE__ */ y(j, [["render", q], ["__scopeId", "data-v-becac3aa"]
   name: "bento-structured-list-item",
   components: {
     BentoButton: E,
-    BentoInfoIcon: A,
-    BentoTypography: O,
-    Copy: R,
-    SearchIcon: U
+    BentoInfoIcon: O,
+    BentoTypography: R,
+    Copy: U,
+    SearchIcon: Y
   },
-  directives: { BentoTooltipDirective: Y },
-  inheritAttrs: !1,
+  directives: { BentoTooltipDirective: j },
   props: {
     /**
      * Label to display for the value
@@ -71,10 +69,10 @@ const et = /* @__PURE__ */ y(j, [["render", q], ["__scopeId", "data-v-becac3aa"]
     }
   },
   setup() {
-    const t = I(z, !1), s = i(() => ({
+    const t = I(z, !1), s = c(() => ({
       "b-structured-list-item--condensed": t
-    })), n = i(
-      () => t ? d.CAPTION : d.BODY
+    })), n = c(
+      () => t ? p.CAPTION : p.BODY
     );
     return {
       // Values
@@ -86,14 +84,14 @@ const et = /* @__PURE__ */ y(j, [["render", q], ["__scopeId", "data-v-becac3aa"]
   }
 });
 const K = { class: "b-structured-list-item__label" }, P = { class: "b-structured-list-item__value" };
-function G(t, s, n, b, f, h) {
-  const v = e("bento-typography"), B = e("bento-info-icon"), S = e("copy"), g = e("search-icon"), C = e("bento-button"), T = $("bento-tooltip-directive");
+function G(t, s, n, b, f, v) {
+  const h = e("bento-typography"), B = e("bento-info-icon"), S = e("copy"), g = e("search-icon"), C = e("bento-button"), T = $("bento-tooltip-directive");
   return o(), u("div", {
     class: k(["b-structured-list-item", t.conditionalClasses])
   }, [
-    c("dt", K, [
-      l(v, { variant: t.labelTypographyVariant }, {
-        default: p(() => [
+    a("dt", K, [
+      l(h, { variant: t.labelTypographyVariant }, {
+        default: d(() => [
           N(V(t.label), 1)
         ]),
         _: 1
@@ -102,22 +100,22 @@ function G(t, s, n, b, f, h) {
         key: 0,
         class: "b-structured-list-item__icon",
         "tooltip-text": t.labelInfo
-      }, null, 8, ["tooltip-text"])) : a("", !0)
+      }, null, 8, ["tooltip-text"])) : i("", !0)
     ]),
-    c("dd", P, [
+    a("dd", P, [
       m(t.$slots, "default", {}, void 0, !0),
       t.copy ? (o(), r(S, {
         key: 0,
         class: "b-structured-list-item__icon",
         text: t.copy
-      }, null, 8, ["text"])) : a("", !0),
+      }, null, 8, ["text"])) : i("", !0),
       t.search ? D((o(), r(C, {
         key: 1,
         class: "b-structured-list-item__icon",
         variant: t.BentoButtonVariant.TERTIARY,
         onClick: t.search
       }, {
-        iconLeft: p(() => [
+        iconLeft: d(() => [
           l(g, {
             "svg-title": t.$t("search")
           }, null, 8, ["svg-title"])
@@ -125,14 +123,14 @@ function G(t, s, n, b, f, h) {
         _: 1
       }, 8, ["variant", "onClick"])), [
         [T, t.searchTooltip ? t.searchTooltip : t.$t("search"), "top"]
-      ]) : a("", !0)
+      ]) : i("", !0)
     ])
   ], 2);
 }
-const ot = /* @__PURE__ */ y(J, [["render", G], ["__scopeId", "data-v-6aa55533"]]);
+const ot = /* @__PURE__ */ y(J, [["render", G], ["__scopeId", "data-v-8d721555"]]);
 export {
   et as B,
   z as S,
   ot as a
 };
-//# sourceMappingURL=index.36742dc7.js.map
+//# sourceMappingURL=index.05d4c01b.js.map

package/dist/chunks/index.05d4c01b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.05d4c01b.js","sources":["../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" :type=\"BentoPaymentMethodType.KLARNA\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-structured-list',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\">\n            <bento-typography :variant=\"labelTypographyVariant\">\n                {{ label }}\n            </bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n                class=\"b-structured-list-item__icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"$t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, PropType } from 'vue';\n\n    // Components\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Directives\n    import { BentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoButton,\n            BentoInfoIcon,\n            BentoTypography,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to display in info icon tooltip in the label to display for the value\n             */\n            labelInfo: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n            const conditionalClasses = computed(() => ({\n                'b-structured-list-item--condensed': isCondensed,\n            }));\n\n            const labelTypographyVariant = computed(() =>\n                isCondensed ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                conditionalClasses,\n                labelTypographyVariant,\n\n                // Types\n                BentoButtonVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["_sfc_main$1","defineComponent","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","_sfc_main","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","isCondensed","inject","conditionalClasses","computed","labelTypographyVariant","BentoTypographyVariant","BentoButtonVariant","_directive_bento_tooltip_directive","resolveDirective","createElementVNode","_hoisted_1","createVNode","_component_bento_typography","_ctx","withCtx","createCommentVNode","_hoisted_2","renderSlot","openBlock","createBlock","_component_copy","_component_search_icon"],"mappings":";;;;;;;;;AAgCI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;oFClCSC,IAAA,OAAA,+CAAA;;;;GCqETC,IAAAF,EAAA;AAAA,EAA+B,MAAA,EAAA,UAAAG,EAAA;AAAA,EACV,MAAA;AAAA,EACX,YAAA;AAAA,IACM,aAAAC;AAAA,IACR,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACJ,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACoC,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA;AAAA,MAII,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,WAAA;AAAA,MAIW,MAAA;AAAA,MACD,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAIM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,eAAA;AAAA,MAIe,MAAA;AAAA,MACL,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,QAAA;AAEI,UAAAC,IAAAC,EAAAV,GAAA,EAAA,GAEAW,IAAAC,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCI,IAAAD;AAAA,MAA+B,MAAAH,IAAAK,EAAA,UAAAA,EAAA;AAAA,IAC2C;AAG1E,WAAA;AAAA;AAAA,MAAO,oBAAAH;AAAA,MAEH,wBAAAE;AAAA;AAAA,MACA,oBAAAE;AAAA,IAGA;AAAA,EACJ;AAER,CAAA;;;yHAlHMC,IAAAC,EAAA,yBAAA;;;EAhBG,GAAA;AAAA,IAHcC,EAAA,MAAAC,GAAA;AAAA,MAAAC,EAAAC,GAAA,EAAA,SAAAC,EAAA,uBAAA,GAAA;AAAA,QAAH,SAAAC,EAAA,MAAA;AAAA;;QAEW,GAAA;AAAA,MAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAAA;QAA+C,KAAA;AAAA,QAAE,OAAA;AAAA;MAE5E,GAAA,MAAA,GAAA,CAAA,cAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAAA,CAAA;AAAA,IAEoBN,EAAA,MAAAO,GAAA;AAAA,MAAAC,EAAAJ,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAsDA,EAAA,QAAAK,EAAA,GAAAC,EAAAC,GAAA;AAAA,QAAhB,KAAA;AAAA,QAAM,OAAA;AAAA;;;QAIpB,KAAA;AAAA,QACnC,OAAA;AAAA,QACK,SAAAP,EAAA,mBAAA;AAAA;MAEa,GAAA;AAAA,QACD,UAAAC,EAAA,MAAA;AAAA,UAAaH,EAAAU,GAAA;AAAA;;;;;;;;;;;"}

package/dist/chunks/{index.1312f359.js → index.0b6c7187.js}

@@ -1,18 +1,17 @@
-import { defineComponent as T, toRefs as A, ref as I, computed as u, watch as L, resolveComponent as b, openBlock as n, createElementBlock as y, normalizeClass as D, withDirectives as F, createElementVNode as c, vModelCheckbox as R, createBlock as g, createCommentVNode as i, withCtx as h, renderSlot as B } from "vue";
+import { defineComponent as T, toRefs as I, ref as A, computed as u, watch as L, resolveComponent as f, openBlock as n, createElementBlock as y, normalizeClass as D, withDirectives as F, createElementVNode as c, vModelCheckbox as R, createBlock as g, createCommentVNode as s, withCtx as h, renderSlot as B } from "vue";
 import { C as $ } from "./checkmark-small.3e93a119.js";
-import { B as O, c as w, a as N } from "./index.1d501e31.js";
+import { B as O, a as w, b as N } from "./index.92f7d550.js";
 import { g as P } from "./unique-id.a2a2b458.js";
 import { u as U } from "./aria-label.ac9651a5.js";
-import { u as Y } from "./use-default-slot-validator.83d977a1.js";
-import { h as k } from "./hasSlot.dceac207.js";
-import { g as j } from "./get-slot-text.2db867f8.js";
-import { _ as z } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/index14.css";
-var s = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(s || {}), _ = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(_ || {});
+import { u as Y } from "./use-has-slot.068222e6.js";
+import { u as j } from "./use-default-slot-validator.83d977a1.js";
+import { g as z } from "./get-slot-text.2db867f8.js";
+import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
+import "../assets/index10.css";
+var i = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(i || {}), k = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(k || {});
 const M = T({
   name: "bento-toggle",
   components: { BentoTypography: O, CheckmarkSmall: $ },
-  inheritAttrs: !1,
   props: {
     /**
      * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label
@@ -34,8 +33,8 @@ const M = T({
      */
     labelPosition: {
       type: String,
-      default: s.BEFORE,
-      validator: (e) => Object.values(s).includes(e)
+      default: i.BEFORE,
+      validator: (e) => Object.values(i).includes(e)
     },
     /**
      * Setting this property to true will set the toggle to read only state.
@@ -54,14 +53,14 @@ const M = T({
   },
   emits: ["input"],
   setup(e, { slots: t, emit: m }) {
-    const { ariaLabel: f } = A(e), d = I(e.value), p = P("toggle-description"), r = k(t)("default"), o = k(t)("description");
-    Y("bento-toggle", r, o);
-    const a = u(() => t.default ? j(t)("default") : null), v = U({
-      ariaLabel: f,
-      label: a,
+    const d = Y(t), { ariaLabel: b } = I(e), p = A(e.value), r = P("toggle-description"), o = d("default"), a = d("description");
+    j("bento-toggle", o, a);
+    const _ = u(() => t.default ? z(t)("default") : null), v = U({
+      ariaLabel: b,
+      label: _,
       defaultFallback: "toggle"
-    }), S = u(() => p ?? null), C = u(() => ({
-      [`b-toggle--${_.LABEL_FIRST}`]: e.labelPosition === s.BEFORE,
+    }), S = u(() => r ?? null), C = u(() => ({
+      [`b-toggle--${k.LABEL_FIRST}`]: e.labelPosition === i.BEFORE,
       "b-toggle--disabled": e.disabled,
       "b-toggle--readonly": e.readonly
     })), E = (l) => {
@@ -72,21 +71,21 @@ const M = T({
     return L(
       () => e.value,
       (l) => {
-        d.value = l;
+        p.value = l;
       }
     ), {
       // Refs
-      toggleInput: d,
+      toggleInput: p,
       // Types
       BentoTypographyElement: w,
       BentoTypographyVariant: N,
       // Values
       computedAriaLabel: v,
       computedDescription: S,
-      defaultSlotValue: r,
-      descriptionSlotValue: o,
+      defaultSlotValue: o,
+      descriptionSlotValue: a,
       conditionalClasses: C,
-      descriptionId: p,
+      descriptionId: r,
       // Events
       onChange: E,
       onClick: V
@@ -96,12 +95,12 @@ const M = T({
 const q = ["aria-label", "aria-describedby", "disabled", "aria-readonly"], G = {
   class: "b-toggle__track",
   "aria-hidden": "true"
-}, H = { class: "b-toggle__handle" }, J = {
+}, J = { class: "b-toggle__handle" }, K = {
   key: 0,
   class: "b-toggle__label-container"
 };
-function K(e, t, m, f, d, p) {
-  const r = b("checkmark-small"), o = b("bento-typography");
+function Q(e, t, m, d, b, p) {
+  const r = f("checkmark-small"), o = f("bento-typography");
   return n(), y("label", {
     class: D(["b-toggle", e.conditionalClasses]),
     "data-testid": "label"
@@ -121,11 +120,11 @@ function K(e, t, m, f, d, p) {
       [R, e.toggleInput]
     ]),
     c("span", G, [
-      c("span", H, [
-        e.toggleInput ? (n(), g(r, { key: 0 })) : i("", !0)
+      c("span", J, [
+        e.toggleInput ? (n(), g(r, { key: 0 })) : s("", !0)
       ])
     ]),
-    e.defaultSlotValue ? (n(), y("span", J, [
+    e.defaultSlotValue ? (n(), y("span", K, [
       e.defaultSlotValue ? (n(), g(o, {
         key: 0,
         el: e.BentoTypographyElement.SPAN,
@@ -136,7 +135,7 @@ function K(e, t, m, f, d, p) {
           B(e.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["el", "variant"])) : i("", !0),
+      }, 8, ["el", "variant"])) : s("", !0),
       e.defaultSlotValue && e.descriptionSlotValue ? (n(), g(o, {
         key: 1,
         id: e.descriptionId,
@@ -148,14 +147,14 @@ function K(e, t, m, f, d, p) {
           B(e.$slots, "description", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["id", "el", "variant"])) : i("", !0)
-    ])) : i("", !0)
+      }, 8, ["id", "el", "variant"])) : s("", !0)
+    ])) : s("", !0)
   ], 2);
 }
-const le = /* @__PURE__ */ z(M, [["render", K], ["__scopeId", "data-v-74988cf7"]]);
+const ne = /* @__PURE__ */ H(M, [["render", Q], ["__scopeId", "data-v-8f65ec93"]]);
 export {
-  s as A,
-  le as B,
-  _ as a
+  i as A,
+  ne as B,
+  k as a
 };
-//# sourceMappingURL=index.1312f359.js.map
+//# sourceMappingURL=index.0b6c7187.js.map

package/dist/chunks/index.0b6c7187.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.0b6c7187.js","sources":["../../../vue2/src/types/label-position.ts","../../../vue2/src/components/toggle/toggle.types.ts","../../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum AdlLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"defaultSlotValue\" class=\"b-toggle__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                data-testid=\"inner-label\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                :id=\"descriptionId\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { AdlLabelPosition } from '@/types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\n             * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n             */\n            ariaLabel: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Disable the toggle (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Position of the label relative to the toggle (optional)\n             * @values before, after\n             */\n            labelPosition: {\n                type: String as PropType<AdlLabelPosition>,\n                default: AdlLabelPosition.BEFORE,\n                validator: (value: AdlLabelPosition) => Object.values(AdlLabelPosition).includes(value),\n            },\n            /**\n             * Setting this property to true will set the toggle to read only state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates if the switch is \"on\" or \"off\"\n             */\n            value: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['input'],\n        setup(props, { slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n            const { ariaLabel } = toRefs(props);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = hasSlot('default');\n            const descriptionSlotValue = hasSlot('description');\n\n            useDefaultSlotValidator('bento-toggle', defaultSlotValue, descriptionSlotValue);\n\n            const labelSlot = computed((): string => (slots.default ? getSlotText(slots)('default') : null));\n\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel,\n                label: labelSlot,\n                defaultFallback: 'toggle',\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === AdlLabelPosition.BEFORE,\n                'b-toggle--disabled': props.disabled,\n                'b-toggle--readonly': props.readonly,\n            }));\n\n            const onChange = (event: Event) => {\n                emit('input', (event.target as HTMLInputElement).checked);\n            };\n\n            // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n            const onClick = (event: Event) => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            watch(\n                () => props.value,\n                newValue => {\n                    toggleInput.value = newValue;\n                }\n            );\n\n            return {\n                // Refs\n                toggleInput,\n\n                // Types\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Events\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["AdlLabelPosition","AdlLabelPosition2","BentoTogglePropClass","BentoTogglePropClass2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","slots","emit","hasSlot","useHasSlot","ariaLabel","toRefs","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","getSlotText","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","BentoTypographyElement","BentoTypographyVariant","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","$event","vModelCheckbox","createElementVNode","_hoisted_3","createBlock","_component_checkmark_small","createCommentVNode","_hoisted_4","_component_bento_typography"],"mappings":"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"}

package/dist/chunks/{index.84d248b7.js → index.0f958a0c.js}

@@ -1,6 +1,6 @@
 import { defineComponent as re, openBlock as ne, createElementBlock as ae, mergeProps as oe, toHandlers as ue, renderSlot as ie, createCommentVNode as ce } from "vue";
 import { _ as se } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/index20.css";
+import "../assets/index38.css";
 var R = "data-focus-lock", fe = "data-focus-lock-disabled", de = "data-no-focus-lock", le = "data-autofocus-inside", ve = "data-no-autofocus", m = function(e) {
   for (var t = Array(e.length), r = 0; r < e.length; ++r)
     t[r] = e[r];
@@ -437,4 +437,4 @@ export {
   Je as B,
   Ge as g
 };
-//# sourceMappingURL=index.84d248b7.js.map
+//# sourceMappingURL=index.0f958a0c.js.map