@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/layout-row.C_F2wX6d.js

@@ -0,0 +1,87 @@
+import { defineComponent as y, provide as R, toRef as $, computed as s, useSlots as x, inject as E, ref as _, watch as S, nextTick as g, onMounted as z } from "vue";
+import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as T } from "./typography.J1v_SPG3.js";
+import { u as B } from "./use-has-slot.C9lQZ6nz.js";
+import { f as I } from "./index.BdrLbvtJ.js";
+import "../assets/layout-row.css";
+const h = Symbol("Layout size inject key"), O = {}, P = /* @__PURE__ */ y({
+  ...O,
+  __name: "layout",
+  props: {
+    variant: { default: "page" },
+    size: { default: "full-width" }
+  },
+  setup(n) {
+    const o = n;
+    R(h, $(o, "size"));
+    const l = s(() => ({
+      "b-layout--component": o.variant === "component"
+    })), t = o.variant === "page" ? "main" : "div";
+    return { __sfc: !0, props: o, conditionalClasses: l, wrapperElement: t };
+  }
+});
+var k = function() {
+  var o = this, l = o._self._c, t = o._self._setupProxy;
+  return l(t.wrapperElement, { tag: "component", staticClass: "b-layout", class: t.conditionalClasses }, [o._t("default")], 2);
+}, F = [], M = /* @__PURE__ */ w(
+  P,
+  k,
+  F,
+  !1,
+  null,
+  "6a60a8fd"
+);
+const Z = M.exports, W = ["3-9", "9-3", "4-8", "8-4", "6-6"], j = {}, N = /* @__PURE__ */ y({
+  ...j,
+  __name: "layout-row",
+  props: {
+    columnsLayout: { default: "6-6" }
+  },
+  setup(n) {
+    const o = n, l = x(), t = B(l), a = E(h, _("full-width")), e = _(null), m = _(null), f = _(null), u = s(() => a.value === "full-width"), d = s(() => W.includes(o.columnsLayout)), C = s(() => `b-layout-row--${a.value}`), b = s(() => ({
+      "b-layout-row__column-wrapper": u.value
+    })), L = s(() => {
+      const c = d.value ? o.columnsLayout.split("-") : [6, 6], r = (i) => u.value ? c[i] : a.value;
+      return {
+        col1: `b-layout-row__column--${r(0)}`,
+        col2: `b-layout-row__column--${r(1)}`
+      };
+    });
+    return S(
+      I("(min-width: 768px)"),
+      async (c) => {
+        var i, p, v;
+        await g();
+        const r = ((i = e.value) == null ? void 0 : i.firstChild) === m.value;
+        c && !r ? (p = e.value) == null || p.prepend(m.value) : !c && (o.columnsLayout === "3-9" || o.columnsLayout === "4-8") && ((v = e.value) == null || v.prepend(f.value));
+      },
+      { immediate: !0 }
+    ), z(() => {
+      if (!u.value && (t("col-1") || t("col-2")))
+        throw new Error(
+          "Column slots can only be used with the `full-width` size. Please check documentation for more info."
+        );
+      if (!d.value)
+        throw new Error(
+          `${o.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`
+        );
+    }), { __sfc: !0, props: o, slots: l, hasSlot: t, size: a, row: e, col1: m, col2: f, isFullWidth: u, isValidColumnLayout: d, conditionalRowClass: C, conditionalRowWithColumnsClass: b, conditionalColumnClass: L, BentoTypography: T };
+  }
+});
+var Y = function() {
+  var o = this, l = o._self._c, t = o._self._setupProxy;
+  return l(t.BentoTypography, { staticClass: "b-layout-row", class: t.conditionalRowClass, attrs: { el: "div" } }, [t.hasSlot("default") ? l("div", [o._t("default")], 2) : t.hasSlot("col-1") && t.hasSlot("col-2") ? l("div", { ref: "row", class: t.conditionalRowWithColumnsClass }, [l("div", { ref: "col1", class: t.conditionalColumnClass.col1 }, [o._t("col-1")], 2), l("div", { ref: "col2", class: t.conditionalColumnClass.col2 }, [o._t("col-2")], 2)]) : o._e()]);
+}, A = [], H = /* @__PURE__ */ w(
+  N,
+  Y,
+  A,
+  !1,
+  null,
+  "3dbcb27f"
+);
+const q = H.exports;
+export {
+  q as a,
+  Z as l
+};
+//# sourceMappingURL=layout-row.C_F2wX6d.js.map

