@adyen/bento-vue2 1.68.2 → 1.70.0

package/dist/chunks/textarea.UPM6N9V1.js

@@ -1,203 +0,0 @@
-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 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"
-  }
-}, he = {
-  i18n: { messages: _e },
-  name: "bento-textarea"
-}, me = /* @__PURE__ */ ee({
-  ...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: I.BOTH,
-      validator: (t) => Object.values(I).includes(t)
-    },
-    /**
-     * Highlights the textarea is required.
-     */
-    required: { type: Boolean, default: !1 },
-    /**
-     * Adds a info icon next to the label to display the passed tooltip message.
-     */
-    tooltipText: { type: String, default: null },
-    /**
-     * Text displayed as the value of the textarea
-     */
-    value: { type: String, default: "" }
-  },
-  emits: [],
-  setup(t, { expose: a, emit: l }) {
-    const e = t, 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: 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 = () => {
-      s.value && s.value.scrollHeight > m && (y.value = `${s.value.scrollHeight + 3}px`);
-    };
-    A(c, () => {
-      c.value ? y.value = c.value : g();
-    }), A(
-      () => e.value,
-      () => {
-        n.value = e.value;
-      },
-      { immediate: !0 }
-    ), A(
-      () => n.value,
-      async () => {
-        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 le(), g();
-        }
-      },
-      { immediate: !0 }
-    );
-    const S = u(() => !!e.errorMessage || L.value), W = u(() => ({
-      [`b-textarea--${f.DISABLED}`]: e.disabled
-    })), T = u(() => ({
-      [`b-textarea__input--${f.CLEARABLE}`]: e.clearable,
-      [`b-textarea__input--${f.READONLY}`]: v.value,
-      [`b-textarea__input--${f.ERROR}`]: S.value,
-      "b-textarea__input--dynamic-height": !c.value
-    })), w = u(() => ({
-      "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: B,
-      defaultFallback: O
-    }), q = u(
-      () => e.clearable && n.value && !e.disabled && !v.value
-    ), z = () => {
-      n.value = "", l(i.CLEAR), l(i.INPUT, "");
-    }, $ = (r) => {
-      r.stopImmediatePropagation(), !e.disabled && !v.value && (n.value = r.target.value, l(i.INPUT, n.value));
-    }, G = () => {
-      s.value.scrollTop = 0, l(i.BLUR);
-    }, j = () => {
-      s.value.focus(), l(i.FOCUS);
-    }, V = () => {
-      l(i.CHANGE);
-    }, Z = () => {
-      l(i.ESCAPE_PRESSED);
-    }, 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 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: 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: 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: q, onClear: z, onInput: $, 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 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, required: a.required, 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)]);
-}, ge = [], Ce = /* @__PURE__ */ ye(
-  me,
-  ve,
-  ge,
-  !1,
-  null,
-  "29dae93f"
-);
-const Ue = Ce.exports;
-export {
-  Ue as B
-};
-//# sourceMappingURL=textarea.UPM6N9V1.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.UPM6N9V1.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                    :required=\"required\"\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.DqLhj0Lb.js

