@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/chevron-left.DOMTgGel.js

@@ -0,0 +1,43 @@
+/* empty css              */
+import { n } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+let e = 0;
+const a = {
+  beforeCreate() {
+    this.uuid = e.toString(), e += 1;
+  }
+};
+var l = function() {
+  var t = this, s = t._self._c;
+  return s("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"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", d: "M4.43945 12.9999L9.43945 7.99988L4.43945 2.99988L5.50011 1.93922L11.5608 7.99988L5.50011 14.0605L4.43945 12.9999Z" } })]);
+}, _ = [], o = /* @__PURE__ */ n(
+  a,
+  l,
+  _,
+  !1,
+  null,
+  null
+);
+const m = o.exports;
+let r = 0;
+const c = {
+  beforeCreate() {
+    this.uuid = r.toString(), r += 1;
+  }
+};
+var v = function() {
+  var t = this, s = t._self._c;
+  return s("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"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", d: "M11.5606 3.00011L6.56056 8.00011L11.5606 13.0001L10.4999 14.0608L4.43924 8.00011L10.4999 1.93945L11.5606 3.00011Z" } })]);
+}, f = [], g = /* @__PURE__ */ n(
+  c,
+  v,
+  f,
+  !1,
+  null,
+  null
+);
+const d = g.exports;
+export {
+  m as C,
+  d as a
+};
+//# sourceMappingURL=chevron-left.DOMTgGel.js.map

package/dist/chunks/chevron-left.DOMTgGel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-left.DOMTgGel.js","sources":["../../../ui-assets/icons-16/dist/vue/chevron-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left.vue"],"sourcesContent":["\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=\"M4.43945 12.9999L9.43945 7.99988L4.43945 2.99988L5.50011 1.93922L11.5608 7.99988L5.50011 14.0605L4.43945 12.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","\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=\"M11.5606 3.00011L6.56056 8.00011L11.5606 13.0001L10.4999 14.0608L4.43924 8.00011L10.4999 1.93945L11.5606 3.00011Z\"/></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"],"names":["uuid","_sfc_main"],"mappings":";;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/chevron-up.CSVyoaTy.js

@@ -0,0 +1,43 @@
+/* empty css              */
+import { n } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+let e = 0;
+const i = {
+  beforeCreate() {
+    this.uuid = e.toString(), e += 1;
+  }
+};
+var l = function() {
+  var t = this, s = t._self._c;
+  return s("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"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", d: "M2.99988 4.43923L7.99988 9.43923L12.9999 4.43923L14.0605 5.49989L7.99988 11.5605L1.93922 5.49989L2.99988 4.43923Z" } })]);
+}, o = [], _ = /* @__PURE__ */ n(
+  i,
+  l,
+  o,
+  !1,
+  null,
+  null
+);
+const m = _.exports;
+let r = 0;
+const c = {
+  beforeCreate() {
+    this.uuid = r.toString(), r += 1;
+  }
+};
+var v = function() {
+  var t = this, s = t._self._c;
+  return s("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"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#00112C", d: "M12.9999 11.5605L7.99989 6.56055L2.99988 11.5605L1.93922 10.4999L7.99989 4.43923L14.0605 10.4999L12.9999 11.5605Z" } })]);
+}, f = [], g = /* @__PURE__ */ n(
+  c,
+  v,
+  f,
+  !1,
+  null,
+  null
+);
+const d = g.exports;
+export {
+  d as C,
+  m as a
+};
+//# sourceMappingURL=chevron-up.CSVyoaTy.js.map

package/dist/chunks/chevron-up.CSVyoaTy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-up.CSVyoaTy.js","sources":["../../../ui-assets/icons-16/dist/vue/chevron-down.vue","../../../ui-assets/icons-16/dist/vue/chevron-up.vue"],"sourcesContent":["\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.99988 4.43923L7.99988 9.43923L12.9999 4.43923L14.0605 5.49989L7.99988 11.5605L1.93922 5.49989L2.99988 4.43923Z\"/></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","\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=\"M12.9999 11.5605L7.99989 6.56055L2.99988 11.5605L1.93922 10.4999L7.99989 4.43923L14.0605 10.4999L12.9999 11.5605Z\"/></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"],"names":["uuid","_sfc_main"],"mappings":";;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/chip.bZEhHfIk.js

@@ -0,0 +1,63 @@
+import { defineComponent as l, computed as s } from "vue";
+import { B as i } from "./base-button.-gx_u8Bd.js";
+import { B as p } from "./typography.J1v_SPG3.js";
+import { C as m } from "./cross-small.CZqsjZDz.js";
+import { u as d } from "./i18n.BQkEbtPM.js";
+import { t as u } from "./truncate.BfIl_-71.js";
+import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/chip.css";
+const f = {
+  "en-US": {
+    remove: "Remove"
+  },
+  "ja-JP": {
+    remove: "削除"
+  },
+  "pt-BR": {
+    remove: "Remover"
+  }
+}, y = { i18n: { messages: f } }, h = /* @__PURE__ */ l({
+  ...y,
+  __name: "chip",
+  props: {
+    label: null,
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    condensed: { type: Boolean, default: !1 },
+    characterLimit: { default: null }
+  },
+  emits: ["click"],
+  setup(a, { emit: o }) {
+    const e = a, { t } = d(), n = s(
+      () => e.characterLimit ? u(e.label, e.characterLimit) : e.label
+    ), r = s(
+      () => e.condensed ? "caption" : "body"
+    ), c = s(() => ({
+      "b-chip--condensed": e.condensed,
+      "b-chip--readonly": e.readonly && !e.disabled,
+      "b-chip--error": e.error
+    }));
+    return { __sfc: !0, props: e, emit: o, t, computedLabel: n, computedTypographyVariant: r, conditionalClasses: c, BaseButton: i, BentoTypography: p, CrossSmallIcon: m };
+  }
+});
+var b = function() {
+  var o = this, e = o._self._c, t = o._self._setupProxy;
+  return e(t.BaseButton, { staticClass: "b-chip", class: t.conditionalClasses, attrs: { disabled: o.disabled }, on: { click: function(n) {
+    return t.emit("click");
+  } }, scopedSlots: o._u([{ key: "iconRight", fn: function() {
+    return [e(t.CrossSmallIcon, { staticClass: "b-chip__icon", attrs: { "svg-title": t.t("remove") } })];
+  }, proxy: !0 }]) }, [e(t.BentoTypography, { staticClass: "b-chip__text", attrs: { el: "span", variant: t.computedTypographyVariant } }, [o._v(" " + o._s(t.computedLabel) + " ")])], 1);
+}, v = [], B = /* @__PURE__ */ _(
+  h,
+  b,
+  v,
+  !1,
+  null,
+  "dedf8f97"
+);
+const S = B.exports;
+export {
+  S as B
+};
+//# sourceMappingURL=chip.bZEhHfIk.js.map

package/dist/chunks/chip.bZEhHfIk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.bZEhHfIk.js","sources":["../../src/components/chip/chip.vue"],"sourcesContent":["<template>\n    <base-button class=\"b-chip\" :disabled=\"disabled\" :class=\"conditionalClasses\" @click=\"emit('click')\">\n        <bento-typography el=\"span\" :variant=\"computedTypographyVariant\" class=\"b-chip__text\">\n            {{ computedLabel }}\n        </bento-typography>\n        <template #iconRight><cross-small-icon :svg-title=\"t('remove')\" class=\"b-chip__icon\" /></template>\n    </base-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { BaseButton } from '@/components/internal/base-button';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n    import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { truncate } from '@/utils/ts/truncate';\n\n    import type { BentoChipProps } from './chip.types';\n\n    import messages from './messages.json';\n    import { computed } from 'vue';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  label: null,\n  disabled: { type: Boolean, default: false },\n  readonly: { type: Boolean, default: false },\n  error: { type: Boolean, default: false },\n  condensed: { type: Boolean, default: false },\n  characterLimit: { default: null }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const computedLabel = computed(() =>\n        props.characterLimit ? truncate(props.label, props.characterLimit) : props.label\n    );\n\n    const computedTypographyVariant = computed<`${BentoTypographyVariant}`>(() =>\n        props.condensed ? 'caption' : 'body'\n    );\n\n    const conditionalClasses = computed(() => ({\n        'b-chip--condensed': props.condensed,\n        'b-chip--readonly': props.readonly && !props.disabled,\n        'b-chip--error': props.error,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Chip is a dismissible tag-like component that can be used to display selected items, which may need to be removed by the user.\n     *\n     * @example\n     * import { BentoChip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoChip },\n     *     template: `\n     *          <bento-chip\n     *              label=\"Label\"\n     *              :character-limit=\"20\"\n     *              condensed\n     *              @click=\"removeChip()\"\n     *\n     *          />\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./chip.scss\" />\n"],"names":["__default__","messages","useI18n","computedLabel","computed","props","truncate","computedTypographyVariant","conditionalClasses"],"mappings":";;;;;;;;;;;;;;;;;;GAwEIA,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;iBArCA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC;AAAA,MAAsB,MAAAC,EAAA,iBAAAC,EAAAD,EAAA,OAAAA,EAAA,cAAA,IAAAA,EAAA;AAAA,IACyD,GAG/EE,IAAAH;AAAA,MAAkC,MAAAC,EAAA,YAAA,YAAA;AAAA,IACA,GAGlCG,IAAAJ,EAAA,OAAA;AAAA,MAA2C,qBAAAC,EAAA;AAAA,MACZ,oBAAAA,EAAA,YAAA,CAAAA,EAAA;AAAA,MACkB,iBAAAA,EAAA;AAAA,IACtB,EAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/click-outside.C1Ud8AA2.js

@@ -0,0 +1,23 @@
+import { defineComponent as o, ref as d, h as a } from "vue";
+import { o as p } from "./on-click-outside.D9aY9g8G.js";
+const l = /* @__PURE__ */ o({
+  name: "bento-click-outside",
+  props: {
+    /**
+     * Sets the HTML DOM element.
+     */
+    el: { type: String, default: "div" }
+  },
+  emits: ["handler"],
+  setup(r, { emit: i, slots: t }) {
+    const n = d(null);
+    return p(n, (e) => i("handler", e)), () => {
+      var e;
+      return a(r.el, { ref: n }, (e = t.default) == null ? void 0 : e.call(t));
+    };
+  }
+});
+export {
+  l as B
+};
+//# sourceMappingURL=click-outside.C1Ud8AA2.js.map

package/dist/chunks/click-outside.C1Ud8AA2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-outside.C1Ud8AA2.js","sources":["../../src/components/click-outside/click-outside.ts"],"sourcesContent":["import { defineComponent, h, ref } from 'vue';\nimport { onClickOutside } from '@/directives/click-outside/on-click-outside';\n\nexport const BentoClickOutside = /* #__PURE__ */ defineComponent({\n    name: 'bento-click-outside',\n    props: {\n        /**\n         * Sets the HTML DOM element.\n         */\n        el: { type: String, default: 'div' },\n    },\n    emits: ['handler'],\n    setup(props, { emit, slots }) {\n        const target = ref(null);\n\n        onClickOutside(target, event => emit('handler', event));\n\n        return () => h(props.el, { ref: target }, slots.default?.());\n    },\n});\n"],"names":["BentoClickOutside","defineComponent","props","emit","slots","target","ref","onClickOutside","event","h","_a"],"mappings":";;AAGO,MAAMA,IAAoD,gBAAAC,EAAA;AAAA,EAC7D,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIH,IAAI,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,EACvC;AAAA,EACA,OAAO,CAAC,SAAS;AAAA,EACjB,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AACpB,UAAAC,IAASC,EAAI,IAAI;AAEvB,WAAAC,EAAeF,GAAQ,CAAAG,MAASL,EAAK,WAAWK,CAAK,CAAC,GAE/C,MAAM;;AAAA,aAAAC,EAAEP,EAAM,IAAI,EAAE,KAAKG,EAAO,IAAGK,IAAAN,EAAM,YAAN,gBAAAM,EAAA,KAAAN,EAAiB;AAAA;AAAA,EAAA;AAEnE,CAAC;"}

package/dist/chunks/code-snippet.BlYhf-Dt.js

@@ -0,0 +1,259 @@
+import { defineComponent as M, ref as g, computed as l, shallowRef as N, onMounted as Q, watch as Y, watchEffect as H } from "vue";
+import { s as V, H as D, t as e, L as Z, a as j, b as J, c as W, p as U, j as G, d as z, x as F, e as X, E as K, h as q, k as ee, C as _, f as P, i as te, g as T, l as ne, m as ae } from "./codemirror.Zv80n3Z2.js";
+import { b as oe, c as se, d as re, e as ie } from "./es6.n1ewaW31.js";
+import { B as le } from "./dropdown.Cx-3TGBk.js";
+import { B as ce } from "./button.BuD-IsW5.js";
+import { B as de } from "./typography.J1v_SPG3.js";
+import { B as pe } from "./loading-indicator.z8COalOc.js";
+import { u as ge } from "./i18n.BQkEbtPM.js";
+import { E as ue } from "./expand.C263WARj.js";
+import { h as fe } from "./base-modal.xA_DhHx9.js";
+import { C as he } from "./copy.Bod4H2Dk.js";
+import { n as me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/code-snippet.css";
+const _e = {
+  red: oe,
+  orange: ie,
+  green: se,
+  blue: re,
+  invalid: "#ffffff"
+}, be = (t, n) => D.define([
+  {
+    tag: e.keyword,
+    color: t.red
+  },
+  {
+    tag: [e.name, e.deleted, e.character, e.propertyName, e.macroName],
+    color: t.green
+  },
+  {
+    tag: [e.function(e.variableName), e.labelName],
+    color: t.blue
+  },
+  {
+    tag: [e.color, e.constant(e.name), e.standard(e.name)],
+    color: t.red
+  },
+  {
+    tag: [e.definition(e.name), ...n !== "json" ? [e.separator] : []],
+    color: t.red
+  },
+  {
+    tag: [e.typeName, e.className, e.number, e.changed, e.annotation, e.modifier, e.self, e.namespace],
+    color: t.orange
+  },
+  {
+    tag: [e.operator, e.operatorKeyword, e.url, e.escape, e.regexp, e.link, e.special(e.string)],
+    color: t.blue
+  },
+  {
+    tag: [e.meta, e.comment],
+    color: t.orange
+  },
+  {
+    tag: e.strong,
+    fontWeight: "bold"
+  },
+  {
+    tag: e.emphasis,
+    fontStyle: "italic"
+  },
+  {
+    tag: e.strikethrough,
+    textDecoration: "line-through"
+  },
+  {
+    tag: e.link,
+    color: t.orange,
+    textDecoration: "underline"
+  },
+  {
+    tag: e.heading,
+    fontWeight: "bold",
+    color: t.blue
+  },
+  {
+    tag: [e.atom, e.bool, e.special(e.variableName)],
+    color: t.red
+  },
+  {
+    tag: [e.processingInstruction, e.string, e.inserted],
+    color: t.blue
+  },
+  {
+    tag: e.invalid,
+    color: t.invalid
+  }
+]), Oe = (t) => V(be(_e, t));
+var b = /* @__PURE__ */ ((t) => (t.INLINE = "inline", t.SINGLELINE = "singleline", t.MULTILINE = "multiline", t))(b || {}), s = /* @__PURE__ */ ((t) => (t.JSON = "json", t.XML = "xml", t.JAVA = "java", t.JAVASCRIPT = "javascript", t.PYTHON = "python", t.CSV = "csv", t))(s || {}), c = /* @__PURE__ */ ((t) => (t.ACTION = "action", t.CHANGE = "change", t))(c || {});
+const ve = J.deserialize({
+  version: 14,
+  states: "nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_",
+  stateData: "g~OWOS~OQPORPOSPO~OQRSR~",
+  goto: "eYPPPPPZPPPaQRORSRTQOR",
+  nodeNames: "⚠ Program String Separator Value",
+  maxTerm: 9,
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: "'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~",
+  tokenizers: [0],
+  topRules: { Program: [0, 1] },
+  tokenPrec: 18
+}), Ce = j.define({
+  parser: ve.configure({
+    props: [
+      W({
+        Separator: e.separator,
+        Value: e.string,
+        String: e.string,
+        LineComment: e.lineComment,
+        "( )": e.paren
+      })
+    ]
+  })
+});
+function ye() {
+  return new Z(Ce);
+}
+const Se = {
+  [s.JSON]: X,
+  [s.XML]: F,
+  [s.JAVASCRIPT]: z,
+  [s.JAVA]: G,
+  [s.PYTHON]: U,
+  [s.CSV]: ye
+}, Le = (t) => async () => Se[t], xe = (t, n) => {
+  const a = t.doc.lineAt(n.from), o = /^\s*/.exec(a.text);
+  return o ? o[0] : "";
+}, Ne = {
+  key: "Enter",
+  run: ({ state: t, dispatch: n }) => {
+    const a = t.changeByRange((o) => {
+      const d = `
+${xe(t, o)}`;
+      return {
+        changes: { from: o.from, to: o.to, insert: d },
+        range: K.cursor(o.from + d.length)
+      };
+    });
+    return n(t.update(a, { scrollIntoView: !0, userEvent: "input" })), !0;
+  }
+}, Pe = {
+  "en-US": {
+    expand: "Expand",
+    nothingToDisplay: "Nothing to display",
+    run: "Run"
+  },
+  "ja-JP": {
+    expand: "展開",
+    nothingToDisplay: "表示するものがありません"
+  },
+  "pt-BR": {
+    expand: "Expandir",
+    nothingToDisplay: "Nada para exibir"
+  }
+}, Te = {
+  i18n: { messages: Pe },
+  name: "bento-code-snippet"
+}, Ee = /* @__PURE__ */ M({
+  ...Te,
+  props: {
+    actionable: { type: Boolean, default: !1 },
+    actionableText: { default: null },
+    content: { default: "" },
+    expandable: { type: Boolean, default: !1 },
+    editable: { type: Boolean, default: !1 },
+    lang: { default: s.JSON },
+    langLabel: { default: null },
+    loading: { type: Boolean, default: !1 },
+    variant: { default: b.MULTILINE }
+  },
+  emits: [c.ACTION, c.CHANGE],
+  setup(t, { emit: n }) {
+    const a = t, { t: o } = ge(), i = g(null), d = [], E = () => {
+    }, I = l(() => a.langLabel ?? a.lang.toUpperCase()), u = l(() => a.variant === b.INLINE), A = l(() => ({
+      "b-code-snippet--inline": u.value,
+      "b-code-snippet--scrollable": !u.value
+    })), B = l(() => ({
+      "b-code-snippet__code-area-content--editable": a.editable
+    })), O = Le(a.lang), v = N(), f = N(), C = new _(), y = new _(), S = new _(), r = g(null), p = g(0), R = l(() => a.actionableText || o("run"));
+    Q(async () => {
+      const h = await O();
+      r.value = a.content;
+      const $ = ({ state: m }) => {
+        r.value = m.doc.toString();
+      }, L = [
+        q(),
+        ee.of([te, Ne]),
+        C.of(h()),
+        y.of(Oe(a.lang)),
+        S.of(T.readOnly.of(!a.editable)),
+        P.updateListener.of((m) => $(m))
+      ];
+      a.variant === "multiline" && L.push([ne(), ae()]);
+      const x = T.create({
+        doc: a.content,
+        extensions: [...L]
+      });
+      p.value = x.doc.length, f.value = new P({
+        state: x,
+        parent: v.value
+      });
+    }), Y(
+      () => a.content,
+      () => {
+        if (a.content !== r.value) {
+          const h = a.content.length;
+          f.value.dispatch({
+            changes: {
+              from: 0,
+              to: p.value,
+              insert: a.content
+            }
+          }), p.value = h;
+        }
+      }
+    );
+    const w = () => {
+      n(c.ACTION, r.value);
+    };
+    H(() => {
+      r.value !== null && n(c.CHANGE, r.value);
+    });
+    const k = g(!1);
+    return { __sfc: !0, props: a, emit: n, t: o, selectedLanguage: i, availableLanguages: d, handleChangeLanguage: E, displayedLang: I, isInlineVariant: u, conditionalClasses: A, codeAreaContentConditionalClasses: B, loadLang: O, container: v, editor: f, languageConf: C, editorTheme: y, editorReadOnly: S, currentContents: r, contentLength: p, runText: R, onActionClicked: w, showModal: k, BentoDropdown: le, BentoButton: ce, BentoTypography: de, BentoLoadingIndicator: pe, Copy: he, ExpandIcon: ue, BaseModal: fe };
+  }
+});
+var Ie = function() {
+  var n = this, a = n._self._c, o = n._self._setupProxy;
+  return a("div", { staticClass: "b-code-snippet", class: o.conditionalClasses }, [o.isInlineVariant ? n._e() : a("section", { staticClass: "b-code-snippet__action-bar" }, [a("div", { staticClass: "b-code-snippet__action-bar--start" }, [o.availableLanguages.length > 0 ? a(o.BentoDropdown, n._b({ staticClass: "b-code-snippet__language-picker", attrs: { disabled: o.availableLanguages.length === 1, items: o.availableLanguages }, on: { input: o.handleChangeLanguage }, model: { value: o.selectedLanguage, callback: function(i) {
+    o.selectedLanguage = i;
+  }, expression: "selectedLanguage" } }, "bento-dropdown", n.$props, !1)) : n._e(), a(o.BentoTypography, { attrs: { el: "span", stronger: "" } }, [n._v(" " + n._s(o.displayedLang) + " ")])], 1), a("div", { staticClass: "b-code-snippet__action-bar--end" }, [n.loading ? a(o.BentoLoadingIndicator) : n._e(), o.currentContents !== null ? a(o.Copy, { staticClass: "b-structured-list__icon", attrs: { text: o.currentContents } }) : n._e(), n.expandable ? a(o.BentoButton, { attrs: { variant: "tertiary", condensed: "", "aria-label": o.t("expand") }, on: { click: function(i) {
+    o.showModal = !0;
+  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
+    return [a(o.ExpandIcon)];
+  }, proxy: !0 }], null, !1, 1082555189) }) : n._e(), n.actionable ? a(o.BentoButton, { attrs: { variant: "primary", tertiary: "", condensed: "" }, on: { click: o.onActionClicked }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
+    return [a(o.BentoTypography, { staticClass: "b-code-snippet__action-button", attrs: { el: "span" } }, [n._v(" " + n._s(o.runText) + " ")])];
+  }, proxy: !0 }], null, !1, 4115763952) }) : n._e()], 1)]), n.content || n.editable ? a("code", { staticClass: "b-code-snippet__code-area" }, [a("div", { ref: "container", staticClass: "b-code-snippet__code-area-content", class: o.codeAreaContentConditionalClasses })]) : a("section", [n._t("empty-state", function() {
+    return [a("div", { staticClass: "b-code-snippet__empty-state" }, [n._v(n._s(o.t("nothingToDisplay")))])];
+  })], 2), n.expandable ? a(o.BaseModal, { staticClass: "b-code-snippet__modal", attrs: { "hide-close-button": !0, "custom-padding": "0px", "is-dismissible": !0, "is-open": o.showModal, size: "large" }, on: { "close-modal": function(i) {
+    o.showModal = !1;
+  } }, scopedSlots: n._u([{ key: "content", fn: function() {
+    return [a("bento-code-snippet", n._b({}, "bento-code-snippet", { ...n.$props, expandable: !1 }, !1))];
+  }, proxy: !0 }], null, !1, 3343589027) }) : n._e()], 1);
+}, Ae = [], Be = /* @__PURE__ */ me(
+  Ee,
+  Ie,
+  Ae,
+  !1,
+  null,
+  "6ed17102"
+);
+const Je = Be.exports;
+export {
+  b as B,
+  s as a,
+  c as b,
+  Je as c
+};
+//# sourceMappingURL=code-snippet.BlYhf-Dt.js.map