package/dist/chunks/layout-row.C_F2wX6d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-row.C_F2wX6d.js","sources":["../../src/components/layout/layout.keys.ts","../../src/components/layout/layout.vue","../../src/components/layout/layout.types.ts","../../src/components/layout/components/layout-row/layout-row.vue"],"sourcesContent":["export const LAYOUT_SIZE_INJECTION_KEY = Symbol('Layout size inject key');\n","<template>\n    <component :is=\"wrapperElement\" class=\"b-layout\" :class=\"conditionalClasses\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef } from 'vue';\n    import { BentoLayoutProps } from './layout.types';\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  variant: { default: 'page' },\n  size: { default: 'full-width' }\n});\n\n    provide(LAYOUT_SIZE_INJECTION_KEY, toRef(props, 'size'));\n\n    const conditionalClasses = computed(() => ({\n        'b-layout--component': props.variant === 'component',\n    }));\n\n    const wrapperElement = props.variant === 'page' ? 'main' : 'div';\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Layout is a basic scaffolding of a page that defines spacing, some functionality and responsive behaviour of its top level sections.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout size=\"narrow\">\n     *              <bento-layout-row>\n     *                  Row 1\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  Row 2\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout.scss\" />\n","/**\n * @private\n */\nexport const BentoLayoutVariantOptions = ['page', 'component'] as const;\nexport const BentoLayoutSizeOptions = ['full-width', 'narrow', 'half-width'] as const;\nexport const BentoLayoutRowColumnLayoutOptions = ['3-9', '9-3', '4-8', '8-4', '6-6'] as const;\n\n// Public\nexport type BentoLayoutVariant = (typeof BentoLayoutVariantOptions)[number];\nexport type BentoLayoutSize = (typeof BentoLayoutSizeOptions)[number];\nexport type BentoLayoutRowColumnLayout = (typeof BentoLayoutRowColumnLayoutOptions)[number];\n\nexport interface BentoLayoutProps {\n    /** Defines if the layout is used in a page or only a section */\n    variant?: BentoLayoutVariant;\n    /** Defines the size of the page */\n    size?: BentoLayoutSize;\n}\n\nexport interface BentoLayoutRowProps {\n    /** Sets the layout of the columns when multiple columns are used */\n    columnsLayout?: BentoLayoutRowColumnLayout;\n}\n","<template>\n    <bento-typography el=\"div\" class=\"b-layout-row\" :class=\"conditionalRowClass\">\n        <div v-if=\"hasSlot('default')\">\n            <slot />\n        </div>\n        <div v-else-if=\"hasSlot('col-1') && hasSlot('col-2')\" ref=\"row\" :class=\"conditionalRowWithColumnsClass\">\n            <div ref=\"col1\" :class=\"conditionalColumnClass.col1\">\n                <slot name=\"col-1\"></slot>\n            </div>\n            <div ref=\"col2\" :class=\"conditionalColumnClass.col2\">\n                <slot name=\"col-2\"></slot>\n            </div>\n        </div>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, ref, Ref, useSlots, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import {\n        BentoLayoutRowColumnLayoutOptions,\n        type BentoLayoutRowProps,\n        type BentoLayoutSize,\n    } from '../../layout.types';\n    import { useMediaQuery } from '@vueuse/core';\n\n    import { LAYOUT_SIZE_INJECTION_KEY } from '@/components/layout/layout.keys';\n\n    const props = defineProps({\n  columnsLayout: { default: '6-6' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const size = inject<Ref<BentoLayoutSize>>(LAYOUT_SIZE_INJECTION_KEY, ref('full-width'));\n\n    const row = ref<HTMLElement>(null);\n    const col1 = ref<HTMLElement>(null);\n    const col2 = ref<HTMLElement>(null);\n\n    const isFullWidth = computed(() => size.value === 'full-width');\n    const isValidColumnLayout = computed(() => BentoLayoutRowColumnLayoutOptions.includes(props.columnsLayout));\n\n    const conditionalRowClass = computed(() => `b-layout-row--${size.value}`);\n\n    const conditionalRowWithColumnsClass = computed(() => ({\n        'b-layout-row__column-wrapper': isFullWidth.value,\n    }));\n\n    const conditionalColumnClass = computed(() => {\n        const columns = isValidColumnLayout.value ? props.columnsLayout.split('-') : [6, 6];\n        const getColumnModifier = index => (isFullWidth.value ? columns[index] : size.value);\n\n        return {\n            col1: `b-layout-row__column--${getColumnModifier(0)}`,\n            col2: `b-layout-row__column--${getColumnModifier(1)}`,\n        };\n    });\n\n    watch(\n        useMediaQuery('(min-width: 768px)'),\n        async isLargeScreen => {\n            await nextTick();\n            const areColumnsInTheRightOrder = row.value?.firstChild === col1.value;\n            if (isLargeScreen && !areColumnsInTheRightOrder) {\n                row.value?.prepend(col1.value);\n            } else if (!isLargeScreen && (props.columnsLayout === '3-9' || props.columnsLayout === '4-8')) {\n                row.value?.prepend(col2.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    onMounted(() => {\n        if (!isFullWidth.value && (hasSlot('col-1') || hasSlot('col-2'))) {\n            throw new Error(\n                'Column slots can only be used with the `full-width` size. Please check documentation for more info.'\n            );\n        }\n\n        if (!isValidColumnLayout.value) {\n            throw new Error(\n                `${props.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Page row is subcomponent of Layout meant to be used to generate the row layout.\n     *\n     * @example\n     * import { BentoLayout, BentoLayoutRow } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLayout, BentoLayoutRow },\n     *     template: `\n     *          <bento-layout>\n     *              <bento-layout-row columns-layout=\"3-9\">\n     *                  <template #col-1>Narrow 3-9</template>\n     *                  <template #col-2>Wide 3-9</template>\n     *              </bento-layout-row>\n     *              <bento-layout-row>\n     *                  <template #col-1>6-6</template>\n     *                  <template #col-2>6-6</template>\n     *              </bento-layout-row>\n     *          </bento-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./layout-row.scss\" />\n"],"names":["LAYOUT_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","conditionalClasses","computed","wrapperElement","BentoLayoutRowColumnLayoutOptions","__default__","slots","useSlots","hasSlot","useHasSlot","size","inject","ref","row","col1","col2","isFullWidth","isValidColumnLayout","conditionalRowClass","conditionalRowWithColumnsClass","conditionalColumnClass","columns","getColumnModifier","index","watch","useMediaQuery","isLargeScreen","nextTick","areColumnsInTheRightOrder","_a","_b","_c","onMounted"],"mappings":";;;;;;AAAa,MAAAA,IAAA,OAAA,wBAAA,GC8CTC,IAAA,CAAA;;;;;;;;;AA9BA,IAAAC,EAAAF,GAAAG,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,uBAAAF,EAAA,YAAA;AAAA,IACE,EAAA,GAG7CG,IAAAH,EAAA,YAAA,SAAA,SAAA;;;;;;;;;;;;;;;qBCjBGI,IAAA,CAAA,OAAA,OAAA,OAAA,OAAA,KAAA,GC2GHC,IAAA,CAAA;;;;;;;iBA/EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAAf,GAAAgB,EAAA,YAAA,CAAA,GAEAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GAEAI,IAAAd,EAAA,MAAAQ,EAAA,UAAA,YAAA,GACAO,IAAAf,EAAA,MAAAE,EAAA,SAAAJ,EAAA,aAAA,CAAA,GAEAkB,IAAAhB,EAAA,MAAA,iBAAAQ,EAAA,KAAA,EAAA,GAEAS,IAAAjB,EAAA,OAAA;AAAA,MAAuD,gCAAAc,EAAA;AAAA,IACP,EAAA,GAGhDI,IAAAlB,EAAA,MAAA;AACI,YAAAmB,IAAAJ,EAAA,QAAAjB,EAAA,cAAA,MAAA,GAAA,IAAA,CAAA,GAAA,CAAA,GACAsB,IAAA,CAAAC,MAAAP,EAAA,QAAAK,EAAAE,CAAA,IAAAb,EAAA;AAEA,aAAA;AAAA,QAAO,MAAA,yBAAAY,EAAA,CAAA,CAAA;AAAA,QACgD,MAAA,yBAAAA,EAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACvD,CAAA;AAGJ,WAAAE;AAAA,MAAAC,EAAA,oBAAA;AAAA,MACsC,OAAAC,MAAA;;AAE9B,cAAAC,EAAA;AACA,cAAAC,MAAAC,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,gBAAAf,EAAA;AACA,QAAAY,KAAA,CAAAE,KACIE,IAAAjB,EAAA,UAAA,QAAAiB,EAAA,QAAAhB,EAAA,SAA6B,CAAAY,MAAA1B,EAAA,kBAAA,SAAAA,EAAA,kBAAA,YAE7B+B,IAAAlB,EAAA,UAAA,QAAAkB,EAAA,QAAAhB,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAGtBiB,EAAA,MAAA;AACI,UAAA,CAAAhB,EAAA,UAAAR,EAAA,OAAA,KAAAA,EAAA,OAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAIR,UAAA,CAAAS,EAAA;AACI,cAAA,IAAA;AAAA,UAAU,GAAAjB,EAAA,aAAA;AAAA,QACgB;AAAA,IAE9B,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/link.D0P79Toh.js

