@adyen/bento-vue2 1.65.0 → 1.66.0

package/dist/chunks/tab.BhWPBxcB.js

@@ -0,0 +1,192 @@
+import { defineComponent as A, ref as v, provide as w, watch as g, nextTick as k, computed as f, unref as W, onUnmounted as N, toRefs as X, inject as E } from "vue";
+import { B as Y } from "./typography.J1v_SPG3.js";
+import { g as $ } from "./generate-uid.NJ8tVoha.js";
+import { T as B, a as O, E as j } from "./tabs.keys.Cb4Vw5Jh.js";
+import { F as G } from "./fixed-scroller.XN-jvWqb.js";
+import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/tab.css";
+const S = (s, t) => {
+  const e = s === 0 ? t.length - 1 : s - 1, n = t[e];
+  return n.disabled || n.hidden ? S(e, t) : e;
+}, D = (s, t) => {
+  const e = s === t.length - 1 ? 0 : s + 1, n = t[e];
+  return n.disabled || n.hidden ? D(e, t) : e;
+};
+var C = /* @__PURE__ */ ((s) => (s.ACTIVE_TAB_INDEX = "update:active-tab-index", s))(C || {});
+const J = A({
+  components: {
+    BentoTypography: Y,
+    FixedScroller: G
+  },
+  props: {
+    /**
+     * Sets the active tab by its index (0 being the first tab item).
+     */
+    activeTabIndex: { type: Number, default: 0 },
+    /*
+     * Renders the tab with a sticky positioning.
+     */
+    sticky: { type: Boolean, default: !1 },
+    /**
+     * Additional configurable options for tabs rendered with a sticky positioning.
+     * It must be an object of type {@see BentoStickyTabsOption}
+     * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.
+     */
+    stickyOptions: { type: Object, default: null }
+  },
+  emits: [C.ACTIVE_TAB_INDEX],
+  setup(s, { emit: t }) {
+    const e = v([]), n = v(null), b = v(), l = v(""), i = v(!1);
+    let c;
+    w(B, l);
+    const u = (a) => () => {
+      var r;
+      e.value = (r = e.value) == null ? void 0 : r.filter(({ id: o }) => o !== a);
+    };
+    w(O, ({
+      title: a,
+      disabled: r,
+      withNotificationIndicator: o,
+      counter: _,
+      hidden: I
+    }) => {
+      const h = $("b-tab");
+      return e.value.push({ counter: _, disabled: r, hidden: I, id: h, title: a, withNotificationIndicator: o }), { id: h, unregisterTab: u(h) };
+    });
+    const y = (a) => {
+      if (a.code === "ArrowLeft" || a.code === "ArrowRight") {
+        const r = e.value.find((_) => document.activeElement.id === _.id);
+        let o = e.value.indexOf(r);
+        a.code === "ArrowLeft" ? o = S(o, e.value) : a.code === "ArrowRight" && (o = D(o, e.value)), n.value.children[o].focus();
+      }
+    };
+    g(
+      [() => s.activeTabIndex, e],
+      ([a, r]) => {
+        k(() => {
+          var _;
+          const o = r[a];
+          l.value = o && !o.disabled ? o.id : (_ = e.value.find(({ disabled: I }) => !I)) == null ? void 0 : _.id;
+        });
+      },
+      { immediate: !0 }
+    );
+    const m = (a) => {
+      l.value = a;
+      const r = e.value.findIndex(({ id: o }) => o === l.value);
+      t(C.ACTIVE_TAB_INDEX, r);
+    }, T = (a) => a ? "disabled" : !1, p = f(() => {
+      var a;
+      return (a = s.stickyOptions) != null && a.top ? W(s.stickyOptions.top) : 0;
+    }), K = f(() => s.sticky && p.value > 0 ? !0 : i.value), x = () => {
+      c && (c.disconnect(), c = null), i.value = !1;
+    }, P = (a) => {
+      s.sticky && p.value === 0 && (c = new IntersectionObserver(
+        ([r]) => {
+          i.value = r.intersectionRatio < 1;
+        },
+        { threshold: [1] }
+      ), c.observe(a));
+    };
+    g(
+      [() => s.sticky, b, p],
+      ([a, r]) => {
+        x(), a && r && k(() => P(r));
+      },
+      { immediate: !0 }
+    ), N(() => {
+      x();
+    });
+    const F = f(() => ({
+      "b-tabs__tab-list-wrapper--sticky": s.sticky,
+      "b-tabs__tab-list-wrapper--pinned": K.value
+    })), L = f(
+      () => {
+        var a;
+        return (
+          // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.
+          // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
+          s.sticky ? {
+            top: `${(((a = s.stickyOptions) == null ? void 0 : a.top) ?? 0) - 1}px`
+          } : {}
+        );
+      }
+    );
+    return {
+      tabs: e,
+      tablist: n,
+      tablistwrapper: b,
+      activeTabId: l,
+      tablistWrapperConditionalClasses: F,
+      tablistWrapperStyles: L,
+      onKeydownTabsNavigation: y,
+      handleTabChange: m,
+      isDisabled: T
+    };
+  }
+});
+var U = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-tabs" }, [e("div", { ref: "tablistwrapper", staticClass: "b-tabs__tab-list-wrapper", class: t.tablistWrapperConditionalClasses, style: t.tablistWrapperStyles }, [e("fixed-scroller", { attrs: { condensed: "", "extra-padding-top": 2 } }, [e("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: t.onKeydownTabsNavigation } }, t._l(t.tabs, function({ counter: n, disabled: b, hidden: l, id: i, title: c, withNotificationIndicator: u }) {
+    return e("button", { directives: [{ name: "show", rawName: "v-show", value: !l, expression: "!hidden" }], key: i, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": t.activeTabId === i,
+      "b-tabs__tab--disabled": b
+    }, attrs: { id: i, role: "tab", type: "button", "aria-controls": `${i}-tabpanel`, "aria-hidden": l ? "true" : "false", "aria-selected": t.activeTabId === i ? "true" : "false", tabindex: t.activeTabId === i && !b.value ? null : -1, disabled: t.isDisabled(b) }, on: { click: function(d) {
+      return t.handleTabChange(i);
+    }, keydown: function(d) {
+      return !d.type.indexOf("key") && t._k(d.keyCode, "enter", 13, d.key, "Enter") && t._k(d.keyCode, "space", 32, d.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(c) + " ")]), n != null ? e("bento-typography", { staticClass: "b-tabs__tab-counter", class: {
+      "b-tabs__tab-counter--active": t.activeTabId === i
+    }, attrs: { el: "span", variant: "body", stronger: "" } }, [t._v(" " + t._s(n) + " ")]) : t._e(), u ? 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)])], 1), t._t("default")], 2);
+}, z = [], q = /* @__PURE__ */ R(
+  J,
+  U,
+  z,
+  !1,
+  null,
+  "76156ba2"
+);
+const rt = q.exports, H = {
+  name: "bento-tab"
+}, M = /* @__PURE__ */ A({
+  ...H,
+  props: {
+    counter: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    title: null,
+    withNotificationIndicator: { type: Boolean, default: !1 }
+  },
+  setup(s) {
+    const t = s, { counter: e, disabled: n, hidden: b, withNotificationIndicator: l } = X(t), i = v(), c = (p) => {
+      i.value = p;
+    };
+    w(j, c);
+    const u = f(() => i.value ?? t.title), d = E(O), y = E(B), { id: m, unregisterTab: T } = d({
+      counter: e,
+      disabled: n,
+      hidden: b,
+      title: u,
+      withNotificationIndicator: l
+    });
+    return N(() => T()), { __sfc: !0, props: t, counter: e, disabled: n, hidden: b, withNotificationIndicator: l, componentTitle: i, setTitle: c, computedTitle: u, registerTab: d, activeTabId: y, id: m, unregisterTab: T };
+  }
+});
+var Q = function() {
+  var t = this, e = t._self._c, n = t._self._setupProxy;
+  return e("div", { directives: [{ name: "show", rawName: "v-show", value: n.activeTabId === n.id, expression: "activeTabId === id" }], staticClass: "b-tab", attrs: { id: `${n.id}-tabpanel`, role: "tabpanel", "aria-labelledby": n.id } }, [n.activeTabId === n.id ? [t._t("default")] : t._e()], 2);
+}, V = [], Z = /* @__PURE__ */ R(
+  M,
+  Q,
+  V,
+  !1,
+  null,
+  "3b3a75e0"
+);
+const ot = Z.exports;
+export {
+  rt as B,
+  ot as a
+};
+//# sourceMappingURL=tab.BhWPBxcB.js.map

