@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/textarea.js

@@ -1,35 +1,35 @@
-import { defineComponent as w, toRefs as D, ref as d, toRef as M, computed as n, watch as y, nextTick as q, onMounted as V } from "vue";
-import { B as W, a as Y } from "./chunks/index.56858f4e.js";
-import { B as z, a as G } from "./chunks/button.d0c9527d.js";
-import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { g as Z } from "./chunks/unique-id.a2a2b458.js";
-import { o as j } from "./chunks/resize.a041304d.js";
-import { u as J } from "./chunks/i18n.155748d6.js";
-import { u as K } from "./chunks/aria-label.ac9651a5.js";
-import { u as Q } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as X } from "./chunks/error-message.0433b539.js";
-import "./assets/index34.css";
+import { defineComponent as W, toRefs as x, ref as u, toRef as z, computed as o, watch as v, nextTick as G, onMounted as V } from "vue";
+import { B as Y } from "./chunks/index.45295dd3.js";
+import { a as Z } from "./chunks/button.fb307df3.js";
+import { n as E } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { g as j } from "./chunks/unique-id.a2a2b458.js";
+import { o as J } from "./chunks/resize.a041304d.js";
+import { u as K } from "./chunks/i18n.155748d6.js";
+import { u as Q } from "./chunks/aria-label.ac9651a5.js";
+import { u as X } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { E as ee } from "./chunks/error-message.3b3c33d4.js";
+import "./assets/index37.css";
 var m = /* @__PURE__ */ ((t) => (t.HORIZONTAL = "horizontal", t.VERTICAL = "vertical", t.BOTH = "both", t.NONE = "none", t))(m || {}), i = /* @__PURE__ */ ((t) => (t.CLEARABLE = "clearable", t.DISABLED = "disabled", t.ERROR = "error", t.READONLY = "readonly", t))(i || {}), r = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CHANGE = "change", t.CLEAR = "clear", t.ESCAPE_PRESSED = "escape-pressed", t.FOCUS = "focus", t.INPUT = "input", t))(r || {});
-let C = 0;
-const ee = {
+let L = 0;
+const te = {
   beforeCreate() {
-    this.uuid = C.toString(), C += 1;
+    this.uuid = L.toString(), L += 1;
   }
 };
-var te = function() {
+var ae = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ 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", "fill-rule": "evenodd", 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 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z", "clip-rule": "evenodd" } })]);
-}, ae = [], le = /* @__PURE__ */ x(
-  ee,
+}, le = [], re = /* @__PURE__ */ E(
   te,
   ae,
+  le,
   !1,
   null,
   "3c9e4cfb",
   null,
   null
 );