@@ -0,0 +1,95 @@
+import { defineComponent as v, computed as r } from "vue";
+import { RouterLink as m } from "vue-router";
+import { g as y } from "./generate-uid.NJ8tVoha.js";
+import { B as k } from "./typography.J1v_SPG3.js";
+import { u as b } from "./i18n.BQkEbtPM.js";
+/* empty css              */
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/link.css";
+var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.QUIET = "quiet", a))(s || {});
+let c = 0;
+const x = {
+  beforeCreate() {
+    this.uuid = c.toString(), c += 1;
+  }
+};
+var h = function() {
+  var t = this, e = t._self._c;
+  return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", d: "M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z" } })]);
+}, C = [], B = /* @__PURE__ */ p(
+  x,
+  h,
+  C,
+  !1,
+  null,
+  null
+);
+const T = B.exports, L = {
+  "en-US": {
+    opensInNewTab: "Opens in new tab"
+  }
+}, $ = {
+  name: "bento-link",
+  inheritAttrs: !1,
+  i18n: { messages: L }
+}, I = /* @__PURE__ */ v({
+  ...$,
+  props: {
+    to: null,
+    replace: { type: Boolean },
+    append: { type: Boolean },
+    tag: null,
+    activeClass: null,
+    exact: { type: Boolean },
+    exactPath: { type: Boolean },
+    exactPathActiveClass: null,
+    event: null,
+    exactActiveClass: null,
+    ariaCurrentValue: null,
+    disableTypography: { type: Boolean },
+    external: { type: Boolean },
+    isButton: { type: Boolean },
+    isNotRouting: { type: Boolean },
+    target: { default: null },
+    truncate: { type: Boolean },
+    variant: { default: s.DEFAULT }
+  },
+  emits: ["click"],
+  setup(a, { emit: t }) {
+    const e = a, { t: n } = b(), i = {
+      variant: void 0,
+      isButton: void 0,
+      truncate: void 0,
+      disableTypography: void 0,
+      external: void 0,
+      isNotRouting: void 0
+    }, u = y("external-link"), _ = (o) => o, d = r(() => ({
+      "b-link": !e.isButton,
+      [`b-link--${s.QUIET}`]: e.variant === s.QUIET,
+      "b-link--truncate": e.truncate
+    })), f = r(() => e.external ? e.target ?? "_blank" : e.target), g = r(() => !(e.isButton || e.isNotRouting));
+    return { __sfc: !0, t: n, props: e, nonForwardedProps: i, externalLinkId: u, getAttributeTitle: _, conditionalClasses: d, computedTarget: f, showExternalLinkIcon: g, emit: t, onClick: (o, l) => {
+      t("click", o), l && l();
+    }, RouterLink: m, BentoTypography: k, ExternalLinkIcon: T };
+  }
+});
+var w = function() {
+  var t = this, e = t._self._c, n = t._self._setupProxy;
+  return t.external || t.isNotRouting ? e("a", t._b({ class: n.conditionalClasses, attrs: { "aria-describedby": n.externalLinkId, href: t.$props.to.toString(), title: n.getAttributeTitle(t.$attrs.title), target: n.computedTarget }, on: { click: n.onClick } }, "a", t.$attrs, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2), n.showExternalLinkIcon ? e("span", { staticClass: "b-link__external-link-icon", attrs: { "aria-hidden": "true" } }, [e(n.ExternalLinkIcon)], 1) : t._e(), t.external ? e("span", { staticClass: "b-link--visually-hidden", attrs: { id: n.externalLinkId } }, [t._v(t._s(n.t("opensInNewTab")))]) : t._e()], 2) : e(n.RouterLink, t._b({ class: n.conditionalClasses, attrs: { target: t.target, to: n.props.to, custom: "" }, nativeOn: { click: function(i) {
+    return n.onClick.apply(null, arguments);
+  } } }, "router-link", { ...t.$attrs, ...t.$props, ...n.nonForwardedProps }, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2);
+}, E = [], R = /* @__PURE__ */ p(
+  I,
+  w,
+  E,
+  !1,
+  null,
+  "6817077a"
+);
+const V = R.exports;
+export {
+  V as B,
+  T as E,
+  s as a
+};
+//# sourceMappingURL=link.D0P79Toh.js.map

