@adyen/bento-vue2 1.12.0 → 1.13.1

package/dist/textarea.js

@@ -1,46 +1,46 @@
-import { defineComponent as j, useAttrs as J, toRefs as B, ref as u, toRef as K, computed as o, watch as x, nextTick as Q, onMounted as X } from "vue";
-import { a as ee } from "./chunks/button.133f145e.js";
-import { B as te } from "./chunks/index.99a2184a.js";
-import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { g as ae } from "./chunks/unique-id.a2a2b458.js";
-import { o as k } from "./chunks/resize.a041304d.js";
-import { u as re } from "./chunks/aria-label.ac9651a5.js";
-import { u as le } from "./chunks/i18n.eb5b985b.js";
-import { u as se } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as oe, F as ne } from "./chunks/field-label.66f52c8f.js";
-import "./assets/index23.css";
-let O = 0;
-const ie = {
+import { defineComponent as K, useAttrs as Q, toRefs as O, ref as u, toRef as X, computed as o, watch as L, nextTick as ee, onMounted as te, onUnmounted as ae } from "vue";
+import { a as le } from "./chunks/button.bb0d7584.js";
+import { B as re } from "./chunks/index.6ac01113.js";
+import { n as w } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { g as se } from "./chunks/unique-id.a2a2b458.js";
+import { o as F } from "./chunks/resize.a041304d.js";
+import { u as oe } from "./chunks/aria-label.ac9651a5.js";
+import { u as ne } from "./chunks/i18n.eb5b985b.js";
+import { u as ie } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { E as ue, F as ce } from "./chunks/field-label.7328b82b.js";
+import "./assets/index25.css";
+let T = 0;
+const de = {
   beforeCreate() {
-    this.uuid = O.toString(), O += 1;
+    this.uuid = T.toString(), T += 1;
   }
 };
-var ue = function() {
+var pe = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { fill: "#00112C", d: "M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM7.00011 5.93945L5.93945 7.00011L6.93945 8.00011L5.93945 9.00011L7.00011 10.0608L8.00011 9.06077L9.00011 10.0608L10.0608 9.00011L9.06077 8.00011L10.0608 7.00011L9.00011 5.93945L8.00011 6.93945L7.00011 5.93945Z" } })]);
-}, ce = [], de = /* @__PURE__ */ F(
-  ie,
-  ue,
-  ce,
+}, _e = [], fe = /* @__PURE__ */ w(
+  de,
+  pe,
+  _e,
   !1,
   null,
   null,
   null,
   null
 );
