@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/{textarea.BDRR1zE0.js.map → textarea.Z-VYFZVq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea.BDRR1zE0.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["import type { FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use 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    UPDATE_MODEL_VALUE = 'update:model-value',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n\nexport interface BentoTextareaProps extends FormField {\n    /**\n     * Text that labels the input element\n     * @default undefined\n     */\n    ariaLabel?: string;\n\n    /**\n     * Text that shows number of characters in textarea\n     * @default undefined\n     */\n    characterLimit?: number;\n\n    /**\n     * If set to true, shows a button to clear all the text\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Sets the height of the textarea, e.g 200px OR 20vh\n     * @default null\n     */\n    height?: string | null;\n\n    /**\n     * Indicates the possibility of resize the textarea.\n     * Accepts the Enum or the string literal version.\n     * @default BentoTextareaResizeOption.BOTH\n     */\n    resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;\n\n    /**\n     * Text displayed as the value of the textarea\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: string;\n\n    /**\n     * Text displayed as the value of the textarea\n     */\n    modelValue?: string;\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                    :aria-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                    @mousedown=\"onMouseDown\"\n                    @mouseup=\"onMouseUp\"\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, 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    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    // Types\n    import { BentoTextareaEvent, type BentoTextareaProps, 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  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: '' },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaLabel: { default: undefined },\n  characterLimit: { default: undefined },\n  clearable: { type: Boolean, default: false },\n  height: { default: null },\n  resizable: { default: 'both' },\n  value: { default: '' },\n  modelValue: { 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.modelValue || props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const userSetHeight = ref<number>(0);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    const isUserResizing = ref(false);\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 { emitValue } = useFormFieldEmits<string>(emit);\n\n    const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`);\n    const isDynamicHeight = computed(() => !height.value);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    /**\n     * Calculates and sets the height of the textarea.\n     * The height is determined by the maximum of the following values:\n     *\n     * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width.\n     * 2. The height set by the user manually resizing the textarea (`userSetHeight`).\n     * 3. The default minimum height (`defaultTextareaHeight`).\n     *\n     * This ensures the textarea grows with content, shrinks when content is removed,\n     * but never goes below the manually set height or the default height.\n     */\n    const calculateHeight = () => {\n        if (textareaElement.value) {\n            const newHeight = Math.max(\n                textareaElement.value.scrollHeight <= defaultTextareaHeight\n                    ? defaultTextareaHeight\n                    : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2,\n                userSetHeight.value,\n                defaultTextareaHeight\n            );\n            textareaHeight.value = `${newHeight}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => [props.value, props.modelValue],\n        () => {\n            textareaValue.value = props.modelValue || props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            if (isDynamicHeight.value) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: isDynamicHeight.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        emitValue('');\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            emitValue(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    const onMouseDown = () => {\n        isUserResizing.value = true;\n    };\n\n    const onMouseUp = () => {\n        isUserResizing.value = false;\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            if (isUserResizing.value) {\n                userSetHeight.value = parseInt(textareaElement.value.style.height, 10);\n            }\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 (isDynamicHeight.value) {\n            calculateHeight();\n        }\n\n        if (props.value) {\n            deprecate(\n                'BentoTextarea \"value\" property',\n                `The use of \"value\" prop in \"BentoTextarea\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n                '2.0.0'\n            );\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BBorderWidthAttention","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","userSetHeight","textareaWrapperWidth","isUserResizing","textareaElementObserver","textareaComponentObserver","t","n","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","emit","counter","computed","_a","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","deprecate","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"textarea.Z-VYFZVq.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["import type { FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use 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    UPDATE_MODEL_VALUE = 'update:model-value',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n\nexport interface BentoTextareaProps extends FormField {\n    /**\n     * Text that labels the input element\n     * @default undefined\n     */\n    ariaLabel?: string;\n\n    /**\n     * Text that shows number of characters in textarea\n     * @default undefined\n     */\n    characterLimit?: number;\n\n    /**\n     * If set to true, shows a button to clear all the text\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Sets the height of the textarea, e.g 200px OR 20vh\n     * @default null\n     */\n    height?: string | null;\n\n    /**\n     * Indicates the possibility of resize the textarea.\n     * Accepts the Enum or the string literal version.\n     * @default BentoTextareaResizeOption.BOTH\n     */\n    resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;\n\n    /**\n     * Text displayed as the value of the textarea\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: string;\n\n    /**\n     * Text displayed as the value of the textarea\n     */\n    modelValue?: string;\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                    :aria-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                    @mousedown=\"onMouseDown\"\n                    @mouseup=\"onMouseUp\"\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, 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    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    // Types\n    import { BentoTextareaEvent, type BentoTextareaProps, 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  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: '' },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaLabel: { default: undefined },\n  characterLimit: { default: undefined },\n  clearable: { type: Boolean, default: false },\n  height: { default: null },\n  resizable: { default: 'both' },\n  value: { default: '' },\n  modelValue: { 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.modelValue || props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const userSetHeight = ref<number>(0);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    const isUserResizing = ref(false);\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 { emitValue } = useFormFieldEmits<string>(emit);\n\n    const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`);\n    const isDynamicHeight = computed(() => !height.value);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    /**\n     * Calculates and sets the height of the textarea.\n     * The height is determined by the maximum of the following values:\n     *\n     * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width.\n     * 2. The height set by the user manually resizing the textarea (`userSetHeight`).\n     * 3. The default minimum height (`defaultTextareaHeight`).\n     *\n     * This ensures the textarea grows with content, shrinks when content is removed,\n     * but never goes below the manually set height or the default height.\n     */\n    const calculateHeight = () => {\n        if (textareaElement.value) {\n            const newHeight = Math.max(\n                textareaElement.value.scrollHeight <= defaultTextareaHeight\n                    ? defaultTextareaHeight\n                    : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2,\n                userSetHeight.value,\n                defaultTextareaHeight\n            );\n            textareaHeight.value = `${newHeight}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => [props.value, props.modelValue],\n        () => {\n            textareaValue.value = props.modelValue || props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            if (isDynamicHeight.value) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: isDynamicHeight.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        emitValue('');\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            emitValue(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    const onMouseDown = () => {\n        isUserResizing.value = true;\n    };\n\n    const onMouseUp = () => {\n        isUserResizing.value = false;\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            if (isUserResizing.value) {\n                userSetHeight.value = parseInt(textareaElement.value.style.height, 10);\n            }\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 (isDynamicHeight.value) {\n            calculateHeight();\n        }\n\n        if (props.value) {\n            deprecate(\n                'BentoTextarea \"value\" property',\n                `The use of \"value\" prop in \"BentoTextarea\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n                '2.0.0'\n            );\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BBorderWidthAttention","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","userSetHeight","textareaWrapperWidth","isUserResizing","textareaElementObserver","textareaComponentObserver","t","n","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","emit","counter","computed","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","deprecate","onUnmounted"],"mappings":"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"}

package/dist/chunks/{timeline-item.QEEIwYMy.js → timeline-item.BGHi_lOY.js}

@@ -1,35 +1,35 @@
-import { defineComponent as S, computed as o, ref as N, toRefs as X, watch as Z, provide as A, nextTick as Q, useSlots as ee, inject as k, onUnmounted as te } from "vue";
-import { B as H } from "./button.CKS_V3p5.js";
-import { B as se } from "./textarea.BDRR1zE0.js";
-import { u as J } from "./index.B6WW_F-J.js";
-import { B as ae } from "./button-actions.Dpbx0xf3.js";
+import { defineComponent as S, computed as o, ref as N, toRefs as W, watch as X, provide as A, nextTick as Z, useSlots as Q, inject as O, onUnmounted as ee } from "vue";
+import { B as P } from "./button.C4kKejsg.js";
+import { B as te } from "./textarea.Z-VYFZVq.js";
+import { u as H } from "./index.CPOlyau9.js";
+import { B as se } from "./button-actions.CxX7lK7z.js";
 import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as ie } from "./dashed-underline.ByPcIHNe.js";