@@ -1,385 +0,0 @@
-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.UPM6N9V1.js";
-import { u as H } from "./i18n.BQkEbtPM.js";
-import { B as ee } from "./button-actions.Ju27CRNG.js";
-import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.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.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, 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;
-function U(t, e) {
-  var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  de(2, arguments);
-  var s = i.locale || ue;
-  if (!s.formatDistance)
-    throw new RangeError("locale must contain localize.formatDistance property");
-  var f = _e(t, e);
-  if (isNaN(f))
-    throw new RangeError("Invalid time value");
-  var l = ve(i);
-  l.addSuffix = !!i.addSuffix, l.comparison = f;
-  var p, _;
-  f > 0 ? (p = M(e), _ = M(t)) : (p = M(t), _ = M(e));
-  var c = i.roundingMethod == null ? "round" : String(i.roundingMethod), a;
-  if (c === "floor")
-    a = Math.floor;
-  else if (c === "ceil")
-    a = Math.ceil;
-  else if (c === "round")
-    a = Math.round;
-  else
-    throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var b = _.getTime() - p.getTime(), d = b / $, m = B(_) - B(p), u = (b - m) / $, n;
-  if (i.unit == null ? d < 1 ? n = "second" : d < 60 ? n = "minute" : d < A ? n = "hour" : u < j ? n = "day" : u < F ? n = "month" : n = "year" : n = String(i.unit), n === "second") {
-    var g = a(b / 1e3);
-    return s.formatDistance("xSeconds", g, l);
-  } else if (n === "minute") {
-    var C = a(d);
-    return s.formatDistance("xMinutes", C, l);
-  } else if (n === "hour") {
-    var E = a(d / 60);
-    return s.formatDistance("xHours", E, l);
-  } else if (n === "day") {
-    var I = a(u / A);
-    return s.formatDistance("xDays", I, l);
-  } else if (n === "month") {
-    var N = a(u / j);
-    return N === 12 && i.unit !== "month" ? s.formatDistance("xYears", 1, l) : s.formatDistance("xMonths", N, l);
-  } else if (n === "year") {
-    var y = a(u / F);
-    return s.formatDistance("xYears", y, l);
-  }
-  throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
-}
-var w = /* @__PURE__ */ ((t) => (t.BOTTOM = "bottom", t.AFTER_FIRST = "after-first", t.BEFORE_LAST = "before-last", t))(w || {}), fe = /* @__PURE__ */ ((t) => (t.SECOND = "second", t.MINUTE = "minute", t.HOUR = "hour", t.DAY = "day", t.MONTH = "month", t.YEAR = "year", t))(fe || {}), L = /* @__PURE__ */ ((t) => (t.DEFAULT = "SquareSmallIcon", t.SUCCESS = "CheckedCircleIcon", t.CRITICAL = "CrossCircleIcon", t))(L || {}), q = /* @__PURE__ */ ((t) => (t.BLACK = "black", t.BLUE = "blue", t.GREEN = "green", t.GREY = "grey", t.ORANGE = "orange", t.RED = "red", t.YELLOW = "yellow", t))(q || {});
-const J = Symbol("timeline register entry injection key"), K = Symbol("timeline config obj injection key"), pe = {
-  "en-US": {
-    addNote: "Add note",
-    cancel: "Cancel"
-  },
-  "ja-JP": {
-    addNote: "メモを追加",
-    cancel: "キャンセル"
-  },
-  "pt-BR": {
-    addNote: "Adicionar anotação",
-    cancel: "Cancelar"
-  }
-}, be = P({
-  i18n: { messages: pe },
-  name: "bento-timeline",
-  components: { BentoButton: z, BentoButtonActions: ee, BentoTextarea: X },
-  props: {
-    /**
-     * If set to true, gives the possibility to manually add notes to the timeline via a textarea
-     */
-    addNote: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Object that determines the max number of items to show without clicking the show more button
-     * and where in the timeline is the show more button placed
-     */
-    showMore: {
-      type: Object,
-      default: null
-    },
-    /**
-     * Object that determines minimum amount of time for the automatic timegap indicator;
-     * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).
-     * If null, automatic timegap detection will be turned off
-     */
-    timegapLimit: {
-      type: Object,
-      default: null
-    }
-  },
-  emits: ["add-timeline-note"],
-  setup(t, { emit: e }) {
-    const { t: i } = H(), s = r(() => i("addNote")), f = r(() => i("cancel")), l = T(), p = (o) => {
-      l.value = o;
-    }, _ = T(null), c = T(null), a = T(!1), b = async () => {
-      var o, v;
-      a.value = !a.value, await G(), a.value ? (o = _.value.$refs.textareaElement) == null || o.focus() : (v = c.value.$el) == null || v.focus();
-    }, d = () => {
-      e("add-timeline-note", {
-        description: l.value,
-        timestamp: { date: /* @__PURE__ */ new Date() },
-        type: "note"
-      }), b();
-    }, m = T([]), u = r(
-      () => t.showMore && m.value.length > t.showMore.limit ? m.value.length - t.showMore.limit : null
-    ), n = T(!1), { timegapLimit: g } = Z(t), C = r(() => {
-      if (!t.showMore)
-        return null;
-      const o = Array.from(m.value.keys());
-      return t.showMore.placement === w.BEFORE_LAST ? [
-        ...o.slice(0, t.showMore.limit - 1),
-        o[o.length - 1]
-      ] : t.showMore.placement === w.AFTER_FIRST ? [o[0], ...o.slice(-(t.showMore.limit - 1))] : o.slice(0, t.showMore.limit);
-    }), E = r(() => {
-      if (!t.showMore)
-        return null;
-      switch (t.showMore.placement) {
-        case w.BEFORE_LAST:
-          return t.showMore.limit - 2;
-        case w.AFTER_FIRST:
-          return 0;
-        case w.BOTTOM:
-        default:
-          return t.showMore.limit - 1;
-      }
-    }), I = (o) => () => {
-      var v;
-      m.value = (v = m.value) == null ? void 0 : v.filter((S, h) => h !== o);
-    }, N = ({ title: o, description: v, date: S }) => {
-      const h = m.value.length;
-      return m.value.push({ title: o, description: v, date: S }), { timelineEntries: m, index: h, unregisterTimelineEntry: I(h) };
-    }, y = {
-      showAll: n,
-      showMoreIndex: E,
-      hiddenItems: u,
-      visibleIndexes: C,
-      timegapLimit: g
-    };
-    return R(J, N), R(K, y), {
-      addNoteLabel: s,
-      cancelLabel: f,
-      toggleAddNote: b,
-      updateNoteContent: p,
-      addNoteToTimeline: d,
-      showAddNoteTextArea: a,
-      // refs
-      addNoteTextareaRef: _,
-      addNoteButtonRef: c
-    };
-  }
-});
-var he = function() {
-  var e = this, i = e._self._c;
-  return e._self._setupProxy, i("div", { staticClass: "b-timeline" }, [e.addNote ? i("div", { staticClass: "b-timeline__add-note-section" }, [e.showAddNoteTextArea ? e._e() : i("bento-button", { ref: "addNoteButtonRef", attrs: { variant: "tertiary" }, on: { click: e.toggleAddNote } }, [e._v(e._s(e.addNoteLabel))]), e.showAddNoteTextArea ? i("div", [i("bento-textarea", { ref: "addNoteTextareaRef", attrs: { label: e.addNoteLabel, "character-limit": 150, resizable: "vertical" }, on: { input: e.updateNoteContent } }), i("bento-button-actions", { attrs: { actions: [
-    { title: e.addNoteLabel, event: e.addNoteToTimeline },
-    { title: e.cancelLabel, event: e.toggleAddNote }
-  ] } })], 1) : e._e()], 1) : e._e(), i("ol", { staticClass: "b-timeline__items" }, [e._t("default")], 2)]);
-}, ge = [], ye = /* @__PURE__ */ x(
-  be,
-  he,
-  ge,
-  !1,
-  null,
-  "4e0a6d68"
-);
-const Ke = ye.exports;
-let Y = 0;
-const Ce = {
-  beforeCreate() {
-    this.uuid = Y.toString(), Y += 1;
-  }
-};
-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: "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,
-  Te,
-  !1,
-  null,
-  null
-);
-const Ee = we.exports, Ie = {
-  "en-US": {
-    showLess: "Show less",
-    showMore: "Show {items} more",
-    timegap: "{timegap} passed between the timeline events"
-  },
-  "ja-JP": {
-    showLess: "表示内容を減らす"
-  },
-  "pt-BR": {
-    showLess: "Mostrar menos"
-  }
-}, Se = P({
-  name: "bento-timeline-item",
-  components: {
-    BentoButton: z,
-    BentoDate: te,
-    BentoLink: ie,
-    BentoTag: ae,
-    BentoTypography: se,
-    BentoStructuredList: re,
-    BentoStructuredListItem: oe,
-    SquareSmallIcon: Ee
-  },
-  i18n: { messages: Ie },
-  props: {
-    /**
-     * Additional timestamp of the event
-     */
-    additionalTimestamp: {
-      type: Object,
-      default: null
-    },
-    /**
-     * Relevant key-value pair data to display in the event
-     */
-    dataList: {
-      type: Array,
-      default: null
-    },
-    /**
-     * Description of the event
-     */
-    description: {
-      type: String,
-      default: null
-    },
-    /**
-     * Modifier that changes the color of the timeline icon
-     * @values blue, black, green, grey, orange, red, yellow
-     */
-    status: {
-      type: String,
-      default: "black",
-      validator: (t) => Object.values(q).includes(t)
-    },
-    /**
-     * Tag props that will be passed down to inner tag component
-     */
-    tag: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Main timestamp of the event. Used for timegap detection.
-     */
-    timestamp: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * Title of the event
-     */
-    title: {
-      type: [Object, String],
-      default: null
-    },
-    /**
-     * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.
-     * @values milestone, note
-     */
-    type: {
-      type: String,
-      default: "milestone",
-      validator: (t) => ["milestone", "note"].includes(t)
-    },
-    /**
-     * Variant for the timeline item
-     * @values DEFAULT, SUCCESS, CRITICAL
-     *
-     * @deprecated Use "status" prop instead
-     */
-    variant: {
-      type: String,
-      default: null,
-      validator: (t) => Object.values(L).includes(t)
-    }
-  },
-  setup(t, { slots: e }) {
-    const { t: i } = H(), s = r(() => t.type === "note"), f = r(() => t.variant === L.CRITICAL ? "red" : t.variant === L.SUCCESS ? "green" : t.status);
-    t.variant && ne(
-      'BentoTimelineItem "variant" property',
-      `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon.
-                    <bento-timeline-item status="red" />`,
-      "2.0.0"
-    );
-    const l = r(() => ({
-      [`b-timeline-item__icon--${f.value}`]: f.value && !s.value
-    })), p = r(() => ({
-      "b-timeline-item--note": s.value
-    }));
-    R(le, !0);
-    const _ = D(J), { timelineEntries: c, index: a, unregisterTimelineEntry: b } = _({
-      title: t.title,
-      date: t.timestamp.date
-    });
-    Q(() => b());
-    const { showAll: d, showMoreIndex: m, hiddenItems: u, visibleIndexes: n, timegapLimit: g } = D(K), C = r(() => d.value || !n.value), E = r(() => C.value ? !0 : n.value.includes(a)), I = r(() => typeof t.title == "object"), N = r(() => t.title), y = r(() => {
-      var k;
-      if (!g.value)
-        return null;
-      const h = (k = c.value[a - 1]) == null ? void 0 : k.date, V = C.value || n.value.includes(a - 1);
-      if (!h || !V)
-        return null;
-      const { date: O } = c.value[a], W = parseInt(
-        U(h, O, { unit: g.value.unit }),
-        10
-      );
-      return g.value.amount < W ? U(h, O, { roundingMethod: "floor" }) : null;
-    }), o = r(() => y.value ? i("timegap", { timegap: y.value }) : ""), v = r(() => u.value && m.value === a), S = r(() => a === c.value.length - 1);
-    return {
-      // Values
-      isNoteType: s,
-      iconConditionalClasses: l,
-      conditionalClasses: p,
-      displayShowMoreButton: v,
-      showAll: d,
-      hiddenItems: u,
-      isVisible: E,
-      isLinkTitle: I,
-      linkTitleProps: N,
-      timegap: y,
-      timegapAriaLabel: o,
-      isLastItem: S,
-      // Methods
-      generateUid: me,
-      hasSlot: ce(e),
-      t: i
-    };
-  }
-});
-var Me = function() {
-  var e = this, i = e._self._c;
-  return e._self._setupProxy, e.isVisible ? i("li", { staticClass: "b-timeline-item", class: e.conditionalClasses }, [e.timegap ? i("div", { staticClass: "b-timeline-item__row" }, [e._m(0), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-typography", { staticClass: "b-timeline-item__timegap", attrs: { "aria-label": e.timegapAriaLabel } }, [e._v(" " + e._s(e.timegap) + " ")])], 1)]) : e._e(), i("div", { staticClass: "b-timeline-item__row" }, [i("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [i("square-small-icon", { staticClass: "b-timeline-item__icon", class: e.iconConditionalClasses }), e.isLastItem ? e._e() : i("div", { staticClass: "b-timeline-item__separator", attrs: { "data-testid": "last-timeline-item-separator" } })], 1), i("div", { staticClass: "b-timeline-item__content" }, [e.isNoteType ? e._e() : i("bento-typography", { staticClass: "b-timeline-item__title", attrs: { el: "div", variant: "body", strongest: "", role: "heading", "aria-level": "2" } }, [e.isLinkTitle ? i("bento-link", e._b({ attrs: { "disable-typography": "" } }, "bento-link", e.linkTitleProps, !1), [e._v(e._s(e.linkTitleProps.title))]) : i("span", [e._v(e._s(e.title))])], 1), e.isNoteType && (e.description || e.hasSlot("default")) ? i("bento-typography", { staticClass: "b-timeline-item__description", attrs: { el: "div", variant: "body" } }, [e._t("default", function() {
-    return [e._v(e._s(e.description))];
-  })], 2) : e._e(), e.timestamp ? i("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [i("bento-date", { attrs: { date: e.timestamp.date, format: e.timestamp.format, "disable-typography": "" } }), e._v(" " + e._s(e.timestamp.value) + " ")], 1) : e._e(), !e.isNoteType && e.additionalTimestamp ? i("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [i("bento-date", { attrs: { date: e.additionalTimestamp.date, format: e.additionalTimestamp.format, "disable-typography": "" } }), e._v(" " + e._s(e.additionalTimestamp.value) + " ")], 1) : e._e(), !e.isNoteType && (e.description || e.hasSlot("default")) ? i("bento-typography", { staticClass: "b-timeline-item__description", attrs: { el: "div", variant: "body" } }, [e._t("default", function() {
-    return [e._v(e._s(e.description))];
-  })], 2) : e._e(), !e.isNoteType && e.dataList ? i("div", { staticClass: "b-timeline-item__data-list" }, [i("bento-structured-list", e._l(e.dataList, function(s) {
-    return i("bento-structured-list-item", { key: e.generateUid(s.label), attrs: { label: s.label } }, [i("bento-typography", { attrs: { variant: "caption" } }, [e._v(e._s(s.value))])], 1);
-  }), 1)], 1) : e._e(), !e.isNoteType && e.tag ? i("bento-tag", e._b({ staticClass: "b-timeline-item__tag" }, "bento-tag", e.tag, !1)) : e._e()], 1)]), e.displayShowMoreButton ? i("div", { staticClass: "b-timeline-item__row" }, [e._m(1), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-button", { staticClass: "b-timeline__show-more", attrs: { variant: "tertiary" }, on: { click: function(s) {
-    e.showAll = !e.showAll;
-  } } }, [e.showAll ? [e._v(e._s(e.t("showLess")))] : [e._v(e._s(e.t("showMore", { items: e.hiddenItems })))]], 2)], 1)]) : e._e()]) : e._e();
-}, Le = [function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [e("div", { staticClass: "b-timeline-item__icon b-timeline-item__icon--timegap" }), e("div", { staticClass: "b-timeline-item__separator" })]);
-}, function() {
-  var t = this, e = t._self._c;
-  return t._self._setupProxy, e("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [e("div", { staticClass: "b-timeline-item__separator" })]);
-}], Ae = /* @__PURE__ */ x(
-  Se,
-  Me,
-  Le,
-  !1,
-  null,
-  "5626ecfd"
-);
-const Ve = Ae.exports;
-export {
-  w as B,
-  Ve as a,
-  fe as b,
-  L as c,
-  q as d,
-  Ke as t
-};
-//# sourceMappingURL=timeline-item.DqLhj0Lb.js.map