@adyen/bento-vue2 1.74.0 → 1.76.0

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.CIQuLWQ8.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["import type { FormField } from '../../types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    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     */\n    value?: 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                    :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\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BTextareaInputFocusBorderWidth } 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});\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 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 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,\n        () => {\n            textareaValue.value = 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        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    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\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BTextareaInputFocusBorderWidth);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BTextareaInputFocusBorderWidth","__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","counter","computed","_a","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"textarea.CIQuLWQ8.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 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\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     */\n    value?: 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                    :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\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BTextareaInputFocusBorderWidth } 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});\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 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 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,\n        () => {\n            textareaValue.value = 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        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    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\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BTextareaInputFocusBorderWidth);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BTextareaInputFocusBorderWidth","__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","counter","computed","_a","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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"}

package/dist/chunks/{timeline-item.VSw9vKdO.js → timeline-item.CZBuknZ_.js}

@@ -1,67 +1,22 @@
-import { defineComponent as z, computed as o, ref as N, toRefs as G, watch as Q, provide as x, nextTick as X, inject as B, onUnmounted as ee } from "vue";
-import { B as H } from "./button.CS_kdxYh.js";
-import { B as te } from "./textarea.CIQuLWQ8.js";
-import { u as q } from "./index.B6WW_F-J.js";
-import { B as ae } from "./button-actions.B81vY51z.js";
-import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as ie } from "./date.C1z2TXzM.js";
-import { B as se } from "./link.D8qpqg3W.js";
-import { B as ne } from "./tag.BwKc2d2E.js";
-import { B as oe, d as re } from "./typography.hlOAxsEn.js";
-import { a as le, B as ce, S as me } from "./structured-list-item.CMsVwwA6.js";
+import { defineComponent as P, computed as s, ref as y, toRefs as Z, watch as G, provide as x, nextTick as Q, inject as D, onUnmounted as X } from "vue";
+import { B as z } from "./button.CS_kdxYh.js";
+import { B as ee } from "./textarea.CIQuLWQ8.js";
+import { u as H } from "./index.B6WW_F-J.js";
+import { B as te } from "./button-actions.B81vY51z.js";
+import { n as A } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as ae } from "./date.C1z2TXzM.js";
+import { B as ie } from "./link.D8qpqg3W.js";
+import { B as se } from "./tag.BwKc2d2E.js";
+import { B as ne, d as le } from "./typography.hlOAxsEn.js";
+import { a as oe, B as re, S as ce } from "./structured-list-item.CMsVwwA6.js";
 /* empty css              */
-import { g as de } from "./generate-uid.NJ8tVoha.js";
-import { u as ue } from "./use-has-slot.C9lQZ6nz.js";
-import { r as _e, l as ve, c as fe, t as S, g as $ } from "./index.BrH1t1iu.js";
-import { c as pe } from "./index.BxBB1rsx.js";
+import { g as me } from "./generate-uid.NJ8tVoha.js";
+import { u as de } from "./use-has-slot.C9lQZ6nz.js";
+import { b as ue, e as _e, a as ve, n as fe, g as k, m as B, d as j, f as $, h as F } from "./getTimezoneOffsetInMilliseconds.BW7U6PxE.js";
+import { g as be } from "./getRoundingMethod.C3eaeGLR.js";
 import "../assets/timeline-item.css";
