@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/tag.DDjyf2hd.js

@@ -0,0 +1,44 @@
+import { defineComponent as p, useSlots as m, computed as r } from "vue";
+import { B as d } from "./typography.J1v_SPG3.js";
+import { u as f } from "./aria-label.CaUURpnB.js";
+import { g as n } from "./get-slot-text.BQS5Olxm.js";
+import { B as _ } from "./tooltip.DyZIyMZN.js";
+import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/tag.css";
+var i = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(i || {});
+const b = {
+  name: "bento-tag"
+}, g = /* @__PURE__ */ p({
+  ...b,
+  props: {
+    label: { default: null },
+    truncate: { default: null },
+    variant: { default: i.GREY }
+  },
+  setup(e) {
+    const t = e, a = m(), o = f({
+      label: t.label || n(a)("default"),
+      defaultFallback: "tag"
+    }), u = r(() => ({
+      [`b-tag--${t.variant}`]: t.variant
+    })), l = r(() => t.label || n(a)("default") || "tag"), s = r(() => t.truncate && l.value.length > t.truncate), c = r(() => t.truncate && s.value ? `${l.value.slice(0, t.truncate)}...` : l.value);
+    return { __sfc: !0, props: t, slots: a, computedAriaLabel: o, tagConditionalClasses: u, textFromSlot: l, shouldShowTooltip: s, formattedText: c, BentoTypography: d, vBentoTooltipDirective: _ };
+  }
+});
+var h = function() {
+  var t = this, a = t._self._c, o = t._self._setupProxy;
+  return a("span", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: o.shouldShowTooltip ? o.textFromSlot : null, expression: "shouldShowTooltip ? textFromSlot : null" }], staticClass: "b-tag", class: o.tagConditionalClasses, attrs: { "data-testid": "tag", "aria-label": o.computedAriaLabel } }, [a(o.BentoTypography, { staticClass: "b-tag__label", attrs: { el: "span", variant: "caption", stronger: "" } }, [t._v(" " + t._s(o.formattedText) + " ")])], 1);
+}, x = [], C = /* @__PURE__ */ v(
+  g,
+  h,
+  x,
+  !1,
+  null,
+  "f782dd0f"
+);
+const F = C.exports;
+export {
+  F as B,
+  i as a
+};
+//# sourceMappingURL=tag.DDjyf2hd.js.map

package/dist/chunks/tag.DDjyf2hd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.DDjyf2hd.js","sources":["../../../core/src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { BentoTagProps, BentoTagVariant } from '../../../../core/src/components/tag/tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label || getSlotText(slots)('default') || 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/tag/tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","computedAriaLabel","useAriaLabel","props","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;ACkCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1BAC,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAuC,OAAAC,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBM,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAH,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCI,IAAAD,EAAA,MAAAH,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA,KAAA,KAAA,GACAS,IAAAF,EAAA,MAAAH,EAAA,YAAAI,EAAA,MAAA,SAAAJ,EAAA,QAAA,GAEAM,IAAAH,EAAA,MACIH,EAAA,YAIAK,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAJ,EAAA,QAAA,CAAA,QAHII,EAAA,KAGgG;;;;;;;;;;;;;;;;"}

package/dist/chunks/teleport.BV6zrDjA.js