-import { B as ne } from "./date.C1HnIyOv.js";
-import { B as oe } from "./link.Cejg8jB6.js";
-import { B as re } from "./tag.BAyLm485.js";
-import { d as le, B as me } from "./typography.C8lPlsbD.js";
-import { S as de, a as ce, B as ue } from "./structured-list-item.Cnv4Pw5n.js";
+import { B as ae } from "./dashed-underline.CbzCYKrk.js";
+import { B as ie } from "./date.CPo8t1n9.js";
+import { B as ne } from "./link.CscSbaXa.js";
+import { B as oe } from "./tag.BC7FFENr.js";
+import { d as re, B as le } from "./typography.D1OZJbEa.js";
+import { S as me, a as de, B as ce } from "./structured-list-item._7YG2L3a.js";
 /* empty css              */
-import { g as _e } from "./generate-uid.NJ8tVoha.js";
-import { u as pe } from "./use-has-slot.C9lQZ6nz.js";
-import { j as fe, d as ve, n as he, k as $, o as F, p as U, q as z, g as ge, r as Y } from "./en-US.BK5uiAND.js";
-import { g as be } from "./getRoundingMethod.C3eaeGLR.js";
+import { g as ue } from "./generate-uid.DBWe4g6T.js";
+import { u as _e } from "./use-has-slot.C9lQZ6nz.js";
+import { j as pe, d as fe, n as ve, k, o as $, p as F, q as U, g as he, r as z } from "./en-US.BR6y7foR.js";
+import { g as ge } from "./getRoundingMethod.C3eaeGLR.js";
 import "../assets/timeline-item.css";