-const re = le.exports, se = {
+const se = re.exports, ne = {
   "en-US": {
     clearText: "Clear text",
     optional: "optional",
@@ -37,10 +37,10 @@ const re = le.exports, se = {
     textarea: "textarea",
     yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
   }
-}, ne = w({
-  i18n: { messages: se },
+}, oe = W({
+  i18n: { messages: ne },
   name: "bento-textarea",
-  components: { BentoButton: z, BentoTypography: W, ErrorMessage: X, CrossCircleFillSmallIcon: re },
+  components: { BentoButton: Z, BentoTypography: Y, ErrorMessage: ee, CrossCircleFillSmallIcon: se },
   props: {
     /**
      * Text that labels an the input element
@@ -111,123 +111,124 @@ const re = le.exports, se = {
     r.FOCUS,
     r.INPUT
   ],
-  setup(t, { emit: e }) {
-    const { ariaLabel: a, height: l, label: E } = D(t), L = Z("textarea"), o = d(null), s = d(t.value), _ = 44, c = d(t.height || `${_}px`), v = d("100%"), { t: p } = J(), { isReadOnly: u } = Q(M(t, "readonly")), S = n(() => `${s.value.length} / ${t.characterLimit}`), b = n(
-      () => t.characterLimit && s.value.length > t.characterLimit
-    ), f = () => {
-      o.value && o.value.scrollHeight > _ && (c.value = `${o.value.scrollHeight + 3}px`);
+  setup(t, { attrs: e, emit: a }) {
+    const { height: l } = x(t), R = j("textarea"), s = u(null), n = u(t.value), b = 44, d = u(t.height || `${b}px`), y = u("100%"), { t: C } = K(), { isReadOnly: _ } = X(z(t, "readonly")), S = o(() => `${n.value.length} / ${t.characterLimit}`), f = o(
+      () => t.characterLimit && n.value.length > t.characterLimit
+    ), p = () => {
+      s.value && s.value.scrollHeight > b && (d.value = `${s.value.scrollHeight + 3}px`);
     };
-    y(l, () => {
-      l.value ? c.value = l.value : f();
-    }), y(
+    v(l, () => {
+      l.value ? d.value = l.value : p();
+    }), v(
       () => t.value,
       () => {
-        s.value = t.value;
+        n.value = t.value;
       },
       { immediate: !0 }
-    ), y(
-      () => s.value,
+    ), v(
+      () => n.value,
       async () => {
         if (!l.value) {
-          if (c.value = `${_}px`, !s.value)
+          if (d.value = `${b}px`, !n.value)
             return;
-          await q(), f();
+          await G(), p();
         }
       },
       { immediate: !0 }
     );
-    const g = n(() => !!t.errorMessage || b.value), A = n(() => ({
+    const h = o(() => !!t.errorMessage || f.value), A = o(() => ({
       [`b-textarea--${i.DISABLED}`]: t.disabled
-    })), R = n(() => ({
+    })), I = o(() => ({
       [`b-textarea__input--${i.CLEARABLE}`]: t.clearable,
-      [`b-textarea__input--${i.READONLY}`]: u.value,
-      [`b-textarea__input--${i.ERROR}`]: g.value,
+      [`b-textarea__input--${i.READONLY}`]: _.value,
+      [`b-textarea__input--${i.ERROR}`]: h.value,
       ["b-textarea__input--dynamic-height"]: !l.value
-    })), B = n(() => ({
+    })), k = o(() => ({
       ["b-textarea__label-box--no-label"]: !t.label
-    })), I = n(() => ({
-      [`b-textarea__label-item--${i.ERROR}`]: b.value
-    })), k = n(
-      () => p("yourTextCanBenAtMost", { characterLimit: t.characterLimit })
-    ), O = K({
-      ariaLabel: a,
-      label: E,
-      defaultFallback: p("textarea")
-    }), P = n(
-      () => t.clearable && s.value && !t.disabled && !u.value
-    ), N = () => {
-      s.value = "", e(r.CLEAR), e(r.INPUT, "");
-    }, T = (h) => {
-      !t.disabled && !u.value && (s.value = h.target.value, e(r.INPUT, s.value));
-    }, F = () => {
-      o.value.scrollTop = 0, e(r.BLUR);
-    }, H = () => {
-      o.value.focus(), e(r.FOCUS);
-    }, U = () => {
-      e(r.CHANGE);
-    }, $ = () => {
-      e(r.ESCAPE_PRESSED);
+    })), O = o(() => ({
+      [`b-textarea__label-item--${i.ERROR}`]: f.value
+    })), B = o(
+      () => C("yourTextCanBenAtMost", { characterLimit: t.characterLimit })
+    ), P = u(e["aria-label"]), { ariaLabel: N, label: F } = x(t), H = Q({
+      ariaLabel: P.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: N,
+      defaultFallback: F
+    }), U = o(
+      () => t.clearable && n.value && !t.disabled && !_.value
+    ), $ = () => {
+      n.value = "", a(r.CLEAR), a(r.INPUT, "");
+    }, w = (c) => {
+      !t.disabled && !_.value && (n.value = c.target.value, a(r.INPUT, n.value));
+    }, M = () => {
+      s.value.scrollTop = 0, a(r.BLUR);
+    }, D = () => {
+      s.value.focus(), a(r.FOCUS);
+    }, T = () => {
+      a(r.CHANGE);
+    }, q = () => {
+      a(r.ESCAPE_PRESSED);
     };
     return V(() => {
-      j(o.value, () => {
-        v.value = `${o.value.offsetWidth}px`;
-      }), l.value || f();
+      J(s.value, () => {
+        var g;
+        const c = (g = s == null ? void 0 : s.value) == null ? void 0 : g.offsetWidth;
+        y.value = c ? `${c}px` : "100%";
+      }), l.value || p();
     }), {
       // Enums
-      BentoButtonVariant: G,
       BentoTextareaEvent: r,
-      BentoTypographyElement: Y,
       // Methods
-      onBlur: F,
-      onChange: U,
-      onClear: N,
-      onFocus: H,
-      onInput: T,
-      onPressEscape: $,
-      t: p,
+      onBlur: M,
+      onChange: T,
+      onClear: $,
+      onFocus: D,
+      onInput: w,
+      onPressEscape: q,
+      t: C,
       // Values
-      computedAriaLabel: O,
+      computedAriaLabel: H,
       conditionalClasses: A,
-      conditionalClassesLabelItem: I,
-      conditionalClassesLabelBox: B,
+      conditionalClassesLabelItem: O,
+      conditionalClassesLabelBox: k,
       counter: S,
-      counterErrorText: k,
-      conditionalClassesInput: R,
-      invalidInput: g,
-      isOverCharacterLimit: b,
-      isReadOnly: u,
-      showClearButton: P,
-      textareaElement: o,
-      textareaHeight: c,
-      textareaId: L,
-      textareaValue: s,
-      textareaWidth: v
+      counterErrorText: B,
+      conditionalClassesInput: I,
+      invalidInput: h,
+      isOverCharacterLimit: f,
+      isReadOnly: _,
+      showClearButton: U,
+      textareaElement: s,
+      textareaHeight: d,
+      textareaId: R,
+      textareaValue: n,
+      textareaWidth: y
     };
   }
 });
-var oe = function() {
+var ie = function() {
   var e = this, a = e._self._c;
-  return e._self._setupProxy, a("div", { staticClass: "b-textarea", class: e.conditionalClasses, style: { width: e.textareaWidth } }, [a("div", { staticClass: "b-textarea__label-box", class: e.conditionalClassesLabelBox }, [e.label ? a("label", { staticClass: "b-textarea__label", attrs: { for: e.textareaId } }, [a("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional && !e.required ? a("bento-typography", { staticClass: "b-textarea__label-item", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.t("optional")) + ") ")]) : e._e(), e.required ? a("bento-typography", { staticClass: "b-textarea__label-item", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.t("required")) + ") ")]) : e._e()], 1) : e._e(), e.characterLimit ? a("bento-typography", { staticClass: "b-textarea__label-item", class: e.conditionalClassesLabelItem, attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.counter) + " ")]) : e._e()], 1), a("bento-typography", { staticClass: "b-textarea__input-box", attrs: { el: e.BentoTypographyElement.DIV, "aria-disabled": e.disabled } }, [a("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: e.conditionalClassesInput, style: { resize: e.resizable, height: e.textareaHeight }, attrs: { id: e.textareaId, "aria-label": e.computedAriaLabel, "aria-invalid": e.invalidInput, readonly: e.isReadOnly, disabled: e.disabled, placeholder: e.placeholder }, domProps: { value: e.textareaValue }, on: { blur: e.onBlur, change: e.onChange, focus: e.onFocus, input: e.onInput, keydown: function(l) {
+  return e._self._setupProxy, a("div", { staticClass: "b-textarea", class: e.conditionalClasses, style: { width: e.textareaWidth } }, [a("div", { staticClass: "b-textarea__label-box", class: e.conditionalClassesLabelBox }, [e.label ? a("label", { staticClass: "b-textarea__label", attrs: { for: e.textareaId } }, [a("bento-typography", { attrs: { el: "span", stronger: "" } }, [e._v(e._s(e.label))]), e.optional && !e.required ? a("bento-typography", { staticClass: "b-textarea__label-item", attrs: { el: "span" } }, [e._v(" (" + e._s(e.t("optional")) + ") ")]) : e._e(), e.required ? a("bento-typography", { staticClass: "b-textarea__label-item", attrs: { el: "span" } }, [e._v(" (" + e._s(e.t("required")) + ") ")]) : e._e()], 1) : e._e(), e.characterLimit ? a("bento-typography", { staticClass: "b-textarea__label-item", class: e.conditionalClassesLabelItem, attrs: { el: "span" } }, [e._v(" " + e._s(e.counter) + " ")]) : e._e()], 1), a("bento-typography", { staticClass: "b-textarea__input-box", attrs: { el: "div", "aria-disabled": e.disabled } }, [a("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: e.conditionalClassesInput, style: { resize: e.resizable, height: e.textareaHeight }, attrs: { id: e.textareaId, "aria-label": e.computedAriaLabel, "aria-invalid": e.invalidInput, readonly: e.isReadOnly, disabled: e.disabled, placeholder: e.placeholder }, domProps: { value: e.textareaValue }, on: { blur: e.onBlur, change: e.onChange, focus: e.onFocus, input: e.onInput, keydown: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.onPressEscape.apply(null, arguments);
-  } } }), e.showClearButton ? a("div", { staticClass: "b-textarea__clear-button" }, [a("bento-button", { attrs: { variant: e.BentoButtonVariant.TERTIARY, disabled: e.disabled }, on: { click: e.onClear, keypress: function(l) {
+  } } }), e.showClearButton ? a("div", { staticClass: "b-textarea__clear-button" }, [a("bento-button", { attrs: { variant: "tertiary", disabled: e.disabled }, on: { click: e.onClear, keypress: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onClear.apply(null, arguments);
   }, keyup: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.onClear.apply(null, arguments);
   } }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [a("cross-circle-fill-small-icon", { attrs: { "svg-title": e.t("clearText") } })];
-  }, proxy: !0 }], null, !1, 1092214813) })], 1) : e._e()]), e.isOverCharacterLimit ? a("error-message", { attrs: { "error-message": e.counterErrorText } }) : e._e(), e.errorMessage ? a("error-message", { attrs: { "error-message": e.errorMessage } }) : e._e(), e.description ? a("bento-typography", { staticClass: "b-textarea__description", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
-}, ie = [], ce = /* @__PURE__ */ x(
-  ne,
+  }, proxy: !0 }], null, !1, 1092214813) })], 1) : e._e()]), e.isOverCharacterLimit ? a("error-message", { attrs: { "error-message": e.counterErrorText } }) : e._e(), e.errorMessage ? a("error-message", { attrs: { "error-message": e.errorMessage } }) : e._e(), e.description ? a("bento-typography", { staticClass: "b-textarea__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
+}, ce = [], ue = /* @__PURE__ */ E(
   oe,
   ie,
+  ce,
   !1,
   null,
-  "e1f2e340",
+  "7ac5f986",
   null,
   null
 );
-const he = ce.exports;
+const ge = ue.exports;
 export {
-  he as BentoTextarea
+  ge as BentoTextarea
 };
 //# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../src/components/textarea/textarea.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill-small.vue","../src/components/textarea/textarea.vue"],"sourcesContent":["export 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","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" 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\" fill-rule=\"evenodd\" 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 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z\" clip-rule=\"evenodd\"/></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 scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <div class=\"b-textarea\" :class=\"conditionalClasses\" :style=\"{ width: textareaWidth }\">\n        <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n            <label v-if=\"label\" :for=\"textareaId\" class=\"b-textarea__label\">\n                <bento-typography :el=\"BentoTypographyElement.SPAN\" stronger>{{ label }}</bento-typography>\n                <bento-typography\n                    v-if=\"optional && !required\"\n                    :el=\"BentoTypographyElement.SPAN\"\n                    class=\"b-textarea__label-item\"\n                >\n                    ({{ t('optional') }})\n                </bento-typography>\n                <bento-typography v-if=\"required\" :el=\"BentoTypographyElement.SPAN\" class=\"b-textarea__label-item\">\n                    ({{ t('required') }})\n                </bento-typography>\n            </label>\n            <bento-typography\n                v-if=\"characterLimit\"\n                :el=\"BentoTypographyElement.SPAN\"\n                class=\"b-textarea__label-item\"\n                :class=\"conditionalClassesLabelItem\"\n            >\n                {{ counter }}\n            </bento-typography>\n        </div>\n        <bento-typography :el=\"BentoTypographyElement.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=\"BentoButtonVariant.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=\"BentoTypographyElement.SPAN\">\n            {{ description }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, onMounted, PropType, ref, toRef, toRefs, watch } from 'vue';\n    import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { ErrorMessage } from '@/components/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-textarea',\n        components: { BentoButton, BentoTypography, ErrorMessage, CrossCircleFillSmallIcon },\n        props: {\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) =>\n                    Object.values(BentoTextareaResizeOption).includes(value),\n            },\n\n            /**\n             * Highlights the textarea is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Text displayed as the value of the textarea\n             */\n            value: { type: String, default: '' },\n        },\n        emits: [\n            BentoTextareaEvent.BLUR,\n            BentoTextareaEvent.CHANGE,\n            BentoTextareaEvent.CLEAR,\n            BentoTextareaEvent.ESCAPE_PRESSED,\n            BentoTextareaEvent.FOCUS,\n            BentoTextareaEvent.INPUT,\n        ],\n        setup(props, { emit }) {\n            const { ariaLabel, height, label } = toRefs(props);\n\n            const textareaId = generateUid('textarea');\n            const textareaElement = ref<HTMLTextAreaElement>(null);\n            const textareaValue = ref(props.value);\n            const defaultTextareaHeight = 44;\n            const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n            const textareaWidth = ref('100%');\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(() =>\n                t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })\n            );\n\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel,\n                label,\n                defaultFallback: t('textarea'),\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                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            onMounted(() => {\n                observeSizeOfElement(textareaElement.value, () => {\n                    textareaWidth.value = `${textareaElement.value.offsetWidth}px`;\n                });\n\n                if (!height.value) {\n                    calculateHeight();\n                }\n            });\n\n            return {\n                // Enums\n                BentoButtonVariant,\n                BentoTextareaEvent,\n                BentoTypographyElement,\n\n                // Methods\n                onBlur,\n                onChange,\n                onClear,\n                onFocus,\n                onInput,\n                onPressEscape,\n                t,\n\n                // Values\n                computedAriaLabel,\n                conditionalClasses,\n                conditionalClassesLabelItem,\n                conditionalClassesLabelBox,\n                counter,\n                counterErrorText,\n                conditionalClassesInput,\n                invalidInput,\n                isOverCharacterLimit,\n                isReadOnly,\n                showClearButton,\n                textareaElement,\n                textareaHeight,\n                textareaId,\n                textareaValue,\n                textareaWidth,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoButton","BentoTypography","ErrorMessage","CrossCircleFillSmallIcon","value","props","emit","ariaLabel","height","label","toRefs","textareaId","generateUid","textareaElement","ref","textareaValue","defaultTextareaHeight","textareaHeight","textareaWidth","t","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","counter","computed","isOverCharacterLimit","calculateHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onMounted","observeSizeOfElement","BentoButtonVariant","BentoTypographyElement"],"mappings":"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","x_google_ignoreList":[1]}
+{"version":3,"file":"textarea.js","sources":["../src/components/textarea/textarea.types.ts","../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/cross-circle-fill-small.vue","../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}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" 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\" fill-rule=\"evenodd\" 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 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z\" clip-rule=\"evenodd\"/></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 scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <div class=\"b-textarea\" :class=\"conditionalClasses\" :style=\"{ width: textareaWidth }\">\n        <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n            <label v-if=\"label\" :for=\"textareaId\" class=\"b-textarea__label\">\n                <bento-typography el=\"span\" stronger>{{ label }}</bento-typography>\n                <bento-typography v-if=\"optional && !required\" el=\"span\" class=\"b-textarea__label-item\">\n                    ({{ t('optional') }})\n                </bento-typography>\n                <bento-typography v-if=\"required\" el=\"span\" class=\"b-textarea__label-item\">\n                    ({{ t('required') }})\n                </bento-typography>\n            </label>\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</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, onMounted, PropType, ref, toRef, toRefs, watch } from 'vue';\n    import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { ErrorMessage } from '@/components/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-textarea',\n        components: { BentoButton, BentoTypography, ErrorMessage, CrossCircleFillSmallIcon },\n        props: {\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) =>\n                    Object.values(BentoTextareaResizeOption).includes(value),\n            },\n\n            /**\n             * Highlights the textarea is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Text displayed as the value of the textarea\n             */\n            value: { type: String, default: '' },\n        },\n        emits: [\n            BentoTextareaEvent.BLUR,\n            BentoTextareaEvent.CHANGE,\n            BentoTextareaEvent.CLEAR,\n            BentoTextareaEvent.ESCAPE_PRESSED,\n            BentoTextareaEvent.FOCUS,\n            BentoTextareaEvent.INPUT,\n        ],\n        setup(props, { attrs, emit }) {\n            const { height } = toRefs(props);\n\n            const textareaId = generateUid('textarea');\n            const textareaElement = ref<HTMLTextAreaElement>(null);\n            const textareaValue = ref(props.value);\n            const defaultTextareaHeight = 44;\n            const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n            const textareaWidth = ref('100%');\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(() =>\n                t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })\n            );\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                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            onMounted(() => {\n                observeSizeOfElement(textareaElement.value, () => {\n                    const offsetWidth = textareaElement?.value?.offsetWidth;\n                    textareaWidth.value = offsetWidth ? `${offsetWidth}px` : '100%';\n                });\n\n                if (!height.value) {\n                    calculateHeight();\n                }\n            });\n\n            return {\n                // Enums\n                BentoTextareaEvent,\n\n                // Methods\n                onBlur,\n                onChange,\n                onClear,\n                onFocus,\n                onInput,\n                onPressEscape,\n                t,\n\n                // Values\n                computedAriaLabel,\n                conditionalClasses,\n                conditionalClassesLabelItem,\n                conditionalClassesLabelBox,\n                counter,\n                counterErrorText,\n                conditionalClassesInput,\n                invalidInput,\n                isOverCharacterLimit,\n                isReadOnly,\n                showClearButton,\n                textareaElement,\n                textareaHeight,\n                textareaId,\n                textareaValue,\n                textareaWidth,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoButton","BentoTypography","ErrorMessage","CrossCircleFillSmallIcon","value","props","attrs","emit","height","toRefs","textareaId","generateUid","textareaElement","ref","textareaValue","defaultTextareaHeight","textareaHeight","textareaWidth","t","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","counter","computed","isOverCharacterLimit","calculateHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onMounted","observeSizeOfElement","offsetWidth","_a"],"mappings":"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","x_google_ignoreList":[1]}