@@ -0,0 +1,128 @@
+import { defineComponent as o, inject as i } from "vue";
+import { i as n } from "./index.Cl4_42j5.js";
+import { M as l } from "./base-modal.keys.C2PQXcE2.js";
+import { S as h } from "./sidepanel.keys.R0DKQuYx.js";
+import { M as c } from "./modal-fullscreen.keys.CMba3hYp.js";
+import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/teleport.css";
+const b = o({
+  name: "teleport",
+  props: {
+    to: {
+      type: String,
+      default: ""
+    },
+    where: {
+      type: String,
+      default: "after"
+    },
+    disabled: Boolean
+  },
+  data: () => ({
+    childObserver: null,
+    nodes: [],
+    waiting: !1,
+    observer: null,
+    parent: null,
+    isVue2: n
+  }),
+  computed: {
+    classes() {
+      return this.disabled ? ["b-teleport"] : ["b-teleport", "b-teleport--hidden"];
+    },
+    defaultTo() {
+      if (this.to)
+        return this.to;
+      const e = i(l, "") || i(c, "") || i(h, "");
+      return e ? `#${e}` : "body";
+    }
+  },
+  watch: {
+    to: "maybeMove",
+    where: "maybeMove",
+    disabled(e) {
+      e ? (this.disable(), this.$nextTick(() => {
+        this.teardownObserver();
+      })) : (this.bootObserver(), this.move());
+    }
+  },
+  mounted() {
+    this.nodes = Array.from(this.$el.childNodes), this.disabled || this.bootObserver(), this.maybeMove();
+  },
+  beforeDestroy() {
+    this.nodes = this.getComponentChildrenNode(), this.disable(), this.teardownObserver();
+  },
+  methods: {
+    // Using a fragment is faster because it'll trigger only a single reflow
+    // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
+    getFragment() {
+      const e = document.createDocumentFragment();
+      return this.nodes.forEach((t) => e.appendChild(t)), e;
+    },
+    disable() {
+      this.$el.appendChild(this.getFragment()), this.parent = null;
+    },
+    move() {
+      if (this.waiting = !1, this.parent = document.querySelector(this.defaultTo), !this.parent) {
+        this.disable(), this.waiting = !0;
+        return;
+      }
+      this.where === "before" ? this.parent.prepend(this.getFragment()) : this.parent.appendChild(this.getFragment());
+    },
+    maybeMove() {
+      this.disabled || this.move();
+    },
+    onMutations(e) {
+      let t = !1;
+      for (let s = 0; s < e.length; s++) {
+        const r = e[s], a = Array.from(r.addedNodes).filter(
+          (d) => !this.nodes.includes(d)
+        );
+        Array.from(r.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && a.length > 0 && (t = !0);
+      }
+      t && this.move();
+    },
+    bootObserver() {
+      this.observer || (this.observer = new MutationObserver((e) => this.onMutations(e)), this.observer.observe(document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !1,
+        characterData: !1
+      }), !this.childObserver && (this.childObserver = new MutationObserver((e) => {
+        e.find((s) => s.target === this.$el) && (this.nodes.forEach((s) => s.parentNode && s.parentNode.removeChild(s)), this.nodes = this.getComponentChildrenNode(), this.maybeMove());
+      }), this.childObserver.observe(this.$el, {
+        childList: !0,
+        subtree: !1,
+        attributes: !1,
+        characterData: !1
+      })));
+    },
+    teardownObserver() {
+      this.observer && (this.observer.disconnect(), this.observer = null), this.childObserver && (this.childObserver.disconnect(), this.childObserver = null);
+    },
+    getComponentChildrenNode() {
+      return this.$vnode.componentOptions.children.map((e) => e.elm).filter((e) => e);
+    }
+  }
+}), u = /* @__PURE__ */ o({
+  ...b,
+  setup(e) {
+    return { __sfc: !0, isVue2: n };
+  }
+});
+var m = function() {
+  var t = this, s = t._self._c, r = t._self._setupProxy;
+  return r.isVue2 ? s("div", { class: t.classes }, [t._t("default")], 2) : s("Teleport", { class: t.classes, attrs: { to: t.defaultTo, where: t.where, disabled: t.disabled } }, [t._t("default")], 2);
+}, p = [], v = /* @__PURE__ */ f(
+  u,
+  m,
+  p,
+  !1,
+  null,
+  "d05ca1fd"
+);
+const y = v.exports;
+export {
+  y as B
+};
+//# sourceMappingURL=teleport.BV6zrDjA.js.map