-var j = 1e3 * 60, L = 60 * 24, F = L * 30, U = L * 365;
-function Y(t, e) {
-  var a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  _e(2, arguments);
-  var i = a.locale || ve;
-  if (!i.formatDistance)
-    throw new RangeError("locale must contain localize.formatDistance property");
-  var f = fe(t, e);
-  if (isNaN(f))
-    throw new RangeError("Invalid time value");
-  var l = pe(a);
-  l.addSuffix = !!a.addSuffix, l.comparison = f;
-  var p, d;
-  f > 0 ? (p = S(e), d = S(t)) : (p = S(t), d = S(e));
-  var b = a.roundingMethod == null ? "round" : String(a.roundingMethod), s;
-  if (b === "floor")
-    s = Math.floor;
-  else if (b === "ceil")
-    s = Math.ceil;
-  else if (b === "round")
-    s = Math.round;
-  else
-    throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var g = d.getTime() - p.getTime(), u = g / j, c = $(d) - $(p), _ = (g - c) / j, n;
-  if (a.unit == null ? u < 1 ? n = "second" : u < 60 ? n = "minute" : u < L ? n = "hour" : _ < F ? n = "day" : _ < U ? n = "month" : n = "year" : n = String(a.unit), n === "second") {
-    var h = s(g / 1e3);
-    return i.formatDistance("xSeconds", h, l);
-  } else if (n === "minute") {
-    var r = s(u);
-    return i.formatDistance("xMinutes", r, l);
-  } else if (n === "hour") {
-    var y = s(u / 60);
-    return i.formatDistance("xHours", y, l);
-  } else if (n === "day") {
-    var w = s(_ / L);
-    return i.formatDistance("xDays", w, l);
-  } else if (n === "month") {
-    var C = s(_ / F);
-    return C === 12 && a.unit !== "month" ? i.formatDistance("xYears", 1, l) : i.formatDistance("xMonths", C, l);
-  } else if (n === "year") {
-    var E = s(_ / U);
-    return i.formatDistance("xYears", E, l);
-  }
-  throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
-}
-var T = /* @__PURE__ */ ((t) => (t.BOTTOM = "bottom", t.AFTER_FIRST = "after-first", t.BEFORE_LAST = "before-last", t))(T || {}), be = /* @__PURE__ */ ((t) => (t.SECOND = "second", t.MINUTE = "minute", t.HOUR = "hour", t.DAY = "day", t.MONTH = "month", t.YEAR = "year", t))(be || {}), M = /* @__PURE__ */ ((t) => (t.DEFAULT = "SquareSmallIcon", t.SUCCESS = "CheckedCircleIcon", t.CRITICAL = "CrossCircleIcon", t))(M || {}), J = /* @__PURE__ */ ((t) => (t.BLACK = "black", t.BLUE = "blue", t.GREEN = "green", t.GREY = "grey", t.ORANGE = "orange", t.RED = "red", t.YELLOW = "yellow", t))(J || {});
-const K = Symbol("timeline register entry injection key"), V = Symbol("timeline config obj injection key"), ge = {
+var C = /* @__PURE__ */ ((t) => (t.BOTTOM = "bottom", t.AFTER_FIRST = "after-first", t.BEFORE_LAST = "before-last", t))(C || {}), he = /* @__PURE__ */ ((t) => (t.SECOND = "second", t.MINUTE = "minute", t.HOUR = "hour", t.DAY = "day", t.MONTH = "month", t.YEAR = "year", t))(he || {}), N = /* @__PURE__ */ ((t) => (t.DEFAULT = "SquareSmallIcon", t.SUCCESS = "CheckedCircleIcon", t.CRITICAL = "CrossCircleIcon", t))(N || {}), J = /* @__PURE__ */ ((t) => (t.BLACK = "black", t.BLUE = "blue", t.GREEN = "green", t.GREY = "grey", t.ORANGE = "orange", t.RED = "red", t.YELLOW = "yellow", t))(J || {});
+const q = Symbol("timeline register entry injection key"), K = Symbol("timeline config obj injection key"), ge = {
   "en-US": {
     addNote: "Add note",
     cancel: "Cancel"
@@ -74,10 +29,10 @@ const K = Symbol("timeline register entry injection key"), V = Symbol("timeline
     addNote: "Adicionar anotação",
     cancel: "Cancelar"
   }
-}, he = z({
+}, pe = P({
   i18n: { messages: ge },
   name: "bento-timeline",
-  components: { BentoButton: H, BentoButtonActions: ae, BentoTextarea: te },
+  components: { BentoButton: z, BentoButtonActions: te, BentoTextarea: ee },
   props: {
     /**
      * If set to true, gives the possibility to manually add notes to the timeline via a textarea
@@ -106,62 +61,62 @@ const K = Symbol("timeline register entry injection key"), V = Symbol("timeline
   },
   emits: ["add-timeline-note"],
   setup(t, { emit: e }) {
-    const { t: a } = q(), i = o(() => a("addNote")), f = o(() => a("cancel")), l = N(), p = (m) => {
-      l.value = m;
-    }, d = N(null), b = N(null), s = N(!1), g = async () => {
-      var m, v;
-      s.value = !s.value, await X(), s.value ? (m = d.value.$refs.textareaElement) == null || m.focus() : (v = b.value.$el) == null || v.focus();
+    const { t: a } = H(), c = s(() => a("addNote")), m = s(() => a("cancel")), b = y(), d = (r) => {
+      b.value = r;
+    }, h = y(null), p = y(null), l = y(!1), g = async () => {
+      var r, f;
+      l.value = !l.value, await Q(), l.value ? (r = h.value.$refs.textareaElement) == null || r.focus() : (f = p.value.$el) == null || f.focus();
     }, u = () => {
       e("add-timeline-note", {
-        description: l.value,
+        description: b.value,
         timestamp: { date: /* @__PURE__ */ new Date() },
         type: "note"
       }), g();
-    }, c = N([]), _ = o(
-      () => t.showMore && c.value.length > t.showMore.limit ? c.value.length - t.showMore.limit : null
-    ), n = N(!1), { timegapLimit: h } = G(t), r = o(() => Array.from(c.value.keys())), y = o(() => t.showMore ? t.showMore.placement === T.BEFORE_LAST ? [
-      ...r.value.slice(0, t.showMore.limit - 1),
-      r.value[r.value.length - 1]
-    ] : t.showMore.placement === T.AFTER_FIRST ? [r.value[0], ...r.value.slice(-(t.showMore.limit - 1))] : r.value.slice(0, t.showMore.limit) : null), w = o(() => {
+    }, o = y([]), _ = s(
+      () => t.showMore && o.value.length > t.showMore.limit ? o.value.length - t.showMore.limit : null
+    ), v = y(!1), { timegapLimit: n } = Z(t), i = s(() => Array.from(o.value.keys())), w = s(() => t.showMore ? t.showMore.placement === C.BEFORE_LAST ? [
+      ...i.value.slice(0, t.showMore.limit - 1),
+      i.value[i.value.length - 1]
+    ] : t.showMore.placement === C.AFTER_FIRST ? [i.value[0], ...i.value.slice(-(t.showMore.limit - 1))] : i.value.slice(0, t.showMore.limit) : null), E = s(() => {
       if (!t.showMore)
         return null;
       switch (t.showMore.placement) {
-        case T.BEFORE_LAST:
+        case C.BEFORE_LAST:
           return t.showMore.limit - 2;
-        case T.AFTER_FIRST:
+        case C.AFTER_FIRST:
           return 0;
-        case T.BOTTOM:
+        case C.BOTTOM:
         default:
           return t.showMore.limit - 1;
       }
-    }), C = () => {
-      c.value.sort((m, v) => new Date(v.date).getTime() - new Date(m.date).getTime());
-    }, E = (m) => () => {
-      const v = c.value.indexOf(m);
-      v > -1 && c.value.splice(v, 1);
-    }, I = (m) => (c.value.push(m), { timelineEntries: c, unregisterTimelineEntry: E(m) });
-    Q(
-      () => c.value.length,
-      () => C()
+    }), I = () => {
+      o.value.sort((r, f) => new Date(f.date).getTime() - new Date(r.date).getTime());
+    }, S = (r) => () => {
+      const f = o.value.indexOf(r);
+      f > -1 && o.value.splice(f, 1);
+    }, T = (r) => (o.value.push(r), { timelineEntries: o, unregisterTimelineEntry: S(r) });
+    G(
+      () => o.value.length,
+      () => I()
     );
-    const A = {
-      showAll: n,
-      showMoreIndex: w,
+    const L = {
+      showAll: v,
+      showMoreIndex: E,
       hiddenItems: _,
-      visibleIndexes: y,
-      timegapLimit: h,
-      timelineEntries: c
+      visibleIndexes: w,
+      timegapLimit: n,
+      timelineEntries: o
     };
-    return x(K, I), x(V, A), {
-      addNoteLabel: i,
-      cancelLabel: f,
+    return x(q, T), x(K, L), {
+      addNoteLabel: c,
+      cancelLabel: m,
       toggleAddNote: g,
-      updateNoteContent: p,
+      updateNoteContent: d,
       addNoteToTimeline: u,
-      showAddNoteTextArea: s,
+      showAddNoteTextArea: l,
       // refs
-      addNoteTextareaRef: d,
-      addNoteButtonRef: b
+      addNoteTextareaRef: h,
+      addNoteButtonRef: p
     };
   }
 });
@@ -171,33 +126,66 @@ var ye = function() {
     { title: e.addNoteLabel, event: e.addNoteToTimeline },
     { title: e.cancelLabel, event: e.toggleAddNote }
   ] } })], 1) : e._e()], 1) : e._e(), a("ol", { staticClass: "b-timeline__items" }, [e._t("default")], 2)]);
