@adyen/bento-vue2 1.28.0 → 1.29.0

package/dist/chunks/tabs.CE65f3E_.js

@@ -1,140 +0,0 @@
-import { defineComponent as I, toRefs as w, ref as _, provide as f, computed as A, inject as m, onUnmounted as N, watch as B, nextTick as k } from "vue";
-import { E as R, T as h, a as g } from "./tabs.keys.Bc2pSKRw.js";
-import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as D } from "./typography.Bjtu3Gca.js";
-import { g as S } from "./unique-id.XFfoKuc2.js";
-import { F as K } from "./fixed-scroller.Bq1AgPnw.js";
-import "../assets/tabs.css";
-const F = I({
-  props: {
-    /**
-     * Title of the tab
-     */
-    title: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Determines whether the tab is disabled
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Displays the tab with a notification indicator
-     */
-    withNotificationIndicator: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(a) {
-    const { disabled: t, withNotificationIndicator: e } = w(a), c = _();
-    f(R, (T) => {
-      c.value = T;
-    });
-    const r = A(() => c.value ?? a.title), b = m(h), l = m(g), { id: u, unregisterTab: p } = b({ disabled: t, title: r, withNotificationIndicator: e });
-    return N(() => p()), { activeTabId: l, id: u, computedTitle: r };
-  }
-});
-var L = function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === t.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${t.id}-tabpanel`, role: "tabpanel", "aria-labelledby": t.id } }, [t.activeTabId === t.id ? [t._t("default")] : t._e()], 2);
-}, O = [], X = /* @__PURE__ */ x(
-  F,
-  L,
-  O,
-  !1,
-  null,
-  "7e802d0d"
-);
-const M = X.exports, y = (a, t) => {
-  const e = a === 0 ? t.length - 1 : a - 1;
-  return t[e].disabled ? y(e, t) : e;
-}, C = (a, t) => {
-  const e = a === t.length - 1 ? 0 : a + 1;
-  return t[e].disabled ? C(e, t) : e;
-};
-var v = /* @__PURE__ */ ((a) => (a.ACTIVE_TAB_INDEX = "update:active-tab-index", a))(v || {});
-const Y = I({
-  components: {
-    BentoTypography: D,
-    FixedScroller: K
-  },
-  props: {
-    /**
-     * Sets the active tab by its index (0 being the first tab item).
-     */
-    activeTabIndex: { type: Number, default: 0 }
-  },
-  emits: [v.ACTIVE_TAB_INDEX],
-  setup(a, { emit: t }) {
-    const e = _([]), c = _(null), i = _(), r = _("");
-    f(g, r);
-    const b = (n) => () => {
-      var o;
-      e.value = (o = e.value) == null ? void 0 : o.filter(({ id: s }) => s !== n);
-    };
-    f(h, ({ title: n, disabled: o, withNotificationIndicator: s }) => {
-      const d = S("b-tab");
-      return e.value.push({ disabled: o, id: d, title: n, withNotificationIndicator: s }), { id: d, unregisterTab: b(d) };
-    });
-    const u = (n) => {
-      if (n.code === "ArrowLeft" || n.code === "ArrowRight") {
-        const o = e.value.find((d) => document.activeElement.id === d.id);
-        let s = e.value.indexOf(o);
-        n.code === "ArrowLeft" ? s = y(s, e.value) : n.code === "ArrowRight" && (s = C(s, e.value)), c.value.children[s].focus();
-      }
-    };
-    return B(
-      [() => a.activeTabIndex, e],
-      ([n, o]) => {
-        k(() => {
-          var d;
-          const s = o[n];
-          r.value = s && !s.disabled ? s.id : (d = e.value.find(({ disabled: E }) => !E)) == null ? void 0 : d.id;
-        });
-      },
-      { immediate: !0 }
-    ), {
-      tabs: e,
-      tablist: c,
-      tablistwrapper: i,
-      activeTabId: r,
-      onKeydownTabsNavigation: u,
-      handleTabChange: (n) => {
-        r.value = n;
-        const o = e.value.findIndex(({ id: s }) => s === r.value);
-        t(v.ACTIVE_TAB_INDEX, o);
-      },
-      isDisabled: (n) => n ? "disabled" : !1
-    };
-  }
-});
-var P = function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { staticClass: "b-tabs" }, [e("fixed-scroller", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", attrs: { condensed: "", "extra-padding-top": 5 } }, [e("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({ disabled: c, id: i, title: r, withNotificationIndicator: b }) {
-    return e("button", { key: i, staticClass: "b-tabs__tab", class: {
-      "b-tabs__tab--active": t.activeTabId === i,
-      "b-tabs__tab--disabled": c
-    }, attrs: { id: i, role: "tab", type: "button", "aria-controls": `${i}-tabpanel`, "aria-selected": t.activeTabId === i ? "true" : "false", tabindex: t.activeTabId === i && !c.value ? null : -1, disabled: t.isDisabled(c) }, on: { click: function(l) {
-      return t.handleTabChange(i);
-    }, keydown: function(l) {
-      return !l.type.indexOf("key") && t._k(l.keyCode, "enter", 13, l.key, "Enter") && t._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : t.handleTabChange(i);
-    } } }, [e("span", { staticClass: "b-tabs__tab-text" }, [e("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(r) + " ")]), b ? e("span", { staticClass: "b-tabs__tab-notification-dot", attrs: { "aria-hidden": "true" } }) : t._e()], 1), e("span", { directives: [{ name: "show", rawName: "v-show", value: t.activeTabId === i, expression: "activeTabId === id" }], staticClass: "b-tabs__tab-underline", attrs: { "aria-hidden": "true" } })]);
-  }), 0)]), t._t("default")], 2);
-}, $ = [], G = /* @__PURE__ */ x(
-  Y,
-  P,
-  $,
-  !1,
-  null,
-  "7fc977e3"
-);
-const Q = G.exports;
-export {
-  M as B,
-  Q as a
-};
-//# sourceMappingURL=tabs.CE65f3E_.js.map

package/dist/chunks/tabs.CE65f3E_.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.CE65f3E_.js","sources":["../../src/components/tabs/components/tab.vue","../../src/components/tabs/tabs.utils.ts","../../src/components/tabs/tabs.types.ts","../../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" class=\"b-tab\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <template v-if=\"activeTabId === id\">\n            <slot />\n        </template>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays the tab with a notification indicator\n             */\n            withNotificationIndicator: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled, withNotificationIndicator } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled, title: computedTitle, withNotificationIndicator });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n    withNotificationIndicator: Ref<boolean>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <fixed-scroller ref=\"tablistwrapper\" condensed :extra-padding-top=\"5\" class=\"b-tabs__tab-list-wrapper\">\n            <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                <button\n                    v-for=\"{ disabled, id, title, withNotificationIndicator } in tabs\"\n                    :id=\"id\"\n                    :key=\"id\"\n                    role=\"tab\"\n                    type=\"button\"\n                    class=\"b-tabs__tab\"\n                    :class=\"{\n                        'b-tabs__tab--active': activeTabId === id,\n                        'b-tabs__tab--disabled': disabled,\n                    }\"\n                    :aria-controls=\"`${id}-tabpanel`\"\n                    :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                    :tabindex=\"activeTabId === id && !disabled.value ? null : -1\"\n                    :disabled=\"isDisabled(disabled)\"\n                    @click=\"handleTabChange(id)\"\n                    @keydown.enter.space=\"handleTabChange(id)\"\n                >\n                    <span class=\"b-tabs__tab-text\">\n                        <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                            {{ title }}\n                        </bento-typography>\n                        <span\n                            v-if=\"withNotificationIndicator\"\n                            class=\"b-tabs__tab-notification-dot\"\n                            aria-hidden=\"true\"\n                        ></span>\n                    </span>\n                    <span v-show=\"activeTabId === id\" class=\"b-tabs__tab-underline\" aria-hidden=\"true\"></span>\n                </button>\n            </div>\n        </fixed-scroller>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n            FixedScroller,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const tablistwrapper = ref<InstanceType<typeof FixedScroller>>();\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title, withNotificationIndicator });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish =>\n                (isDisabledTab ? 'disabled' : false) as Booleanish;\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","withNotificationIndicator","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","FixedScroller","emit","tabs","tablist","tablistwrapper","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex","isDisabledTab"],"mappings":"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"}

package/dist/chunks/tag.bhKrZHTU.js

@@ -1,64 +0,0 @@
-import { defineComponent as c, computed as o } from "vue";
-import { B as m } from "./typography.Bjtu3Gca.js";
-import { u as d } from "./aria-label.CaUURpnB.js";
-import { g as s } from "./get-slot-text.Cgn-E48s.js";
-import { B as v } from "./tooltip.DR8rbIYw.js";
-import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/tag.css";
-var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
-const p = c({
-  name: "bento-tag",
-  components: { BentoTypography: m },
-  directives: { BentoTooltipDirective: v },
-  props: {
-    /**
-     * The label text content of the Tag.
-     */
-    label: { type: String, default: null },
-    /**
-     * The variant variant of tag
-     */
-    variant: {
-      type: String,
-      default: r.GREY,
-      validator: (t) => Object.values(r).includes(t)
-    },
-    /**
-     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...".
-     */
-    truncate: { type: Number, default: null }
-  },
-  setup(t, { slots: e }) {
-    const l = d({
-      label: t.label || s(e)("default"),
-      defaultFallback: "tag"
-    }), i = o(() => ({
-      [`b-tag--${t.variant}`]: t.variant
-    })), a = o(() => t.label || s(e)("default") || "tag"), n = o(() => t.truncate && a.value.length > t.truncate), u = o(() => t.truncate && n.value ? `${a.value.slice(0, t.truncate)}...` : a.value);
-    return {
-      // Values
-      computedAriaLabel: l,
-      textFromSlot: a,
-      formattedText: u,
-      tagConditionalClasses: i,
-      shouldShowTooltip: n
-    };
-  }
-});
-var b = function() {
-  var e = this, l = e._self._c;
-  return e._self._setupProxy, l("span", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: e.shouldShowTooltip ? e.textFromSlot : null, expression: "shouldShowTooltip ? textFromSlot : null" }], staticClass: "b-tag", class: e.tagConditionalClasses, attrs: { "aria-label": e.computedAriaLabel, role: "mark" } }, [l("bento-typography", { staticClass: "b-tag__label", attrs: { el: "span", variant: "caption", stronger: "" } }, [e._v(" " + e._s(e.formattedText) + " ")])], 1);
-}, _ = [], g = /* @__PURE__ */ f(
-  p,
-  b,
-  _,
-  !1,
-  null,
-  "28dca3d1"
-);
-const R = g.exports;
-export {
-  R as B,
-  r as a
-};
-//# sourceMappingURL=tag.bhKrZHTU.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tag.bhKrZHTU.js","sources":["../../src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n        role=\"mark\"\n    >\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTagVariant } from './tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'bento-tag',\n        components: { BentoTypography },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * The label text content of the Tag.\n             */\n            label: { type: String, default: null },\n\n            /**\n             * The variant variant of tag\n             */\n            variant: {\n                type: String as PropType<BentoTagVariant | `${BentoTagVariant}`>,\n                default: BentoTagVariant.GREY,\n                validator: (value: BentoTagVariant) => Object.values(BentoTagVariant).includes(value),\n            },\n\n            /**\n             * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n             */\n            truncate: { type: Number, default: null },\n        },\n        setup(props, { slots }) {\n            const computedAriaLabel = useAriaLabel({\n                label: props.label || getSlotText(slots)('default'),\n                defaultFallback: 'tag',\n            });\n\n            const tagConditionalClasses = computed(() => ({\n                [`b-tag--${props.variant}`]: props.variant,\n            }));\n\n            const textFromSlot = computed(() => props.label || getSlotText(slots)('default') || 'tag');\n            const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n            const formattedText = computed(() => {\n                if (!props.truncate) {\n                    return textFromSlot.value;\n                }\n\n                return shouldShowTooltip.value\n                    ? `${textFromSlot.value.slice(0, props.truncate)}...`\n                    : textFromSlot.value;\n            });\n\n            return {\n                // Values\n                computedAriaLabel,\n                textFromSlot,\n                formattedText,\n                tagConditionalClasses,\n                shouldShowTooltip,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","_sfc_main","defineComponent","BentoTypography","BentoTooltipDirective","value","props","slots","computedAriaLabel","useAriaLabel","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;ACmBZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA;AAAA,MAAA,OAAAH,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA;AAAA,MACA,iBAAA;AAAA,IACA,CAAA,GAGAI,IAAAC,EAAA,OAAA;AAAA,MAAA,CAAA,UAAAN,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACA,EAAA,GAGAO,IAAAD,EAAA,MAAAN,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA,KAAA,KAAA,GACAO,IAAAF,EAAA,MAAAN,EAAA,YAAAO,EAAA,MAAA,SAAAP,EAAA,QAAA,GAEAS,IAAAH,EAAA,MACAN,EAAA,YAIAQ,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAP,EAAA,QAAA,CAAA,QAHAO,EAAA,KAKA;AAGA,WAAA;AAAA;AAAA,MAAA,mBAAAL;AAAA,MAEA,cAAAK;AAAA,MACA,eAAAE;AAAA,MACA,uBAAAJ;AAAA,MACA,mBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/textarea.CcKbtQBs.js

@@ -1,208 +0,0 @@
-import { defineComponent as K, useAttrs as Q, toRefs as O, ref as d, toRef as X, computed as n, watch as x, nextTick as ee, onMounted as te, onUnmounted as ae } from "vue";
-import { B as le } from "./button.DhAUh5JA.js";
-import { B as re } from "./typography.Bjtu3Gca.js";
-import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { g as se } from "./unique-id.XFfoKuc2.js";
-import { o as F } from "./resize.Bqks3WUm.js";
-import { u as oe } from "./aria-label.CaUURpnB.js";
-import { u as ne } from "./i18n.BQkEbtPM.js";
-import { u as ie } from "./use-form-layout-loading.D3lALhtC.js";
-import { E as ue, F as ce } from "./error-message.BSxUoE3_.js";
-import "../assets/textarea.css";
-let H = 0;
-const de = {
-  beforeCreate() {
-    this.uuid = H.toString(), H += 1;
-  }
-};
-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" } })]);
-}, fe = [], _e = /* @__PURE__ */ T(
-  de,
-  pe,
-  fe,
-  !1,
-  null,
-  null
-);
-const be = _e.exports;
-var E = /* @__PURE__ */ ((l) => (l.HORIZONTAL = "horizontal", l.VERTICAL = "vertical", l.BOTH = "both", l.NONE = "none", l))(E || {}), p = /* @__PURE__ */ ((l) => (l.CLEARABLE = "clearable", l.DISABLED = "disabled", l.ERROR = "error", l.READONLY = "readonly", l))(p || {}), u = /* @__PURE__ */ ((l) => (l.BLUR = "blur", l.CHANGE = "change", l.CLEAR = "clear", l.ESCAPE_PRESSED = "escape-pressed", l.FOCUS = "focus", l.INPUT = "input", l))(u || {});
-const ve = {
-  "en-US": {
-    clearText: "Clear text",
-    textarea: "textarea",
-    yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
-  }
-}, he = {
-  i18n: { messages: ve },
-  name: "bento-textarea"
-}, me = /* @__PURE__ */ K({
-  ...he,
-  props: {
-    /**
-     * Text that labels an the input element
-     */
-    ariaLabel: { type: String, default: void 0 },
-    /**
-     * Text that shows number of characters in textarea
-     */
-    characterLimit: { type: Number, default: void 0 },
-    /**
-     * Text displayed as the help text of the textarea
-     */
-    description: { type: String, default: "" },
-    /**
-     * Disables the possibility of changing value in the textarea
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * If set to true, shows a button to clear all the text
-     */
-    clearable: { type: Boolean, default: !1 },
-    /**
-     * Adds error text
-     */
-    errorMessage: { type: String, default: "" },
-    /**
-     * Sets the height of the textarea, e.g 200px OR 20vh
-     */
-    height: { type: String, default: null },
-    /**
-     * Text displayed as the label of the textarea
-     */
-    label: { type: String, default: "" },
-    /**
-     * Highlights the textarea is optional.
-     */
-    optional: { type: Boolean, default: !1 },
-    /**
-     * Text displayed as the placeholder of the textarea
-     */
-    placeholder: { type: String, default: "" },
-    /**
-     * Set the textarea to read only state.
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * Indicates the possibility of resize the textarea
-     */
-    resizable: {
-      type: String,
-      default: E.BOTH,
-      validator: (l) => Object.values(E).includes(l)
-    },
-    /**
-     * Highlights the textarea is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * Text displayed as the value of the textarea
-     */
-    value: { type: String, default: "" }
-  },
-  setup(l, { emit: e }) {
-    const a = l, t = Q(), { height: r } = O(a), w = se("textarea"), s = d(null), f = d(null), o = d(a.value), h = 44, _ = d(a.height || `${h}px`), y = d("100%");
-    let b = null, v = null;
-    const { t: R } = ne(), { isReadOnly: m } = ie(X(a, "readonly")), M = n(() => `${o.value.length} / ${a.characterLimit}`), C = n(
-      () => a.characterLimit && o.value.length > a.characterLimit
-    ), g = () => {
-      s.value && s.value.scrollHeight > h && (_.value = `${s.value.scrollHeight + 3}px`);
-    };
-    x(r, () => {
-      r.value ? _.value = r.value : g();
-    }), x(
-      () => a.value,
-      () => {
-        o.value = a.value;
-      },
-      { immediate: !0 }
-    ), x(
-      () => o.value,
-      async () => {
-        var i, c;
-        if (!r.value && (!s.value || ((i = s.value) == null ? void 0 : i.scrollHeight) > ((c = s.value) == null ? void 0 : c.clientHeight))) {
-          if (_.value = `${h}px`, !o.value)
-            return;
-          await ee(), g();
-        }
-      },
-      { immediate: !0 }
-    );
-    const S = n(() => !!a.errorMessage || C.value), P = n(() => ({
-      [`b-textarea--${p.DISABLED}`]: a.disabled
-    })), N = n(() => ({
-      [`b-textarea__input--${p.CLEARABLE}`]: a.clearable,
-      [`b-textarea__input--${p.READONLY}`]: m.value,
-      [`b-textarea__input--${p.ERROR}`]: S.value,
-      "b-textarea__input--dynamic-height": !r.value
-    })), $ = n(() => ({
-      "b-textarea__label-box--no-label": !a.label
-    })), U = n(() => ({
-      [`b-textarea__label-item--${p.ERROR}`]: C.value
-    })), W = n(() => R("yourTextCanBenAtMost", { characterLimit: a.characterLimit })), A = d(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: I,
-      defaultFallback: B
-    }), z = n(
-      () => a.clearable && o.value && !a.disabled && !m.value
-    ), q = () => {
-      o.value = "", e(u.CLEAR), e(u.INPUT, "");
-    }, V = (i) => {
-      i.stopImmediatePropagation(), !a.disabled && !m.value && (o.value = i.target.value, e(u.INPUT, o.value));
-    }, Y = () => {
-      s.value.scrollTop = 0, e(u.BLUR);
-    }, Z = () => {
-      s.value.focus(), e(u.FOCUS);
-    }, G = () => {
-      e(u.CHANGE);
-    }, j = () => {
-      e(u.ESCAPE_PRESSED);
-    }, L = (i = !1) => {
-      var k;
-      const c = s.value.style.width;
-      if (s.value.style.height && (_.value = s.value.style.height), i && !c)
-        return;
-      const J = (k = f == null ? void 0 : f.value) == null ? void 0 : k.offsetWidth;
-      !c || parseInt(c, 10) > J ? y.value = "100%" : y.value = c;
-    };
-    return te(() => {
-      b = F(s.value, () => {
-        L(!0);
-      }), v = F(f.value, () => {
-        L();
-      }), r.value || g();
-    }), ae(() => {
-      b == null || b.disconnect(), v == null || v.disconnect();
-    }), { __sfc: !0, attrs: t, props: a, emit: e, height: r, textareaId: w, textareaElement: s, textareaComponent: f, textareaValue: o, defaultTextareaHeight: h, textareaHeight: _, textareaWrapperWidth: y, textareaElementObserver: b, textareaComponentObserver: v, t: R, isReadOnly: m, counter: M, isOverCharacterLimit: C, calculateHeight: g, invalidInput: S, conditionalClasses: P, 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: L, BentoButton: le, BentoTypography: re, ErrorMessage: ue, FieldLabel: ce, CrossCircleFillSmallIcon: be };
-  }
-});
-var ge = 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(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)]);
-}, ye = [], Ce = /* @__PURE__ */ T(
-  me,
-  ge,
-  ye,
-  !1,
-  null,
-  "9fd9823a"
-);
-const Fe = Ce.exports;
-export {
-  Fe as B
-};
-//# sourceMappingURL=textarea.CcKbtQBs.js.map

package/dist/chunks/textarea.CcKbtQBs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.CcKbtQBs.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            // Auto-adjust height if the text area is overflowing\n            if (\n                !height.value &&\n                (!textareaElement.value || textareaElement.value?.scrollHeight > textareaElement.value?.clientHeight)\n            ) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: !height.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emit(BentoTextareaEvent.INPUT, '');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emit(BentoTextareaEvent.INPUT, textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    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","_a","_b","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","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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","x_google_ignoreList":[0]}