package/dist/chunks/tab.BhWPBxcB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.BhWPBxcB.js","sources":["../../src/components/tabs/utils/index.ts","../../src/components/tabs/tabs.types.ts","../../src/components/tabs/tabs.vue","../../src/components/tabs/components/tab.vue"],"sourcesContent":["import { BentoTab } from '../components/tab.types';\n\n/**\n * Recursively gets the previous available tab index. It will loop through the tabs until it finds one\n * that is not disabled or hidden.\n * @param activeTabIndex The currently active tab index.\n * @param tabsValue An array of BentoTab objects.\n * @returns The index of the previous available tab.\n */\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    // Prevent overflow\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    const currentTab = tabsValue[newActiveTabIndex];\n    if (currentTab.disabled || currentTab.hidden) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\n/**\n * Recursively gets the next available tab index. It will loop through the tabs until it finds one\n * that is not disabled or hidden.\n * @param activeTabIndex The currently active tab index.\n * @param tabsValue An array of BentoTab objects.\n * @returns The index of the next available tab.\n */\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    // Prevent overflow\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    const currentTab = tabsValue[newActiveTabIndex];\n    if (currentTab.disabled || currentTab.hidden) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\n/**\n * Private\n */\nexport interface BentoStickyTabsOptions {\n    top?: Ref<number>;\n}\n\nexport type BentoTabsRegisterTab = (props: {\n    counter: Ref<number>;\n    disabled: Ref<boolean>;\n    hidden: 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        <div\n            ref=\"tablistwrapper\"\n            class=\"b-tabs__tab-list-wrapper\"\n            :class=\"tablistWrapperConditionalClasses\"\n            :style=\"tablistWrapperStyles\"\n        >\n            <fixed-scroller condensed :extra-padding-top=\"2\">\n                <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n                    <button\n                        v-for=\"{ counter, disabled, hidden, id, title, withNotificationIndicator } in tabs\"\n                        v-show=\"!hidden\"\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-hidden=\"hidden ? 'true' : 'false'\"\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                            <bento-typography\n                                v-if=\"counter != null\"\n                                class=\"b-tabs__tab-counter\"\n                                el=\"span\"\n                                variant=\"body\"\n                                stronger\n                                :class=\"{\n                                    'b-tabs__tab-counter--active': activeTabId === id,\n                                }\"\n                            >\n                                {{ counter }}\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        </div>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, onUnmounted, PropType, provide, ref, Ref, unref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n    import { FixedScroller } from '@/internal';\n\n    // utils\n    import { generateUid } from '@/core/utils/ts';\n    import { getNextTabIndex, getPreviousTabIndex } from './utils';\n\n    // types\n    import { Booleanish } from '@/types';\n    import { BentoTab } from './components/tab.types';\n    import { BentoStickyTabsOptions, BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\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            /*\n             * Renders the tab with a sticky positioning.\n             */\n            sticky: { type: Boolean, default: false },\n\n            /**\n             * Additional configurable options for tabs rendered with a sticky positioning.\n             * It must be an object of type {@see BentoStickyTabsOption}\n             * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky.\n             */\n            stickyOptions: { type: Object as PropType<BentoStickyTabsOptions>, default: null },\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();\n            const activeTabId = ref('');\n            const isPinnedByObserver = ref(false);\n            let observer;\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 = ({\n                title,\n                disabled,\n                withNotificationIndicator,\n                counter,\n                hidden,\n            }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ counter, disabled, hidden, 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            /* == Sticky tabs logic == */\n            const topOffset = computed(() => (props.stickyOptions?.top ? unref(props.stickyOptions.top) : 0));\n\n            const isPinned = computed(() => {\n                if (props.sticky && topOffset.value > 0) {\n                    return true;\n                }\n                return isPinnedByObserver.value;\n            });\n\n            const disconnectObserver = () => {\n                if (observer) {\n                    observer.disconnect();\n                    observer = null;\n                }\n                isPinnedByObserver.value = false;\n            };\n\n            const setupObserver = (element: HTMLDivElement) => {\n                // The observer is only needed when the tabs are sticky at the top of the screen (no top offset).\n                if (props.sticky && topOffset.value === 0) {\n                    observer = new IntersectionObserver(\n                        ([e]) => {\n                            isPinnedByObserver.value = e.intersectionRatio < 1;\n                        },\n                        { threshold: [1] }\n                    );\n                    observer.observe(element);\n                }\n            };\n\n            // This watcher manages the entire lifecycle of the observer.\n            watch(\n                [() => props.sticky, tablistwrapper, topOffset],\n                ([isSticky, element]) => {\n                    disconnectObserver();\n                    if (isSticky && element) {\n                        nextTick(() => setupObserver(element));\n                    }\n                },\n                { immediate: true }\n            );\n\n            onUnmounted(() => {\n                disconnectObserver();\n            });\n\n            const tablistWrapperConditionalClasses = computed(() => ({\n                'b-tabs__tab-list-wrapper--sticky': props.sticky,\n                'b-tabs__tab-list-wrapper--pinned': isPinned.value,\n            }));\n\n            const tablistWrapperStyles = computed(() =>\n                // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer.\n                // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/\n                props.sticky\n                    ? {\n                          top: `${(props.stickyOptions?.top ?? 0) - 1}px`,\n                      }\n                    : {}\n            );\n\n            return {\n                tabs,\n                tablist,\n                tablistwrapper,\n                activeTabId,\n                tablistWrapperConditionalClasses,\n                tablistWrapperStyles,\n                onKeydownTabsNavigation,\n                handleTabChange,\n                isDisabled,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n","<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 setup lang=\"ts\">\n    import { computed, 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 { BentoTabProps, BentoTabProvidedTitle } from './tab.types';\n\n    const props = defineProps({\n  counter: { default: null },\n  disabled: { type: Boolean, default: false },\n  hidden: { type: Boolean, default: false },\n  title: null,\n  withNotificationIndicator: { type: Boolean, default: false }\n});\n\n    // External title injection\n    const { counter, disabled, hidden, withNotificationIndicator } = toRefs(props);\n    const componentTitle = ref<BentoTabProps['title']>();\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<BentoTabProps['title']>(() => componentTitle.value ?? props.title);\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({\n        counter,\n        disabled,\n        hidden,\n        title: computedTitle,\n        withNotificationIndicator,\n    });\n\n    onUnmounted(() => unregisterTab());\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Tab content which attaches a tab to the `bento-tabs` component\n     * and renders is content when it becomes active.\n     *\n     * @example\n     * import { BentoTab, BentoTabs } from '@adyen/bento-vue2';\n     *\n     * <template>\n     *    <bento-tabs>\n     *        <bento-tab\n     *            :counter=\"1\"\n     *            :disabled=\"false\"\n     *            :hidden=\"false\"\n     *            title=\"Tab's title\"\n     *            with-notification-indicator\n     *        >\n     *            Tab content\n     *        </bento-tab>\n     *    </bento-tabs>\n     * </template>\n     */\n    export default {\n        name: 'bento-tab',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tab.scss\" />\n"],"names":["getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","currentTab","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main$1","defineComponent","BentoTypography","FixedScroller","props","emit","tabs","ref","tablist","tablistwrapper","activeTabId","isPinnedByObserver","observer","provide","TABS_ACTIVE_TAB_ID_KEY","unregisterTab","tabIdToRemove","_a","id","TABS_REGISTER_TAB_INJECTION_KEY","title","disabled","withNotificationIndicator","counter","hidden","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","handleTabChange","tabId","activeIndex","isDisabled","isDisabledTab","topOffset","computed","unref","isPinned","disconnectObserver","setupObserver","element","isSticky","onUnmounted","tablistWrapperConditionalClasses","tablistWrapperStyles","__default__","toRefs","componentTitle","setTitle","value","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","computedTitle","registerTab","inject"],"mappings":"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"}