package/dist/chunks/teleport.BV6zrDjA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teleport.BV6zrDjA.js","sources":["../../src/components/internal/teleport/teleport.vue"],"sourcesContent":["<!-- Taken from: https://github.com/Mechazawa/vue2-teleport/blob/master/src/Teleport.vue -->\n<template>\n    <div v-if=\"isVue2\" :class=\"classes\">\n        <slot />\n    </div>\n    <Teleport v-else :to=\"defaultTo\" :where=\"where\" :disabled=\"disabled\" :class=\"classes\">\n        <slot />\n    </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n    import { isVue2 } from 'vue-demi';\n    import { defineComponent, inject, PropType } from 'vue';\n    import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from '@/components/sidepanel/sidepanel.keys';\n    import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n    import type { BentoTeleportProps } from './teleport.types';\n</script>\n\n<script lang=\"ts\">\n    export default defineComponent({\n        name: 'teleport',\n        props: {\n            to: {\n                type: String as PropType<BentoTeleportProps['to']>,\n                default: '',\n            },\n            where: {\n                type: String,\n                default: 'after',\n            },\n            disabled: Boolean as PropType<BentoTeleportProps['disabled']>,\n        },\n        data: () => ({\n            childObserver: null,\n            nodes: [],\n            waiting: false,\n            observer: null,\n            parent: null,\n            isVue2,\n        }),\n        computed: {\n            classes() {\n                if (this.disabled) {\n                    return ['b-teleport'];\n                }\n\n                return ['b-teleport', 'b-teleport--hidden'];\n            },\n            defaultTo() {\n                if (this.to) {\n                    return this.to;\n                }\n\n                const injectionKey =\n                    inject<string>(MODAL_DIALOG_ID_INJECTION_KEY, '') ||\n                    inject<string>(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, '') ||\n                    inject<string>(SIDEPANEL_DIALOG_ID_INJECTION_KEY, '');\n\n                const teleportElement = injectionKey ? `#${injectionKey}` : 'body';\n                return teleportElement;\n            },\n        },\n        watch: {\n            to: 'maybeMove',\n            where: 'maybeMove',\n            disabled(value) {\n                if (value) {\n                    this.disable();\n                    // Ensure all event done.\n                    this.$nextTick(() => {\n                        this.teardownObserver();\n                    });\n                } else {\n                    this.bootObserver();\n                    this.move();\n                }\n            },\n        },\n        mounted() {\n            // Store a reference to the nodes\n            this.nodes = Array.from(this.$el.childNodes);\n\n            if (!this.disabled) {\n                this.bootObserver();\n            }\n\n            // Move slot content to target\n            this.maybeMove();\n        },\n        beforeDestroy() {\n            // Fix nodes reference\n            this.nodes = this.getComponentChildrenNode();\n\n            // Move back\n            this.disable();\n\n            // Stop observing\n            this.teardownObserver();\n        },\n        methods: {\n            // Using a fragment is faster because it'll trigger only a single reflow\n            // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment\n            getFragment(): DocumentFragment {\n                const fragment = document.createDocumentFragment();\n\n                this.nodes.forEach(node => fragment.appendChild(node));\n\n                return fragment;\n            },\n            disable() {\n                this.$el.appendChild(this.getFragment());\n                this.parent = null;\n            },\n            move() {\n                this.waiting = false;\n\n                this.parent = document.querySelector(this.defaultTo);\n\n                if (!this.parent) {\n                    this.disable();\n\n                    this.waiting = true;\n\n                    return;\n                }\n\n                if (this.where === 'before') {\n                    this.parent.prepend(this.getFragment());\n                } else {\n                    this.parent.appendChild(this.getFragment());\n                }\n            },\n            maybeMove() {\n                if (!this.disabled) {\n                    this.move();\n                }\n            },\n            onMutations(mutations) {\n                // Makes sure the move operation is only done once\n                let shouldMove = false;\n\n                for (let i = 0; i < mutations.length; i++) {\n                    const mutation = mutations[i];\n                    const filteredAddedNodes = Array.from(mutation.addedNodes).filter(\n                        node => !this.nodes.includes(node)\n                    );\n\n                    if (Array.from(mutation.removedNodes).includes(this.parent)) {\n                        this.disable();\n                        this.waiting = !this.disabled;\n                    } else if (this.waiting && filteredAddedNodes.length > 0) {\n                        shouldMove = true;\n                    }\n                }\n\n                if (shouldMove) {\n                    this.move();\n                }\n            },\n            bootObserver() {\n                if (this.observer) {\n                    return;\n                }\n\n                this.observer = new MutationObserver(mutations => this.onMutations(mutations));\n\n                this.observer.observe(document.body, {\n                    childList: true,\n                    subtree: true,\n                    attributes: false,\n                    characterData: false,\n                });\n\n                if (this.childObserver) {\n                    return;\n                }\n                // watch childNodes change\n                this.childObserver = new MutationObserver(mutations => {\n                    const childChangeRecord = mutations.find(i => i.target === this.$el);\n                    if (childChangeRecord) {\n                        // Remove old nodes before update position.\n                        this.nodes.forEach(node => node.parentNode && node.parentNode.removeChild(node));\n                        this.nodes = this.getComponentChildrenNode();\n                        this.maybeMove();\n                    }\n                });\n\n                this.childObserver.observe(this.$el, {\n                    childList: true,\n                    subtree: false,\n                    attributes: false,\n                    characterData: false,\n                });\n            },\n            teardownObserver() {\n                if (this.observer) {\n                    this.observer.disconnect();\n                    this.observer = null;\n                }\n                if (this.childObserver) {\n                    this.childObserver.disconnect();\n                    this.childObserver = null;\n                }\n            },\n            getComponentChildrenNode() {\n                // Vue3\n                if (!isVue2) {\n                    return [];\n                }\n\n                // Trick for Vue3 type checking\n                return (this as any).$vnode.componentOptions.children.map(i => i.elm).filter(i => i);\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./teleport.scss\" />\n"],"names":["__default__","defineComponent","isVue2","injectionKey","inject","MODAL_DIALOG_ID_INJECTION_KEY","MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","value","fragment","node","mutations","shouldMove","i","mutation","filteredAddedNodes"],"mappings":"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"}