-const pe = de.exports;
-var C = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r.BOTH = "both", r.NONE = "none", r))(C || {}), c = /* @__PURE__ */ ((r) => (r.CLEARABLE = "clearable", r.DISABLED = "disabled", r.ERROR = "error", r.READONLY = "readonly", r))(c || {}), i = /* @__PURE__ */ ((r) => (r.BLUR = "blur", r.CHANGE = "change", r.CLEAR = "clear", r.ESCAPE_PRESSED = "escape-pressed", r.FOCUS = "focus", r.INPUT = "input", r))(i || {});
-const _e = {
+const be = fe.exports;
+var E = /* @__PURE__ */ ((l) => (l.HORIZONTAL = "horizontal", l.VERTICAL = "vertical", l.BOTH = "both", l.NONE = "none", l))(E || {}), c = /* @__PURE__ */ ((l) => (l.CLEARABLE = "clearable", l.DISABLED = "disabled", l.ERROR = "error", l.READONLY = "readonly", l))(c || {}), i = /* @__PURE__ */ ((l) => (l.BLUR = "blur", l.CHANGE = "change", l.CLEAR = "clear", l.ESCAPE_PRESSED = "escape-pressed", l.FOCUS = "focus", l.INPUT = "input", l))(i || {});
+const ve = {
   "en-US": {
     clearText: "Clear text",
     textarea: "textarea",
     yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
   }
-}, fe = {
-  i18n: { messages: _e },
+}, me = {
+  i18n: { messages: ve },
   name: "bento-textarea"
-}, be = /* @__PURE__ */ j({
-  ...fe,
+}, ye = /* @__PURE__ */ K({
+  ...me,
   props: {
     /**
      * Text that labels an the input element
@@ -91,8 +91,8 @@ const _e = {
      */
     resizable: {
       type: String,
-      default: C.BOTH,
-      validator: (r) => Object.values(C).includes(r)
+      default: E.BOTH,
+      validator: (l) => Object.values(E).includes(l)
     },
     /**
      * Highlights the textarea is required.
@@ -107,101 +107,105 @@ const _e = {
      */
     value: { type: String, default: "" }
   },
-  setup(r, { emit: e }) {
-    const a = r, t = J(), { height: l } = B(a), T = ae("textarea"), n = u(null), d = u(null), s = u(a.value), _ = 44, f = u(a.height || `${_}px`), y = u("100%"), { t: L } = le(), { isReadOnly: b } = se(K(a, "readonly")), w = o(() => `${s.value.length} / ${a.characterLimit}`), h = o(
+  setup(l, { emit: e }) {
+    const a = l, t = Q(), { height: r } = O(a), M = se("textarea"), n = u(null), d = u(null), s = u(a.value), b = 44, v = u(a.height || `${b}px`), g = u("100%");
+    let p = null, _ = null;
+    const { t: S } = ne(), { isReadOnly: m } = ie(X(a, "readonly")), P = o(() => `${s.value.length} / ${a.characterLimit}`), x = o(
       () => a.characterLimit && s.value.length > a.characterLimit
-    ), v = () => {
-      n.value && n.value.scrollHeight > _ && (f.value = `${n.value.scrollHeight + 3}px`);
+    ), y = () => {
+      n.value && n.value.scrollHeight > b && (v.value = `${n.value.scrollHeight + 3}px`);
     };
-    x(l, () => {
-      l.value ? f.value = l.value : v();
-    }), x(
+    L(r, () => {
+      r.value ? v.value = r.value : y();
+    }), L(
       () => a.value,
       () => {
         s.value = a.value;
       },
       { immediate: !0 }
-    ), x(
+    ), L(
       () => s.value,
       async () => {
-        if (!l.value) {
-          if (f.value = `${_}px`, !s.value)
+        if (!r.value) {
+          if (v.value = `${b}px`, !s.value)
             return;
-          await Q(), v();
+          await ee(), y();
         }
       },
       { immediate: !0 }
     );
-    const E = o(() => !!a.errorMessage || h.value), M = o(() => ({
+    const R = o(() => !!a.errorMessage || x.value), H = o(() => ({
       [`b-textarea--${c.DISABLED}`]: a.disabled
-    })), P = o(() => ({
+    })), N = o(() => ({
       [`b-textarea__input--${c.CLEARABLE}`]: a.clearable,
-      [`b-textarea__input--${c.READONLY}`]: b.value,
-      [`b-textarea__input--${c.ERROR}`]: E.value,
-      ["b-textarea__input--dynamic-height"]: !l.value
-    })), H = o(() => ({
+      [`b-textarea__input--${c.READONLY}`]: m.value,
+      [`b-textarea__input--${c.ERROR}`]: R.value,
+      ["b-textarea__input--dynamic-height"]: !r.value
+    })), $ = o(() => ({
       ["b-textarea__label-box--no-label"]: !a.label
-    })), N = o(() => ({
-      [`b-textarea__label-item--${c.ERROR}`]: h.value
-    })), $ = o(() => L("yourTextCanBenAtMost", { characterLimit: a.characterLimit })), S = u(t["aria-label"]), { ariaLabel: R, label: A } = B(a), W = re({
-      ariaLabel: S.value,
+    })), U = o(() => ({
+      [`b-textarea__label-item--${c.ERROR}`]: x.value
+    })), W = o(() => S("yourTextCanBenAtMost", { characterLimit: a.characterLimit })), A = u(t["aria-label"]), { ariaLabel: I, label: B } = O(a), D = oe({
+      ariaLabel: A.value,
       // TODO: take this line away when the aria-label props is removed
-      label: R,
-      defaultFallback: A
-    }), U = o(
-      () => a.clearable && s.value && !a.disabled && !b.value
-    ), D = () => {
+      label: I,
+      defaultFallback: B
+    }), z = o(
+      () => a.clearable && s.value && !a.disabled && !m.value
+    ), q = () => {
       s.value = "", e(i.CLEAR), e(i.INPUT, "");
-    }, z = (p) => {
-      p.stopImmediatePropagation(), !a.disabled && !b.value && (s.value = p.target.value, e(i.INPUT, s.value));
-    }, q = () => {
+    }, V = (f) => {
+      f.stopImmediatePropagation(), !a.disabled && !m.value && (s.value = f.target.value, e(i.INPUT, s.value));
+    }, Y = () => {
       n.value.scrollTop = 0, e(i.BLUR);
-    }, V = () => {
+    }, Z = () => {
       n.value.focus(), e(i.FOCUS);
-    }, Y = () => {
+    }, G = () => {
       e(i.CHANGE);
-    }, Z = () => {
+    }, j = () => {
       e(i.ESCAPE_PRESSED);
-    }, g = (p = !1) => {
-      var I;
-      const m = n.value.style.width;
-      if (p && !m)
+    }, C = (f = !1) => {
+      var k;
+      const h = n.value.style.width;
+      if (f && !h)
         return;
-      const G = (I = d == null ? void 0 : d.value) == null ? void 0 : I.offsetWidth;
-      !m || parseInt(m, 10) > G ? y.value = "100%" : y.value = m;
+      const J = (k = d == null ? void 0 : d.value) == null ? void 0 : k.offsetWidth;
+      !h || parseInt(h, 10) > J ? g.value = "100%" : g.value = h;
     };
-    return X(() => {
-      k(n.value, () => {
-        g(!0);
-      }), k(d.value, () => {
-        g();
-      }), l.value || v();
-    }), { __sfc: !0, attrs: t, props: a, emit: e, height: l, textareaId: T, textareaElement: n, textareaComponent: d, textareaValue: s, defaultTextareaHeight: _, textareaHeight: f, textareaWrapperWidth: y, t: L, isReadOnly: b, counter: w, isOverCharacterLimit: h, calculateHeight: v, invalidInput: E, conditionalClasses: M, conditionalClassesInput: P, conditionalClassesLabelBox: H, conditionalClassesLabelItem: N, counterErrorText: $, ariaLabelAttribute: S, ariaLabel: R, label: A, computedAriaLabel: W, showClearButton: U, onClear: D, onInput: z, onBlur: q, onFocus: V, onChange: Y, onPressEscape: Z, resizeTextareaWrapper: g, BentoButton: ee, BentoTypography: te, ErrorMessage: oe, FieldLabel: ne, CrossCircleFillSmallIcon: pe };
+    return te(() => {
+      p = F(n.value, () => {
+        C(!0);
+      }), _ = F(d.value, () => {
+        C();
+      }), r.value || y();
+    }), ae(() => {
+      p == null || p.disconnect(), _ == null || _.disconnect();
+    }), { __sfc: !0, attrs: t, props: a, emit: e, height: r, textareaId: M, textareaElement: n, textareaComponent: d, textareaValue: s, defaultTextareaHeight: b, textareaHeight: v, textareaWrapperWidth: g, textareaElementObserver: p, textareaComponentObserver: _, t: S, isReadOnly: m, counter: P, isOverCharacterLimit: x, calculateHeight: y, invalidInput: R, conditionalClasses: H, conditionalClassesInput: N, conditionalClassesLabelBox: $, conditionalClassesLabelItem: U, counterErrorText: W, ariaLabelAttribute: A, ariaLabel: I, label: B, computedAriaLabel: D, showClearButton: z, onClear: q, onInput: V, onBlur: Y, onFocus: Z, onChange: G, onPressEscape: j, resizeTextareaWrapper: C, BentoButton: le, BentoTypography: re, ErrorMessage: ue, FieldLabel: ce, CrossCircleFillSmallIcon: be };
   }
 });
-var ve = function() {
+var he = function() {
   var e = this, a = e._self._c, t = e._self._setupProxy;
-  return a("div", { ref: "textareaComponent", staticClass: "b-textarea", class: t.conditionalClasses }, [a("div", { style: { width: t.textareaWrapperWidth } }, [a("div", { staticClass: "b-textarea__label-box", class: t.conditionalClassesLabelBox }, [t.label ? a(t.FieldLabel, { attrs: { for: t.textareaId, label: t.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), e.characterLimit ? a(t.BentoTypography, { staticClass: "b-textarea__label-item", class: t.conditionalClassesLabelItem, attrs: { el: "span" } }, [e._v(" " + e._s(t.counter) + " ")]) : e._e()], 1), a(t.BentoTypography, { staticClass: "b-textarea__input-box", attrs: { el: "div", "aria-disabled": e.disabled } }, [a("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: t.conditionalClassesInput, style: { resize: e.resizable, height: t.textareaHeight }, attrs: { id: t.textareaId, "aria-label": t.computedAriaLabel, "aria-invalid": t.invalidInput, readonly: t.isReadOnly, disabled: e.disabled, placeholder: e.placeholder }, domProps: { value: t.textareaValue }, on: { blur: t.onBlur, change: t.onChange, focus: t.onFocus, input: t.onInput, keydown: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : t.onPressEscape.apply(null, arguments);
-  } } }), t.showClearButton ? a("div", { staticClass: "b-textarea__clear-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", disabled: e.disabled }, on: { click: t.onClear, keypress: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : t.onClear.apply(null, arguments);
-  }, keyup: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : t.onClear.apply(null, arguments);
+  return a("div", { ref: "textareaComponent", staticClass: "b-textarea", class: t.conditionalClasses }, [a("div", { style: { width: t.textareaWrapperWidth } }, [a("div", { staticClass: "b-textarea__label-box", class: t.conditionalClassesLabelBox }, [t.label ? a(t.FieldLabel, { attrs: { for: t.textareaId, label: t.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), e.characterLimit ? a(t.BentoTypography, { staticClass: "b-textarea__label-item", class: t.conditionalClassesLabelItem, attrs: { el: "span" } }, [e._v(" " + e._s(t.counter) + " ")]) : e._e()], 1), a(t.BentoTypography, { staticClass: "b-textarea__input-box", attrs: { el: "div", "aria-disabled": e.disabled } }, [a("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: t.conditionalClassesInput, style: { resize: e.resizable, height: t.textareaHeight }, attrs: { id: t.textareaId, "aria-label": t.computedAriaLabel, "aria-invalid": t.invalidInput, readonly: t.isReadOnly, disabled: e.disabled, placeholder: e.placeholder }, domProps: { value: t.textareaValue }, on: { blur: t.onBlur, change: t.onChange, focus: t.onFocus, input: t.onInput, keydown: function(r) {
+    return !r.type.indexOf("key") && e._k(r.keyCode, "esc", 27, r.key, ["Esc", "Escape"]) ? null : t.onPressEscape.apply(null, arguments);
+  } } }), t.showClearButton ? a("div", { staticClass: "b-textarea__clear-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", disabled: e.disabled }, on: { click: t.onClear, keypress: function(r) {
+    return !r.type.indexOf("key") && e._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : t.onClear.apply(null, arguments);
+  }, keyup: function(r) {
+    return !r.type.indexOf("key") && e._k(r.keyCode, "space", 32, r.key, [" ", "Spacebar"]) ? null : t.onClear.apply(null, arguments);
   } }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [a(t.CrossCircleFillSmallIcon, { attrs: { "svg-title": t.t("clearText") } })];
   }, proxy: !0 }], null, !1, 3119266621) })], 1) : e._e()]), t.isOverCharacterLimit ? a(t.ErrorMessage, { attrs: { "error-message": t.counterErrorText } }) : e._e(), e.errorMessage ? a(t.ErrorMessage, { attrs: { "error-message": e.errorMessage } }) : e._e(), e.description ? a(t.BentoTypography, { staticClass: "b-textarea__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1)]);
-}, me = [], ye = /* @__PURE__ */ F(
-  be,
-  ve,
-  me,
+}, ge = [], xe = /* @__PURE__ */ w(
+  ye,
+  he,
+  ge,
   !1,
   null,
-  "0ef638a8",
+  "23205346",
   null,
   null
 );
-const Be = ye.exports;
+const Fe = xe.exports;
 export {
-  Be as BentoTextarea
+  Fe as BentoTextarea
 };
 //# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill-small.vue","../src/components/textarea/textarea.types.ts","../src/components/textarea/textarea.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.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM7.00011 5.93945L5.93945 7.00011L6.93945 8.00011L5.93945 9.00011L7.00011 10.0608L8.00011 9.06077L9.00011 10.0608L10.0608 9.00011L9.06077 8.00011L10.0608 7.00011L9.00011 5.93945L8.00011 6.93945L7.00011 5.93945Z\"/></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","/**\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}\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                >\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, 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 '@/utils/ts/unique-id';\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         * Emitted when the element has lost focus\n         */\n        (e: BentoTextareaEvent.BLUR): void;\n\n        /**\n         * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value\n         */\n        (e: BentoTextareaEvent.CHANGE): void;\n\n        /**\n         * Emitted when the \"Clear\" button was clicked\n         */\n        (e: BentoTextareaEvent.CLEAR): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: BentoTextareaEvent.ESCAPE_PRESSED): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: BentoTextareaEvent.FOCUS): void;\n\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: BentoTextareaEvent.INPUT, value: string): void;\n    }>();\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\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            if (!height.value) {\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    /**\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        // 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    onMounted(() => {\n        observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (!height.value) {\n            calculateHeight();\n        }\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":["uuid","_sfc_main$1","BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","textareaWrapperWidth","t","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","counter","computed","isOverCharacterLimit","calculateHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","_a","onMounted","observeSizeOfElement"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"textarea.js","sources":["../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill-small.vue","../src/components/textarea/textarea.types.ts","../src/components/textarea/textarea.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.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM7.00011 5.93945L5.93945 7.00011L6.93945 8.00011L5.93945 9.00011L7.00011 10.0608L8.00011 9.06077L9.00011 10.0608L10.0608 9.00011L9.06077 8.00011L10.0608 7.00011L9.00011 5.93945L8.00011 6.93945L7.00011 5.93945Z\"/></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","/**\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}\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                >\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 '@/utils/ts/unique-id';\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         * Emitted when the element has lost focus\n         */\n        (e: BentoTextareaEvent.BLUR): void;\n\n        /**\n         * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value\n         */\n        (e: BentoTextareaEvent.CHANGE): void;\n\n        /**\n         * Emitted when the \"Clear\" button was clicked\n         */\n        (e: BentoTextareaEvent.CLEAR): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: BentoTextareaEvent.ESCAPE_PRESSED): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: BentoTextareaEvent.FOCUS): void;\n\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: BentoTextareaEvent.INPUT, value: string): void;\n    }>();\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            if (!height.value) {\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    /**\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        // 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    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":["uuid","_sfc_main$1","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","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","_a","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/timeline.js

@@ -1,19 +1,19 @@
 import { defineComponent as Y, computed as r, ref as N, toRefs as Z, provide as A, inject as D, onUnmounted as G } from "vue";
-import { a as z } from "./chunks/button.133f145e.js";
+import { a as z } from "./chunks/button.bb0d7584.js";
 import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
 import { BentoButtonActions as X } from "./button.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ee } from "./chunks/index.b38a191d.js";
-import { BentoLink as te } from "./link.js";
+import { B as ee } from "./chunks/index.772a5595.js";
+import { B as te } from "./chunks/index.d1f65246.js";
 import { BentoTag as ie } from "./tag.js";
-import { B as ae, d as se } from "./chunks/index.99a2184a.js";
-import { B as ne, a as oe, S as re } from "./chunks/index.eb527b75.js";
+import { B as ae, d as se } from "./chunks/index.6ac01113.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.a4a820fd.js";
 import { g as le } from "./chunks/unique-id.a2a2b458.js";
 import { u as me } from "./chunks/use-has-slot.fbeb19ec.js";
 import { r as ce, e as de, t as w, g as k } from "./chunks/index.f55fdc32.js";
 import { c as ue, a as _e } from "./chunks/index.86453263.js";
-import "./assets/index24.css";
+import "./assets/index28.css";
 var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
 function $(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};