package/dist/chunks/{tabs.keys.Bc2pSKRw.js → tabs.keys.Cb4Vw5Jh.js}

@@ -1,7 +1,7 @@
 const t = Symbol("tabs registerTab injection key"), e = Symbol("tabs active tab ID key"), E = Symbol("external title tab register entry injection key");
 export {
   E,
-  t as T,
-  e as a
+  e as T,
+  t as a
 };
-//# sourceMappingURL=tabs.keys.Bc2pSKRw.js.map
+//# sourceMappingURL=tabs.keys.Cb4Vw5Jh.js.map

package/dist/chunks/{tabs.keys.Bc2pSKRw.js.map → tabs.keys.Cb4Vw5Jh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs.keys.Bc2pSKRw.js","sources":["../../src/components/tabs/tabs.keys.ts"],"sourcesContent":["export const TABS_REGISTER_TAB_INJECTION_KEY = Symbol('tabs registerTab injection key');\nexport const TABS_ACTIVE_TAB_ID_KEY = Symbol('tabs active tab ID key');\nexport const EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY = Symbol('external title tab register entry injection key');\n"],"names":["TABS_REGISTER_TAB_INJECTION_KEY","TABS_ACTIVE_TAB_ID_KEY","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAAkC,OAAO,gCAAgC,GACzEC,IAAyB,OAAO,wBAAwB,GACxDC,IAA8C,OAAO,iDAAiD;"}
+{"version":3,"file":"tabs.keys.Cb4Vw5Jh.js","sources":["../../src/components/tabs/tabs.keys.ts"],"sourcesContent":["export const TABS_REGISTER_TAB_INJECTION_KEY = Symbol('tabs registerTab injection key');\nexport const TABS_ACTIVE_TAB_ID_KEY = Symbol('tabs active tab ID key');\nexport const EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY = Symbol('external title tab register entry injection key');\n"],"names":["TABS_REGISTER_TAB_INJECTION_KEY","TABS_ACTIVE_TAB_ID_KEY","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAAkC,OAAO,gCAAgC,GACzEC,IAAyB,OAAO,wBAAwB,GACxDC,IAA8C,OAAO,iDAAiD;"}

package/dist/chunks/{textarea.BPeDUAPL.js → textarea.RAU710Uw.js}

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

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

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

package/dist/chunks/{timeline-item.CS9ZDOsm.js → timeline-item.DK2d00rt.js}

@@ -1,19 +1,18 @@
 import { defineComponent as P, computed as r, ref as T, toRefs as Z, provide as R, nextTick as G, inject as D, onUnmounted as Q } from "vue";
 import { B as z } from "./button.hF-nD1Og.js";
-import { B as X } from "./textarea.BPeDUAPL.js";
+import { B as X } from "./textarea.RAU710Uw.js";
 import { u as H } from "./i18n.BQkEbtPM.js";
 import { B as ee } from "./button-actions._OIvTdKt.js";
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as te } from "./date.dYFFEunA.js";
+import { B as te } from "./date.BfyWX2PY.js";
 import { B as ie } from "./link.CXy_LoFI.js";
 import { B as ae } from "./tag.CGkclKVL.js";
 import { B as se, d as ne } from "./typography.J1v_SPG3.js";
-import { a as oe, B as re, S as le } from "./structured-list-item.tox2Kcb6.js";
+import { a as oe, B as re, S as le } from "./structured-list-item.Bnn6-Z3q.js";
 /* empty css              */
 import { g as me } from "./generate-uid.NJ8tVoha.js";
 import { u as ce } from "./use-has-slot.C9lQZ6nz.js";
-import { r as de, l as ue, t as M, a as B } from "./get-date-locale.BN8xEjY0.js";
-import { c as _e } from "./index.DD7TppDb.js";
+import { r as de, l as ue, c as _e, t as M, g as B } from "./index.BrH1t1iu.js";
 import { c as ve } from "./index.BxBB1rsx.js";
 import "../assets/timeline-item.css";
 var $ = 1e3 * 60, A = 60 * 24, j = A * 30, F = A * 365;
@@ -180,7 +179,7 @@ var he = function() {
   null,
   "4e0a6d68"
 );
-const Ve = ye.exports;
+const Ke = ye.exports;
 let Y = 0;
 const Ce = {
   beforeCreate() {
@@ -189,7 +188,7 @@ const Ce = {
 };
 var Ne = function() {
   var e = this, i = e._self._c;
-  return i("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"] ? i("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), i("path", { attrs: { fill: "#001222", d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z" } })]);
+  return i("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"] ? i("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), i("path", { attrs: { fill: "#001222", d: "M10 3.25C11.5188 3.25 12.75 4.48122 12.75 6V10C12.75 11.5188 11.5188 12.75 10 12.75H6C4.48122 12.75 3.25 11.5188 3.25 10V6C3.25 4.48122 4.48122 3.25 6 3.25H10Z" } })]);
 }, Te = [], we = /* @__PURE__ */ x(
   Ce,
   Ne,
@@ -374,13 +373,13 @@ var Me = function() {
   null,
   "5626ecfd"
 );
-const We = Ae.exports;
+const Ve = Ae.exports;
 export {
   w as B,
-  We as a,
+  Ve as a,
   fe as b,
   L as c,
   q as d,
-  Ve as t
+  Ke as t
 };
-//# sourceMappingURL=timeline-item.CS9ZDOsm.js.map
+//# sourceMappingURL=timeline-item.DK2d00rt.js.map