package/dist/chunks/textarea.0PapD8Nl.js

@@ -0,0 +1,200 @@
+import { defineComponent as X, useAttrs as ee, toRefs as U, ref as p, toRef as ae, computed as u, watch as E, nextTick as te, onMounted as le, onUnmounted as re } from "vue";
+import { B as oe } from "./button.BuD-IsW5.js";
+import { B as se } from "./typography.J1v_SPG3.js";
+import { C as ne } from "./cross-circle-fill-small.YhLgeipP.js";
+import { g as ie } from "./generate-uid.NJ8tVoha.js";
+import { o as F } from "./resize.Bqks3WUm.js";
+import { u as ue } from "./aria-label.CaUURpnB.js";
+import { u as ce } from "./i18n.BQkEbtPM.js";
+import { u as de } from "./use-form-layout-loading.D3lALhtC.js";
+import { F as pe, E as fe } from "./error-message.BAE9B9-N.js";
+import { n as be } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/textarea.css";
+var A = /* @__PURE__ */ ((t) => (t.HORIZONTAL = "horizontal", t.VERTICAL = "vertical", t.BOTH = "both", t.NONE = "none", t))(A || {}), f = /* @__PURE__ */ ((t) => (t.CLEARABLE = "clearable", t.DISABLED = "disabled", t.ERROR = "error", t.READONLY = "readonly", t))(f || {}), i = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CHANGE = "change", t.CLEAR = "clear", t.ESCAPE_PRESSED = "escape-pressed", t.FOCUS = "focus", t.INPUT = "input", t.KEYDOWN = "keydown", t.KEYUP = "keyup", t))(i || {});
+const ye = {
+  "en-US": {
+    clearText: "Clear text",
+    textarea: "textarea",
+    yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
+  }
+}, _e = {
+  i18n: { messages: ye },
+  name: "bento-textarea"
+}, he = /* @__PURE__ */ X({
+  ..._e,
+  props: {
+    /**
+     * Text that labels an the input element
+     */
+    ariaLabel: { type: String, default: void 0 },
+    /**
+     * Text that shows number of characters in textarea
+     */
+    characterLimit: { type: Number, default: void 0 },
+    /**
+     * Text displayed as the help text of the textarea
+     */
+    description: { type: String, default: "" },
+    /**
+     * Disables the possibility of changing value in the textarea
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * If set to true, shows a button to clear all the text
+     */
+    clearable: { type: Boolean, default: !1 },
+    /**
+     * Adds error text
+     */
+    errorMessage: { type: String, default: "" },
+    /**
+     * Sets the height of the textarea, e.g 200px OR 20vh
+     */
+    height: { type: String, default: null },
+    /**
+     * Text displayed as the label of the textarea
+     */
+    label: { type: String, default: "" },
+    /**
+     * Highlights the textarea is optional.
+     */
+    optional: { type: Boolean, default: !1 },
+    /**
+     * Text displayed as the placeholder of the textarea
+     */
+    placeholder: { type: String, default: "" },
+    /**
+     * Set the textarea to read only state.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * Indicates the possibility of resize the textarea
+     */
+    resizable: {
+      type: String,
+      default: A.BOTH,
+      validator: (t) => Object.values(A).includes(t)
+    },
+    /**
+     * Highlights the textarea is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Adds a info icon next to the label to display the passed tooltip message.
+     */
+    tooltipText: { type: String, default: null },
+    /**
+     * Text displayed as the value of the textarea
+     */
+    value: { type: String, default: "" }
+  },
+  emits: [],
+  setup(t, { expose: a, emit: l }) {
+    const e = t, r = ee(), { height: c } = U(e), H = ie("textarea"), o = p(null), b = p(null), n = p(e.value), m = 44, y = p(e.height || `${m}px`), x = p("100%");
+    let _ = null, h = null;
+    const { t: I } = ce(), { isReadOnly: v } = de(ae(e, "readonly")), N = u(() => `${n.value.length} / ${e.characterLimit}`), C = u(
+      () => e.characterLimit && n.value.length > e.characterLimit
+    ), g = () => {
+      o.value && o.value.scrollHeight > m && (y.value = `${o.value.scrollHeight + 3}px`);
+    };
+    E(c, () => {
+      c.value ? y.value = c.value : g();
+    }), E(
+      () => e.value,
+      () => {
+        n.value = e.value;
+      },
+      { immediate: !0 }
+    ), E(
+      () => n.value,
+      async () => {
+        var s, d;
+        if (!c.value && (!o.value || ((s = o.value) == null ? void 0 : s.scrollHeight) > ((d = o.value) == null ? void 0 : d.clientHeight))) {
+          if (y.value = `${m}px`, !n.value)
+            return;
+          await te(), g();
+        }
+      },
+      { immediate: !0 }
+    );
+    const R = u(() => !!e.errorMessage || C.value), D = u(() => ({
+      [`b-textarea--${f.DISABLED}`]: e.disabled
+    })), W = u(() => ({
+      [`b-textarea__input--${f.CLEARABLE}`]: e.clearable,
+      [`b-textarea__input--${f.READONLY}`]: v.value,
+      [`b-textarea__input--${f.ERROR}`]: R.value,
+      "b-textarea__input--dynamic-height": !c.value
+    })), T = u(() => ({
+      "b-textarea__label-box--no-label": !e.label
+    })), w = u(() => ({
+      [`b-textarea__label-item--${f.ERROR}`]: C.value
+    })), M = u(() => I("yourTextCanBenAtMost", { characterLimit: e.characterLimit })), S = p(r["aria-label"]), { ariaLabel: k, label: B } = U(e), K = ue({
+      ariaLabel: S.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: k,
+      defaultFallback: B
+    }), Y = u(
+      () => e.clearable && n.value && !e.disabled && !v.value
+    ), z = () => {
+      n.value = "", l(i.CLEAR), l(i.INPUT, "");
+    }, $ = (s) => {
+      s.stopImmediatePropagation(), !e.disabled && !v.value && (n.value = s.target.value, l(i.INPUT, n.value));
+    }, q = () => {
+      o.value.scrollTop = 0, l(i.BLUR);
+    }, V = () => {
+      o.value.focus(), l(i.FOCUS);
+    }, G = () => {
+      l(i.CHANGE);
+    }, j = () => {
+      l(i.ESCAPE_PRESSED);
+    }, Z = (s) => {
+      s.stopPropagation(), l(i.KEYDOWN, s);
+    }, J = (s) => {
+      s.stopPropagation(), l(i.KEYUP, s);
+    }, L = (s = !1) => {
+      var P;
+      const d = o.value.style.width;
+      if (o.value.style.height && (y.value = o.value.style.height), s && !d)
+        return;
+      const Q = (P = b == null ? void 0 : b.value) == null ? void 0 : P.offsetWidth;
+      !d || parseInt(d, 10) > Q ? x.value = "100%" : x.value = d;
+    }, O = () => {
+      o.value.focus();
+    };
+    return a({
+      focus: O
+    }), le(() => {
+      _ = F(o.value, () => {
+        L(!0);
+      }), h = F(b.value, () => {
+        L();
+      }), c.value || g();
+    }), re(() => {
+      _ == null || _.disconnect(), h == null || h.disconnect();
+    }), { __sfc: !0, attrs: r, props: e, emit: l, height: c, textareaId: H, textareaElement: o, textareaComponent: b, textareaValue: n, defaultTextareaHeight: m, textareaHeight: y, textareaWrapperWidth: x, textareaElementObserver: _, textareaComponentObserver: h, t: I, isReadOnly: v, counter: N, isOverCharacterLimit: C, calculateHeight: g, invalidInput: R, conditionalClasses: D, conditionalClassesInput: W, conditionalClassesLabelBox: T, conditionalClassesLabelItem: w, counterErrorText: M, ariaLabelAttribute: S, ariaLabel: k, label: B, computedAriaLabel: K, showClearButton: Y, onClear: z, onInput: $, onBlur: q, onFocus: V, onChange: G, onPressEscape: j, onKeyDown: Z, onKeyUp: J, resizeTextareaWrapper: L, focus: O, BentoButton: oe, BentoTypography: se, ErrorMessage: fe, FieldLabel: pe, CrossCircleFillSmallIcon: ne };
+  }
+});
+var me = function() {
+  var a = this, l = a._self._c, e = a._self._setupProxy;
+  return l("div", { ref: "textareaComponent", staticClass: "b-textarea", class: e.conditionalClasses }, [l("div", { style: { width: e.textareaWrapperWidth } }, [l("div", { staticClass: "b-textarea__label-box", class: e.conditionalClassesLabelBox }, [e.label ? l(e.FieldLabel, { attrs: { for: e.textareaId, label: e.label, "tooltip-text": a.tooltipText, optional: a.optional, required: a.required } }) : a._e(), a.characterLimit ? l(e.BentoTypography, { staticClass: "b-textarea__label-item", class: e.conditionalClassesLabelItem, attrs: { el: "span" } }, [a._v(" " + a._s(e.counter) + " ")]) : a._e()], 1), l(e.BentoTypography, { staticClass: "b-textarea__input-box", attrs: { el: "div", "aria-disabled": a.disabled } }, [l("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: e.conditionalClassesInput, style: { resize: a.resizable, height: e.textareaHeight }, attrs: { id: e.textareaId, "aria-label": e.computedAriaLabel, "aria-invalid": e.invalidInput, readonly: e.isReadOnly, disabled: a.disabled, placeholder: a.placeholder }, domProps: { value: e.textareaValue }, on: { blur: e.onBlur, change: e.onChange, focus: e.onFocus, input: e.onInput, keydown: [function(r) {
+    return !r.type.indexOf("key") && a._k(r.keyCode, "esc", 27, r.key, ["Esc", "Escape"]) ? null : e.onPressEscape.apply(null, arguments);
+  }, e.onKeyDown], keyup: e.onKeyUp } }), e.showClearButton ? l("div", { staticClass: "b-textarea__clear-button" }, [l(e.BentoButton, { attrs: { variant: "tertiary", disabled: a.disabled }, on: { click: e.onClear, keypress: function(r) {
+    return !r.type.indexOf("key") && a._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : e.onClear.apply(null, arguments);
+  }, keyup: function(r) {
+    return !r.type.indexOf("key") && a._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : e.onClear.apply(null, arguments);
+  } }, scopedSlots: a._u([{ key: "iconLeft", fn: function() {
+    return [l(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": e.t("clearText") } })];
+  }, proxy: !0 }], null, !1, 3119266621) })], 1) : a._e()]), e.isOverCharacterLimit ? l(e.ErrorMessage, { attrs: { "error-message": e.counterErrorText } }) : a._e(), a.errorMessage ? l(e.ErrorMessage, { attrs: { "error-message": a.errorMessage } }) : a._e(), a.description ? l(e.BentoTypography, { staticClass: "b-textarea__description", attrs: { el: "span" } }, [a._v(" " + a._s(a.description) + " ")]) : a._e()], 1)]);
+}, ve = [], ge = /* @__PURE__ */ be(
+  he,
+  me,
+  ve,
+  !1,
+  null,
+  "9e0ec508"
+);
+const Pe = ge.exports;
+export {
+  Pe as B
+};
+//# sourceMappingURL=textarea.0PapD8Nl.js.map

