@adyen/bento-vue3 1.43.0 → 1.45.0

package/dist/chunks/layout-row.9G7yVMVt.js

@@ -0,0 +1,100 @@
+import { defineComponent as $, provide as T, toRef as g, computed as l, createBlock as E, openBlock as d, resolveDynamicComponent as N, unref as u, normalizeClass as c, withCtx as z, renderSlot as m, useSlots as O, inject as x, ref as i, watch as M, nextTick as V, onMounted as j, createElementBlock as k, createCommentVNode as P, createElementVNode as L } from "vue";
+import { _ as B } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as W } from "./typography.DN5eC5ch.js";
+import { u as Y } from "./use-has-slot.B7eQSabc.js";
+import { d as A } from "./index.BMkVmbZj.js";
+import "../assets/layout-row.css";
+const I = Symbol("Layout size inject key"), D = {}, F = /* @__PURE__ */ $({
+  ...D,
+  __name: "layout",
+  props: {
+    variant: { default: "page" },
+    size: { default: "full-width" }
+  },
+  setup(f) {
+    const o = f;
+    T(I, g(o, "size"));
+    const p = l(() => ({
+      "b-layout--component": o.variant === "component"
+    })), t = o.variant === "page" ? "main" : "div";
+    return (a, s) => (d(), E(N(u(t)), {
+      class: c(["b-layout", p.value])
+    }, {
+      default: z(() => [
+        m(a.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), oo = /* @__PURE__ */ B(F, [["__scopeId", "data-v-4426e4ab"]]), H = ["3-9", "9-3", "4-8", "8-4", "6-6"], J = { key: 0 }, K = {}, Q = /* @__PURE__ */ $({
+  ...K,
+  __name: "layout-row",
+  props: {
+    columnsLayout: { default: "6-6" }
+  },
+  setup(f) {
+    const o = f, p = O(), t = Y(p), a = x(I, i("full-width")), s = i(null), _ = i(null), y = i(null), v = l(() => a.value === "full-width"), w = l(() => H.includes(o.columnsLayout)), R = l(() => `b-layout-row--${a.value}`), S = l(() => ({
+      "b-layout-row__column-wrapper": v.value
+    })), h = l(() => {
+      const e = w.value ? o.columnsLayout.split("-") : [6, 6], n = (r) => v.value ? e[r] : a.value;
+      return {
+        col1: `b-layout-row__column--${n(0)}`,
+        col2: `b-layout-row__column--${n(1)}`
+      };
+    });
+    return M(
+      A("(min-width: 768px)"),
+      async (e) => {
+        var r, C, b;
+        await V();
+        const n = ((r = s.value) == null ? void 0 : r.firstChild) === _.value;
+        e && !n ? (C = s.value) == null || C.prepend(_.value) : !e && (o.columnsLayout === "3-9" || o.columnsLayout === "4-8") && ((b = s.value) == null || b.prepend(y.value));
+      },
+      { immediate: !0 }
+    ), j(() => {
+      if (!v.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 (!w.value)
+        throw new Error(
+          `${o.columnsLayout} is not a valid column layout. Please refer to the documentation for the list of available column layouts.`
+        );
+    }), (e, n) => (d(), E(u(W), {
+      el: "div",
+      class: c(["b-layout-row", R.value])
+    }, {
+      default: z(() => [
+        u(t)("default") ? (d(), k("div", J, [
+          m(e.$slots, "default", {}, void 0, !0)
+        ])) : u(t)("col-1") && u(t)("col-2") ? (d(), k("div", {
+          key: 1,
+          ref_key: "row",
+          ref: s,
+          class: c(S.value)
+        }, [
+          L("div", {
+            ref_key: "col1",
+            ref: _,
+            class: c(h.value.col1)
+          }, [
+            m(e.$slots, "col-1", {}, void 0, !0)
+          ], 2),
+          L("div", {
+            ref_key: "col2",
+            ref: y,
+            class: c(h.value.col2)
+          }, [
+            m(e.$slots, "col-2", {}, void 0, !0)
+          ], 2)
+        ], 2)) : P("", !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), eo = /* @__PURE__ */ B(Q, [["__scopeId", "data-v-e71802ef"]]);
+export {
+  eo as a,
+  oo as l
+};
+//# sourceMappingURL=layout-row.9G7yVMVt.js.map

package/dist/chunks/layout-row.9G7yVMVt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-row.9G7yVMVt.js","sources":["../../../vue2/src/components/layout/layout.keys.ts","../../../vue2/src/components/layout/layout.vue","../../../vue2/src/components/layout/layout.types.ts","../../../vue2/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 = withDefaults(defineProps<BentoLayoutProps>(), {\n        size: 'full-width',\n        variant: 'page',\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 = withDefaults(defineProps<BentoLayoutRowProps>(), {\n        columnsLayout: '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","props","__props","provide","toRef","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;;;;;;;;AAnCA,UAAAC,IAAAC;AAKA,IAAAC,EAAAJ,GAAAK,EAAAH,GAAA,MAAA,CAAA;AAEA,UAAAI,IAAAC,EAAA,OAAA;AAAA,MAA2C,uBAAAL,EAAA,YAAA;AAAA,IACE,EAAA,GAG7CM,IAAAN,EAAA,YAAA,SAAA,SAAA;;;;;;;;;;mECjBGO,IAAA,CAAA,OAAA,OAAA,OAAA,OAAA,KAAA,mBC2GHC,IAAA,CAAA;;;;;;;AAnFA,UAAAR,IAAAC,GAIAQ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAAhB,GAAAiB,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,SAAAP,EAAA,aAAA,CAAA,GAEAqB,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,QAAApB,EAAA,cAAA,MAAA,GAAA,IAAA,CAAA,GAAA,CAAA,GACAyB,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,MAAA7B,EAAA,kBAAA,SAAAA,EAAA,kBAAA,YAE7BkC,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,GAAApB,EAAA,aAAA;AAAA,QACgB;AAAA,IAE9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/link.ClFi8uSm.js

@@ -0,0 +1,107 @@
+import { createElementBlock as i, openBlock as a, mergeProps as g, createCommentVNode as _, createElementVNode as T, toDisplayString as C, defineComponent as E, computed as c, createBlock as d, renderSlot as n, unref as r, withCtx as f, createVNode as L } from "vue";
+import { B as h } from "./typography.DN5eC5ch.js";
+import { RouterLink as w } from "vue-router";
+import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/link.css";
+var l = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.QUIET = "quiet", o))(l || {});
+let B = 0;
+const I = {
+  beforeCreate() {
+    this.uuid = B.toString(), B += 1;
+  }
+}, N = { key: 0 };
+function V(o, s, e, m, u, y) {
+  return a(), i("svg", g({ role: "img" }, o.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    o.$attrs["svg-title"] ? (a(), i("title", N, C(o.$attrs["svg-title"]), 1)) : _("", !0),
+    s[0] || (s[0] = T("path", {
+      fill: "#00112C",
+      d: "M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z"
+    }, null, -1))
+  ], 16);
+}
+const U = /* @__PURE__ */ $(I, [["render", V]]), R = ["href", "target"], S = {
+  key: 2,
+  class: "b-link__external-link-icon"
+}, A = /* @__PURE__ */ E({
+  __name: "link",
+  props: {
+    custom: { type: Boolean },
+    activeClass: {},
+    exactActiveClass: {},
+    ariaCurrentValue: {},
+    to: {},
+    replace: { type: Boolean },
+    disableTypography: { type: Boolean },
+    external: { type: Boolean },
+    isButton: { type: Boolean },
+    isNotRouting: { type: Boolean },
+    target: { default: null },
+    truncate: { type: Boolean },
+    variant: { default: l.DEFAULT }
+  },
+  emits: ["click"],
+  setup(o, { emit: s }) {
+    const e = o, m = s, u = c(() => ({
+      "b-link": !e.isButton,
+      [`b-link--${l.QUIET}`]: e.variant === l.QUIET,
+      "b-link--truncate": e.truncate
+    })), y = c(() => e.external ? e.target ?? "_blank" : e.target), b = c(() => !(e.isButton || e.isNotRouting)), k = (t, p) => {
+      m("click", t), p && p();
+    };
+    return (t, p) => {
+      var v;
+      return t.external || t.isNotRouting ? (a(), i("a", g({ key: 0 }, t.$attrs, {
+        href: (v = t.to) == null ? void 0 : v.toString(),
+        target: y.value,
+        class: u.value,
+        onClick: k
+      }), [
+        t.disableTypography ? n(t.$slots, "default", { key: 1 }, void 0, !0) : (a(), d(r(h), {
+          key: 0,
+          class: "b-link__text",
+          el: "span",
+          variant: "body"
+        }, {
+          default: f(() => [
+            n(t.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        })),
+        b.value ? (a(), i("span", S, [
+          L(r(U))
+        ])) : _("", !0)
+      ], 16, R)) : (a(), d(r(w), g({ key: 1 }, { ...e, ...t.$attrs }, {
+        to: e.to,
+        class: u.value,
+        target: t.target,
+        onClick: k
+      }), {
+        default: f(() => [
+          t.disableTypography ? n(t.$slots, "default", { key: 1 }, void 0, !0) : (a(), d(r(h), {
+            key: 0,
+            class: "b-link__text",
+            el: "span",
+            variant: "body"
+          }, {
+            default: f(() => [
+              n(t.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }))
+        ]),
+        _: 3
+      }, 16, ["to", "class", "target"]));
+    };
+  }
+}), q = /* @__PURE__ */ $(A, [["__scopeId", "data-v-992b8c01"]]);
+export {
+  q as B,
+  l as a
+};
+//# sourceMappingURL=link.ClFi8uSm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.ClFi8uSm.js","sources":["../../../core/src/components/link/link.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@3.5.13_typescript@5.6.3_/node_modules/@adyen/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    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        v-bind=\"$attrs\"\n        :href=\"to?.toString()\"\n        :target=\"computedTarget\"\n        :class=\"conditionalClasses\"\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\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...props, ...$attrs }\"\n        :to=\"props.to\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\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    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import { BentoTypography } from '@/components/typography';\n    import { computed } from 'vue';\n    import { RouterLink } from 'vue-router';\n    import type { BentoLinkProps } from './link.types';\n\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n\n    const props = withDefaults(defineProps<BentoLinkProps>(), {\n        target: null,\n        variant: BentoLinkVariant.DEFAULT,\n    });\n\n    const emit = defineEmits(['click']);\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    const computedTarget = computed(() => (props.external ? props.target ?? '_blank' : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const onClick = (e: MouseEvent, navigateCallback?: any) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","props","__props","emit","__emit","conditionalClasses","computed","computedTarget","showExternalLinkIcon","onClick","e","navigateCallback"],"mappings":";;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACER,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AARR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;ACuCzN,UAAAC,IAAAC,GAKAC,IAAAC,GACAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAL,EAAA;AAAA,MACtB,CAAA,WAAAR,EAAA,KAAA,EAAA,GAAAQ,EAAA,YAAAR,EAAA;AAAA,MACyD,oBAAAQ,EAAA;AAAA,IAC9C,EAAA,GAEhCM,IAAAD,EAAA,MAAAL,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAO,IAAAF,EAAA,MAAA,EAAAL,EAAA,YAAAA,EAAA,aAAA,GAGAQ,IAAA,CAAAC,GAAAC,MAAA;AACI,MAAAR,EAAA,SAAAO,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

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

@@ -0,0 +1,55 @@
+import { defineComponent as p, computed as s, resolveComponent as o, createElementBlock as i, openBlock as e, createElementVNode as c, createBlock as l, createCommentVNode as _, createVNode as m, withCtx as d, createTextVNode as b, toDisplayString as g } from "vue";
+import { B as u } from "./tag.BuUbvgok.js";
+import { B as f } from "./typography.DN5eC5ch.js";
+import { _ as y } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/listbox-option-tag.css";
+const h = p({
+  name: "listbox-tag-option",
+  components: {
+    BentoTag: u,
+    BentoTypography: f
+  },
+  props: {
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(t) {
+    return {
+      // Values
+      variant: s(() => t.option.data)
+    };
+  }
+}), v = { class: "b-listbox-tag-option" }, B = { "aria-hidden": "true" };
+function x(t, n, k, C, N, T) {
+  const a = o("bento-tag"), r = o("bento-typography");
+  return e(), i("span", v, [
+    c("span", B, [
+      m(a, {
+        class: "b-listbox-tag-option__tag",
+        label: t.option.value.toString(),
+        variant: t.variant
+      }, null, 8, ["label", "variant"])
+    ]),
+    t.option.label ? (e(), l(r, {
+      key: 0,
+      el: "span",
+      class: "b-listbox-tag-option__label"
+    }, {
+      default: d(() => [
+        b(g(t.option.label), 1)
+      ]),
+      _: 1
+    })) : _("", !0)
+  ]);
+}
+const O = /* @__PURE__ */ y(h, [["render", x], ["__scopeId", "data-v-ca40f8d7"]]);
+export {
+  O as L
+};
+//# sourceMappingURL=listbox-option-tag.zYn_kSFz.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.zYn_kSFz.js","sources":["../../../vue2/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","createElementVNode","_hoisted_2","createVNode","_component_bento_tag","_ctx","option","createTextVNode","toDisplayString","createCommentVNode"],"mappings":";;;;;AAmBI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAC;AAAA,IACR,iBAAAC;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;IAxC2GE,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAC,EAAA,OAAA,MAAA,SAAA;AAAA;MAElEC,GAAAA,MAAAA,GAAAA,CAAAA,SAAAA,SAAAA,CAAAA;AAAAA,IAAY,CAAA;AAAA;MAAW,KAAA;AAAA,MAAM,IAAA;AAAA,MAL7D,OAAA;AAAA,IAAA,GAAA;AAAA;QAAAC,EAAAC,EAAAH,EAAA,OAAA,KAAA,GAAA,CAAA;AAAA,MAAA,CAAA;AAAA,MAAA,GAAA;AAAA,IAAA,CAAA,KAAAI,EAAA,IAAA,EAAA;AAAA;;;"}

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

@@ -0,0 +1,44 @@
+import { defineComponent as t, onMounted as i, onUnmounted as l, computed as s, createElementBlock as d, openBlock as r, normalizeClass as c } from "vue";
+import { _ as m } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/loading-indicator.css";
+var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
+const p = 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 i(() => n(e.START)), l(() => n(e.END)), {
+      conditionalClasses: s(() => ({
+        "b-loading-indicator--inverse": a.inverse,
+        "b-loading-indicator--small": a.small,
+        "b-loading-indicator--large": a.large
+      }))
+    };
+  }
+});
+function u(a, n, o, f, g, _) {
+  return r(), d("div", {
+    class: c(["b-loading-indicator", a.conditionalClasses]),
+    "aria-hidden": "true",
+    "data-testid": "loading-indicator"
+  }, null, 2);
+}
+const b = /* @__PURE__ */ m(p, [["render", u], ["__scopeId", "data-v-611cedd3"]]);
+export {
+  b as B,
+  e as a
+};
+//# sourceMappingURL=loading-indicator.DEepb9Wl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator.DEepb9Wl.js","sources":["../../../core/src/components/loading-indicator/loading-indicator.types.ts","../../../vue2/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","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","normalizeClass"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACQR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,OAAA;AAAA;AAAA;AAAA;AAAA,IACC,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIoC,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAIE;AAAA,EAC7C,OAAA,CAAAH,EAAA,OAAAA,EAAA,GAAA;AAAA,EACwE,MAAAI,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEpE,WAAAC,EAAA,MAAAD,EAAAL,EAAA,KAAA,CAAA,GAEAO,EAAA,MAAAF,EAAAL,EAAA,GAAA,CAAA,GAQA;AAAA,MAAO,oBANPQ,EAAA,OAAA;AAAA,QAA2C,gCAAAJ,EAAA;AAAA,QACD,8BAAAA,EAAA;AAAA,QACF,8BAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAIpC;AAAA,EACJ;AAER,CAAA;AAvCU,SAAAK,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;AAAmD,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAkB,OAAAC,EAAA,CAAA,uBAAAR,EAAA,kBAAA,CAAA;AAAA,IAAgC,eAAA;AAAA;;;;"}