-function j(a, e, t) {
-  const s = ge(), l = (t == null ? void 0 : t.locale) ?? s.locale ?? fe, v = ve(a, e);
+function Y(a, e, t) {
+  const s = he(), l = t?.locale ?? s.locale ?? pe, v = fe(a, e);
   if (isNaN(v))
     throw new RangeError("Invalid time value");
   const m = Object.assign({}, t, {
-    addSuffix: t == null ? void 0 : t.addSuffix,
+    addSuffix: t?.addSuffix,
     comparison: v
-  }), [w, b] = he(
-    t == null ? void 0 : t.in,
+  }), [b, g] = ve(
+    t?.in,
     ...v > 0 ? [e, a] : [a, e]
-  ), c = be((t == null ? void 0 : t.roundingMethod) ?? "round"), p = b.getTime() - w.getTime(), d = p / Y, C = $(b) - $(w), i = (p - C) / Y, h = t == null ? void 0 : t.unit;
+  ), c = ge(t?.roundingMethod ?? "round"), _ = g.getTime() - b.getTime(), d = _ / z, w = k(g) - k(b), i = (_ - w) / z, h = t?.unit;
   let r;
-  if (h ? r = h : d < 1 ? r = "second" : d < 60 ? r = "minute" : d < F ? r = "hour" : i < U ? r = "day" : i < z ? r = "month" : r = "year", r === "second") {
-    const n = c(p / 1e3);
+  if (h ? r = h : d < 1 ? r = "second" : d < 60 ? r = "minute" : d < $ ? r = "hour" : i < F ? r = "day" : i < U ? r = "month" : r = "year", r === "second") {
+    const n = c(_ / 1e3);
     return l.formatDistance("xSeconds", n, m);
   } else if (r === "minute") {
     const n = c(d);
@@ -38,67 +38,34 @@ function j(a, e, t) {
     const n = c(d / 60);
     return l.formatDistance("xHours", n, m);
   } else if (r === "day") {
-    const n = c(i / F);
+    const n = c(i / $);
     return l.formatDistance("xDays", n, m);
   } else if (r === "month") {
-    const n = c(i / U);
+    const n = c(i / F);
     return n === 12 && h !== "month" ? l.formatDistance("xYears", 1, m) : l.formatDistance("xMonths", n, m);
   } else {
-    const n = c(i / z);
+    const n = c(i / U);
     return l.formatDistance("xYears", n, m);
   }
 }
-var M = /* @__PURE__ */ ((a) => (a.BOTTOM = "bottom", a.AFTER_FIRST = "after-first", a.BEFORE_LAST = "before-last", a))(M || {}), we = /* @__PURE__ */ ((a) => (a.SECOND = "second", a.MINUTE = "minute", a.HOUR = "hour", a.DAY = "day", a.MONTH = "month", a.YEAR = "year", a))(we || {}), x = /* @__PURE__ */ ((a) => (a.DEFAULT = "SquareSmallIcon", a.SUCCESS = "CheckedCircleIcon", a.CRITICAL = "CrossCircleIcon", a))(x || {}), Ce = /* @__PURE__ */ ((a) => (a.BLACK = "black", a.BLUE = "blue", a.GREEN = "green", a.GREY = "grey", a.ORANGE = "orange", a.RED = "red", a.YELLOW = "yellow", a))(Ce || {});
-const q = /* @__PURE__ */ Symbol("timeline register entry injection key"), K = /* @__PURE__ */ Symbol("timeline config obj injection key"), ye = {
-  "de-DE": {
-    addNote: "Notiz hinzufügen",
-    cancel: "Abbrechen"
-  },
-  "en-GB": {
-    addNote: "Add note",
-    cancel: "Cancel"
-  },
-  "en-US": {
-    addNote: "Add note",
-    cancel: "Cancel"
-  },
-  "es-419": {
-    addNote: "Añadir nota",
-    cancel: "Cancelar"
-  },
-  "es-ES": {
-    addNote: "Añadir nota",
-    cancel: "Cancelar"
-  },
-  "es-MX": {
-    addNote: "Agregar nota",
-    cancel: "Cancelar"
-  },
-  "fr-FR": {
-    addNote: "Ajouter une note",
-    cancel: "Annuler"
-  },
-  "it-IT": {
-    addNote: "Aggiungi nota",
-    cancel: "Annulla"
-  },
-  "ja-JP": {
-    addNote: "メモを追加",
-    cancel: "キャンセル"
-  },
-  "pt-BR": {
-    addNote: "Adicionar anotação",
-    cancel: "Cancelar"
-  },
-  "zh-CN": {
-    addNote: "添加备注",
-    cancel: "取消"
-  }
-}, Te = S({
-  i18n: { messages: ye },
+var M = /* @__PURE__ */ ((a) => (a.BOTTOM = "bottom", a.AFTER_FIRST = "after-first", a.BEFORE_LAST = "before-last", a))(M || {}), be = /* @__PURE__ */ ((a) => (a.SECOND = "second", a.MINUTE = "minute", a.HOUR = "hour", a.DAY = "day", a.MONTH = "month", a.YEAR = "year", a))(be || {}), x = /* @__PURE__ */ ((a) => (a.DEFAULT = "SquareSmallIcon", a.SUCCESS = "CheckedCircleIcon", a.CRITICAL = "CrossCircleIcon", a))(x || {}), we = /* @__PURE__ */ ((a) => (a.BLACK = "black", a.BLUE = "blue", a.GREEN = "green", a.GREY = "grey", a.ORANGE = "orange", a.RED = "red", a.YELLOW = "yellow", a))(we || {});
+const J = /* @__PURE__ */ Symbol("timeline register entry injection key"), q = /* @__PURE__ */ Symbol("timeline config obj injection key"), Ce = {
+  "de-DE": { addNote: "Notiz hinzufügen", cancel: "Abbrechen" },
+  "en-GB": { addNote: "Add note", cancel: "Cancel" },
+  "en-US": { addNote: "Add note", cancel: "Cancel" },
+  "es-419": { addNote: "Añadir nota", cancel: "Cancelar" },
+  "es-ES": { addNote: "Añadir nota", cancel: "Cancelar" },
+  "es-MX": { addNote: "Agregar nota", cancel: "Cancelar" },
+  "fr-FR": { addNote: "Ajouter une note", cancel: "Annuler" },
+  "it-IT": { addNote: "Aggiungi nota", cancel: "Annulla" },
+  "ja-JP": { addNote: "メモを追加", cancel: "キャンセル" },
+  "pt-BR": { addNote: "Adicionar anotação", cancel: "Cancelar" },
+  "zh-CN": { addNote: "添加备注", cancel: "取消" }
+}, ye = S({
+  i18n: { messages: Ce },
   name: "bento-timeline"
-}), Ne = /* @__PURE__ */ S({
-  ...Te,
+}), Te = /* @__PURE__ */ S({
+  ...ye,
   props: {
     addNote: { type: Boolean, default: !1 },
     showMore: { default: null },
@@ -106,12 +73,11 @@ const q = /* @__PURE__ */ Symbol("timeline register entry injection key"), K = /
   },
   emits: ["add-timeline-note"],
   setup(a, { emit: e }) {
-    const t = a, { t: s } = J(), l = o(() => s("addNote")), v = o(() => s("cancel")), m = N(), w = (u) => {
-      m.value = u;
-    }, b = N(null), c = N(null), p = N(!1), d = async () => {
-      var u, g;
-      p.value = !p.value, await Q(), p.value ? (u = b.value.$refs.textareaElement) == null || u.focus() : (g = c.value.$el) == null || g.focus();
-    }, C = () => {
+    const t = a, { t: s } = H(), l = o(() => s("addNote")), v = o(() => s("cancel")), m = N(), b = (f) => {
+      m.value = f;
+    }, g = N(null), c = N(null), _ = N(!1), d = async () => {
+      _.value = !_.value, await Z(), _.value ? g.value.$refs.textareaElement?.focus() : c.value.$el?.focus();
+    }, w = () => {
       e("add-timeline-note", {
         description: m.value,
         timestamp: { date: /* @__PURE__ */ new Date() },
@@ -119,10 +85,10 @@ const q = /* @__PURE__ */ Symbol("timeline register entry injection key"), K = /
       }), d();
     }, i = N([]), h = o(
       () => t.showMore && i.value.length > t.showMore.limit ? i.value.length - t.showMore.limit : null
-    ), r = N(!1), { timegapLimit: n } = X(t), _ = o(() => Array.from(i.value.keys())), f = o(() => t.showMore ? t.showMore.placement === M.BEFORE_LAST ? [
-      ..._.value.slice(0, t.showMore.limit - 1),
-      _.value[_.value.length - 1]
-    ] : t.showMore.placement === M.AFTER_FIRST ? [_.value[0], ..._.value.slice(-(t.showMore.limit - 1))] : _.value.slice(0, t.showMore.limit) : null), y = o(() => {
+    ), r = N(!1), { timegapLimit: n } = W(t), u = o(() => Array.from(i.value.keys())), p = o(() => t.showMore ? t.showMore.placement === M.BEFORE_LAST ? [
+      ...u.value.slice(0, t.showMore.limit - 1),
+      u.value[u.value.length - 1]
+    ] : t.showMore.placement === M.AFTER_FIRST ? [u.value[0], ...u.value.slice(-(t.showMore.limit - 1))] : u.value.slice(0, t.showMore.limit) : null), C = o(() => {
       if (!t.showMore)
         return null;
       switch (t.showMore.placement) {
@@ -135,119 +101,75 @@ const q = /* @__PURE__ */ Symbol("timeline register entry injection key"), K = /
           return t.showMore.limit - 1;
       }
     }), I = () => {
-      i.value.sort((u, g) => new Date(g.date).getTime() - new Date(u.date).getTime());
-    }, E = (u) => () => {
-      const g = i.value.indexOf(u);
-      g > -1 && i.value.splice(g, 1);
-    }, L = (u) => (i.value.push(u), { timelineEntries: i, unregisterTimelineEntry: E(u) });
-    Z(
+      i.value.sort((f, T) => new Date(T.date).getTime() - new Date(f.date).getTime());
+    }, E = (f) => () => {
+      const T = i.value.indexOf(f);
+      T > -1 && i.value.splice(T, 1);
+    }, L = (f) => (i.value.push(f), { timelineEntries: i, unregisterTimelineEntry: E(f) });
+    X(
       () => i.value.length,
       () => I()
     );
-    const T = {
+    const y = {
       showAll: r,
-      showMoreIndex: y,
+      showMoreIndex: C,
       hiddenItems: h,
-      visibleIndexes: f,
+      visibleIndexes: p,
       timegapLimit: n,
       timelineEntries: i
     };
-    return A(q, L), A(K, T), { __sfc: !0, props: t, emit: e, t: s, addNoteLabel: l, cancelLabel: v, newNoteContent: m, updateNoteContent: w, addNoteTextareaRef: b, addNoteButtonRef: c, showAddNoteTextArea: p, toggleAddNote: d, addNoteToTimeline: C, timelineEntries: i, hiddenItems: h, showAll: r, timegapLimit: n, timelineIndexes: _, visibleIndexes: f, showMoreIndex: y, sortEntries: I, unregisterTimelineEntry: E, registerTimelineEntry: L, configData: T, BentoButton: H, BentoButtonActions: ae, BentoTextarea: se };
+    return A(J, L), A(q, y), { __sfc: !0, props: t, emit: e, t: s, addNoteLabel: l, cancelLabel: v, newNoteContent: m, updateNoteContent: b, addNoteTextareaRef: g, addNoteButtonRef: c, showAddNoteTextArea: _, toggleAddNote: d, addNoteToTimeline: w, timelineEntries: i, hiddenItems: h, showAll: r, timegapLimit: n, timelineIndexes: u, visibleIndexes: p, showMoreIndex: C, sortEntries: I, unregisterTimelineEntry: E, registerTimelineEntry: L, configData: y, BentoButton: P, BentoButtonActions: se, BentoTextarea: te };
   }
 });
-var Me = function() {
+var Ne = function() {
   var e = this, t = e._self._c, s = e._self._setupProxy;
   return t("div", { staticClass: "b-timeline" }, [e.addNote ? t("div", { staticClass: "b-timeline__add-note-section" }, [s.showAddNoteTextArea ? e._e() : t(s.BentoButton, { ref: "addNoteButtonRef", attrs: { variant: "tertiary" }, on: { click: s.toggleAddNote } }, [e._v(e._s(s.addNoteLabel))]), s.showAddNoteTextArea ? t("div", [t(s.BentoTextarea, { ref: "addNoteTextareaRef", attrs: { label: s.addNoteLabel, "character-limit": 150, resizable: "vertical" }, on: { "update:model-value": s.updateNoteContent } }), t(s.BentoButtonActions, { attrs: { actions: [
     { title: s.addNoteLabel, event: s.addNoteToTimeline },
     { title: s.cancelLabel, event: s.toggleAddNote }
   ] } })], 1) : e._e()], 1) : e._e(), t("ol", { staticClass: "b-timeline__items" }, [e._t("default")], 2)]);
-}, Ie = [], Ee = /* @__PURE__ */ R(
+}, Me = [], Ie = /* @__PURE__ */ R(
+  Te,
   Ne,
   Me,
-  Ie,
   !1,
   null,
   "4acaf49e"
 );
-const st = Ee.exports;
-let P = 0;
-const Le = {
+const tt = Ie.exports;
+let j = 0;
+const Ee = {
   beforeCreate() {
-    this.uuid = P.toString(), P += 1;
+    this.uuid = j.toString(), j += 1;
   }
 };
-var Se = function() {
+var Le = function() {
   var e = this, t = e._self._c;
   return t("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"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("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" } })]);
-}, Be = [], Ae = /* @__PURE__ */ R(
+}, Se = [], Be = /* @__PURE__ */ R(
+  Ee,
   Le,
   Se,
-  Be,
   !1,
   null,
   null
 );
-const xe = Ae.exports, Re = {
-  "de-DE": {
-    showLess: "Weniger anzeigen",
-    showMore: "Mehr {items} anzeigen",
-    timegap: "{timegap} ist zwischen den Ereignissen in der Zeitleiste vergangen."
-  },
-  "en-GB": {
-    showLess: "Show less",
-    showMore: "Show {items} more",
-    timegap: "{timegap} passed between the timeline events"
-  },
-  "en-US": {
-    showLess: "Show less",
-    showMore: "Show {items} more",
-    timegap: "{timegap} passed between the timeline events"
-  },
-  "es-419": {
-    showLess: "Mostrar menos",
-    showMore: "Mostrar {items} más",
-    timegap: "{timegap} transcurrió entre los eventos de la línea de tiempo"
-  },
-  "es-ES": {
-    showLess: "Mostrar menos",
-    showMore: "Mostrar {items} más",
-    timegap: "{timegap} transcurrido entre los eventos de la línea de tiempo"
-  },
-  "es-MX": {
-    showLess: "Mostrar menos",
-    showMore: "Mostrar {items} más",
-    timegap: "{timegap} pasó entre los eventos de la línea de tiempo"
-  },
-  "fr-FR": {
-    showLess: "Afficher moins",
-    showMore: "Afficher {items} de plus",
-    timegap: "{timegap} écoulé entre les événements de la chronologie"
-  },
-  "it-IT": {
-    showLess: "Mostra meno",
-    showMore: "Mostra altri {items}",
-    timegap: "Tempo trascorso tra gli eventi della linea temporale: {timegap}"
-  },
-  "ja-JP": {
-    showLess: "表示内容を減らす",
-    showMore: "Show {items} more",
-    timegap: "{timegap} passed between the timeline events"
-  },
-  "pt-BR": {
-    showLess: "Mostrar menos",
-    showMore: "Show {items} more",
-    timegap: "{timegap} passed between the timeline events"
-  },
-  "zh-CN": {
-    showLess: "显示更少",
-    showMore: "显示更多 {items}",
-    timegap: "在时间线事件之间经过了 {timegap}"
-  }
-}, De = S({
+const Ae = Be.exports, xe = {
+  "de-DE": { showLess: "Weniger anzeigen", showMore: "Mehr {items} anzeigen", timegap: "{timegap} ist zwischen den Ereignissen in der Zeitleiste vergangen." },
+  "en-GB": { showLess: "Show less", showMore: "Show {items} more", timegap: "{timegap} passed between the timeline events" },
+  "en-US": { showLess: "Show less", showMore: "Show {items} more", timegap: "{timegap} passed between the timeline events" },
+  "es-419": { showLess: "Mostrar menos", showMore: "Mostrar {items} más", timegap: "{timegap} transcurrió entre los eventos de la línea de tiempo" },
+  "es-ES": { showLess: "Mostrar menos", showMore: "Mostrar {items} más", timegap: "{timegap} transcurrido entre los eventos de la línea de tiempo" },
+  "es-MX": { showLess: "Mostrar menos", showMore: "Mostrar {items} más", timegap: "{timegap} pasó entre los eventos de la línea de tiempo" },
+  "fr-FR": { showLess: "Afficher moins", showMore: "Afficher {items} de plus", timegap: "{timegap} écoulé entre les événements de la chronologie" },
+  "it-IT": { showLess: "Mostra meno", showMore: "Mostra altri {items}", timegap: "Tempo trascorso tra gli eventi della linea temporale: {timegap}" },
+  "ja-JP": { showLess: "表示内容を減らす", showMore: "Show {items} more", timegap: "{timegap} passed between the timeline events" },
+  "pt-BR": { showLess: "Mostrar menos", showMore: "Show {items} more", timegap: "{timegap} passed between the timeline events" },
+  "zh-CN": { showLess: "显示更少", showMore: "显示更多 {items}", timegap: "在时间线事件之间经过了 {timegap}" }
+}, Re = S({
   name: "bento-timeline-item",
-  i18n: { messages: Re }
-}), Oe = /* @__PURE__ */ S({
-  ...De,
+  i18n: { messages: xe }
+}), De = /* @__PURE__ */ S({
+  ...Re,
   props: {
     additionalTimestamp: { default: null },
     dataList: { default: null },
@@ -260,41 +182,40 @@ const xe = Ae.exports, Re = {
     variant: { default: null }
   },
   setup(a) {
-    const e = a, { t } = J(), s = ee(), l = pe(s), v = o(() => e.type === "note"), m = o(() => e.variant === x.CRITICAL ? "red" : e.variant === x.SUCCESS ? "green" : e.status);
-    e.variant && le(
+    const e = a, { t } = H(), s = Q(), l = _e(s), v = o(() => e.type === "note"), m = o(() => e.variant === x.CRITICAL ? "red" : e.variant === x.SUCCESS ? "green" : e.status);
+    e.variant && re(
       '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 w = o(() => ({
+    const b = o(() => ({
       [`b-timeline-item__icon--${m.value}`]: m.value && !v.value
-    })), b = o(() => ({
+    })), g = o(() => ({
       "b-timeline-item--note": v.value
     }));
-    A(de, !0);
+    A(me, !0);
     const c = {
       title: e.title,
       date: e.timestamp.date
-    }, p = k(q), { timelineEntries: d, unregisterTimelineEntry: C } = p(c);
-    te(() => C());
-    const { showAll: i, showMoreIndex: h, hiddenItems: r, visibleIndexes: n, timegapLimit: _ } = k(K), f = o(() => d.value.indexOf(c)), y = o(() => i.value || !n.value), I = o(() => y.value ? !0 : n.value.includes(f.value)), E = o(() => typeof e.title == "object"), L = o(() => e.title), T = o(() => {
-      var O;
-      if (!_.value)
+    }, _ = O(J), { timelineEntries: d, unregisterTimelineEntry: w } = _(c);
+    ee(() => w());
+    const { showAll: i, showMoreIndex: h, hiddenItems: r, visibleIndexes: n, timegapLimit: u } = O(q), p = o(() => d.value.indexOf(c)), C = o(() => i.value || !n.value), I = o(() => C.value ? !0 : n.value.includes(p.value)), E = o(() => typeof e.title == "object"), L = o(() => e.title), y = o(() => {
+      if (!u.value)
         return null;
-      const B = (O = d.value[f.value - 1]) == null ? void 0 : O.date, G = y.value || n.value.includes(f.value - 1);
-      if (!B || !G)
+      const B = d.value[p.value - 1]?.date, V = C.value || n.value.includes(p.value - 1);
+      if (!B || !V)
         return null;
-      const { date: D } = d.value[f.value], W = parseInt(
-        j(B, D, { unit: _.value.unit }),
+      const { date: D } = d.value[p.value], G = parseInt(
+        Y(B, D, { unit: u.value.unit }),
         10
       );
-      return _.value.amount < W ? j(B, D, { roundingMethod: "floor" }) : null;
-    }), u = o(() => T.value ? t("timegap", { timegap: T.value }) : ""), g = o(() => r.value && h.value === f.value), V = o(() => f.value !== -1 && f.value === d.value.length - 1);
-    return { __sfc: !0, props: e, t, slots: s, hasSlot: l, isNoteType: v, computedStatus: m, iconConditionalClasses: w, conditionalClasses: b, entry: c, registerTimelineEntry: p, timelineEntries: d, unregisterTimelineEntry: C, showAll: i, showMoreIndex: h, hiddenItems: r, visibleIndexes: n, timegapLimit: _, index: f, allItemsShowing: y, isVisible: I, isLinkTitle: E, linkTitleProps: L, timegap: T, timegapAriaLabel: u, displayShowMoreButton: g, isLastItem: V, BentoButton: H, BentoDashedUnderline: ie, BentoDate: ne, BentoLink: oe, BentoTag: re, BentoTypography: me, BentoStructuredList: ue, BentoStructuredListItem: ce, SquareSmallIcon: xe, generateUid: _e };
+      return u.value.amount < G ? Y(B, D, { roundingMethod: "floor" }) : null;
+    }), f = o(() => y.value ? t("timegap", { timegap: y.value }) : ""), T = o(() => r.value && h.value === p.value), K = o(() => p.value !== -1 && p.value === d.value.length - 1);
+    return { __sfc: !0, props: e, t, slots: s, hasSlot: l, isNoteType: v, computedStatus: m, iconConditionalClasses: b, conditionalClasses: g, entry: c, registerTimelineEntry: _, timelineEntries: d, unregisterTimelineEntry: w, showAll: i, showMoreIndex: h, hiddenItems: r, visibleIndexes: n, timegapLimit: u, index: p, allItemsShowing: C, isVisible: I, isLinkTitle: E, linkTitleProps: L, timegap: y, timegapAriaLabel: f, displayShowMoreButton: T, isLastItem: K, BentoButton: P, BentoDashedUnderline: ae, BentoDate: ie, BentoLink: ne, BentoTag: oe, BentoTypography: le, BentoStructuredList: ce, BentoStructuredListItem: de, SquareSmallIcon: Ae, generateUid: ue };
   }
 });
-var ke = function() {
+var Oe = function() {
   var e = this, t = e._self._c, s = e._self._setupProxy;
   return s.isVisible ? t("li", { staticClass: "b-timeline-item", class: s.conditionalClasses }, [s.timegap ? t("div", { staticClass: "b-timeline-item__row" }, [e._m(0), t("div", { staticClass: "b-timeline-item__content" }, [t(s.BentoTypography, { staticClass: "b-timeline-item__timegap", attrs: { "aria-label": s.timegapAriaLabel } }, [e._v(" " + e._s(s.timegap) + " ")])], 1)]) : e._e(), t("div", { staticClass: "b-timeline-item__row" }, [t("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [t(s.SquareSmallIcon, { staticClass: "b-timeline-item__icon", class: s.iconConditionalClasses }), s.isLastItem ? e._e() : t("div", { staticClass: "b-timeline-item__separator", attrs: { "data-testid": "last-timeline-item-separator" } })], 1), t("div", { staticClass: "b-timeline-item__content" }, [s.isNoteType ? e._e() : t(s.BentoTypography, { staticClass: "b-timeline-item__title", attrs: { el: "div", variant: "body", strongest: "", role: "heading", "aria-level": "2" } }, [s.isLinkTitle ? t(s.BentoLink, e._b({ attrs: { "disable-typography": "" } }, "bento-link", s.linkTitleProps, !1), [e._v(e._s(s.linkTitleProps.title))]) : t("span", [e._v(e._s(e.title))])], 1), s.isNoteType && (e.description || s.hasSlot("default")) ? t(s.BentoTypography, { staticClass: "b-timeline-item__description", attrs: { el: "div", variant: "body" } }, [e._t("default", function() {
     return [e._v(e._s(e.description))];
@@ -305,27 +226,27 @@ var ke = function() {
   }), 1)], 1) : e._e(), !s.isNoteType && e.tag ? t(s.BentoTag, e._b({ staticClass: "b-timeline-item__tag" }, "bento-tag", e.tag, !1)) : e._e()], 1)]), s.displayShowMoreButton ? t("div", { staticClass: "b-timeline-item__row" }, [e._m(1), t("div", { staticClass: "b-timeline-item__content" }, [t(s.BentoButton, { staticClass: "b-timeline__show-more", attrs: { variant: "tertiary" }, on: { click: function(l) {
     s.showAll = !s.showAll;
   } } }, [s.showAll ? [e._v(e._s(s.t("showLess")))] : [e._v(e._s(s.t("showMore", { items: s.hiddenItems })))]], 2)], 1)]) : e._e()]) : e._e();
-}, $e = [function() {
+}, ke = [function() {
   var a = this, e = a._self._c;
   return a._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 a = this, e = a._self._c;
   return a._self._setupProxy, e("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [e("div", { staticClass: "b-timeline-item__separator" })]);
-}], Fe = /* @__PURE__ */ R(
+}], $e = /* @__PURE__ */ R(
+  De,
   Oe,
   ke,
-  $e,
   !1,
   null,
   "ee733813"
 );
-const at = Fe.exports;
+const st = $e.exports;
 export {
-  we as B,
-  at as a,
+  be as B,
+  st as a,
   x as b,
   M as c,
-  Ce as d,
-  st as t
+  we as d,
+  tt as t
 };
-//# sourceMappingURL=timeline-item.QEEIwYMy.js.map
+//# sourceMappingURL=timeline-item.BGHi_lOY.js.map