package/dist/chunks/link.D0P79Toh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.D0P79Toh.js","sources":["../../../core/src/components/link/link.types.ts","../../../ui-assets/icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n\nexport interface LinkProps {\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link and renders an external link icon.\n     */\n    external?: boolean;\n\n    /**\n     * Set to true if used inside a `BentoButton` component.\n     */\n    isButton?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    isNotRouting?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    /**\n     * Set to true to truncate link. Doesn't work with disableTypography.\n     */\n    truncate?: boolean;\n\n    /**\n     * Link variant type affecting visual style.\n     * @values default, quiet\n     */\n    variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :aria-describedby=\"externalLinkId\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" aria-hidden=\"true\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n        <span v-if=\"external\" :id=\"externalLinkId\" class=\"b-link--visually-hidden\">{{ t('opensInNewTab') }}</span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props, ...nonForwardedProps }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router.d.ts';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n    import type { BentoLinkProps } from './link.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  to: null,\n  replace: { type: Boolean },\n  append: { type: Boolean },\n  tag: null,\n  activeClass: null,\n  exact: { type: Boolean },\n  exactPath: { type: Boolean },\n  exactPathActiveClass: null,\n  event: null,\n  exactActiveClass: null,\n  ariaCurrentValue: null,\n  disableTypography: { type: Boolean },\n  external: { type: Boolean },\n  isButton: { type: Boolean },\n  isNotRouting: { type: Boolean },\n  target: { default: null },\n  truncate: { type: Boolean },\n  variant: { default: BentoLinkVariant.DEFAULT }\n});\n\n    // Props that should not be forwarded to the underlying anchor element\n    const nonForwardedProps = {\n        variant: undefined,\n        isButton: undefined,\n        truncate: undefined,\n        disableTypography: undefined,\n        external: undefined,\n        isNotRouting: undefined,\n    };\n\n    const externalLinkId = generateUid('external-link');\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? (props.target ?? '_blank') : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","messages","t","useI18n","nonForwardedProps","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACIZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GC4GIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBA5EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAwBAC,IAAA;AAAA,MAA0B,SAAA;AAAA,MACb,UAAA;AAAA,MACC,UAAA;AAAA,MACA,mBAAA;AAAA,MACS,UAAA;AAAA,MACT,cAAA;AAAA,IACI,GAGlBC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAf,EAAA,KAAA,EAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,MACyD,oBAAAe,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;4LAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/listbox-option-tag.CczGPhWH.js

@@ -0,0 +1,44 @@
+import { defineComponent as n, computed as e } from "vue";
+import { B as r } from "./tag.DDjyf2hd.js";
+import { B as s } from "./typography.J1v_SPG3.js";
+import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/listbox-option-tag.css";
+const p = n({
+  name: "listbox-tag-option",
+  components: {
+    BentoTag: r,
+    BentoTypography: s
+  },
+  props: {
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(a) {
+    return {
+      // Values
+      variant: e(() => a.option.data)
+    };
+  }
+});
+var l = function() {
+  var t = this, o = t._self._c;
+  return t._self._setupProxy, o("span", { staticClass: "b-listbox-tag-option" }, [o("span", { attrs: { "aria-hidden": "true" } }, [o("bento-tag", { staticClass: "b-listbox-tag-option__tag", attrs: { label: t.option.value.toString(), variant: t.variant } })], 1), t.option.label ? o("bento-typography", { staticClass: "b-listbox-tag-option__label", attrs: { el: "span" } }, [t._v(" " + t._s(t.option.label) + " ")]) : t._e()], 1);
+}, _ = [], m = /* @__PURE__ */ i(
+  p,
+  l,
+  _,
+  !1,
+  null,
+  "83a3d6e2"
+);
+const u = m.exports;
+export {
+  u as L
+};
+//# sourceMappingURL=listbox-option-tag.CczGPhWH.js.map

package/dist/chunks/listbox-option-tag.CczGPhWH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.CczGPhWH.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/loading-indicator.z8COalOc.js

@@ -0,0 +1,48 @@
+import { defineComponent as t, onMounted as s, onUnmounted as i, computed as l } from "vue";
+import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/loading-indicator.css";
+var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
+const d = t({
+  name: "bento-loading-indicator",
+  props: {
+    /**
+     * Displays the loading indicator in a small size
+     */
+    small: { type: Boolean, default: !1 },
+    /**
+     * Displays the loading indicator in a large size
+     */
+    large: { type: Boolean, default: !1 },
+    /**
+     * Displays the loading indicator in a white variant
+     */
+    inverse: { type: Boolean, default: !1 }
+  },
+  emits: [e.START, e.END],
+  setup(a, { emit: n }) {
+    return s(() => n(e.START)), i(() => n(e.END)), {
+      conditionalClasses: l(() => ({
+        "b-loading-indicator--inverse": a.inverse,
+        "b-loading-indicator--small": a.small,
+        "b-loading-indicator--large": a.large
+      }))
+    };
+  }
+});
+var c = function() {
+  var n = this, o = n._self._c;
+  return n._self._setupProxy, o("div", { staticClass: "b-loading-indicator", class: n.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "loading-indicator" } });
+}, m = [], f = /* @__PURE__ */ r(
+  d,
+  c,
+  m,
+  !1,
+  null,
+  "496bc682"
+);
+const p = f.exports;
+export {
+  p as B,
+  e as a
+};
+//# sourceMappingURL=loading-indicator.z8COalOc.js.map

package/dist/chunks/loading-indicator.z8COalOc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator.z8COalOc.js","sources":["../../../core/src/components/loading-indicator/loading-indicator.types.ts","../../src/components/loading-indicator/loading-indicator.vue"],"sourcesContent":["export enum BentoLoadingIndicatorEvent {\n    START = 'loading-start',\n    END = 'loading-end',\n}\n","<template>\n    <div class=\"b-loading-indicator\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"loading-indicator\" />\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted } from 'vue';\n    import { BentoLoadingIndicatorEvent } from '@/core/components/loading-indicator/loading-indicator.types';\n\n    export default defineComponent({\n        name: 'bento-loading-indicator',\n        props: {\n            /**\n             * Displays the loading indicator in a small size\n             */\n            small: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a large size\n             */\n            large: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a white variant\n             */\n            inverse: { type: Boolean, default: false },\n        },\n        emits: [BentoLoadingIndicatorEvent.START, BentoLoadingIndicatorEvent.END],\n        setup(props, { emit }) {\n            onMounted(() => emit(BentoLoadingIndicatorEvent.START));\n\n            onUnmounted(() => emit(BentoLoadingIndicatorEvent.END));\n\n            const conditionalClasses = computed(() => ({\n                'b-loading-indicator--inverse': props.inverse,\n                'b-loading-indicator--small': props.small,\n                'b-loading-indicator--large': props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-indicator/loading-indicator.scss\" />\n"],"names":["BentoLoadingIndicatorEvent","BentoLoadingIndicatorEvent2","_sfc_main","defineComponent","props","emit","onMounted","onUnmounted","computed"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACQZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAH,EAAA,OAAAA,EAAA,GAAA;AAAA,EACA,MAAAI,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,WAAAC,EAAA,MAAAD,EAAAL,EAAA,KAAA,CAAA,GAEAO,EAAA,MAAAF,EAAAL,EAAA,GAAA,CAAA,GAQA;AAAA,MAAA,oBANAQ,EAAA,OAAA;AAAA,QAAA,gCAAAJ,EAAA;AAAA,QACA,8BAAAA,EAAA;AAAA,QACA,8BAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}