package/dist/chunks/textarea.0PapD8Nl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.0PapD8Nl.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n","<template>\n    <div ref=\"textareaComponent\" class=\"b-textarea\" :class=\"conditionalClasses\">\n        <div :style=\"{ width: textareaWrapperWidth }\">\n            <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n                <field-label\n                    v-if=\"label\"\n                    :for=\"textareaId\"\n                    :label=\"label\"\n                    :tooltip-text=\"tooltipText\"\n                    :optional=\"optional\"\n                    :required=\"required\"\n                />\n                <bento-typography\n                    v-if=\"characterLimit\"\n                    el=\"span\"\n                    class=\"b-textarea__label-item\"\n                    :class=\"conditionalClassesLabelItem\"\n                >\n                    {{ counter }}\n                </bento-typography>\n            </div>\n            <bento-typography el=\"div\" class=\"b-textarea__input-box\" :aria-disabled=\"disabled\">\n                <textarea\n                    :id=\"textareaId\"\n                    ref=\"textareaElement\"\n                    :value=\"textareaValue\"\n                    class=\"b-textarea__input\"\n                    :class=\"conditionalClassesInput\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-invalid=\"invalidInput\"\n                    :readonly=\"isReadOnly\"\n                    :disabled=\"disabled\"\n                    :placeholder=\"placeholder\"\n                    :style=\"{ resize: resizable, height: textareaHeight }\"\n                    @blur=\"onBlur\"\n                    @change=\"onChange\"\n                    @focus=\"onFocus\"\n                    @input=\"onInput\"\n                    @keydown.esc=\"onPressEscape\"\n                    @keydown=\"onKeyDown\"\n                    @keyup=\"onKeyUp\"\n                >\n                </textarea>\n\n                <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n                    <bento-button\n                        variant=\"tertiary\"\n                        :disabled=\"disabled\"\n                        @click=\"onClear\"\n                        @keypress.enter=\"onClear\"\n                        @keyup.space=\"onClear\"\n                    >\n                        <template #iconLeft>\n                            <cross-circle-fill-small-icon :svg-title=\"t('clearText')\" />\n                        </template>\n                    </bento-button>\n                </div>\n            </bento-typography>\n\n            <error-message v-if=\"isOverCharacterLimit\" :error-message=\"counterErrorText\" />\n\n            <error-message v-if=\"errorMessage\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"description\" class=\"b-textarea__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, onUnmounted, PropType, ref, toRef, toRefs, useAttrs, watch } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n\n    // Utils\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Types\n    import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Text that shows number of characters in textarea\n         */\n        characterLimit: { type: Number, default: undefined },\n\n        /**\n         * Text displayed as the help text of the textarea\n         */\n        description: { type: String, default: '' },\n\n        /**\n         * Disables the possibility of changing value in the textarea\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * If set to true, shows a button to clear all the text\n         */\n        clearable: { type: Boolean, default: false },\n\n        /**\n         * Adds error text\n         */\n        errorMessage: { type: String, default: '' },\n\n        /**\n         * Sets the height of the textarea, e.g 200px OR 20vh\n         */\n        height: { type: String, default: null },\n\n        /**\n         * Text displayed as the label of the textarea\n         */\n        label: { type: String, default: '' },\n\n        /**\n         * Highlights the textarea is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text displayed as the placeholder of the textarea\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Set the textarea to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the possibility of resize the textarea\n         */\n        resizable: {\n            type: String as PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>,\n            default: BentoTextareaResizeOption.BOTH,\n            validator: (value: BentoTextareaResizeOption) => Object.values(BentoTextareaResizeOption).includes(value),\n        },\n\n        /**\n         * Highlights the textarea is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * Text displayed as the value of the textarea\n         */\n        value: { type: String, default: '' },\n    });\n\n    const emit = defineEmits([]);\n\n    const { height } = toRefs(props);\n\n    const textareaId = generateUid('textarea');\n    const textareaElement = ref<HTMLTextAreaElement>(null);\n    const textareaComponent = ref<HTMLDivElement>(null);\n    const textareaValue = ref(props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    let textareaElementObserver: ResizeObserver | null = null;\n    let textareaComponentObserver: ResizeObserver | null = null;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const counter = computed(() => `${textareaValue.value.length} / ${props.characterLimit}`);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    const calculateHeight = () => {\n        const borderWidth = 3;\n        if (textareaElement.value && textareaElement.value.scrollHeight > defaultTextareaHeight) {\n            textareaHeight.value = `${textareaElement.value.scrollHeight + borderWidth}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (!height.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => props.value,\n        () => {\n            textareaValue.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            // Auto-adjust height if the text area is overflowing\n            if (\n                !height.value &&\n                (!textareaElement.value || textareaElement.value?.scrollHeight > textareaElement.value?.clientHeight)\n            ) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: !height.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emit(BentoTextareaEvent.INPUT, '');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emit(BentoTextareaEvent.INPUT, textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYDOWN, event);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYUP, event);\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    const focus = () => {\n        textareaElement.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n\n    onMounted(() => {\n        textareaElementObserver = observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (!height.value) {\n            calculateHeight();\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","textareaWrapperWidth","textareaElementObserver","textareaComponentObserver","t","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","counter","computed","isOverCharacterLimit","calculateHeight","watch","_a","_b","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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"}