package/dist/chunks/code-snippet.BlYhf-Dt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippet.BlYhf-Dt.js","sources":["../../src/components/code-snippet/highlight.ts","../../src/components/code-snippet/code-snippet.types.ts","../../../../node_modules/.pnpm/codemirror-lang-csv@0.1.1/node_modules/codemirror-lang-csv/dist/index.js","../../src/components/code-snippet/utils/get-lang-loader.ts","../../src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BCodeSnippetCodeAreaHighlightBlue,\n    BCodeSnippetCodeAreaHighlightGreen,\n    BCodeSnippetCodeAreaHighlightOrange,\n    BCodeSnippetCodeAreaHighlightRed,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BCodeSnippetCodeAreaHighlightRed,\n    orange: BCodeSnippetCodeAreaHighlightOrange,\n    green: BCodeSnippetCodeAreaHighlightGreen,\n    blue: BCodeSnippetCodeAreaHighlightBlue,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n    CSV = 'csv',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n\nexport interface BentoCodeSnippetProps {\n    /**\n     * Displays a button that when clicked will emit an action event\n     * Leaves to the parent component the logic of what to do with it\n     */\n    actionable?: boolean;\n\n    /**\n     * Displays a button that when clicked will emit a run event\n     * Leaves to the parent component the logic of what to do with it\n     */\n    actionableText?: string;\n\n    /**\n     * The code content\n     */\n    content?: string;\n\n    /**\n     * Displays a button that can expand the codeblock into a modal to easily\n     * view large blocks of code.\n     */\n    expandable?: boolean;\n\n    /**\n     * Allows editing of the code-snippet content by the user\n     */\n    editable?: boolean;\n\n    /**\n     * Language name for syntax highlighting rules\n     */\n    lang?: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`;\n\n    /**\n     * Label to show in the action-bar, describing the language\n     */\n    langLabel?: string;\n\n    /**\n     * Toggles the loading indicator within the action bar\n     */\n    loading?: boolean;\n\n    /**\n     * Defines the variant of code-snippet\n     */\n    variant?: BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`;\n}\n","import { LRParser } from '@lezer/lr';\nimport { LRLanguage, LanguageSupport } from '@codemirror/language';\nimport { styleTags, tags } from '@lezer/highlight';\n\n// This file was generated by lezer-generator. You probably shouldn't edit it.\nconst parser = LRParser.deserialize({\n  version: 14,\n  states: \"nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_\",\n  stateData: \"g~OWOS~OQPORPOSPO~OQRSR~\",\n  goto: \"eYPPPPPZPPPaQRORSRTQOR\",\n  nodeNames: \"⚠ Program String Separator Value\",\n  maxTerm: 9,\n  skippedNodes: [0],\n  repeatNodeCount: 1,\n  tokenData: \"'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~\",\n  tokenizers: [0],\n  topRules: {\"Program\":[0,1]},\n  tokenPrec: 18\n});\n\nconst csvLanguage = LRLanguage.define({\n    parser: parser.configure({\n        props: [\n            styleTags({\n                Separator: tags.separator,\n                Value: tags.string,\n                String: tags.string,\n                LineComment: tags.lineComment,\n                \"( )\": tags.paren,\n            }),\n        ],\n    }),\n});\nfunction csv() {\n    return new LanguageSupport(csvLanguage);\n}\n\nexport { csv, csvLanguage };\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\nimport { csv } from 'codemirror-lang-csv';\nimport type { LanguageSupport } from '@codemirror/language';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap: Record<BentoCodeSnippetSupportedLanguage, () => LanguageSupport> = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n    [BentoCodeSnippetSupportedLanguage.CSV]: csv,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import {\n        BentoCodeSnippetEvent,\n        type BentoCodeSnippetProps,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from './code-snippet.types';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  actionable: { type: Boolean, default: false },\n  actionableText: { default: null },\n  content: { default: '' },\n  expandable: { type: Boolean, default: false },\n  editable: { type: Boolean, default: false },\n  lang: { default: BentoCodeSnippetSupportedLanguage.JSON },\n  langLabel: { default: null },\n  loading: { type: Boolean, default: false },\n  variant: { default: BentoCodeSnippetVariant.MULTILINE }\n});\n\n    const emit = defineEmits([BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // language\n    const selectedLanguage = ref<string | null>(null);\n    const availableLanguages = []; // TODO: implement\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const handleChangeLanguage = () => {};\n    const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n    const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n    const conditionalClasses = computed(() => ({\n        'b-code-snippet--inline': isInlineVariant.value,\n        'b-code-snippet--scrollable': !isInlineVariant.value,\n    }));\n\n    const codeAreaContentConditionalClasses = computed(() => ({\n        'b-code-snippet__code-area-content--editable': props.editable,\n    }));\n\n    const loadLang = getLangLoader(props.lang);\n\n    const container = shallowRef<HTMLDivElement>();\n    const editor = shallowRef<EditorView>();\n    const languageConf = new Compartment();\n    const editorTheme = new Compartment();\n    const editorReadOnly = new Compartment();\n\n    const currentContents = ref(null);\n    const contentLength = ref(0);\n\n    const runText = computed(() => props.actionableText || t('run'));\n\n    onMounted(async () => {\n        const language = await loadLang();\n\n        // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n        currentContents.value = props.content;\n        const updateCurrentContents = ({ state }) => {\n            currentContents.value = state.doc.toString();\n        };\n\n        const extensions = [\n            highlightActiveLine(),\n            keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n            languageConf.of(language()),\n            editorTheme.of(lightThemeHighlight(props.lang)),\n\n            editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n            EditorView.updateListener.of(content => updateCurrentContents(content)),\n        ];\n\n        if (props.variant === 'multiline') {\n            extensions.push([lineNumbers(), history()]);\n        }\n\n        const state = EditorState.create({\n            doc: props.content,\n            extensions: [...extensions],\n        });\n        contentLength.value = state.doc.length;\n\n        editor.value = new EditorView({\n            state,\n            parent: container.value,\n        });\n    });\n    watch(\n        () => props.content,\n        () => {\n            if (props.content !== currentContents.value) {\n                const upcomingContentLength = props.content.length;\n                editor.value.dispatch({\n                    changes: {\n                        from: 0,\n                        to: contentLength.value,\n                        insert: props.content,\n                    },\n                });\n                contentLength.value = upcomingContentLength;\n            }\n        }\n    );\n\n    const onActionClicked = () => {\n        emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n    };\n\n    watchEffect(() => {\n        if (currentContents.value !== null) {\n            emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n        }\n    });\n\n    const showModal = ref(false);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-code-snippet',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BCodeSnippetCodeAreaHighlightRed","BCodeSnippetCodeAreaHighlightOrange","BCodeSnippetCodeAreaHighlightGreen","BCodeSnippetCodeAreaHighlightBlue","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","parser","LRParser","csvLanguage","LRLanguage","styleTags","csv","LanguageSupport","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","__default__","messages","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","props","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","runText","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","onActionClicked","emit","watchEffect","showModal"],"mappings":"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","x_google_ignoreList":[2]}