-}, Ce = [], Ne = /* @__PURE__ */ O(
-  he,
+}, Ce = [], Te = /* @__PURE__ */ A(
+  pe,
   ye,
   Ce,
   !1,
   null,
   "80180322"
 );
-const We = Ne.exports;
-let P = 0;
-const Te = {
+const We = Te.exports;
+let U = 0;
+const we = {
   beforeCreate() {
-    this.uuid = P.toString(), P += 1;
+    this.uuid = U.toString(), U += 1;
   }
 };
-var we = function() {
+var Ne = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { fill: "#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" } })]);
-}, Ee = [], Ie = /* @__PURE__ */ O(
-  Te,
+}, Ee = [], Ie = /* @__PURE__ */ A(
   we,
+  Ne,
   Ee,
   !1,
   null,
   null
 );
-const Se = Ie.exports, Me = {
+const Se = Ie.exports;
+function Y(t, e, a) {
+  const c = ue(), m = (a == null ? void 0 : a.locale) ?? c.locale ?? _e, b = ve(t, e);
+  if (isNaN(b))
+    throw new RangeError("Invalid time value");
+  const d = Object.assign({}, a, {
+    addSuffix: a == null ? void 0 : a.addSuffix,
+    comparison: b
+  }), [h, p] = fe(
+    a == null ? void 0 : a.in,
+    ...b > 0 ? [e, t] : [t, e]
+  ), l = be((a == null ? void 0 : a.roundingMethod) ?? "round"), g = p.getTime() - h.getTime(), u = g / F, o = k(p) - k(h), _ = (g - o) / F, v = a == null ? void 0 : a.unit;
+  let n;
+  if (v ? n = v : u < 1 ? n = "second" : u < 60 ? n = "minute" : u < B ? n = "hour" : _ < j ? n = "day" : _ < $ ? n = "month" : n = "year", n === "second") {
+    const i = l(g / 1e3);
+    return m.formatDistance("xSeconds", i, d);
+  } else if (n === "minute") {
+    const i = l(u);
+    return m.formatDistance("xMinutes", i, d);
+  } else if (n === "hour") {
+    const i = l(u / 60);
+    return m.formatDistance("xHours", i, d);
+  } else if (n === "day") {
+    const i = l(_ / B);
+    return m.formatDistance("xDays", i, d);
+  } else if (n === "month") {
+    const i = l(_ / j);
+    return i === 12 && v !== "month" ? m.formatDistance("xYears", 1, d) : m.formatDistance("xMonths", i, d);
+  } else {
+    const i = l(_ / $);
+    return m.formatDistance("xYears", i, d);
+  }
+}
+const Le = {
   "en-US": {
     showLess: "Show less",
     showMore: "Show {items} more",
@@ -209,19 +197,19 @@ const Se = Ie.exports, Me = {
   "pt-BR": {
     showLess: "Mostrar menos"
   }
-}, Le = z({
+}, Me = P({
   name: "bento-timeline-item",
   components: {
-    BentoButton: H,
-    BentoDate: ie,
-    BentoLink: se,
-    BentoTag: ne,
-    BentoTypography: oe,
-    BentoStructuredList: ce,
-    BentoStructuredListItem: le,
+    BentoButton: z,
+    BentoDate: ae,
+    BentoLink: ie,
+    BentoTag: se,
+    BentoTypography: ne,
+    BentoStructuredList: re,
+    BentoStructuredListItem: oe,
     SquareSmallIcon: Se
   },
-  i18n: { messages: Me },
+  i18n: { messages: Le },
   props: {
     /**
      * Additional timestamp of the event
@@ -292,96 +280,96 @@ const Se = Ie.exports, Me = {
     variant: {
       type: String,
       default: null,
-      validator: (t) => Object.values(M).includes(t)
+      validator: (t) => Object.values(N).includes(t)
     }
   },
   setup(t, { slots: e }) {
-    const { t: a } = q(), i = o(() => t.type === "note"), f = o(() => t.variant === M.CRITICAL ? "red" : t.variant === M.SUCCESS ? "green" : t.status);
-    t.variant && re(
+    const { t: a } = H(), c = s(() => t.type === "note"), m = s(() => t.variant === N.CRITICAL ? "red" : t.variant === N.SUCCESS ? "green" : t.status);
+    t.variant && le(
       '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 = o(() => ({
-      [`b-timeline-item__icon--${f.value}`]: f.value && !i.value
-    })), p = o(() => ({
-      "b-timeline-item--note": i.value
+    const b = s(() => ({
+      [`b-timeline-item__icon--${m.value}`]: m.value && !c.value
+    })), d = s(() => ({
+      "b-timeline-item--note": c.value
     }));
-    x(me, !0);
-    const d = {
+    x(ce, !0);
+    const h = {
       title: t.title,
       date: t.timestamp.date
-    }, b = B(K), { timelineEntries: s, unregisterTimelineEntry: g } = b(d);
-    ee(() => g());
-    const { showAll: u, showMoreIndex: c, hiddenItems: _, visibleIndexes: n, timegapLimit: h } = B(V), r = o(() => s.value.indexOf(d)), y = o(() => u.value || !n.value), w = o(
-      () => y.value ? !0 : n.value.includes(r.value)
-    ), C = o(() => typeof t.title == "object"), E = o(() => t.title), I = o(() => {
-      var k;
-      if (!h.value)
+    }, p = D(q), { timelineEntries: l, unregisterTimelineEntry: g } = p(h);
+    X(() => g());
+    const { showAll: u, showMoreIndex: o, hiddenItems: _, visibleIndexes: v, timegapLimit: n } = D(K), i = s(() => l.value.indexOf(h)), w = s(() => u.value || !v.value), E = s(
+      () => w.value ? !0 : v.value.includes(i.value)
+    ), I = s(() => typeof t.title == "object"), S = s(() => t.title), T = s(() => {
+      var O;
+      if (!n.value)
         return null;
-      const R = (k = s.value[r.value - 1]) == null ? void 0 : k.date, W = y.value || n.value.includes(r.value - 1);
-      if (!R || !W)
+      const M = (O = l.value[i.value - 1]) == null ? void 0 : O.date, V = w.value || v.value.includes(i.value - 1);
+      if (!M || !V)
         return null;
-      const { date: D } = s.value[r.value], Z = parseInt(
-        Y(R, D, { unit: h.value.unit }),
+      const { date: R } = l.value[i.value], W = parseInt(
+        Y(M, R, { unit: n.value.unit }),
         10
       );
-      return h.value.amount < Z ? Y(R, D, { roundingMethod: "floor" }) : null;
-    }), A = o(() => I.value ? a("timegap", { timegap: I.value }) : ""), m = o(() => _.value && c.value === r.value), v = o(() => r.value !== -1 && r.value === s.value.length - 1);
+      return n.value.amount < W ? Y(M, R, { roundingMethod: "floor" }) : null;
+    }), L = s(() => T.value ? a("timegap", { timegap: T.value }) : ""), r = s(() => _.value && o.value === i.value), f = s(() => i.value !== -1 && i.value === l.value.length - 1);
     return {
       // Values
-      isNoteType: i,
-      iconConditionalClasses: l,
-      conditionalClasses: p,
-      displayShowMoreButton: m,
+      isNoteType: c,
+      iconConditionalClasses: b,
+      conditionalClasses: d,
+      displayShowMoreButton: r,
       showAll: u,
       hiddenItems: _,
-      isVisible: w,
-      isLinkTitle: C,
-      linkTitleProps: E,
-      timegap: I,
-      timegapAriaLabel: A,
-      isLastItem: v,
+      isVisible: E,
+      isLinkTitle: I,
+      linkTitleProps: S,
+      timegap: T,
+      timegapAriaLabel: L,
+      isLastItem: f,
       // Methods
-      generateUid: de,
-      hasSlot: ue(e),
+      generateUid: me,
+      hasSlot: de(e),
       t: a
     };
   }
 });
-var Ae = function() {
+var xe = function() {
   var e = this, a = e._self._c;
   return e._self._setupProxy, e.isVisible ? a("li", { staticClass: "b-timeline-item", class: e.conditionalClasses }, [e.timegap ? a("div", { staticClass: "b-timeline-item__row" }, [e._m(0), a("div", { staticClass: "b-timeline-item__content" }, [a("bento-typography", { staticClass: "b-timeline-item__timegap", attrs: { "aria-label": e.timegapAriaLabel } }, [e._v(" " + e._s(e.timegap) + " ")])], 1)]) : e._e(), a("div", { staticClass: "b-timeline-item__row" }, [a("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [a("square-small-icon", { staticClass: "b-timeline-item__icon", class: e.iconConditionalClasses }), e.isLastItem ? e._e() : a("div", { staticClass: "b-timeline-item__separator", attrs: { "data-testid": "last-timeline-item-separator" } })], 1), a("div", { staticClass: "b-timeline-item__content" }, [e.isNoteType ? e._e() : a("bento-typography", { staticClass: "b-timeline-item__title", attrs: { el: "div", variant: "body", strongest: "", role: "heading", "aria-level": "2" } }, [e.isLinkTitle ? a("bento-link", e._b({ attrs: { "disable-typography": "" } }, "bento-link", e.linkTitleProps, !1), [e._v(e._s(e.linkTitleProps.title))]) : a("span", [e._v(e._s(e.title))])], 1), e.isNoteType && (e.description || e.hasSlot("default")) ? a("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 ? a("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [a("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 ? a("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [a("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")) ? a("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 ? a("div", { staticClass: "b-timeline-item__data-list" }, [a("bento-structured-list", e._l(e.dataList, function(i) {
-    return a("bento-structured-list-item", { key: e.generateUid(i.label), attrs: { label: i.label } }, [a("bento-typography", { attrs: { variant: "caption" } }, [e._v(e._s(i.value))])], 1);
-  }), 1)], 1) : e._e(), !e.isNoteType && e.tag ? a("bento-tag", e._b({ staticClass: "b-timeline-item__tag" }, "bento-tag", e.tag, !1)) : e._e()], 1)]), e.displayShowMoreButton ? a("div", { staticClass: "b-timeline-item__row" }, [e._m(1), a("div", { staticClass: "b-timeline-item__content" }, [a("bento-button", { staticClass: "b-timeline__show-more", attrs: { variant: "tertiary" }, on: { click: function(i) {
+  })], 2) : e._e(), !e.isNoteType && e.dataList ? a("div", { staticClass: "b-timeline-item__data-list" }, [a("bento-structured-list", e._l(e.dataList, function(c) {
+    return a("bento-structured-list-item", { key: e.generateUid(c.label), attrs: { label: c.label } }, [a("bento-typography", { attrs: { variant: "caption" } }, [e._v(e._s(c.value))])], 1);
+  }), 1)], 1) : e._e(), !e.isNoteType && e.tag ? a("bento-tag", e._b({ staticClass: "b-timeline-item__tag" }, "bento-tag", e.tag, !1)) : e._e()], 1)]), e.displayShowMoreButton ? a("div", { staticClass: "b-timeline-item__row" }, [e._m(1), a("div", { staticClass: "b-timeline-item__content" }, [a("bento-button", { staticClass: "b-timeline__show-more", attrs: { variant: "tertiary" }, on: { click: function(c) {
     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();
-}, Re = [function() {
+}, Ae = [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" })]);
-}], xe = /* @__PURE__ */ O(
-  Le,
+}], Re = /* @__PURE__ */ A(
+  Me,
+  xe,
   Ae,
-  Re,
   !1,
   null,
-  "97931513"
+  "862b2546"
 );
-const Ze = xe.exports;
+const Ze = Re.exports;
 export {
-  T as B,
+  C as B,
   Ze as a,
-  be as b,
-  M as c,
+  he as b,
+  N as c,
   J as d,
   We as t
 };
-//# sourceMappingURL=timeline-item.VSw9vKdO.js.map
+//# sourceMappingURL=timeline-item.CZBuknZ_.js.map